/* ==========================================================================
   AI Media — "Talk to Mia" INLINE voice console (lives in the hero CTA spot)
   The call happens in place: the hero button (idle) expands into a compact dark
   "stage card" — Mia's aura + waveform + controls — then a compact lead chip.
   Replaces the old full-screen #voiceOverlay modal. A sticky mini-bar keeps the
   controls reachable if a live call scrolls out of view.
   ========================================================================== */

/* ---------- container + phase machine ---------- */
/* Reserve the panel's width in every phase (the idle button is narrower than the
   live panel). Pinning the width means the console never changes size when it
   expands into a call, so the sibling "בדיקת התאמה חינם" CTA beside it never gets
   pushed around — it holds its own column. 340px is deliberate: the hero-copy
   column caps at 600px, and 340 + gap + the ~220px CTA fits on one line on wide
   desktops (≥~1180px). Below that the row stacks (media query) — there isn't
   horizontal room for both, by design. */
.hero-voice{display:inline-flex;flex-direction:column;align-items:flex-start;width:min(340px,100%);}
#voiceInline [data-phase]{display:none;}
#voiceInline [data-phase].show{display:flex;flex-direction:column;}
/* idle: just the trigger button + fallback, aligned to the hero's inline-start */
#voiceInline [data-phase="idle"]{align-items:flex-start;}
/* Turnstile container. The widget is invisible in the happy path (appearance:
   'execute' reserves ~no space until a challenge is required), but when Cloudflare
   DOES need an interactive challenge it must be visible + clickable — so never
   clip it to 0×0. When shown, it appears centered right in the console / button
   spot ("the button becomes the captcha"). */
#miaTurnstile{display:flex;justify-content:center;width:100%;}

/* ---------- the dark stage card (connecting / call / summary / error) ---------- */
.vc-panel{
  align-items:center;text-align:center;gap:6px;
  width:min(340px,100%);padding:22px 22px 24px;border-radius:24px;color:#fff;
  background:radial-gradient(125% 120% at 50% 0%,#251D35 0%,#1B1626 60%,#140F1E 100%);
  border:1px solid rgba(205,180,246,.22);
  box-shadow:0 26px 60px -28px rgba(60,40,110,.7),inset 0 1px 0 rgba(255,255,255,.06);
  animation:vcPanelIn .42s var(--ease);
}
@keyframes vcPanelIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}

.vc-brandline{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:12.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.62);}
.vc-brandline .dot{width:7px;height:7px;border-radius:50%;background:var(--grad-iri);}

/* status / sub text (inside the dark card) */
.vc-status{font-family:var(--font-display);font-size:clamp(17px,2.4vw,20px);font-weight:500;margin-block-start:6px;}
.vc-status.sm{font-size:17px;}
.vc-sub{color:rgba(255,255,255,.6);font-size:13.5px;max-width:300px;margin-inline:auto;line-height:1.45;}

/* ---------- Mia aura / avatar ---------- */
.vc-stage{position:relative;width:128px;height:128px;display:grid;place-items:center;margin-block:6px 4px;}
.vc-stage.sm{width:112px;height:112px;}
.vc-stage.xs{width:64px;height:64px;margin:0;flex:0 0 auto;}
.vc-aura{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,#fff 0%,#fff 28%,rgba(231,219,251,.95) 44%,rgba(220,238,255,.65) 60%,rgba(255,229,241,.4) 74%,transparent 82%);
  transition:transform .12s ease-out;}
.vc-aura.idle{animation:auraBreath 4s ease-in-out infinite;}
@keyframes auraBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.vc-pulse-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(205,180,246,.5);opacity:0;}
.vc-pulse-ring.go{animation:pulseOut 2.4s ease-out infinite;}
.vc-pulse-ring.r2{animation-delay:1.2s;}
@keyframes pulseOut{0%{transform:scale(.85);opacity:.7;}100%{transform:scale(1.5);opacity:0;}}
.vc-mia{position:relative;z-index:2;width:80%;filter:drop-shadow(0 14px 22px rgba(80,60,140,.25));}

/* ---------- live-call header (small avatar beside the meta) ---------- */
.vc-callhead{display:flex;align-items:center;gap:12px;}
.vc-callmeta{display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.vc-timer{font-family:var(--font-display);font-size:14px;color:rgba(255,255,255,.6);letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:8px;}
.vc-timer i{width:8px;height:8px;border-radius:50%;background:#42d98a;box-shadow:0 0 8px #42d98a;animation:livePulse 1.6s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ---------- waveform ---------- */
.vc-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:42px;margin-block:14px 4px;width:100%;}
.vc-wave .bar{width:4px;border-radius:4px;background:var(--grad-iri);height:8px;transition:height .09s linear;}

/* ---------- controls ---------- */
.vc-controls{display:flex;align-items:flex-start;justify-content:center;gap:18px;margin-block-start:10px;}
.vc-ctrl{display:flex;flex-direction:column;align-items:center;gap:6px;}
.vc-btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);color:#fff;transition:.2s;cursor:pointer;}
.vc-btn:hover{background:rgba(255,255,255,.2);}
.vc-btn.active{background:rgba(255,255,255,.92);color:var(--ink);}
.vc-btn.end{background:#e8554d;border-color:#e8554d;width:60px;height:60px;}
.vc-btn.end:hover{background:#d6443c;}
.vc-btn svg{width:23px;height:23px;}
.vc-ctrl-label{font-size:12px;color:rgba(255,255,255,.5);}

/* ---------- idle trigger: "incoming call" pulse to draw the eye ----------
   A sonar-style ring expands out of the button on a loop (on-brand for a phone
   agent) + a soft breathing glow. Rendered on ::after/::before so it never
   touches the button's own box-shadow or hover lift (transform stays free for
   the :hover translateY). Stops at the first interaction phase since the button
   only exists in [data-phase="idle"]. */
#voiceInline [data-phase="idle"] .btn[data-open-mia]{position:relative;}
#voiceInline [data-phase="idle"] .btn[data-open-mia]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  box-shadow:0 0 0 0 rgba(205,180,246,.4);
  animation:miaGlow 3.2s ease-in-out infinite;}
#voiceInline [data-phase="idle"] .btn[data-open-mia]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid rgba(205,180,246,.65);opacity:0;
  animation:miaRing 2.8s ease-out infinite;}
@keyframes miaRing{0%{transform:scale(1);opacity:.6;}70%,100%{transform:scale(1.16);opacity:0;}}
@keyframes miaGlow{0%,100%{box-shadow:0 0 0 0 rgba(205,180,246,.0);}
  50%{box-shadow:0 12px 34px -4px rgba(205,180,246,.55);}}
@media(prefers-reduced-motion:reduce){
  #voiceInline [data-phase="idle"] .btn[data-open-mia]::before,
  #voiceInline [data-phase="idle"] .btn[data-open-mia]::after{animation:none;}
}

/* ---------- idle fallback (on the light hero, not in the dark card) ---------- */
.vc-fallback{margin-block-start:14px;font-size:14px;color:var(--ink-3);max-width:300px;}
.vc-fallback a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}

/* primed arrival from a niche page (/?talk=1): draw the eye to the trigger,
   nudging the one tap that a cross-page navigation can't perform automatically */
.vc-prime{animation:vcPrime 1s var(--ease) 0s 3;}
@keyframes vcPrime{0%,100%{box-shadow:0 0 0 0 rgba(205,180,246,0);}
  45%{box-shadow:0 0 0 10px rgba(205,180,246,.28),0 16px 40px -16px rgba(205,180,246,.7);}}
@media(prefers-reduced-motion:reduce){.vc-prime{animation:none;}}

/* ---------- compact lead chip (summary) ---------- */
.vc-leadchip{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  background:rgba(255,255,255,.08);border:1px solid rgba(205,180,246,.28);border-radius:16px;padding:14px 16px;margin-block:4px 14px;}
.vc-leadchip>svg{flex:0 0 auto;color:#9be7c0;}
.vc-leadtext{display:flex;flex-direction:column;gap:3px;min-width:0;}
.vc-leadtext b{font-family:var(--font-display);font-weight:500;font-size:15px;color:#fff;}
.vc-leadtext span{font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.4;overflow-wrap:anywhere;}

/* ---------- "talk again" / "try again" button (white, inside dark card) ---------- */
.vc-again{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);font-size:15.5px;padding:13px 24px;}
.vc-again:hover{transform:translateY(-2px);box-shadow:0 16px 40px -16px rgba(205,180,246,.7);}

/* subtle "close" — returns to the idle hero button (so the CTA isn't consumed) */
.vc-dismiss{margin-block-start:12px;background:none;border:none;cursor:pointer;
  font-family:var(--font-display);font-size:13.5px;color:rgba(255,255,255,.55);
  text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.vc-dismiss:hover{color:rgba(255,255,255,.85);}

/* ==========================================================================
   Sticky mini control bar — pins when a live call scrolls out of the hero
   ========================================================================== */
.vc-mini[hidden]{display:none;}
.vc-mini{position:fixed;z-index:160;inset-block-end:18px;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);
  display:flex;align-items:center;gap:12px;padding:9px 12px 9px 18px;border-radius:999px;
  background:rgba(27,22,38,.92);backdrop-filter:blur(14px);border:1px solid rgba(205,180,246,.28);
  box-shadow:0 18px 44px -18px rgba(40,25,80,.8);color:#fff;animation:miniIn .28s var(--ease);}
@keyframes miniIn{from{opacity:0;transform:translateY(80%);}to{opacity:1;transform:none;}}
.vc-mini-dot{width:9px;height:9px;border-radius:50%;background:#42d98a;box-shadow:0 0 8px #42d98a;animation:livePulse 1.6s ease-in-out infinite;}
.vc-mini-timer{font-family:var(--font-display);font-size:14.5px;letter-spacing:.04em;min-width:38px;}
.vc-mini-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);color:#fff;transition:.2s;cursor:pointer;}
.vc-mini-btn:hover{background:rgba(255,255,255,.22);}
.vc-mini-btn.active{background:rgba(255,255,255,.92);color:var(--ink);}
.vc-mini-btn.end{background:#e8554d;border-color:#e8554d;}
.vc-mini-btn.end:hover{background:#d6443c;}
.vc-mini-btn svg{width:19px;height:19px;}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .vc-panel,.vc-mini{animation:none;}
  .vc-aura.idle,.vc-pulse-ring.go,.vc-timer i,.vc-mini-dot{animation:none;}
}

/* ---------- narrow screens ---------- */
@media(max-width:560px){
  .hero-voice{width:100%;}
  .vc-panel{width:100%;}
}