/*
 * LocalAI narration — player + read-along.
 * Theme override: set any --localai-* custom property on .localai-player (or :root).
 * Defaults pick up Tailstorm/Tailwind brand tokens (--color-primary / --color-secondary) when present.
 */
.localai-player,
.localai-wrapped {
	--localai-brand: var(--color-primary, #1d2b3a);
	--localai-accent: var(--color-secondary, #c2410c);
	--localai-on-brand: #fff;
	--localai-surface: #fff;
	--localai-border: rgba(15, 23, 42, 0.14);
	--localai-radius: 18px;
	--localai-shadow: 0 18px 40px -18px rgba(2, 20, 40, 0.55), 0 2px 6px rgba(2, 20, 40, 0.12);
	--localai-word: rgba(241, 91, 41, 0.28);
	--localai-sentence-bg: rgba(2, 43, 73, 0.07);
	--localai-font: inherit;
	--localai-z: 9990;
}

.localai-player {
	font-family: var(--localai-font);
	margin: 0 0 1.75rem;
	line-height: 1.2;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
	.localai-player,
	.localai-wrapped {
		--localai-word: color-mix(in srgb, var(--localai-accent) 26%, transparent);
		--localai-sentence-bg: color-mix(in srgb, var(--localai-brand) 9%, transparent);
	}
}

.localai-player [hidden] { display: none !important; }

.localai-player button,
.localai-player a.localai-btn {
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

.localai-player :focus-visible {
	outline: 3px solid var(--localai-accent);
	outline-offset: 2px;
}

/* ---------- Pill ---------- */
.localai-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 44px;
	margin: 0;
	padding: 0.4rem 1.1rem 0.4rem 0.4rem;
	border: 1px solid var(--localai-border);
	border-radius: 999px;
	background: var(--localai-surface);
	color: var(--localai-brand);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(2, 20, 40, 0.06);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.localai-pill:hover {
	border-color: var(--localai-brand);
	box-shadow: 0 6px 18px -10px rgba(2, 20, 40, 0.45);
}
.localai-pill:active { transform: scale(0.98); }
.localai-pill-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--localai-brand);
	color: var(--localai-on-brand);
	transition: background-color 0.2s;
}
.localai-pill-icon svg { margin-left: 2px; }
.localai-pill:hover .localai-pill-icon { background: var(--localai-accent); }
.localai-pill-meta {
	font-weight: 500;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* ---------- Panel ---------- */
.localai-panel {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.6rem 0.5rem 0.5rem;
	border-radius: var(--localai-radius);
	background: var(--localai-brand);
	color: var(--localai-on-brand);
	box-shadow: var(--localai-shadow);
}
.localai-open .localai-panel { animation: localai-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes localai-in {
	from { opacity: 0; transform: translateY(6px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

.localai-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s, opacity 0.15s;
}
.localai-btn:hover { background: rgba(255, 255, 255, 0.12); }
.localai-btn:active { background: rgba(255, 255, 255, 0.2); }

.localai-play {
	width: 48px;
	height: 48px;
	background: var(--localai-accent);
	color: #fff;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
}
.localai-play:hover { background: var(--localai-accent); filter: brightness(1.08); }
.localai-play .localai-i-pause,
.localai-playing .localai-play .localai-i-play { display: none; }
.localai-playing .localai-play .localai-i-pause { display: block; }
.localai-play .localai-i-play { margin-left: 3px; }

.localai-speed {
	width: auto;
	min-width: 48px;
	padding: 0 0.6rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.localai-follow[aria-pressed="false"] { opacity: 0.5; }
.localai-close { opacity: 0.75; }
.localai-close:hover { opacity: 1; }

/* ---------- Track ---------- */
.localai-track {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 0.5rem;
}
.localai-seek {
	--localai-pct: 0%;
	display: block;
	width: 100%;
	height: 24px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.localai-seek::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--localai-accent) var(--localai-pct), rgba(255, 255, 255, 0.25) var(--localai-pct));
}
.localai-seek::-moz-range-track {
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.25);
}
.localai-seek::-moz-range-progress {
	height: 4px;
	border-radius: 4px;
	background: var(--localai-accent);
}
.localai-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.localai-seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}
.localai-seek:focus-visible { outline-offset: 0; border-radius: 6px; }
.localai-times {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1px;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.78;
}
.localai-title-mini {
	display: none;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
}

/* ---------- Docked mini-player ---------- */
.localai-docked .localai-shell {
	position: fixed;
	left: 50%;
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: var(--localai-z);
	width: min(760px, calc(100vw - 24px));
	transform: translateX(-50%);
	animation: localai-dock 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.localai-docked .localai-title-mini { display: block; }
.localai-docked .localai-panel { box-shadow: var(--localai-shadow), 0 0 0 1px rgba(255, 255, 255, 0.16); }
@keyframes localai-dock {
	from { opacity: 0; transform: translate(-50%, 16px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

.localai-jump {
	position: fixed;
	left: 0;
	right: 0;
	width: max-content;
	max-width: calc(100vw - 32px);
	margin: 0 auto;
	bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px);
	z-index: var(--localai-z);
	min-height: 44px;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--localai-border);
	border-radius: 999px;
	background: var(--localai-surface);
	color: var(--localai-brand);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: var(--localai-shadow);
	cursor: pointer;
}
.localai-jump:hover { border-color: var(--localai-brand); }

.localai-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Read-along in the article ---------- */
.localai-w {
	border-radius: 3px;
	transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.localai-reading .localai-w { cursor: pointer; }
.localai-reading .localai-w:hover { text-decoration: underline; text-decoration-color: var(--localai-word); text-decoration-thickness: 2px; }
.localai-w.localai-sentence {
	background: var(--localai-sentence-bg);
	box-shadow: 0.3em 0 0 var(--localai-sentence-bg);
}
.localai-w.localai-active {
	background: var(--localai-word);
	box-shadow: 0 0 0 2px var(--localai-word);
	color: inherit;
}

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
	.localai-panel {
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 0.15rem;
		padding: 0.6rem 0.5rem 0.4rem;
	}
	.localai-track {
		order: -1;
		flex-basis: 100%;
		padding: 0 0.35rem 0.1rem;
	}
	.localai-docked .localai-shell { width: calc(100vw - 16px); bottom: max(8px, env(safe-area-inset-bottom)); }
	.localai-jump { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 124px); }
}

@media (prefers-reduced-motion: reduce) {
	.localai-player *,
	.localai-w {
		animation: none !important;
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.localai-w.localai-active { outline: 2px solid Highlight; background: Highlight; color: HighlightText; }
	.localai-w.localai-sentence { box-shadow: none; text-decoration: underline; }
}

@media print {
	.localai-player { display: none !important; }
}