[x-cloak] { display: none !important; }

/* Waveform : conteneur positionné pour le marqueur highlight */
.waveform { position: relative; }
.hl-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #fbbf24; /* amber-400 */
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.8);
  pointer-events: none;
  z-index: 5;
}
.hl-marker::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #fbbf24;
}

/* Placeholder discret pour les waveforms non encore initialisées */
.waveform:empty {
  background-image: linear-gradient(
    to right,
    rgba(82, 82, 91, 0.25) 0,
    rgba(82, 82, 91, 0.25) 2px,
    transparent 2px,
    transparent 4px
  );
  background-size: 4px 100%;
  border-radius: 4px;
  opacity: 0.5;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }