/* ============================================================
   Destaque do "Eleven Labs V4 Ultra" na barra lateral
   ------------------------------------------------------------
   - Facho de luz DOURADO, mais espesso, girando na borda do card.
   - Badge BETA dourado.
   - Respeita prefers-reduced-motion (sem giro; borda estática dourada).
   ============================================================ */

#nav-v4-section.nav-v4-highlight {
  position: relative;
  isolation: isolate;
  border-radius: 13px;
  padding: 2px;                      /* espessura do facho (mais grosso) */
  background: rgba(212, 175, 55, .20);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, .38),
    0 0 18px rgba(212, 175, 55, .22),
    0 6px 18px rgba(60, 42, 4, .34);
}

/* O facho: cone de luz dourado girando. A máscara de dois gradientes
   recorta o miolo, então a luz aparece só na moldura. */
#nav-v4-section.nav-v4-highlight::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 3px;                      /* espessura do traço de luz */
  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 suave por dentro (não atrapalha a leitura). */
#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(212, 175, 55, .22), transparent 68%);
  pointer-events: none;
}

@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); }
  }
}

/* O botão fica opaco para a luz aparecer só na moldura. */
#nav-v4-section.nav-v4-highlight > .nav-section-toggle {
  background: var(--bg-secondary, #16121f);
  border-radius: 11px;
  position: relative;
  z-index: 1;
  transition: background .18s ease;
}

#nav-v4-section.nav-v4-highlight > .nav-section-toggle:hover {
  background: color-mix(in srgb, var(--bg-secondary, #16121f) 84%, #d4af37);
}

/* Tema claro: fundo claro para o texto continuar legível. */
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: #ffffff;
  color: #2b2415;
}
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: #fdf7e4;
}
body[data-design="arctic"] #nav-v4-section.nav-v4-highlight,
body.light-theme #nav-v4-section.nav-v4-highlight {
  background: rgba(212, 175, 55, .14);
  box-shadow: 0 0 0 1px rgba(178, 142, 32, .42), 0 4px 14px rgba(120, 92, 12, .16);
}

/* ---- Badge BETA (dourado, alto contraste) ---- */
.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; }

@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; }
}