/* ============================================================
   ELEVEN LABS V4 ULTRA — identidade DOURADA
   ------------------------------------------------------------
   - Card da lateral com gradiente dourado igual aos outros cards
     premium (borda + brilho interno), nos temas escuros e claros.
   - Facho de luz dourado girando na borda.
   - Modal de condições do V4 no mesmo dourado.
   - Contraste reforçado das fontes da lateral nos temas claros.
   - Respeita prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Card do V4 na lateral ---------- */

#nav-v4-section.nav-v4-highlight {
  position: relative;
  isolation: isolate;
  border-radius: 13px;
  padding: 2px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 226, 140, .22), rgba(120, 92, 20, .10) 70%);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, .40),
    0 0 18px rgba(212, 175, 55, .24),
    0 6px 18px rgba(60, 42, 4, .34);
}

/* O facho: cone de luz dourado girando, recortado pela máscara. */
#nav-v4-section.nav-v4-highlight::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(
    from var(--v4-flash-angle, 0deg),
    rgba(212, 175, 55, 0) 0deg,
    rgba(212, 175, 55, 0) 196deg,
    rgba(230, 196, 96, .55) 268deg,
    #e8c86a 316deg,
    #fff6d0 344deg,
    #fffdf2 356deg,
    #ffe9a3 360deg,
    rgba(212, 175, 55, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: v4-flash-spin 3.2s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 220, 130, .85));
}

/* Brilho dourado interno, atrás do texto. */
#nav-v4-section.nav-v4-highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255, 226, 140, .20), transparent 68%),
    linear-gradient(135deg, #2a2110 0%, #1b1610 48%, #241b0c 100%);
  pointer-events: none;
}

/* O miolo do card: gradiente dourado (mesmo desenho dos cards premium). */
#nav-v4-section.nav-v4-highlight > .nav-section-toggle {
  position: relative;
  z-index: 1;
  min-height: 62px;
  border-radius: 11px !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(142deg, rgba(58, 44, 12, .96), rgba(28, 23, 12, .98) 52%, rgba(138, 105, 24, .55)) padding-box,
    linear-gradient(118deg, #fff6d0 0%, #f2d27a 18%, #d4af37 38%, #fffbe8 52%, #b8860b 72%, #ffeaa7 88%, #fff6d0 100%) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, .22),
    inset 3px 0 0 #d4af37,
    0 8px 22px rgba(120, 92, 20, .34) !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

#nav-v4-section.nav-v4-highlight > .nav-section-toggle:hover {
  transform: translateX(2px);
  background:
    linear-gradient(142deg, rgba(78, 59, 16, .98), rgba(36, 29, 14, .99) 50%, rgba(168, 129, 32, .62)) padding-box,
    linear-gradient(118deg, #fffbe8 0%, #ffd97a 20%, #e0bb4a 40%, #fffdf2 55%, #c9961a 74%, #ffefb8 90%, #fffbe8 100%) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, .34),
    inset 4px 0 0 #ffd97a,
    0 10px 26px rgba(150, 112, 16, .42),
    0 0 16px rgba(246, 230, 168, .38) !important;
}

/* Texto do card no escuro: dourado claro, alto contraste. */
#nav-v4-section.nav-v4-highlight .nav-section-name { color: #ffeab0 !important; }
#nav-v4-section.nav-v4-highlight .nav-quality-subline { color: #ffdf8a !important; }
#nav-v4-section.nav-v4-highlight .nav-provider-dot {
  background: linear-gradient(135deg, #fff6d0, #d4af37) !important;
}
#nav-v4-section.nav-v4-highlight .nav-toggle-icon { color: #f0d68a !important; }
#nav-v4-section.nav-v4-highlight .nav-item { color: #f6e6c0 !important; }
#nav-v4-section.nav-v4-highlight .nav-item:hover { color: #fffdf2 !important; }

/* ---- Tema claro: mesmo dourado, com texto escuro para leitura ---- */
body[data-design="arctic"] #nav-v4-section.nav-v4-highlight,
body.light-theme #nav-v4-section.nav-v4-highlight {
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 232, 160, .40), rgba(212, 175, 55, .12) 72%);
  box-shadow: 0 0 0 1px rgba(178, 142, 32, .40), 0 6px 18px rgba(120, 92, 12, .20);
}

body[data-design="arctic"] #nav-v4-section.nav-v4-highlight > .nav-section-toggle,
body.light-theme #nav-v4-section.nav-v4-highlight > .nav-section-toggle {
  background:
    linear-gradient(142deg, rgba(255, 252, 240, .99), rgba(253, 246, 226, .96) 52%, rgba(240, 206, 116, .62)) padding-box,
    linear-gradient(118deg, #ffffff 0%, #f0d27a 20%, #c9a227 40%, #fffdf2 55%, #b8860b 74%, #ffeaa7 90%, #ffffff 100%) border-box !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 3px 0 0 #d4af37,
    0 8px 20px rgba(150, 112, 16, .20) !important;
}

body[data-design="arctic"] #nav-v4-section.nav-v4-highlight > .nav-section-toggle:hover,
body.light-theme #nav-v4-section.nav-v4-highlight > .nav-section-toggle:hover {
  background:
    linear-gradient(142deg, #fffdf2, rgba(255, 246, 216, .98) 50%, rgba(246, 214, 122, .72)) padding-box,
    linear-gradient(118deg, #ffffff 0%, #ffdf8a 22%, #b8860b 42%, #fffdf2 58%, #c9961a 76%, #ffefb8 92%, #ffffff 100%) border-box !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 4px 0 0 #b8860b,
    0 10px 24px rgba(150, 112, 16, .26) !important;
}

body[data-design="arctic"] #nav-v4-section.nav-v4-highlight .nav-section-name,
body.light-theme #nav-v4-section.nav-v4-highlight .nav-section-name {
  color: #3a2b06 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
body[data-design="arctic"] #nav-v4-section.nav-v4-highlight .nav-quality-subline,
body.light-theme #nav-v4-section.nav-v4-highlight .nav-quality-subline {
  color: #7a5c0a !important;
}
body[data-design="arctic"] #nav-v4-section.nav-v4-highlight .nav-toggle-icon,
body.light-theme #nav-v4-section.nav-v4-highlight .nav-toggle-icon { color: #8a6a10 !important; }
body[data-design="arctic"] #nav-v4-section.nav-v4-highlight .nav-item,
body.light-theme #nav-v4-section.nav-v4-highlight .nav-item { color: #4a3608 !important; }

/* Rosa metálico: dourado continua, só que mais quente. */
body[data-design="arctic"][data-gradient="metallic-pink"] #nav-v4-section.nav-v4-highlight > .nav-section-toggle {
  background:
    linear-gradient(142deg, rgba(255, 253, 247, .99), rgba(255, 246, 228, .96) 52%, rgba(244, 210, 140, .6)) padding-box,
    linear-gradient(118deg, #fff 0%, #f3cd76 20%, #c08a2a 40%, #fffdf6 55%, #a86f12 74%, #ffe6a6 90%, #fff 100%) border-box !important;
}

@property --v4-flash-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes v4-flash-spin {
  to { --v4-flash-angle: 360deg; }
}

/* Fallback para navegadores sem conic-gradient com @property. */
@supports not (background: conic-gradient(from var(--v4-flash-angle), red, blue)) {
  #nav-v4-section.nav-v4-highlight::before {
    animation: none;
    background: conic-gradient(from 0deg, rgba(212,175,55,0) 0deg, #e8c86a 300deg, #fffdf2 356deg, rgba(212,175,55,0) 360deg);
  }
  #nav-v4-section.nav-v4-highlight { animation: v4-border-pulse 3.2s ease-in-out infinite; }
  @keyframes v4-border-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,55,.34), 0 0 12px rgba(212,175,55,.18); }
    50%      { box-shadow: 0 0 0 1.5px rgba(246,230,168,.75), 0 0 26px rgba(212,175,55,.5); }
  }
}

/* ---------- 2. Badge BETA dourado ---------- */

.nav-beta-badge {
  margin-left: auto;
  margin-right: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff2c0 0%, #e5c460 40%, #d4af37 70%, #f7e7ae 100%);
  color: #241a02;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(255, 248, 220, .8);
  box-shadow: 0 2px 10px rgba(212, 175, 55, .6);
  animation: beta-badge-glow 2.6s ease-in-out infinite;
}

@keyframes beta-badge-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(212, 175, 55, .42); }
  50%      { box-shadow: 0 2px 18px rgba(246, 230, 168, .95); }
}

#nav-v4-section .nav-toggle-icon { flex-shrink: 0; }

/* ---------- 3. Modal de condições do V4 (dourado) ---------- */

#v4-modal .v4-terms {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(155deg, #fffdf6, #fdf4dd 52%, #f7e6b8) padding-box,
    linear-gradient(120deg, #ffffff 0%, #f0d27a 22%, #c9a227 44%, #fffdf2 60%, #b8860b 78%, #ffeaa7 92%, #ffffff 100%) border-box !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 22px 60px rgba(90, 66, 8, .28),
    0 0 0 1px rgba(212, 175, 55, .28) !important;
  color: #2a2415 !important;
}

/* Cabeçalho */
#v4-modal .v4-terms > header > p {
  color: #8a6a10 !important;
  font-weight: 900 !important;
}
#v4-modal .v4-terms > header h3 { color: #241d0c !important; }

/* Caixa de promoção: dourada, não verde. */
#v4-modal .v4-terms > div[style*="rgba(34,197,94"] {
  background: linear-gradient(120deg, rgba(255, 246, 216, .96), rgba(246, 222, 150, .62)) !important;
  border: 1px solid rgba(184, 134, 11, .42) !important;
}
#v4-modal #v4-promo-label {
  color: #6f5209 !important;
  font-weight: 900 !important;
}
body:not([data-design="arctic"]):not(.light-theme) #v4-modal #v4-promo-label {
  color: #ffe9a3 !important;
}
#v4-modal .v4-terms > div[style*="rgba(34,197,94"] div { color: #3a2f10 !important; }
#v4-modal .v4-terms > div[style*="rgba(34,197,94"] b { color: #241d0c !important; }

/* Caixa de resumo: dourada, não lilás. */
#v4-modal .v4-terms > div[style*="rgba(139,92,246"] {
  background: linear-gradient(140deg, rgba(255, 250, 235, .98), rgba(248, 232, 184, .70)) !important;
  border: 1px solid rgba(184, 134, 11, .34) !important;
}
#v4-modal .v4-terms > div[style*="rgba(139,92,246"] div { color: #3f3413 !important; }
#v4-modal .v4-terms > div[style*="rgba(139,92,246"] strong { color: #241d0c !important; }
#v4-modal #v4-modal-credits { color: #7a5c0a !important; }
#v4-modal #v4-modal-save { color: #15803d !important; }

/* Aviso de retenção e texto do aceite */
#v4-modal .v4-terms > div[style*="opacity:.82"] { color: #3f3413 !important; }
#v4-modal .v4-terms label[for="v4-accept"] { color: #2a2415 !important; }
#v4-modal #v4-accept { accent-color: #b8860b !important; }
#v4-modal #v4-accept:focus-visible { outline: 3px solid #b8860b !important; outline-offset: 2px; }

/* Botão principal dourado (mesmo quando liberado).
   O seletor precisa vencer `.btn-primary` do tema, por isso o encadeamento
   com o modal e o fundo do corpo. */
#v4-modal .modal-content #v4-modal-confirm:not(:disabled),
body #v4-modal #v4-modal-confirm:not(:disabled),
body[data-design="arctic"] #v4-modal #v4-modal-confirm:not(:disabled) {
  background: linear-gradient(135deg, #fff2c0 0%, #e5c460 42%, #c9a227 74%, #f7e7ae 100%) !important;
  color: #241a02 !important;
  -webkit-text-fill-color: #241a02 !important;
  border: 1px solid rgba(255, 248, 220, .9) !important;
  box-shadow: 0 6px 18px rgba(184, 134, 11, .38) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
#v4-modal #v4-modal-confirm:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: grayscale(.55);
  box-shadow: none !important;
}

/* Tema escuro: modal dourado sobre fundo escuro, texto claro. */
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms {
  background:
    linear-gradient(155deg, rgba(44, 35, 14, .98), rgba(24, 20, 12, .99) 55%, rgba(96, 73, 14, .55)) padding-box,
    linear-gradient(120deg, #fff6d0 0%, #f0d27a 20%, #d4af37 40%, #fffdf2 56%, #b8860b 76%, #ffeaa7 92%, #fff6d0 100%) border-box !important;
  color: #f7ecd2 !important;
}
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > header h3 { color: #fff6d8 !important; }
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > header > p { color: #ffdf8a !important; }
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > div[style*="rgba(34,197,94"] {
  background: linear-gradient(120deg, rgba(90, 70, 16, .72), rgba(52, 42, 16, .82)) !important;
  border-color: rgba(240, 210, 122, .44) !important;
}
body:not([data-design="arctic"]):not(.light-theme) #v4-modal #v4-promo-label { color: #ffe9a3 !important; }
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > div[style*="rgba(34,197,94"] div,
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > div[style*="rgba(34,197,94"] b { color: #fff6dc !important; }
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > div[style*="rgba(139,92,246"] {
  background: linear-gradient(140deg, rgba(74, 58, 18, .78), rgba(42, 34, 14, .86)) !important;
  border-color: rgba(240, 210, 122, .34) !important;
}
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > div[style*="rgba(139,92,246"] div,
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > div[style*="rgba(139,92,246"] strong { color: #fff6dc !important; }
body:not([data-design="arctic"]):not(.light-theme) #v4-modal #v4-modal-credits { color: #ffdf8a !important; }
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms > div[style*="opacity:.82"],
body:not([data-design="arctic"]):not(.light-theme) #v4-modal .v4-terms label[for="v4-accept"] { color: #f7ecd2 !important; }

/* ---------- 4. Contraste das fontes da lateral nos temas claros ---------- */

body[data-design="arctic"] .sidebar .nav-section-name { color: #1f2a33 !important; }
body[data-design="arctic"] .sidebar .nav-section-toggle { color: #2b3742 !important; }
body[data-design="arctic"] .sidebar .nav-item { color: #2f3b47 !important; }
body[data-design="arctic"] .sidebar .nav-item:hover,
body[data-design="arctic"] .sidebar .nav-section-toggle:hover { color: #101820 !important; }
body[data-design="arctic"] .sidebar .nav-section-title { color: #4a5a68 !important; }
body[data-design="arctic"] .sidebar .nav-section-title .material-icons-round { color: #5a6b7a !important; }
body[data-design="arctic"] .sidebar .nav-item.active { color: #0d1319 !important; }

/* O sublinhado de qualidade precisa de cor própria por motor. */
body[data-design="arctic"] .sidebar .nav-quality-subline { color: var(--quality-ink, #4a5a68) !important; }

/* Rosa metálico: tinta vinho escura em vez de cinza. */
body[data-design="arctic"][data-gradient="metallic-pink"] .sidebar .nav-section-name { color: #3d1526 !important; }
body[data-design="arctic"][data-gradient="metallic-pink"] .sidebar .nav-section-toggle { color: #4a2133 !important; }
body[data-design="arctic"][data-gradient="metallic-pink"] .sidebar .nav-item { color: #4f2637 !important; }
body[data-design="arctic"][data-gradient="metallic-pink"] .sidebar .nav-section-title { color: #6b3a4d !important; }

/* ---------- 5. Separadores entre grupos ---------- */

.nav-group-sep {
  height: 3px;
  margin: 13px 4px 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .82) 12%, rgba(226, 232, 240, .98) 50%, rgba(148, 163, 184, .82) 88%, transparent);
  box-shadow: 0 0 8px rgba(148, 163, 184, .35);
}

body[data-design="arctic"] .nav-group-sep {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(62, 82, 102, .55) 12%, rgba(28, 44, 60, .82) 50%, rgba(62, 82, 102, .55) 88%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95);
}

body[data-design="arctic"][data-gradient="metallic-pink"] .nav-group-sep {
  background: linear-gradient(90deg, transparent, rgba(128, 66, 91, .30) 18%, rgba(128, 66, 91, .30) 82%, transparent);
}

/* O primeiro separador nasce logo abaixo do grupo Eleven Labs: dourado. */
.nav-group-sep-gold,
.nav-group-sep:first-of-type {
  background: linear-gradient(90deg, transparent, rgba(184, 134, 11, .55) 14%, rgba(246, 230, 168, .95) 50%, rgba(184, 134, 11, .55) 86%, transparent);
  box-shadow: 0 0 10px rgba(212, 175, 55, .35);
}

@media (max-width: 420px) {
  .nav-beta-badge { font-size: .55rem; padding: 2px 7px; }
}

/* Acessibilidade: sem animação para quem pediu movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
  #nav-v4-section.nav-v4-highlight::before {
    animation: none;
    background: conic-gradient(from 300deg, #e8c86a, #fff6d0, #d4af37, #e8c86a);
  }
  .nav-beta-badge { animation: none; }
  #nav-v4-section.nav-v4-highlight > .nav-section-toggle,
  #nav-v4-section.nav-v4-highlight > .nav-section-toggle:hover { transform: none; }
}