/*
 * Browser TTS Reader — front-end styles.
 *
 * Isolation strategy (kept deliberately simple so it survives any theme):
 * 1. Every selector is scoped under .btts-widget with a unique prefix —
 *    no bare element selectors, no IDs, no !important.
 * 2. Buttons use "all: revert" first, wiping out whatever the active theme's
 *    global `button { ... }` reset applied, then we re-apply only the
 *    properties we actually need.
 * 3. Colors/spacing use CSS custom properties with sane fallbacks so the
 *    widget can be recolored per-site without editing this file.
 * 4. No icon fonts, no external requests — icons are inline SVG.
 */

.btts-widget,
.btts-widget * {
	box-sizing: border-box;
}

.btts-widget {
	--btts-accent: #1e5b8c;
	--btts-accent-contrast: #ffffff;
	--btts-radius: 999px;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 1.2em 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.btts-widget button {
	all: revert;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	line-height: 1.2;
	border: 1px solid var(--btts-accent);
	border-radius: var(--btts-radius);
	padding: 0.5em 1em;
	background: var(--btts-accent);
	color: var(--btts-accent-contrast);
	transition: opacity 0.15s ease;
}

.btts-widget button:hover,
.btts-widget button:focus-visible {
	opacity: 0.85;
}

.btts-widget button svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
	flex-shrink: 0;
	pointer-events: none;
}

.btts-widget .btts-stop {
	background: transparent;
	color: var(--btts-accent);
}

.btts-widget .btts-icon-pause {
	display: none;
}

.btts-widget.is-playing .btts-icon-play {
	display: none;
}

.btts-widget.is-playing .btts-icon-pause {
	display: inline-flex;
}

.btts-widget .btts-status {
	font-size: 0.85em;
	opacity: 0.75;
}

.btts-widget .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.btts-widget.btts-unsupported {
	display: none;
}

.btts-widget.btts-position-floating {
	position: fixed;
	right: 1.2em;
	bottom: 1.2em;
	z-index: 999;
	background: #ffffff;
	padding: 0.6em 0.8em;
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
	.btts-widget.btts-position-floating {
		background: #1e1e1e;
	}
}

@media (max-width: 480px) {
	.btts-widget.btts-position-floating {
		right: 0.8em;
		bottom: 0.8em;
	}
}