/**
 * TTS WP Player Styles
 *
 * @package TTS_WP
 * @since   1.0.0
 *
 * CSS Custom Properties:
 * --tts-bg-color: Background color of the player container
 * --tts-border-color: Border color of the player container
 * --tts-button-color: Primary button and accent color (play button, progress bar, focus outlines)
 * --tts-text-color: Text color for time display and controls
 * --tts-border-radius: Corner roundness of the player (in pixels)
 * --tts-shadow: Box shadow for the player (CSS box-shadow value)
 *
 * All properties include fallback values for maximum theme compatibility.
 * The .tts-player-custom class is added when customizations are active.
 */

/* CSS Custom Properties with defaults */
:root {
	--tts-bg-color: #ffffff;
	--tts-border-color: #cccccc;
	--tts-button-color: #0073aa;
	--tts-text-color: #333333;
	--tts-border-radius: 8px;
	--tts-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	--tts-highlight-word-color: #fff380;
	--tts-highlight-sentence-color: #fffde0;
	--tts-highlight-paragraph-color: #fffde0;
}

/* ============================================
   THEME ISOLATION - Maximum Protection
   Prevents external themes from breaking player styles
   ============================================ */

/* Reset all children - prevents inherited styles */
.tts-player *,
.tts-player *::before,
.tts-player *::after {
	box-sizing: border-box !important;
	margin: 0;
	padding: 0;
}

/* Button reset - prevents theme overrides on all buttons */
/* Using explicit resets instead of 'all: unset' to preserve specificity */
.tts-player button,
.tts-player button:hover,
.tts-player button:focus,
.tts-player button:active,
.tts-player button:visited {
	box-sizing: border-box !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	font-size: inherit !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	/* Default transparent background for all buttons except play button */
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 0 !important;
}

/* SVG icon protection - DO NOT force display:block, let classes control visibility */
.tts-player svg {
	flex-shrink: 0 !important;
	max-width: none !important;
	overflow: visible !important;
}

/* Hidden class for icon toggling - MUST have higher specificity than button svg rules */
.tts-player .tts-play-btn svg.tts-hidden,
.tts-player .tts-volume-btn svg.tts-hidden,
.tts-player .tts-hidden,
.tts-player svg.tts-hidden,
.tts-hidden {
	display: none !important;
	visibility: hidden !important;
}

/* Play button SVG - filled white */
.tts-player .tts-play-btn svg,
.tts-player .tts-play-btn svg polygon,
.tts-player .tts-play-btn svg rect {
	fill: #ffffff !important;
	stroke: none !important;
	/* DO NOT set visibility/opacity here - let .tts-hidden class control */
}

/* Other button SVGs - stroked, not filled */
.tts-player .tts-volume-btn svg,
.tts-player .tts-control-btn svg,
.tts-player .tts-skip-btn svg,
.tts-player .tts-sticky-close svg {
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2 !important;
}

/* Volume button SVG polygons should be filled */
.tts-player .tts-volume-btn svg polygon {
	fill: currentColor !important;
	stroke: none !important;
}

/* Input reset for sliders */
.tts-player input[type="range"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
}

/* Span and div resets */
.tts-player span,
.tts-player div {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ============================================
   END THEME ISOLATION
   ============================================ */

/* Player Container */
.tts-player {
	display: flex !important;
	flex-direction: column !important;
	padding: 1rem !important;
	border: 1px solid var(--tts-border-color, #cccccc) !important;
	border-radius: var(--tts-border-radius, 8px) !important;
	background: var(--tts-bg-color, #ffffff) !important;
	margin-bottom: 2rem !important;
	box-shadow: var(--tts-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)) !important;
	transition: box-shadow 0.3s ease !important;
	box-sizing: border-box !important;
	position: relative !important;
	/* NO z-index here - it creates a stacking context that traps dropdown menus */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--tts-text-color, #333333) !important;
	text-align: left !important;
}

/* Main player row with audio and controls */
.tts-player-main {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	width: 100% !important;
}

/* Custom styling class - added when admin customizes appearance */
.tts-player.tts-player-custom {
	/* Custom styling is applied via inline CSS custom properties */
	/* This class can be used for theme-specific overrides if needed */
}

.tts-player:hover {
	box-shadow: var(--tts-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)) !important;
	filter: brightness(0.98) !important;
}

/* Audio Element - Hidden when using custom controls */
.tts-player audio {
	/* Hide native audio element when custom controls are active */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Custom Audio Controls Container */
.tts-custom-controls {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	flex: 1 !important;
	min-width: 0 !important;
}

/* Play/Pause Button - High specificity to override theme styles */
.tts-player .tts-play-btn,
.tts-player button.tts-play-btn,
button.tts-play-btn {
	flex-shrink: 0 !important;
	width: 40px !important;
	height: 40px !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--tts-button-color, #0073aa) !important;
	background-color: var(--tts-button-color, #0073aa) !important;
	background-image: none !important;
	color: #ffffff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background-color 0.2s ease, transform 0.1s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: relative !important;
	overflow: visible !important;
}

.tts-player .tts-play-btn:hover,
.tts-player button.tts-play-btn:hover {
	background: color-mix(in srgb, var(--tts-button-color, #0073aa) 85%, black) !important;
	background-color: color-mix(in srgb, var(--tts-button-color, #0073aa) 85%, black) !important;
	transform: scale(1.05) !important;
}

.tts-player .tts-play-btn:active,
.tts-player button.tts-play-btn:active {
	transform: scale(0.95) !important;
}

.tts-player .tts-play-btn:focus,
.tts-player button.tts-play-btn:focus {
	outline: none !important;
}

.tts-player .tts-play-btn:focus-visible,
.tts-player button.tts-play-btn:focus-visible {
	outline: 2px solid var(--tts-button-color, #0073aa) !important;
	outline-offset: 2px !important;
}

.tts-player .tts-play-btn svg,
.tts-player button.tts-play-btn svg {
	width: 18px !important;
	height: 18px !important;
	fill: #ffffff !important;
	stroke: none !important;
	/* DO NOT set display here - let .tts-hidden class control visibility */
}

/* Play icon needs slight offset for visual centering */
.tts-player .tts-play-btn .tts-icon-play {
	margin-left: 2px !important;
}

/* Time Display */
.tts-time {
	font-size: 13px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	font-variant-numeric: tabular-nums !important;
	color: var(--tts-text-color, #666666) !important;
	white-space: nowrap !important;
	min-width: 40px !important;
	text-align: center !important;
	background: transparent !important;
	border: none !important;
}

/* Progress Bar Container */
.tts-progress-container {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	min-width: 0 !important;
}

/* Progress Bar Track */
.tts-progress-bar {
	flex: 1 !important;
	height: 6px !important;
	background: rgba(0, 0, 0, 0.1) !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Progress Bar Fill */
.tts-progress-bar::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	height: 100% !important;
	width: var(--progress, 0%) !important;
	background: var(--tts-button-color, #0073aa) !important;
	border-radius: 3px !important;
	transition: width 0.1s linear !important;
}

/* Buffered progress (lighter color) */
.tts-progress-bar::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	height: 100% !important;
	width: var(--buffered, 0%) !important;
	background: rgba(0, 0, 0, 0.15) !important;
	border-radius: 3px !important;
	z-index: -1 !important;
}

/* Progress Bar Hover State */
.tts-progress-bar:hover {
	height: 8px !important;
}

/* Progress Thumb (shows on hover) */
.tts-progress-thumb {
	position: absolute !important;
	top: 50% !important;
	left: var(--progress, 0%) !important;
	transform: translate(-50%, -50%) scale(0) !important;
	width: 14px !important;
	height: 14px !important;
	background: var(--tts-button-color, #0073aa) !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
	transition: transform 0.15s ease !important;
	pointer-events: none !important;
}

.tts-progress-bar:hover .tts-progress-thumb {
	transform: translate(-50%, -50%) scale(1) !important;
}

/* Volume Control with Popover */
.tts-volume-control {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	background: transparent !important;
}

/* Volume button - high specificity with !important to override themes */
.tts-player .tts-volume-btn,
.tts-player button.tts-volume-btn {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0.25rem !important;
	cursor: pointer !important;
	color: var(--tts-text-color, #666666) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 4px !important;
	transition: background-color 0.2s ease !important;
	width: 32px !important;
	height: 32px !important;
	box-shadow: none !important;
}

.tts-player .tts-volume-btn:hover,
.tts-player button.tts-volume-btn:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	background-color: rgba(0, 0, 0, 0.08) !important;
}

.tts-player .tts-volume-btn svg,
.tts-player button.tts-volume-btn svg {
	width: 20px !important;
	height: 20px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2 !important;
}

/* Volume Popover - Vertical Slider */
.tts-volume-popover {
	position: absolute !important;
	bottom: calc(100% + 8px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: var(--tts-bg-color, #ffffff) !important;
	border: 1px solid var(--tts-border-color, #cccccc) !important;
	border-radius: 8px !important;
	padding: 12px 8px !important;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
	z-index: 1001 !important;
	display: none !important;
	animation: tts-volume-popover-enter 0.15s ease-out !important;
}

@keyframes tts-volume-popover-enter {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Arrow pointing down from popover */
.tts-volume-popover::after {
	content: '' !important;
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	border: 6px solid transparent !important;
	border-top-color: var(--tts-bg-color, #ffffff) !important;
}

.tts-volume-popover::before {
	content: '' !important;
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	border: 7px solid transparent !important;
	border-top-color: var(--tts-border-color, #cccccc) !important;
}

.tts-volume-control.tts-volume-open .tts-volume-popover {
	display: block !important;
}

/* Vertical Volume Slider in Popover */
.tts-volume-popover .tts-volume-slider {
	display: block !important;
	writing-mode: vertical-lr !important;
	direction: rtl !important;
	width: 24px !important;
	height: 80px !important;
	background: transparent !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* Vertical slider track - WebKit */
.tts-volume-popover .tts-volume-slider::-webkit-slider-runnable-track {
	width: 4px !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.15) !important;
	border-radius: 2px !important;
	border: none !important;
}

/* Vertical slider thumb - WebKit */
.tts-volume-popover .tts-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 14px !important;
	height: 14px !important;
	background: var(--tts-button-color, #0073aa) !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	margin-left: -5px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
	border: none !important;
}

/* Vertical slider track - Firefox */
.tts-volume-popover .tts-volume-slider::-moz-range-track {
	width: 4px !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.15) !important;
	border-radius: 2px !important;
	border: none !important;
}

/* Vertical slider thumb - Firefox */
.tts-volume-popover .tts-volume-slider::-moz-range-thumb {
	width: 14px !important;
	height: 14px !important;
	background: var(--tts-button-color, #0073aa) !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Focus styles for slider */
.tts-volume-popover .tts-volume-slider:focus {
	outline: none !important;
}

.tts-volume-popover .tts-volume-slider:focus-visible {
	outline: 2px solid var(--tts-button-color, #0073aa) !important;
	outline-offset: 2px !important;
}

/* Skip Buttons */
.tts-skip-btn {
	background: transparent !important;
	border: none !important;
	padding: 0.25rem !important;
	cursor: pointer !important;
	color: var(--tts-text-color, #666666) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 4px !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

.tts-skip-btn:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	color: var(--tts-text-color, #333333) !important;
}

.tts-skip-btn svg {
	width: 18px !important;
	height: 18px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2 !important;
}

/* Dark Mode for Custom Controls */
@media (prefers-color-scheme: dark) {
	.tts-progress-bar {
		background: rgba(255, 255, 255, 0.15) !important;
	}

	.tts-progress-bar::after {
		background: rgba(255, 255, 255, 0.1) !important;
	}

	.tts-volume-popover .tts-volume-slider::-webkit-slider-runnable-track {
		background: rgba(255, 255, 255, 0.15) !important;
	}

	.tts-volume-popover .tts-volume-slider::-moz-range-track {
		background: rgba(255, 255, 255, 0.15) !important;
	}

	.tts-volume-btn:hover,
	.tts-skip-btn:hover {
		background: rgba(255, 255, 255, 0.1) !important;
	}

	.tts-volume-popover {
		background: var(--tts-bg-color, #1e1e1e) !important;
		border-color: rgba(255, 255, 255, 0.1) !important;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4) !important;
	}

	.tts-volume-popover::after {
		border-top-color: var(--tts-bg-color, #1e1e1e) !important;
	}

	.tts-volume-popover::before {
		border-top-color: rgba(255, 255, 255, 0.1) !important;
	}
}

/* Responsive Custom Controls */
@media screen and (max-width: 600px) {
	.tts-custom-controls {
		gap: 0.5rem !important;
	}

	.tts-play-btn {
		width: 36px !important;
		height: 36px !important;
	}

	.tts-play-btn svg {
		width: 16px !important;
		height: 16px !important;
	}

	.tts-time {
		font-size: 12px !important;
		min-width: 35px !important;
	}

	/* Keep volume button visible on mobile, popover still works */
	.tts-volume-control {
		display: flex !important;
	}

	.tts-skip-btn {
		display: none !important;
	}
}

/* Fallback for browsers without color-mix support */
@supports not (background: color-mix(in srgb, red, blue)) {
	.tts-play-btn:hover {
		filter: brightness(0.9);
	}
}

/* Player States */
.tts-player.playing {
	border-color: var(--tts-button-color, #0073aa);
}

.tts-player.error {
	border-color: #dc3232;
	background-color: #f8d7da;
}

/* Generating player state */
.tts-player.tts-player-generating,
.tts-player.tts-player-preview {
	border-style: dashed;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	min-height: 80px;
}

.tts-player-generating .tts-generating-content,
.tts-player-preview .tts-generating-content {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 1rem;
}

.tts-player-generating .tts-generating-icon,
.tts-player-preview .tts-generating-icon {
	flex-shrink: 0;
}

.tts-player-generating .tts-generating-text,
.tts-player-preview .tts-generating-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.tts-player-generating .tts-status-message,
.tts-player-preview .tts-status-message {
	font-weight: 600;
	color: var(--tts-text-color, #333333);
	font-size: 16px;
}

.tts-player-generating .tts-status-detail,
.tts-player-preview .tts-status-detail {
	color: var(--tts-text-color, #666666);
	font-size: 14px;
}

/* Spinner animation */
.tts-spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-left-color: var(--tts-button-color, #0073aa);
	border-radius: 50%;
	animation: tts-spin 1s linear infinite;
}

@keyframes tts-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Preview icon styling */
.tts-preview-icon {
	width: 32px;
	height: 32px;
	color: var(--tts-button-color, #0073aa);
	opacity: 0.8;
}

/* Insufficient content message state */
.tts-player.tts-insufficient-content {
	border-style: solid;
	border-color: #f0ad4e;
	background-color: #fcf8e3;
	padding: 1rem;
}

.tts-player.tts-insufficient-content p {
	margin: 0;
	color: #8a6d3b;
	font-size: 14px;
}

/* Content too long message state */
.tts-player.tts-content-too-long {
	border-style: solid;
	border-color: #d9534f;
	background-color: #f2dede;
	padding: 1rem;
}

.tts-player.tts-content-too-long p {
	margin: 0;
	color: #a94442;
	font-size: 14px;
}

/* Provider unavailable message state */
.tts-player.tts-provider-unavailable {
	border-style: solid;
	border-color: #0073aa;
	background-color: #d9edf7;
	padding: 1rem;
}

.tts-player.tts-provider-unavailable p {
	margin: 0;
	color: #31708f;
	font-size: 14px;
}

/* Custom icon styling */
.tts-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.25rem;
}

.tts-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Custom Controls (if added in future) */
.tts-player-button {
	background: var(--tts-button-color, #0073aa);
	border: none;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.tts-player-button:hover {
	transform: scale(1.1);
	background-color: var(--tts-button-color, #005a87);
}

.tts-player-button:active {
	transform: scale(0.95);
}

.tts-player-button:focus {
	outline: none;
}

/* Timeline/Progress */
.tts-timeline {
	flex-grow: 1;
	height: 4px;
	background: #ddd;
	position: relative;
	cursor: pointer;
	border-radius: 2px;
	margin: 0 15px;
}

.tts-timeline-progress {
	height: 100%;
	background: var(--tts-button-color, #0073aa);
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 2px;
	transition: width 0.1s linear;
}

.tts-timeline:hover .tts-timeline-progress {
	background: var(--tts-button-color, #005a87);
}

/* Time Display */
.tts-time-display {
	font-size: 14px;
	color: var(--tts-text-color, #666666);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-variant-numeric: tabular-nums;
	min-width: 80px;
	text-align: center;
}

/* Responsive Styles for Mobile */
@media screen and (max-width: 600px) {
	.tts-player {
		padding: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.tts-player-button {
		width: 40px;
		height: 40px;
	}

	.tts-time-display {
		font-size: 12px;
		min-width: 60px;
	}

	.tts-timeline {
		margin: 0 10px;
	}
}

/* Accessibility */
.tts-player:focus-within {
	outline: none;
}

/* Screen reader only text */
.tts-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	:root {
		--tts-bg-color: #1e1e1e;
		--tts-border-color: #444444;
		--tts-text-color: #e0e0e0;
	}
}

/* Text Highlighting Styles - Two-level system like Google Blog */

/* Level 1: Light highlight on entire current paragraph/block */
/* Background only, no layout changes, with smooth transition */
.tts-current-block {
	background-color: var(--tts-highlight-paragraph-color, #fffde0) !important;
	border-radius: 12px !important;
	transition: background-color 0.3s ease !important;
}

/* Content container needs to be above overlays so ALL text (including punctuation) is visible */
.tts-highlight-active {
	position: relative;
	z-index: 110;
}

/* Base style for all TTS word spans */
.tts-word {
	display: inline;
	transition: background-color 0.3s ease;
}

/* Sentence-level highlighting - background only, no layout changes */
.tts-word.tts-current-sentence {
	background-color: var(--tts-highlight-sentence-color, #fffde0) !important;
}

/* Floating highlight overlay - glides smoothly between words */
/* Using fixed positioning to avoid issues with theme transforms/filters */
.tts-highlight-overlay {
	position: fixed !important;
	background-color: var(--tts-highlight-word-color, #fff380) !important;
	border-radius: 4px !important;
	pointer-events: none !important;
	z-index: 999999 !important;
	/* Mix blend mode ensures text is always visible through the highlight */
	mix-blend-mode: multiply !important;
	/* Smooth gliding transition */
	transition: left 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
	            top 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
	            width 0.12s cubic-bezier(0.25, 0.1, 0.25, 1),
	            height 0.12s cubic-bezier(0.25, 0.1, 0.25, 1),
	            opacity 0.2s ease-out !important;
}

/* Sentence overlay - covers entire sentence with sliding animation */
.tts-sentence-overlay {
	position: fixed !important;
	background-color: var(--tts-highlight-sentence-color, #fffde0) !important;
	border-radius: 8px !important;
	pointer-events: none !important;
	z-index: 999999 !important;
	/* Mix blend mode ensures text is always visible through the highlight */
	mix-blend-mode: multiply !important;
	/* Smooth sliding transition for sentence changes */
	transition: left 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
	            top 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
	            width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
	            height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
	            opacity 0.3s ease-out !important;
}

/* Paragraph overlay - covers entire paragraph with sliding animation */
.tts-paragraph-overlay {
	position: fixed !important;
	background-color: var(--tts-highlight-paragraph-color, #fffde0) !important;
	border-radius: 12px !important;
	pointer-events: none !important;
	z-index: 999999 !important;
	/* Mix blend mode ensures text is always visible through the highlight */
	mix-blend-mode: multiply !important;
	/* Smooth sliding transition for paragraph changes */
	transition: left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
	            top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
	            width 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
	            height 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
	            opacity 0.35s ease-out !important;
}

/* Highlights on dark backgrounds (light text), flagged by the highlighter.
   A light fill under light text, or a multiply blend over a dark background,
   would make the text unreadable or the highlight invisible. Themes can set
   the --tts-highlight-*-on-dark variables. */
.tts-current-block.tts-on-dark {
	background-color: var(--tts-highlight-paragraph-on-dark, rgba(255, 255, 255, 0.1)) !important;
}

.tts-highlight-overlay.tts-on-dark {
	background-color: var(--tts-highlight-word-on-dark, rgba(255, 255, 255, 0.3)) !important;
	mix-blend-mode: screen !important;
}

.tts-sentence-overlay.tts-on-dark {
	background-color: var(--tts-highlight-sentence-on-dark, rgba(255, 255, 255, 0.12)) !important;
	mix-blend-mode: screen !important;
}

.tts-paragraph-overlay.tts-on-dark {
	background-color: var(--tts-highlight-paragraph-on-dark, rgba(255, 255, 255, 0.1)) !important;
	mix-blend-mode: screen !important;
}

/* Disable transitions during scroll to prevent jumping */
.tts-sentence-overlay.tts-no-transition,
.tts-paragraph-overlay.tts-no-transition,
.tts-highlight-overlay.tts-no-transition {
	transition: none !important;
}

/* Word spans - positioned to appear above highlight overlays */
/* The main .tts-word style with z-index:10 is defined earlier in the file */

/* Dark mode for overlay - CSS variables still apply, add enhanced shadow */
@media (prefers-color-scheme: dark) {
	.tts-highlight-overlay {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 -2px 0 rgba(255, 200, 0, 0.6) !important;
	}
}

/* Reduced motion support for overlays */
@media (prefers-reduced-motion: reduce) {
	.tts-highlight-overlay,
	.tts-sentence-overlay,
	.tts-paragraph-overlay {
		transition: opacity 0.1s ease-out !important;
	}
}

/* Dark mode for sentence/paragraph overlays */
@media (prefers-color-scheme: dark) {
	.tts-sentence-overlay,
	.tts-paragraph-overlay {
		/* Use slightly more visible colors in dark mode */
		opacity: 0.9;
	}
}

/* Level 2: Strong highlight on current word within the paragraph (legacy - kept for compatibility) */
.tts-highlighted-word {
	background-color: var(--tts-highlight-word-color, #fff380) !important;
}

/* Legacy paragraph-level highlighting */
.tts-highlighted {
	background-color: var(--tts-highlight-paragraph-color, #fffde0) !important;
}

/* Dark mode highlight - CSS variables still apply, just add enhanced shadows */
@media (prefers-color-scheme: dark) {
	/* Enhanced shadow for better visibility in dark mode */
	.tts-highlighted-word {
		box-shadow: inset 0 -2px 0 rgba(255, 200, 0, 0.7) !important;
	}
}

/* Animation keyframes use same CSS variable for consistency */

/* Focus styles for accessibility */
.tts-highlighted:focus {
	outline: none;
}

/* Ensure sufficient contrast for readability */
.tts-highlighted * {
	color: inherit;
}

/* Speed Control Styles */
.tts-speed-control {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

/* Speed button needs high specificity with !important to override themes */
.tts-player .tts-speed-button,
.tts-player button.tts-speed-button {
	padding: 0.5rem !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	color: var(--tts-text-color, #666666) !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 48px !important;
	height: 32px !important;
	white-space: nowrap !important;
	box-shadow: none !important;
}

.tts-player .tts-speed-button:hover,
.tts-player button.tts-speed-button:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	background-color: rgba(0, 0, 0, 0.08) !important;
	color: var(--tts-text-color, #333333) !important;
}

.tts-player .tts-speed-button:active,
.tts-player button.tts-speed-button:active {
	background: rgba(0, 0, 0, 0.12) !important;
	background-color: rgba(0, 0, 0, 0.12) !important;
	transition: background-color 0.05s ease !important;
}

.tts-player .tts-speed-button:focus,
.tts-player button.tts-speed-button:focus {
	background: rgba(0, 0, 0, 0.04) !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
	outline: none !important;
}

.tts-player .tts-speed-button:focus-visible,
.tts-player button.tts-speed-button:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.3) !important;
	outline-offset: 2px !important;
}

/* Speed menu - use position:fixed to escape stacking contexts */
/* Menu may be moved to body, so use both selectors */
.tts-player .tts-speed-menu,
.tts-speed-menu {
	position: fixed !important;
	/* top/left set dynamically by JS */
	background: var(--tts-bg-color, #ffffff) !important;
	background-color: var(--tts-bg-color, #ffffff) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
	z-index: 999999 !important;
	min-width: 120px !important;
	overflow: hidden !important;
	animation: tts-dropdown-enter 0.15s ease-out !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

@keyframes tts-dropdown-enter {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tts-player .tts-speed-menu[hidden],
.tts-speed-menu[hidden] {
	display: none !important;
}

/* Speed options - high specificity with !important to override themes */
/* Menu may be moved to body, so include standalone selectors */
.tts-player .tts-speed-option,
.tts-player button.tts-speed-option,
.tts-speed-option,
button.tts-speed-option {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 0.625rem 1rem !important;
	text-align: left !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	color: var(--tts-text-color, #333333) !important;
	transition: background-color 0.15s ease !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.tts-player .tts-speed-option:hover,
.tts-player button.tts-speed-option:hover {
	background: rgba(0, 0, 0, 0.06) !important;
	background-color: rgba(0, 0, 0, 0.06) !important;
}

.tts-player .tts-speed-option:active,
.tts-player button.tts-speed-option:active {
	background: rgba(0, 0, 0, 0.1) !important;
	background-color: rgba(0, 0, 0, 0.1) !important;
	transition: background-color 0.05s ease !important;
}

.tts-player .tts-speed-option:focus,
.tts-player button.tts-speed-option:focus {
	outline: none !important;
}

.tts-player .tts-speed-option:focus-visible,
.tts-player button.tts-speed-option:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.3) !important;
	outline-offset: -2px !important;
}

/* Selected speed option - menu may be in body */
.tts-player .tts-speed-option[aria-current="true"],
.tts-player button.tts-speed-option[aria-current="true"],
.tts-speed-option[aria-current="true"],
button.tts-speed-option[aria-current="true"] {
	font-weight: 600 !important;
	background: rgba(0, 115, 170, 0.1) !important;
	background-color: rgba(0, 115, 170, 0.1) !important;
	color: var(--tts-button-color, #0073aa) !important;
}

/* Checkmark for selected option */
.tts-speed-option[aria-current="true"]::after {
	content: '✓' !important;
	margin-left: auto !important;
	padding-left: 12px !important;
	color: var(--tts-button-color, #0073aa) !important;
	font-weight: bold !important;
}

.tts-player .tts-speed-option[aria-current="true"]:hover,
.tts-player button.tts-speed-option[aria-current="true"]:hover,
.tts-speed-option[aria-current="true"]:hover,
button.tts-speed-option[aria-current="true"]:hover {
	background: rgba(0, 115, 170, 0.15) !important;
	background-color: rgba(0, 115, 170, 0.15) !important;
}

/* Remove duplicate - ::after is defined above */

/* Dark mode for speed control */
@media (prefers-color-scheme: dark) {
	.tts-speed-button {
		background: transparent;
		color: var(--tts-text-color, #e0e0e0);
	}

	.tts-speed-button:hover {
		background-color: rgba(255, 255, 255, 0.08);
	}

	.tts-speed-button:active {
		background-color: rgba(255, 255, 255, 0.12);
	}

	.tts-speed-button:focus {
		background-color: rgba(255, 255, 255, 0.04);
	}

	.tts-speed-button:focus-visible {
		outline-color: rgba(255, 255, 255, 0.4);
	}

	.tts-speed-menu {
		background: var(--tts-bg-color, #1e1e1e);
		border-color: rgba(255, 255, 255, 0.1);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
	}

	.tts-speed-option {
		color: var(--tts-text-color, #e0e0e0);
	}

	.tts-speed-option:hover {
		background-color: rgba(255, 255, 255, 0.06);
	}

	.tts-speed-option:active {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.tts-speed-option:focus {
		background: transparent;
	}

	.tts-speed-option:focus-visible {
		outline-color: rgba(255, 255, 255, 0.4);
	}

	.tts-speed-option[aria-current="true"] {
		background-color: rgba(0, 115, 170, 0.2);
		color: #4db8ff;
	}

	.tts-speed-option[aria-current="true"]:hover {
		background-color: rgba(0, 115, 170, 0.25);
	}
}

/* Placeholder for sticky player - prevents page jump */
.tts-player-placeholder {
	/* Maintains space when player becomes sticky/fixed */
	visibility: hidden;
	pointer-events: none;
	/* Height and margins are copied from the player in createPlaceholder() */
}

/* Sticky/Floating Player Styles */
.tts-player.tts-sticky {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	left: auto !important;
	top: auto !important;
	max-width: 400px !important;
	width: calc(100% - 40px) !important;
	z-index: 9999 !important;
	margin-bottom: 0 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
	animation: tts-slide-in 0.3s ease-out !important;
}

@keyframes tts-slide-in {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Responsive sticky player for mobile */
@media screen and (max-width: 600px) {
	.tts-player.tts-sticky {
		bottom: 10px !important;
		right: 10px !important;
		left: 10px !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.tts-player,
	.tts-player-button,
	.tts-timeline-progress {
		transition: none;
	}

	.tts-highlighted,
	.tts-highlighted-word,
	.tts-current-block {
		transition: none;
		animation: none;
	}

	.tts-speed-button,
	.tts-speed-option {
		transition: none;
	}

	.tts-player.tts-sticky {
		animation: none;
	}
}

/* Player Controls (Toggle Buttons for Highlight and Autoscroll) */
.tts-player-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* Control buttons need high specificity with !important to override themes */
.tts-player .tts-control-btn,
.tts-player button.tts-control-btn {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.5rem !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--tts-text-color, #666666) !important;
	width: 32px !important;
	height: 32px !important;
	position: relative !important;
	box-shadow: none !important;
}

.tts-player .tts-control-btn:hover,
.tts-player button.tts-control-btn:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	background-color: rgba(0, 0, 0, 0.08) !important;
	color: var(--tts-text-color, #333333) !important;
}

.tts-player .tts-control-btn:active,
.tts-player button.tts-control-btn:active {
	background: rgba(0, 0, 0, 0.12) !important;
	background-color: rgba(0, 0, 0, 0.12) !important;
	transition: background-color 0.05s ease !important;
}

.tts-player .tts-control-btn:focus,
.tts-player button.tts-control-btn:focus {
	background: rgba(0, 0, 0, 0.04) !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
	outline: none !important;
}

.tts-player .tts-control-btn:focus-visible,
.tts-player button.tts-control-btn:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.3) !important;
	outline-offset: 2px !important;
}

.tts-player .tts-control-btn.active,
.tts-player button.tts-control-btn.active {
	background: rgba(0, 115, 170, 0.12) !important;
	background-color: rgba(0, 115, 170, 0.12) !important;
	color: var(--tts-button-color, #0073aa) !important;
}

.tts-player .tts-control-btn.active:hover,
.tts-player button.tts-control-btn.active:hover {
	background: rgba(0, 115, 170, 0.18) !important;
	background-color: rgba(0, 115, 170, 0.18) !important;
}

.tts-player .tts-control-btn.active:active,
.tts-player button.tts-control-btn.active:active {
	background: rgba(0, 115, 170, 0.22) !important;
	background-color: rgba(0, 115, 170, 0.22) !important;
	transition: background-color 0.05s ease !important;
}

.tts-player .tts-control-btn.active:focus-visible,
.tts-player button.tts-control-btn.active:focus-visible {
	outline-color: var(--tts-button-color, #0073aa) !important;
}

/* SVG Icon styles for control buttons */
.tts-player .tts-control-btn svg,
.tts-player button.tts-control-btn svg {
	width: 20px !important;
	height: 20px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

/* Dark mode for controls */
@media (prefers-color-scheme: dark) {
	.tts-control-btn {
		background: transparent;
		color: var(--tts-text-color, #e0e0e0);
	}

	.tts-control-btn:hover {
		background-color: rgba(255, 255, 255, 0.08);
		color: #ffffff;
	}

	.tts-control-btn:active {
		background-color: rgba(255, 255, 255, 0.12);
	}

	.tts-control-btn:focus {
		background-color: rgba(255, 255, 255, 0.04);
	}

	.tts-control-btn:focus-visible {
		outline-color: rgba(255, 255, 255, 0.4);
	}

	.tts-control-btn.active {
		background-color: rgba(0, 115, 170, 0.2);
		color: #4db8ff;
	}

	.tts-control-btn.active:hover {
		background-color: rgba(0, 115, 170, 0.25);
	}

	.tts-control-btn.active:active {
		background-color: rgba(0, 115, 170, 0.3);
	}

	.tts-control-btn.active:focus-visible {
		outline-color: #4db8ff;
	}
}

/* Responsive for mobile */
@media screen and (max-width: 600px) {
	.tts-player-controls {
		align-self: center;
	}

	.tts-control-btn {
		padding: 0.4rem;
	}

	.tts-speed-control {
		align-self: center;
	}

	.tts-icon-highlight::before,
	.tts-icon-autoscroll::before {
		font-size: 16px;
	}
}

/* Close Button for Floating Player - high specificity to override .tts-player button reset */
.tts-player button.tts-sticky-close,
button.tts-sticky-close,
.tts-sticky-close {
	/* Reset common theme overrides */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	font: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	margin: 0 !important;
	/* Actual styles */
	box-sizing: border-box !important;
	position: absolute !important;
	top: -12px !important;
	right: -12px !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	background: rgba(0, 0, 0, 0.6) !important;
	background-color: rgba(0, 0, 0, 0.6) !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
	z-index: 10 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.tts-player button.tts-sticky-close:hover,
button.tts-sticky-close:hover,
.tts-sticky-close:hover {
	background: rgba(0, 0, 0, 0.7) !important;
	background-color: rgba(0, 0, 0, 0.7) !important;
	transform: scale(1.1) !important;
}

.tts-player button.tts-sticky-close:active,
button.tts-sticky-close:active,
.tts-sticky-close:active {
	background: rgba(0, 0, 0, 0.8) !important;
	background-color: rgba(0, 0, 0, 0.8) !important;
	transform: scale(0.95) !important;
}

.tts-player button.tts-sticky-close:focus,
button.tts-sticky-close:focus,
.tts-sticky-close:focus {
	outline: none !important;
}

.tts-player button.tts-sticky-close:focus-visible,
button.tts-sticky-close:focus-visible,
.tts-sticky-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.8) !important;
	outline-offset: 2px !important;
}

.tts-player button.tts-sticky-close svg,
button.tts-sticky-close svg,
.tts-sticky-close svg {
	width: 16px !important;
	height: 16px !important;
	stroke: #ffffff !important;
	fill: none !important;
	display: block !important;
}

/* Dark mode for close button */
@media (prefers-color-scheme: dark) {
	.tts-sticky-close {
		background: rgba(255, 255, 255, 0.3);
		border-color: rgba(255, 255, 255, 0.8);
	}

	.tts-sticky-close:hover {
		background: rgba(255, 255, 255, 0.4);
	}

	.tts-sticky-close:active {
		background: rgba(255, 255, 255, 0.5);
	}
}

/* Restore Button for Floating Player */
.tts-restore-sticky {
	/* Reset common theme overrides */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	font: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	text-align: center !important;
	text-indent: 0 !important;
	margin: 0 !important;
	/* Actual styles */
	box-sizing: border-box !important;
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	left: auto !important;
	top: auto !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	padding: 0 !important;
	/* Background color set via inline style from JS using admin button color */
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
	z-index: 9998 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
	animation: tts-fade-in 0.3s ease-out !important;
}

@keyframes tts-fade-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.tts-restore-sticky:hover {
	transform: scale(1.1) !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
	filter: brightness(1.1) !important;
}

.tts-restore-sticky:active {
	transform: scale(0.95) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.tts-restore-sticky:focus {
	outline: none !important;
}

.tts-restore-sticky:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.8) !important;
	outline-offset: 3px !important;
}

.tts-restore-sticky svg {
	width: 24px !important;
	height: 24px !important;
	fill: #ffffff !important;
	stroke: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Hidden SVGs must not take up space - override the display:block above */
.tts-restore-sticky svg.tts-hidden {
	display: none !important;
	visibility: hidden !important;
}

/* Play icon needs slight offset for visual centering (triangle is visually left-heavy) */
.tts-restore-sticky svg.tts-icon-play:not(.tts-hidden) {
	margin-left: 2px !important;
	margin-right: -2px !important;
}

/* Pause icon is centered */
.tts-restore-sticky svg.tts-icon-pause:not(.tts-hidden) {
	margin: 0 !important;
}

/* Responsive restore button for mobile */
@media screen and (max-width: 600px) {
	.tts-restore-sticky {
		bottom: 16px !important;
		right: 16px !important;
		width: 48px !important;
		height: 48px !important;
	}

	.tts-restore-sticky svg {
		width: 20px !important;
		height: 20px !important;
	}
}