/*
 * `hidden` controla lógica (abas do painel, prévias, avisos), então é definido
 * aqui também — assim continua funcionando mesmo se o CDN do Tailwind falhar.
 */
.hidden { display: none !important; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* Barras do equalizador do player — animam apenas quando está tocando. */
.eq-bar {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  height: 6px;
  transform-origin: center;
}
.is-playing .eq-bar {
  animation: eq-pulse 900ms ease-in-out infinite;
}

/* O atraso de cada barra vem daqui, e não de um atributo style inline —
   assim a política de segurança da página pode proibir estilo inline. */
.eq-bar:nth-child(1)  { animation-delay: 0ms; }
.eq-bar:nth-child(2)  { animation-delay: 90ms; }
.eq-bar:nth-child(3)  { animation-delay: 180ms; }
.eq-bar:nth-child(4)  { animation-delay: 270ms; }
.eq-bar:nth-child(5)  { animation-delay: 360ms; }
.eq-bar:nth-child(6)  { animation-delay: 450ms; }
.eq-bar:nth-child(7)  { animation-delay: 540ms; }
.eq-bar:nth-child(8)  { animation-delay: 630ms; }
.eq-bar:nth-child(9)  { animation-delay: 720ms; }
.eq-bar:nth-child(10) { animation-delay: 810ms; }
.eq-bar:nth-child(11) { animation-delay: 900ms; }
.eq-bar:nth-child(12) { animation-delay: 990ms; }
@keyframes eq-pulse {
  0%, 100% { height: 6px; opacity: 0.5; }
  50%      { height: 22px; opacity: 1; }
}

/* Slider de volume com a mesma linguagem visual dos botões. */
input[type='range'].volume {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: #c4c7c7;
  cursor: pointer;
}
input[type='range'].volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #000;
}
input[type='range'].volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 999px;
  background: #000;
}

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}