/*
 * Barra controlli player fp32shim (cutUI.js, correzione.js, player.js)
 *
 * Il markup è generato via JS (div .fullBar / .fullBar_cor iniettati dopo
 * #exaplayer) con nomi di classe storici: qui sono solo ristilizzati in
 * coerenza col layout Tailwind (palette slate/indigo, Inter, niente sprite —
 * le icone sono disegnate in CSS).
 *
 * Semantica classi bottone (storica): .pause = stato in pausa (mostra ▶),
 * .play = stato in riproduzione (mostra ⏸).
 */

/* ── Barra ── */
.fullBar, .fullBar_cor {
	position: relative;
	height: 44px;
	margin: 0;
	background: #f8fafc;                /* slate-50 */
	border-top: 1px solid #e2e8f0;      /* slate-200 */
	font-family: 'Inter', sans-serif;
}

/* ── Zona pulsanti (sinistra) ── */
.playerControls, .playerControls_cor {
	position: absolute;
	left: 0;
	top: 0;
	width: 132px;
	height: 44px;
}

/* Play/Pausa: cerchio indigo con icona disegnata in CSS */
.playerControls .play, .playerControls .pause,
.playerControls_cor .play, .playerControls_cor .pause {
	position: absolute;
	left: 8px;
	top: 7px;
	width: 30px;
	height: 30px;
	border-radius: 9999px;
	background: #4f46e5;                /* indigo-600 */
	cursor: pointer;
	transition: background-color .15s;
}
.playerControls .play:hover, .playerControls .pause:hover,
.playerControls_cor .play:hover, .playerControls_cor .pause:hover {
	background: #4338ca;                /* indigo-700 */
}
/* stato in pausa → triangolo ▶ */
.playerControls .pause::before, .playerControls_cor .pause::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 9px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}
/* stato in riproduzione → doppia barra ⏸ */
.playerControls .play::before, .playerControls_cor .play::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 9px;
	width: 4px;
	height: 12px;
	background: #fff;
	border-radius: 1px;
	box-shadow: 7px 0 0 #fff;
}

/* Prossima keyword: ghost button con chevron */
.playerControls .nextKeyword, .playerControls_cor .nextKeyword {
	position: absolute;
	left: 46px;
	top: 7px;
	width: 30px;
	height: 30px;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color .15s;
}
.playerControls .nextKeyword:hover, .playerControls_cor .nextKeyword:hover {
	background: #e2e8f0;                /* slate-200 */
}
.playerControls .nextKeyword::before, .playerControls_cor .nextKeyword::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 10px;
	width: 9px;
	height: 9px;
	border-top: 2px solid #475569;      /* slate-600 */
	border-right: 2px solid #475569;
	transform: rotate(45deg);
}

/* ── Tempi ── */
.fullBar .time, .fullBar_cor .time {
	position: absolute;
	left: 84px;
	top: 0;
	line-height: 44px;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: #334155;                     /* slate-700 */
	z-index: 3;
}
.fullBar .totaltime, .fullBar_cor .totaltime {
	position: absolute;
	right: 10px;
	top: 0;
	line-height: 44px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: #94a3b8;                     /* slate-400 */
	z-index: 3;
}

/* ── Timeline ── */
.fullBar .track, .fullBar_cor .track {
	position: absolute;
	left: 140px;
	right: 64px;
	top: 19px;
	height: 6px;
	background: #e2e8f0;                /* slate-200 */
	border: 0;
	border-radius: 9999px;
}
.fullBar .progress, .fullBar_cor .progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 6px;
	background: #4f46e5;                /* indigo-600 */
	border: 0;
	border-radius: 9999px;
	transition: width .25s linear;
}
/* zona cliccabile per il seek: più alta della track per facilitare il click */
.track .over {
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: 0;
	right: 0;
	z-index: 3;
	cursor: pointer;
}

/* ── Marker keyword / entità sulla timeline ── */
.fullBar .track .bullet, .fullBar_cor .track .bullet {
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	top: -3px;
	background: #fff;
	border: 2px solid #4f46e5;          /* indigo-600 */
	border-radius: 9999px;
	position: absolute;
	z-index: 4;
	cursor: pointer;
	transition: transform .1s;
}
.fullBar .track .bullet:hover, .fullBar_cor .track .bullet:hover {
	transform: scale(1.25);
}
/* entità nominate: colore del marker per tipo */
.fullBar .track .people,       .fullBar_cor .track .people       { border-color: #f59e0b; } /* amber-500 */
.fullBar .track .location,     .fullBar_cor .track .location     { border-color: #22c55e; } /* green-500 */
.fullBar .track .organization, .fullBar_cor .track .organization { border-color: #0ea5e9; } /* sky-500  */
/* punto di unione tra spezzoni (ritagli nati da editor/merge di più clip sorgente) */
.fullBar .track .joint,        .fullBar_cor .track .joint        { border-color: #e11d48; } /* rose-600 */

/* tooltip del marker */
.fullBar .track .bullet span.bulle, .fullBar_cor .track .bullet span.bulle {
	display: none;
	position: absolute;
	top: 18px;
	left: -120px;
	width: 240px;
	background: #1e293b;                /* slate-800 */
	color: #f8fafc;
	font-size: 11px;
	line-height: 1.4;
	padding: 6px 8px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	z-index: 10;
}
.fullBar .track .bullet:hover span.bulle, .fullBar_cor .track .bullet:hover span.bulle {
	display: block;
}
/* bordo colorato del tooltip per tipo entità */
.fullBar .track .people span.bulle,       .fullBar_cor .track .people span.bulle       { border-top: 2px solid #f59e0b; }
.fullBar .track .location span.bulle,     .fullBar_cor .track .location span.bulle     { border-top: 2px solid #22c55e; }
.fullBar .track .organization span.bulle, .fullBar_cor .track .organization span.bulle { border-top: 2px solid #0ea5e9; }
.fullBar .track .joint span.bulle,        .fullBar_cor .track .joint span.bulle        { border-top: 2px solid #e11d48; }