/**
 * TTS Reader - Layout & Structure
 * Disposition du widget unifié (TTS + Audio)
 */

/* ── Reset box-sizing ─────────────────────────────────────── */

.tts-widget {
	box-sizing: border-box;
}

.tts-widget,
.tts-widget * {
	box-sizing: inherit;
}

/* ── Widget root : colonne ────────────────────────────────── */

.tts-widget {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── Row 1 : Contrôles (volume | play | options) ─────────── */

.tts-controls-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
}

/* ── Groupes (volume / options) ───────────────────────────── */

.tts-control-group {
	position: relative;
	display: flex;
	align-items: center;
}

/* ── Boutons de contrôle ──────────────────────────────────── */

.tts-control-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	border: none;
	padding: 12px 16px;
	border-radius: var(--tts-radius-md, 6px);
	font-size: var(--tts-font-size-base, 14px);
	transition: transform 0.15s ease, opacity 0.15s ease;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.tts-control-button:hover {
	transform: translateY(-2px);
}

.tts-control-button:active {
	transform: translateY(0);
}

/* ── Panels flottants (survol) ────────────────────────────── */

.tts-control-panel {
	position: absolute;
	top: 100%;
	background: var(--tts-bg-panel, rgba(20, 20, 20, 0.98));
	border: 1px solid var(--tts-border-primary, rgba(76, 175, 80, 0.3));
	border-radius: var(--tts-radius-lg, 8px);
	padding: 12px 16px;
	min-width: 200px;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	margin-top: 8px;
}

/* Volume : aligné à gauche */
.tts-volume-group .tts-control-panel {
	left: 0;
}

/* Options : aligné à droite */
.tts-options-group .tts-control-panel {
	right: 0;
}

/* ── Volume panel ─────────────────────────────────────────── */

.tts-volume-panel {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 180px;
}

.tts-volume-slider {
	flex: 1;
	min-width: 100px;
}

.tts-volume-value {
	min-width: 40px;
	text-align: right;
	font-size: var(--tts-font-size-sm, 12px);
	color: var(--tts-text-secondary, #b0b0b0);
}

/* ── Options panel ────────────────────────────────────────── */

.tts-option-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.tts-option-item:last-child {
	margin-bottom: 0;
}

.tts-option-label {
	color: var(--tts-primary, #4CAF50);
	font-size: var(--tts-font-size-sm, 12px);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tts-option-control {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tts-option-control input[type="range"] {
	flex: 1;
	min-width: 100px;
}

.tts-option-control span {
	min-width: 40px;
	text-align: right;
	font-size: var(--tts-font-size-sm, 12px);
	color: var(--tts-text-secondary, #b0b0b0);
}

/* ── Row 2 : Barre de progression interactive ─────────────── */

.tts-progress-container {
	width: 100%;
}

.tts-progress-hidden {
	display: none;
}

.tts-progress-bar {
	position: relative;
	width: 100%;
	height: 6px;
	background: var(--tts-bg-progress, rgba(255, 255, 255, 0.15));
	border-radius: 3px;
	cursor: pointer;
	overflow: visible;
	transition: height 0.15s ease;
}

.tts-progress-bar:hover {
	height: 10px;
}

.tts-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--tts-primary, #4CAF50);
	border-radius: 3px;
	width: 0%;
	transition: width 0.1s linear;
	pointer-events: none;
	z-index: 1;
}

/* Section markers (TTS mode — populated by JS) */
.tts-progress-sections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.tts-section-marker {
	position: absolute;
	top: 0;
	width: 2px;
	height: 100%;
	background: var(--tts-border-primary, rgba(76, 175, 80, 0.5));
	transform: translateX(-1px);
}

/* Hover cursor line */
.tts-progress-cursor {
	position: absolute;
	top: -2px;
	width: 2px;
	height: calc(100% + 4px);
	background: #fff;
	border-radius: 1px;
	display: none;
	pointer-events: none;
	z-index: 3;
}

/* ── Focus ring (keyboard) ────────────────────────────────── */

.tts-progress-bar:focus-visible {
	outline: 2px solid var(--tts-primary, #4CAF50);
	outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
	.tts-control-button {
		padding: 10px 12px;
		font-size: 13px;
	}

	.tts-control-panel {
		min-width: 160px;
		padding: 10px 12px;
	}

	.tts-progress-bar {
		height: 8px;
	}

	.tts-progress-bar:hover {
		height: 12px;
	}
}