/* Timeline di Moviola [timeline]: righello, tracce, clip, maniglie, testina, linee di aggancio.
   Le variabili del tema (--timeline-sfondo, --corsia, --clip-*, --selezione, --aggancio, --testina…)
   stanno in app.css (§7.1 del contratto); qui si usano soltanto. */

#timeline {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--timeline-sfondo, #161616);
  border-radius: var(--r-pannello, 8px);
  overflow: hidden;
  font-family: var(--font, -apple-system, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif);
  font-size: var(--t-corpo, 12px);
  color: var(--testo, #F2F2F2);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- barra degli strumenti ---------------------------------------- */

.tl-strumenti {
  flex: 0 0 var(--strumenti-h, 38px);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid var(--bordo, rgba(255,255,255,0.08));
  background: var(--timeline-sfondo, #161616);
}
.tl-strumenti .tl-gruppo { display: flex; align-items: center; gap: 2px; }
.tl-strumenti .tl-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--bordo-forte, rgba(255,255,255,0.16)); }
.tl-strumenti .tl-spazio { flex: 1; }
.tl-strumenti .tl-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pulsante, 6px);
  background: transparent; color: var(--testo-2, #9A9A9E);
  cursor: pointer; padding: 0;
}
.tl-strumenti .tl-btn svg { width: 18px; height: 18px; }
.tl-strumenti .tl-btn:hover:not(:disabled) { background: var(--bordo, rgba(255,255,255,0.08)); color: var(--testo, #F2F2F2); }
.tl-strumenti .tl-btn:active:not(:disabled) { background: var(--bordo-forte, rgba(255,255,255,0.16)); }
.tl-strumenti .tl-btn:disabled { color: var(--testo-3, #5C5C60); cursor: default; }
.tl-strumenti .tl-btn.attivo { color: var(--accento, #1FB8F5); }
.tl-strumenti .tl-btn.attivo:disabled { color: var(--accento, #1FB8F5); opacity: 0.6; }
/* magnete: acceso e fisso in V1 (aria-disabled, non disabled: il tooltip deve comparire) */
.tl-strumenti .tl-btn[aria-disabled="true"] { cursor: default; }
.tl-strumenti .tl-btn[aria-disabled="true"]:hover { background: transparent; color: var(--accento, #1FB8F5); }
.tl-strumenti .tl-btn:focus-visible, .tl-intestazione button:focus-visible, .tl-zoom:focus-visible {
  outline: 1px solid var(--accento, #1FB8F5); outline-offset: 1px;
}
.tl-zoom {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 28px; margin: 0 4px; background: transparent; cursor: pointer;
}
.tl-zoom::-webkit-slider-runnable-track { height: 2px; background: var(--binario, #3A3A3E); border-radius: 1px; }
.tl-zoom::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -5px; border-radius: 50%;
  background: #FFFFFF; border: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

/* ---------- corpo: righello, intestazioni, corsie ------------------------- */

.tl-corpo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
.tl-corpo[data-strumento="dividi"] .tl-clip { cursor: crosshair; }

.tl-righello {
  position: absolute; top: 0; left: var(--intestazione-traccia-w, 56px); right: 0;
  height: var(--righello-h, 24px);
  display: block;
  z-index: 5;
  cursor: pointer;
}
.tl-angolo {
  position: absolute; top: 0; left: 0;
  width: var(--intestazione-traccia-w, 56px); height: var(--righello-h, 24px);
  background: #141414; z-index: 6;
  border-bottom: 1px solid var(--bordo, rgba(255,255,255,0.08));
  box-sizing: border-box;
}

.tl-tracce {
  position: absolute; top: var(--righello-h, 24px); left: 0; right: 0; bottom: 0;
  will-change: transform;
}
.tl-vuoto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--testo-3, #5C5C60); font-size: 13px; pointer-events: none;
}

.tl-traccia {
  position: relative;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  box-sizing: border-box;
  background: var(--corsia, #1E1E20);
}
.tl-traccia:nth-child(even) { background: var(--corsia-2, #1B1B1D); }
.tl-traccia[data-principale="true"] { background: #222225; }
.tl-traccia.destinazione { box-shadow: inset 0 0 0 1px var(--accento, #1FB8F5); }
.tl-traccia.destinazione.non-valida { box-shadow: inset 0 0 0 1px var(--errore, #FF5A5F); }

.tl-intestazione {
  position: relative; z-index: 2;
  flex: 0 0 var(--intestazione-traccia-w, 56px);
  width: var(--intestazione-traccia-w, 56px);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 2px 3px; box-sizing: border-box;
  background: #19191B;
  border-right: 1px solid var(--bordo, rgba(255,255,255,0.08));
  color: var(--testo-2, #9A9A9E);
  font-size: 10px; line-height: 1.2;
}
.tl-traccia[data-principale="true"] .tl-intestazione { background: #1D1D20; }
.tl-intestazione .tl-int-riga { display: flex; align-items: center; gap: 3px; min-height: 14px; }
.tl-intestazione .tl-int-icona { flex: none; display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; color: var(--testo-2, #9A9A9E); }
.tl-intestazione .tl-int-icona svg { width: 11px; height: 11px; }
.tl-intestazione .tl-int-nome {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--testo, #F2F2F2); cursor: text;
}
.tl-intestazione .tl-int-campo {
  flex: 1 1 auto; min-width: 0; width: 100%;
  height: 16px; padding: 0 2px; box-sizing: border-box;
  border: 1px solid var(--accento, #1FB8F5); border-radius: 3px;
  background: var(--rialzato, #2A2A2D); color: var(--testo, #F2F2F2);
  font: inherit; font-size: 10px; outline: none;
}
.tl-intestazione .tl-int-pulsanti { display: flex; align-items: center; gap: 0; }
.tl-intestazione button.tl-int-btn {
  width: 15px; height: 15px; padding: 0; border: 0; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--testo-3, #5C5C60); cursor: pointer;
}
.tl-intestazione button.tl-int-btn svg { width: 11px; height: 11px; }
.tl-intestazione button.tl-int-btn:hover { background: var(--bordo, rgba(255,255,255,0.08)); color: var(--testo, #F2F2F2); }
.tl-intestazione button.tl-int-btn.attivo { color: var(--accento, #1FB8F5); }

.tl-corsia {
  position: relative; flex: none; height: 100%;
  will-change: transform;
}
.tl-traccia[data-bloccata="true"] .tl-corsia {
  background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,0.03) 10px 20px);
}
.tl-traccia[data-nascosta="true"] .tl-clip { opacity: 0.45; }

.tl-corsia-fantasma {
  position: relative; display: flex; align-items: center; overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.35); box-sizing: border-box;
  background: rgba(31,184,245,0.08);
  outline: 1px dashed var(--accento, #1FB8F5); outline-offset: -1px;
}
.tl-corsia-fantasma .tl-intestazione { color: var(--accento, #1FB8F5); font-size: 9px; text-align: center; padding: 0 2px; }
.tl-corsia-fantasma .tl-fantasma-etichetta {
  margin-left: 12px; color: var(--accento, #1FB8F5); font-size: 11px; white-space: nowrap;
}

/* ---------- clip ------------------------------------------------------------ */

.tl-clip {
  position: absolute; top: 3px; bottom: 3px;
  min-width: 2px;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: grab;
  will-change: transform;
  --fondo-clip: var(--clip-video, #1F2B35);
  --onda-clip: var(--clip-video-onda, #5AA7D6);
}
.tl-clip[data-tipo="immagine"] { --fondo-clip: var(--clip-immagine, #1F2B35); }
.tl-clip[data-tipo="audio"] { --fondo-clip: var(--clip-audio, #1D4F63); --onda-clip: var(--clip-audio-onda, #7CC9E6); }
.tl-clip[data-tipo="testo"] { --fondo-clip: var(--clip-testo, #B4762F); }
.tl-clip-corpo {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4px;
  background: var(--fondo-clip);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.tl-clip.selezionata .tl-clip-corpo, .tl-clip.nel-lazo .tl-clip-corpo { box-shadow: inset 0 0 0 2px var(--selezione, #FFFFFF); }
.tl-clip.nel-lazo:not(.selezionata) .tl-clip-corpo { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.7); }
/* taglio con la maniglia: la clip resta piena (si vede cosa resta), sopra le vicine */
.tl-clip.in-taglio { z-index: 3; cursor: ew-resize; }
.tl-clip.con-transizione { z-index: 2; }
.tl-clip.trascinata { opacity: 0.35; }
/* strato sopra le corsie dove si muove la copia visiva della clip trascinata (le tracce tagliano l'overflow) */
.tl-strato-trascinamento { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.tl-strato-trascinamento:empty { display: none; }
.tl-strato-trascinamento .tl-clip { opacity: 0.95; cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.tl-strato-trascinamento .tl-clip .tl-maniglia { display: none; }
.tl-clip.non-valida .tl-clip-corpo::after {
  content: ""; position: absolute; inset: 0; background: var(--errore, #FF5A5F); opacity: 0.5; pointer-events: none;
}
.tl-clip.tratteggio-sx .tl-clip-corpo::before, .tl-clip.tratteggio-dx .tl-clip-corpo::before {
  content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 0 4px, rgba(0,0,0,0.25) 4px 8px);
}
.tl-clip.tratteggio-sx .tl-clip-corpo::before { left: 0; width: var(--tratteggio-w, 0px); }
.tl-clip.tratteggio-dx .tl-clip-corpo::before { right: 0; width: var(--tratteggio-w, 0px); }

.tl-striscia, .tl-onda {
  position: absolute; left: 0; display: block; pointer-events: none;
}
.tl-striscia { top: 0; }
.tl-onda { bottom: 0; }
.tl-clip-nome {
  position: absolute; top: 0; left: 0; right: 0; height: 16px;
  display: flex; align-items: center; gap: 4px; padding: 0 5px;
  font-size: 11px; line-height: 16px; color: #FFFFFF;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  white-space: nowrap; overflow: hidden; pointer-events: none; z-index: 2;
}
.tl-clip-nome > span:first-child { flex: none; display: inline-flex; }
.tl-clip-nome svg { width: 11px; height: 11px; flex: none; opacity: 0.9; }
/* clip strette: prima sparisce la durata, poi anche nome e icona (resta il colore del tipo) */
.tl-clip.stretta .tl-nome-durata { display: none; }
.tl-clip.strettissima .tl-clip-nome { display: none; }
.tl-clip-nome .tl-nome-testo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-clip-nome .tl-nome-durata { flex: none; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; font-size: 10px; }
.tl-clip[data-tipo="testo"] .tl-clip-nome { background: none; height: 100%; font-weight: 500; }
.tl-copertura {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: repeating-linear-gradient(135deg, rgba(255,90,95,0.25) 0 6px, rgba(0,0,0,0.3) 6px 12px);
  color: var(--errore, #FF5A5F); font-size: 11px; z-index: 3; pointer-events: none;
}
.tl-copertura[hidden] { display: none; }

.tl-maniglia {
  position: absolute; top: 0; bottom: 0; width: 8px; z-index: 4;
  display: none; align-items: center; justify-content: center;
  background: var(--selezione, #FFFFFF); cursor: ew-resize;
}
.tl-maniglia.sx { left: 0; border-radius: 4px 0 0 4px; }
.tl-maniglia.dx { right: 0; border-radius: 0 4px 4px 0; }
.tl-maniglia::before {
  content: ""; width: 3px; height: 10px;
  border-left: 1px solid rgba(0,0,0,0.55); border-right: 1px solid rgba(0,0,0,0.55);
}
.tl-clip.selezionata .tl-maniglia { display: flex; }

.tl-keyframe {
  position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: #FFFFFF; transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
  cursor: pointer; z-index: 5;
}
.tl-keyframe.alla-testina { background: var(--accento, #1FB8F5); }
.tl-keyframe.selezionato { outline: 2px solid var(--accento, #1FB8F5); outline-offset: 1px; }

.tl-transizione {
  position: absolute; top: 25%; height: 50%; left: 100%;
  min-width: 14px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: var(--clip-transizione, #2A2A2D);
  border: 1px solid var(--bordo-forte, rgba(255,255,255,0.16));
  border-radius: 3px; color: var(--testo, #F2F2F2);
  cursor: pointer; z-index: 6;
}
.tl-transizione svg { width: 12px; height: 12px; }
.tl-transizione.selezionata { border-color: var(--selezione, #FFFFFF); box-shadow: 0 0 0 1px var(--selezione, #FFFFFF); }
.tl-transizione-bordo {
  position: absolute; top: 0; bottom: 0; right: -3px; width: 6px; cursor: ew-resize;
}

/* ---------- sovrapposizioni: testina, aggancio, inserimento, lazo ----------- */

.tl-testina {
  position: absolute; top: 0; bottom: 0; width: 0; z-index: 30;
  border-left: 1px solid var(--testina, #FFFFFF);
  margin-left: -0.5px;
  pointer-events: none;
}
.tl-testina-testa {
  position: absolute; top: 0; left: -6px; width: 12px; height: 14px;
  background: var(--testina, #FFFFFF);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  pointer-events: auto; cursor: ew-resize;
}
.tl-aggancio {
  position: absolute; top: 0; bottom: 0; width: 0; z-index: 25;
  border-left: 1px solid var(--aggancio, #38D6F5);
  box-shadow: 0 0 4px var(--aggancio, #38D6F5);
  pointer-events: none;
}
.tl-inserimento {
  position: absolute; width: 2px; margin-left: -1px; z-index: 26;
  background: var(--accento, #1FB8F5);
  box-shadow: 0 0 4px var(--accento, #1FB8F5);
  pointer-events: none;
}
.tl-inserimento::before, .tl-inserimento::after {
  content: ""; position: absolute; left: -3px; width: 8px; height: 3px; background: var(--accento, #1FB8F5);
}
.tl-inserimento::before { top: 0; }
.tl-inserimento::after { bottom: 0; }
.tl-lazo {
  position: absolute; z-index: 27; pointer-events: none;
  border: 1px solid var(--accento, #1FB8F5);
  background: rgba(31,184,245,0.12);
}
.tl-aggancio[hidden], .tl-inserimento[hidden], .tl-lazo[hidden], .tl-testina[hidden] { display: none; }

.tl-corpo.trascinamento-file .tl-tracce { outline: 1px dashed var(--accento, #1FB8F5); outline-offset: -1px; }
/* rettangolo della clip che nascerà dal rilascio di un media */
.tl-anteprima-drop {
  position: absolute; z-index: 24; pointer-events: none; box-sizing: border-box;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--accento, #1FB8F5);
  background: rgba(31,184,245,0.22);
  display: flex; align-items: flex-start;
}
.tl-anteprima-drop.non-valida { border-color: var(--errore, #FF5A5F); background: rgba(255,90,95,0.25); }
.tl-anteprima-drop[hidden] { display: none; }
.tl-anteprima-drop-nome { padding: 1px 5px; font-size: 11px; line-height: 16px; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  #timeline * { transition: none !important; }
}