/* ════════ Voice conversation mode — full-screen orb overlay ════════
   States are driven by [data-state] on .vmode: listening | thinking |
   speaking | idle | error. */

.vmode{
  position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(28px,6vh,48px);
  background:rgba(4,10,18,.93);backdrop-filter:blur(28px) saturate(1.2);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  padding:env(safe-area-inset-top,0) 20px env(safe-area-inset-bottom,0)}
.vmode.show{display:flex;animation:vfade .3s ease-out both}
@keyframes vfade{from{opacity:0}to{opacity:1}}

.vmode-close{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;
  width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.vmode-close:hover{background:rgba(255,255,255,.12)}
.vmode-close svg{width:26px;height:26px}

/* ── the liquid orb ── */
@keyframes liquidMorph{
  0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  50%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbPulse{
  0%,100%{box-shadow:0 0 60px rgba(31,194,176,.55)}
  50%{box-shadow:0 0 120px rgba(63,159,219,.85)}
}
@keyframes listenPulse{
  0%,100%{box-shadow:0 0 50px rgba(127,185,66,.5)}
  50%{box-shadow:0 0 90px rgba(31,194,176,.75)}
}

.orb{
  width:clamp(180px,58vw,256px);height:clamp(180px,58vw,256px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  background:linear-gradient(45deg,var(--green),var(--blue));
  box-shadow:0 0 60px rgba(31,194,176,.55);
  border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
  animation:liquidMorph 6s ease-in-out infinite;
  transition:width .7s var(--ease),height .7s var(--ease),opacity .7s var(--ease)}
.orb svg{width:clamp(48px,14vw,64px);height:clamp(48px,14vw,64px);color:#fff}
.orb:hover{filter:brightness(1.06)}

.vmode[data-state="listening"] .orb{animation:liquidMorph 6s ease-in-out infinite, listenPulse 2s ease-in-out infinite}
.vmode[data-state="speaking"] .orb{width:clamp(220px,72vw,320px);height:clamp(220px,72vw,320px);
  animation:liquidMorph 5s ease-in-out infinite, orbPulse 1.4s ease-in-out infinite}
.vmode[data-state="thinking"] .orb{width:clamp(140px,42vw,192px);height:clamp(140px,42vw,192px);opacity:.55}
.vmode[data-state="thinking"] .orb svg{animation:orbSpin 1s linear infinite}
.vmode[data-state="idle"] .orb{opacity:.55}
.vmode[data-state="error"] .orb{background:linear-gradient(45deg,#e0685a,#b9453a);box-shadow:0 0 50px rgba(224,104,90,.5);opacity:.85}

/* ── status text ── */
.vmode-status{text-align:center;color:#fff}
.vmode-status h2{font-family:var(--display);font-size:clamp(34px,8vw,56px);font-weight:400;
  letter-spacing:.02em;text-transform:uppercase;line-height:1;margin-bottom:14px}
.vmode-status p{color:rgba(255,255,255,.45);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){
  .orb{animation:none!important}
  .vmode[data-state="thinking"] .orb svg{animation:none!important}
}