/* 🔵 Estilo da bolha */
.voice-bubble {
  position: fixed;
  bottom: 80px;
  right: 40px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at top left, #6a11cb, #2575fc);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(106, 17, 203, 0.6);
  animation: pulse 2s infinite;
  z-index: 9999;
  cursor: pointer;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(106,17,203,.6); }
  50% { transform: scale(1.05); box-shadow: 0 0 35px rgba(37,117,252,.7); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(106,17,203,.6); }
}

/* Barras de som */
.led-container {
  display: flex;
  gap: 3px;
}

.led-container span {
  width: 4px;
  height: 15px;
  background: #fff;
  border-radius: 2px;
  animation: sound 1.2s infinite ease-in-out;
}

.led-container span:nth-child(1) { animation-delay: 0s; }
.led-container span:nth-child(2) { animation-delay: 0.2s; }
.led-container span:nth-child(3) { animation-delay: 0.4s; }
.led-container span:nth-child(4) { animation-delay: 0.6s; }
.led-container span:nth-child(5) { animation-delay: 0.8s; }

@keyframes sound {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.2); }
}

/* Tooltip de alerta */
.voice-alert {
  position: absolute;
  bottom: 100%;
  right: 50%;
  transform: translateX(50%);
  background: #111;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  margin-bottom: 10px;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hidden { display: none; }

/* bolha base */
.voice-bubble{
  position: fixed; right: 32px; bottom: 88px;
  width: 76px; height: 76px; border-radius: 999px;
  background: radial-gradient(120% 120% at 10% 10%, #6a11cb 0%, #2575fc 60%, #1b2440 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(37,117,252,.35), inset 0 0 22px rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  z-index: 9999;
  transform: scale(.92); opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  animation: vb-pulse 2.2s ease-in-out infinite;
}
@keyframes vb-pulse{
  0%,100%{ box-shadow: 0 12px 40px rgba(37,117,252,.35), inset 0 0 22px rgba(255,255,255,.15);}
  50%{    box-shadow: 0 18px 56px rgba(106,17,203,.45), inset 0 0 26px rgba(255,255,255,.22);}
}

/* estado visível controlado via JS */
.voice-bubble.is-visible{ opacity: 1; transform: scale(1); pointer-events: auto; }

/* leds */
.led-container{ display:flex; gap:4px; }
.led-container span{
  width: 5px; height: 16px; background:#fff; border-radius:3px;
  animation: vb-sound 1.15s infinite ease-in-out;
  transform-origin: bottom center; opacity:.95;
}
.led-container span:nth-child(1){ animation-delay:0s }
.led-container span:nth-child(2){ animation-delay:.15s }
.led-container span:nth-child(3){ animation-delay:.3s }
.led-container span:nth-child(4){ animation-delay:.45s }
.led-container span:nth-child(5){ animation-delay:.6s }

@keyframes vb-sound{
  0%,100%{ transform: scaleY(.45) }
  50%{ transform: scaleY(1.35) }
}

/* alerta */
.voice-alert{
  position: absolute; bottom: 100%; right: 50%; transform: translateX(50%);
  margin-bottom: 12px; background: rgba(17,17,17,.92); color:#fff;
  padding: 6px 10px; border-radius: 8px; font-size: 12.5px; line-height:1;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  animation: vb-blink 1.6s infinite;
  white-space: nowrap;
}
@keyframes vb-blink{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* responsivo */
@media (max-width: 768px){
  .voice-bubble{ right: 18px; bottom: 72px; width:68px; height:68px; }
}

/* ===== Agent Voice HUD (central) ===== */
.av-hud{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2147483647;          /* acima de tudo */
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.av-hud.is-visible{ opacity: 1; pointer-events: auto; }

.av-hud-card{
  position: relative;
  width: clamp(320px, 42vw, 520px);
  height: 96px;
  border-radius: 18px;
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: rgba(12,16,24,.66);             /* vidro escuro translúcido */
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 70px rgba(18,20,38,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  transform: scale(.92);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.av-hud.is-visible .av-hud-card{ transform: scale(1); }

/* Moldura holográfica via SVG (confiável em Chrome/Edge/Firefox/Safari) */
.av-hud-frame{
  position: absolute; inset: -6px;   /* folga para a borda brilhar */
  width: calc(100% + 12px); height: calc(100% + 12px);
  pointer-events: none;
}
.av-frame-stroke{
  stroke-dasharray: 6 10;            /* “pontos” correndo */
  animation: av-dash 2.4s linear infinite, av-hue 8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(124,30,255,.45));
}
@keyframes av-dash{ to{ stroke-dashoffset: -200; } }
@keyframes av-hue{
  0%{ filter: drop-shadow(0 0 12px rgba(124,30,255,.45)) }
  50%{ filter: drop-shadow(0 0 12px rgba(0,245,212,.45)) }
  100%{ filter: drop-shadow(0 0 12px rgba(124,30,255,.45)) }
}

/* LEDs coloridos */
.av-eq, .eq--pill{
  display:flex; align-items:flex-end; gap:6px; height:56px;
  filter: drop-shadow(0 0 10px rgba(124,30,255,.45));
}
.av-eq span, .eq--pill span{
  width:7px; border-radius:5px;
  background: linear-gradient(180deg, #00F5D4 0%, #7C1EFF 100%);
  animation: av-bounce 1.15s ease-in-out infinite, av-hue-rotate 8s linear infinite;
  transform-origin: bottom;
}
.av-eq span:nth-child(1), .eq--pill span:nth-child(1){ height:22%; animation-delay:0s }
.av-eq span:nth-child(2), .eq--pill span:nth-child(2){ height:35%; animation-delay:.1s }
.av-eq span:nth-child(3), .eq--pill span:nth-child(3){ height:48%; animation-delay:.2s }
.av-eq span:nth-child(4), .eq--pill span:nth-child(4){ height:30%; animation-delay:.3s }
.av-eq span:nth-child(5), .eq--pill span:nth-child(5){ height:55%; animation-delay:.4s }
.av-eq span:nth-child(6), .eq--pill span:nth-child(6){ height:38%; animation-delay:.5s }
.av-eq span:nth-child(7), .eq--pill span:nth-child(7){ height:62%; animation-delay:.6s }
.av-eq span:nth-child(8), .eq--pill span:nth-child(8){ height:26%; animation-delay:.7s }

@keyframes av-bounce{ 0%,100%{ transform: scaleY(.45) } 50%{ transform: scaleY(1.6) } }
@keyframes av-hue-rotate{ from{ filter:hue-rotate(0deg) } to{ filter:hue-rotate(360deg) } }

.av-text{
  color:#fff; font-size:14.5px; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* ===== LEDs dentro do botão da barra (mantém seu pill intacto) ===== */
#agent-voice-pill.voice-pill--eq{
  display:flex !important; align-items:center; justify-content:center;
  gap:8px; min-width: 140px; white-space:nowrap;
}
#agent-voice-pill.voice-pill--eq .eq--pill{
  height:22px; gap:4px; filter: drop-shadow(0 0 6px rgba(124,30,255,.35));
}
#agent-voice-pill.voice-pill--eq .eq--pill span{ width:5px; border-radius:3px; }

/* motion safe */
@media (prefers-reduced-motion: reduce){
  .av-hud, .av-hud-card{ transition:none !important }
  .av-eq span, .eq--pill span{ animation-duration:1.6s }
}

/* ===== HUD central circular com ondas ===== */
/* container base do HUD */
.av-hud{
  position: fixed; inset: 0; z-index: 2147483647;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.av-hud.is-visible{ opacity:1; pointer-events:auto; }

/* anel oco: sem fundo, sem blur interno, só as linhas */
.av-hud-card--ring.av-hud-card--clean{
  width: clamp(240px, 28vw, 320px);
  height: clamp(240px, 28vw, 320px);
  border-radius: 9999px;
  padding: 0; overflow: visible;
  background: transparent;         /* << remove qualquer fundo */
  backdrop-filter: none;
  box-shadow: none;                 /* << sem sombra sólida */
  animation: av-levitate 3.2s ease-in-out infinite;
}
@keyframes av-levitate{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }

.av-waves{ width:100%; height:100%; display:block }
.av-wave{ fill:none; stroke-linecap:round; stroke-linejoin:round }