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

/* Waveform decorativa (substituível por wavesurfer.js no futuro) */
.msvfx-waveform {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(148, 163, 184, .55) 0px,
    rgba(148, 163, 184, .55) 2px,
    transparent 2px,
    transparent 5px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
}
.dark .msvfx-waveform {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(148, 163, 184, .35) 0px,
    rgba(148, 163, 184, .35) 2px,
    transparent 2px,
    transparent 5px
  );
}

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

.msvfx-stars i { font-size: 13px; }

/* Scrollbar discreta na sidebar */
aside::-webkit-scrollbar { width: 5px; }
aside::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 4px; }
aside::-webkit-scrollbar-track { background: transparent; }

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Remove ícones/decorações nativas de input, que competiam com nosso ícone custom. */
.msvfx-search-input {
  -webkit-appearance: none;
  appearance: none;
}
.msvfx-search-input::-webkit-search-decoration,
.msvfx-search-input::-webkit-search-cancel-button,
.msvfx-search-input::-webkit-search-results-button,
.msvfx-search-input::-webkit-search-results-decoration {
  display: none;
}

/* Campo de busca do header — regras explícitas, não dependem só do
   utilitário Tailwind, para garantir o espaçamento mesmo se algo mais
   na página interferir na geração de classes em tempo de execução. */
.msvfx-search-wrap {
  position: relative;
}
.msvfx-search-wrap .msvfx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  z-index: 1;
}
.msvfx-search-input {
  padding-left: 44px !important;
  box-sizing: border-box;
}

/* ===================== Identidade visual (Configurações > Aparência) =====================
   Classes que leem as variáveis CSS injetadas pelo layout, em vez de cor fixa.
   Trocar a cor no admin muda tudo que usa essas classes, em qualquer tela. */

.msvfx-bg-primary { background-color: var(--msvfx-primary); }
.msvfx-bg-primary:hover { filter: brightness(0.92); }

.msvfx-text-primary-color { color: var(--msvfx-primary); }

.msvfx-text-link { color: var(--msvfx-link); }
.msvfx-text-link:hover { filter: brightness(0.85); }

.msvfx-bg-primary-tint {
  background-color: color-mix(in srgb, var(--msvfx-primary) 10%, white);
}
.msvfx-text-on-tint { color: var(--msvfx-primary); }

.msvfx-bg-sidebar { background-color: var(--msvfx-sidebar-bg); }
.msvfx-bg-header  { background-color: var(--msvfx-header-bg); }
.msvfx-bg-card    { background-color: var(--msvfx-card-bg); }

.msvfx-text { color: var(--msvfx-text); }

/* Navegadores muito antigos sem suporte a color-mix(): cai num roxo claro fixo. */
@supports not (background-color: color-mix(in srgb, red 10%, white)) {
  .msvfx-bg-primary-tint { background-color: #f5f3ff; }
}

/* Modo escuro: ajusta a waveform decorativa (a versão clara já existe acima). */
html[data-msvfx-theme="dark"] .msvfx-waveform {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(148, 163, 184, .35) 0px,
    rgba(148, 163, 184, .35) 2px,
    transparent 2px,
    transparent 5px
  );
}