/* Botão e janela de voz da Funil.ai.
   O widget da GHL continua rodando (ele precisa estar visível para funcionar),
   mas fica atrás da nossa janela, que o cobre por inteiro. */

chat-widget{
  /* prende o widget num contexto de empilhamento nosso: sem isto, a janela
     interna dele usa um z-index altíssimo e passa por cima da nossa */
  position:relative !important;
  isolation:isolate !important;
  z-index:9990 !important;
  --chat-widget-width:320px;
  --chat-widget-height:540px;
  --chat-widget-max-height:540px;
  --chat-widget-branding-max-height:540px;
}
/* a bolha deles é apagada por dentro do shadow DOM, pelo _voz.js: daqui de
   fora não se alcança. O host fica sempre visível porque o widget se recusa a
   desenhar escondido. */

/* ---------------- a esfera que convida ---------------- */

.voz-flutua{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px);
  z-index:9998; display:flex; align-items:center; gap:12px;
  font-family:var(--font-corpo,'Inter',sans-serif);
  transition:opacity .25s ease;
}
.voz-flutua[hidden]{display:none}
.voz-flutua[data-ativo="1"]{opacity:0; pointer-events:none}

.voz-selo{
  background:#fff; color:var(--preto,#0A0A0B);
  border:1px solid var(--border,#E4E1DA); border-radius:9999px;
  padding:10px 18px; font-size:.9375rem; font-weight:600; white-space:nowrap;
  box-shadow:0 4px 18px -8px rgba(10,10,11,.3);
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.voz-flutua:hover .voz-selo, .voz-flutua:focus-within .voz-selo{opacity:1; transform:none}
@media (max-width:640px){.voz-selo{display:none}}

.voz-orbe{
  position:relative; width:112px; height:112px; display:grid; place-items:center;
  cursor:pointer; border:0; background:none; padding:0; border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.voz-orbe canvas{position:absolute; inset:0; width:100%; height:100%}
.voz-orbe:focus-visible{outline:3px solid var(--nucleo-laranja,#FF6B35); outline-offset:5px}

.voz-nucleo{
  position:relative; width:30%; height:30%; border-radius:50%; background:#fff;
  display:grid; place-items:center;
  box-shadow:0 4px 18px rgba(10,10,11,.15), 0 0 0 1px rgba(10,10,11,.06);
  transition:background .5s ease, box-shadow .5s ease, transform .3s ease;
}
.voz-orbe:hover .voz-nucleo{transform:scale(1.07)}
.voz-nucleo svg{
  width:44%; height:44%; fill:none; stroke:var(--nucleo-laranja,#FF6B35);
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------------- a nossa janela de chamada ---------------- */

.voz-painel{
  position:fixed; z-index:9999; display:none;
  flex-direction:column; overflow:hidden;
  background:#fff; color:var(--preto,#0A0A0B);
  border:1px solid var(--border,#E4E1DA); border-radius:20px;
  box-shadow:0 2px 6px rgba(10,10,11,.06), 0 24px 60px -24px rgba(10,10,11,.34);
  font-family:var(--font-corpo,'Inter',sans-serif);
  /* medida para cobrir exatamente a janela da GHL, que o bloco lá em cima
     fixa em 320x460 a 20px da direita e 90px do rodapé. Assim a nossa já nasce
     no lugar certo e a deles não aparece nem por um quadro. */
  right:14px; bottom:84px; width:332px; height:552px;
}
.voz-painel[data-aberto="1"]{display:flex}

.voz-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; border-bottom:1px solid var(--border,#E4E1DA);
}
.voz-etiqueta{
  font-family:var(--font-mono,ui-monospace,monospace); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nucleo-laranja,#FF6B35);
}
.voz-fechar{
  border:0; background:none; cursor:pointer; padding:4px; border-radius:8px;
  color:var(--gray-texto,#6E6E68); display:grid; place-items:center;
}
.voz-fechar:hover{background:var(--cream,#F0EEE8); color:var(--preto,#0A0A0B)}
.voz-fechar svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round}

.voz-corpo{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; padding:8px 20px; min-height:0;
}
.voz-esfera{position:relative; width:min(172px,50vw); aspect-ratio:1;
  display:grid; place-items:center}
.voz-esfera canvas{position:absolute; inset:0; width:100%; height:100%}
.voz-esfera .voz-nucleo{width:27%; height:27%}
.voz-painel[data-estado="chamada"] .voz-nucleo{
  background:radial-gradient(circle at 34% 26%,#FFD9A8,#FF9A5C 38%,var(--nucleo-laranja,#FF6B35) 72%,#E8541B);
  box-shadow:
    0 0 0 1px rgba(255,150,60,.5),
    0 0 18px 2px rgba(255,140,60,.55),
    0 0 46px 10px rgba(255,107,53,.3),
    0 8px 30px -8px rgba(226,74,22,.5);
  animation:voz-respira 2.6s ease-in-out infinite;
}
.voz-painel[data-estado="chamada"] .voz-nucleo svg{stroke:#fff}
@keyframes voz-respira{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.055)}
}
@media (prefers-reduced-motion:reduce){
  .voz-painel[data-estado="chamada"] .voz-nucleo{animation:none}
}

.voz-nome{font-family:var(--font-voz,Georgia,serif); font-size:1.25rem;
  font-weight:500; letter-spacing:-.02em; margin-top:10px}
.voz-papel{font-size:.8125rem; color:var(--gray-texto,#6E6E68)}
.voz-estado{
  font-family:var(--font-mono,ui-monospace,monospace); font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gray-deco,#8A8A85);
  margin-top:12px; min-height:17px; text-align:center;
}
.voz-painel[data-estado="chamada"] .voz-estado{color:var(--success,#00A865)}
.voz-painel[data-estado="erro"] .voz-estado{
  color:var(--error,#DC2626); text-transform:none; letter-spacing:0;
  font-family:var(--font-corpo,'Inter',sans-serif); font-size:.8125rem;
  max-width:26ch; line-height:1.5;
}

.voz-controles{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:14px 16px 18px; border-top:1px solid var(--border,#E4E1DA);
}
.voz-btn{
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; border:1px solid var(--border,#E4E1DA);
  background:#fff; color:var(--preto,#0A0A0B); transition:.16s;
}
.voz-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(10,10,11,.4)}
.voz-btn:disabled{opacity:.4; cursor:default; transform:none; box-shadow:none}
.voz-btn svg{width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.voz-btn[data-mudo="1"]{background:var(--cream,#F0EEE8)}
.voz-btn--fim{background:var(--error,#DC2626); border-color:var(--error,#DC2626); color:#fff}
/* no convite, só o botão de ligar. Em chamada, só mudo e encerrar. */
.voz-cta{
  display:none; align-items:center; gap:9px; cursor:pointer;
  font-family:inherit; font-size:.9375rem; font-weight:600;
  border:0; border-radius:9999px; padding:14px 26px;
  background:var(--nucleo-laranja,#FF6B35); color:#fff;
  box-shadow:0 6px 20px -8px rgba(255,107,53,.85); transition:.16s;
}
.voz-cta:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 10px 26px -10px rgba(255,107,53,.95)}
.voz-cta:disabled{opacity:.45; cursor:default; box-shadow:none}
.voz-cta svg{width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.voz-painel[data-estado="pronto"] .voz-cta{display:inline-flex}
.voz-painel[data-estado="pronto"] .voz-btn,
.voz-painel[data-estado="erro"] .voz-btn{display:none}
.voz-painel[data-estado="erro"] .voz-cta{display:none}

.voz-legenda{
  font-size:.8125rem; line-height:1.5; color:var(--gray-texto,#6E6E68);
  text-align:center; padding:10px 22px 16px; max-width:32ch;
  align-self:center; flex:none;
}
.voz-legenda b{color:var(--preto,#0A0A0B); font-weight:600}

@media (max-width:560px){
  .voz-painel{inset:0 !important; width:auto !important; height:auto !important;
    border-radius:0; border:0}
}
@media (prefers-reduced-motion:reduce){.voz-orbe canvas,.voz-esfera canvas{opacity:.55}}
@media print{.voz-flutua,.voz-painel{display:none !important}}