/* ══════════════════════════════════════════════════════════════
   Lightshow Editor — styles propres à la timeline et à la preview voiture
   (glass.css fournit les surfaces/boutons génériques, on ne redéfinit ici
   que ce qui est spécifique à l'édition de séquence).
   ══════════════════════════════════════════════════════════════ */

:root {
    --track-blinker: #ffb84d;
    --track-position: #8ec9ff;
    --track-stop: #ff4d4d;
}

#zoom-slider, #project-select, #seg-intensity { accent-color: #ffb84d; }
:root { --pulse-ms: 30; }

/* ── Timeline : zone scrollable horizontale unique (waveform + pistes + règle
   défilent ensemble, un seul scrollbar natif) ─────────────────────────── */
#timeline-scroll {
    position: relative;
    padding: 0;
}
#timeline-content {
    min-width: 100%;
}
#waveform {
    height: 84px;
}
#timeline-ruler {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ruler-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: translateX(-1px);
    border-left: 1px solid rgba(255,255,255,0.08);
    padding-left: 4px;
}

#selection-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.05);
    border-left: 1px dashed rgba(255,255,255,0.45);
    border-right: 1px dashed rgba(255,255,255,0.45);
    pointer-events: none;
    z-index: 15;
}

#timeline-ruler { cursor: crosshair; }

#autoscroll-toggle-btn.active,
#snap-toggle-btn.active {
    background: rgba(255,184,77,0.18);
    border-color: rgba(255,184,77,0.4);
    color: #ffb84d;
}

.timeline-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffb84d;
    box-shadow: 0 0 8px rgba(255,184,77,0.8);
    pointer-events: none;
    z-index: 30;
    left: 0;
}

/* ── Pistes ───────────────────────────────────────────────────────────── */
.track-row {
    position: relative;
    height: 56px;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.025);
    background-repeat: repeat;
    border: 1px solid rgba(255,255,255,0.06);
    touch-action: none;
    user-select: none;
    cursor: crosshair;
    transition: border-color .12s ease;
}
.track-row:hover { border-color: rgba(255,255,255,0.16); }
/* Cible de collage : une autre piste survolée pendant qu'un élément est dans
   le presse-papiers (Ctrl+V y collera au lieu de la piste d'origine). */
.track-row.paste-target {
    border-color: rgba(255,184,77,0.55);
    box-shadow: 0 0 0 1px rgba(255,184,77,0.3) inset;
}

.track-segment {
    --intensity: 100;
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 8px;
    cursor: grab;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
    /* Intensité 5-100% -> opacité de repos ~0.33-1 ; le fondu entrée/sortie est
       rendu séparément via un masque en dégradé (positionSegEl), indépendant
       de cette opacité pour que les deux effets restent lisibles ensemble. */
    opacity: calc(0.3 + 0.007 * var(--intensity));
    transition: opacity .12s ease;
}
.track-segment:hover { opacity: 1; }
.track-segment.dragging { cursor: grabbing; opacity: 1; z-index: 10; }
.track-segment.selected {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255,255,255,0.5);
    z-index: 8;
}
.track-segment.ghost { opacity: 0.4; pointer-events: none; border: 1px dashed rgba(255,255,255,0.5); }

.track-segment .seg-handle {
    position: absolute;
    top: 0; bottom: 0;
    width: 10px;
    cursor: ew-resize;
}
.track-segment .seg-handle.left { left: -4px; }
.track-segment .seg-handle.right { right: -4px; }

.track-segment .seg-delete {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a1c22;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    font-size: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}
.track-segment:hover .seg-delete { display: flex; }
.track-segment .seg-delete:hover { background: #ff4d4d; color: #fff; border-color: #ff4d4d; }

.track-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    padding: 0 2px 3px;
}

/* ── Légende des pistes (sidebar) ────────────────────────────────────── */
.legend-row { display: flex; align-items: center; gap: 10px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.blink-toggle-btn.active { background: rgba(255,184,77,0.18); border-color: rgba(255,184,77,0.4); color: #ffb84d; }

/* ── Preview voiture ──────────────────────────────────────────────────── */
#car-preview-wrap svg { width: 100%; max-width: 220px; height: auto; }

/* --level est ici 0 OU 1 (impulsion relais réelle allumée/éteinte, voir
   pulseStateAt côté éditeur), pas un niveau continu : la durée de transition
   est calée sur --pulse-ms (durée d'impulsion réglée dans la barre d'outils)
   pour simuler l'inertie thermique de l'ampoule qui lisse un clignotement
   rapide en une luminosité perçue continue, sans faire semblant côté données
   (l'export contient bien les impulsions littérales). */
.lamp {
    --level: 0;
    transition: opacity calc(var(--pulse-ms, 30) * 1ms) linear, filter calc(var(--pulse-ms, 30) * 1ms) linear;
    opacity: calc(0.22 + 0.78 * var(--level));
}
.lamp.lamp-amber { fill: #ffb84d; filter: drop-shadow(0 0 calc(7px * var(--level)) #ffb84d); }
.lamp.lamp-white { fill: #cfe6ff; filter: drop-shadow(0 0 calc(6px * var(--level)) #8ec9ff); }
.lamp.lamp-red   { fill: #ff3b3b; filter: drop-shadow(0 0 calc(7px * var(--level)) #ff2020); }