/* Voice calls with the mascot: bottom call bar, old-phone stage, and the rig's call faces.
   Brand colours come from each page's :root tokens (--ink, --sun, --bubble, --page, --paper, --mint). */

/* ---------- rig call faces (stage rig only) ---------- */
.rig[data-call] [data-show~="call"]{display:inline}
.rig[data-call] .call-mouth,.rig[data-call] .call-brow{display:none}
.rig[data-call] .smile,.rig[data-call] .hmm{display:none}
.rig[data-mouth="closed"] .call-mouth[data-m="closed"],.rig[data-mouth="small"] .call-mouth[data-m="small"],
.rig[data-mouth="open"] .call-mouth[data-m="open"],.rig[data-mouth="oo"] .call-mouth[data-m="oo"],
.rig[data-mouth="grin"] .call-mouth[data-m="grin"],.rig[data-mouth="soft"] .call-mouth[data-m="soft"]{display:inline}
.rig[data-brow="up"] .brow-idle,.rig[data-brow="sorry"] .brow-idle{display:none}
.rig[data-brow="up"] .call-brow[data-b="up"],.rig[data-brow="sorry"] .call-brow[data-b="sorry"]{display:inline}
.rig[data-call] .brow-idle{animation:none;transition:transform .12s ease;transform-box:fill-box}
.rig.brow-lift .brow-idle{transform:translateY(-4px)}
.rig:not([data-call="listening"]) .call-ears{display:none}
.rig .call-ears rect{transform-box:fill-box;transform-origin:center;transform:scaleY(calc(.35 + var(--ears,0)))}

/* ---------- hero affordance ---------- */
.vc-hero{cursor:pointer}
.vc-hero:focus-visible{outline:3px solid var(--bubble);outline-offset:6px;border-radius:50%}
.vc-tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:6px;
  background:#fff;color:#2B1740;border:2.5px solid #2B1740;border-radius:14px;padding:6px 11px;font-weight:700;font-size:.85rem;
  box-shadow:3px 3px 0 #2B1740;white-space:nowrap;pointer-events:none}
.vc-dot{width:12px;height:12px;border-radius:50%;background:var(--mint);border:2px solid #2B1740}

/* ---------- bottom call bar ---------- */
.vc-bar{position:fixed;left:50%;bottom:16px;z-index:40;display:flex;align-items:center;gap:10px;
  transform:translate(-50%,160%);transition:transform .35s cubic-bezier(.2,1.2,.4,1);
  background:#2B1740;color:#FFD23F;border:0;border-radius:999px;padding:7px 18px 7px 7px;font:700 1rem/1 var(--body);
  box-shadow:0 8px 24px rgba(43,23,64,.35);cursor:pointer}
.vc-bar.on{transform:translate(-50%,0)}
.vc-bar:focus-visible{outline:3px solid var(--bubble);outline-offset:3px}
.vc-mini{width:40px;height:40px;border-radius:50%;background:var(--bubble);border:2px solid #FFD23F;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.vc-mini .rig{width:54px;height:54px;margin-bottom:-3px}
/* dark page: the dark bar needs a sun-yellow edge to stand out (same theme convention as the pages' :root tokens) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vc-bar{border:3px solid #FFD23F}}
:root[data-theme="dark"] .vc-bar{border:3px solid #FFD23F}
@media (max-width:640px){.vc-bar{left:12px;right:12px;transform:translateY(160%);justify-content:center}.vc-bar.on{transform:translateY(0)}}

/* ---------- stage ---------- */
.vc-stage{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#3a2257,#1C1029 70%);color:#FFF3D6;font-family:var(--body)}
.vc-stage[hidden]{display:none}
.vc-wrap{position:relative;display:flex;align-items:center;gap:22px}
.vc-phone{position:relative;width:min(360px,92vw);height:min(640px,86vh);border-radius:44px;background:#26173A;border:4px solid #FFD23F;
  display:flex;flex-direction:column;align-items:center;padding:26px 20px 24px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vc-callerid{font:800 .95rem/1 var(--display);letter-spacing:.08em;color:#FFD23F}
.vc-disc{position:relative;margin-top:26px;width:190px;height:190px;border-radius:50%;background:var(--bubble);border:4px solid #FFD23F;
  display:flex;align-items:flex-end;justify-content:center;overflow:visible;transform:translateY(calc(var(--bob,0) * -5px)) rotate(calc(var(--bob,0) * 2deg))}
.vc-disc .rig{width:240px;height:240px;margin-bottom:-12px;clip-path:circle(46% at 50% 44%)}
.vc-disc::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:3px solid #FFD23F;opacity:0}
.vc-stage[data-phase="ringing"] .vc-disc::after{animation:vc-ring 1s ease-out infinite}
@keyframes vc-ring{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.25)}}
.vc-state{margin-top:14px;font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--mint)}
/* recording notice: always shown, from dialing on, so it is visible before the microphone prompt */
.vc-rec{margin:8px 0 0;font-size:.78rem;line-height:1.3;text-align:center;color:#CDBEDD}
.vc-rec a{color:#FFD23F;font-weight:700}
.vc-rec a:focus-visible{outline:3px solid #FFD23F;outline-offset:2px;border-radius:4px}
.vc-consent{margin-top:14px;width:100%;text-align:center}
/* before consent there is nothing to caption or control yet: Not now (or Escape) is the way out */
.vc-stage[data-phase="consent"] .vc-log,.vc-stage[data-phase="consent"] .vc-controls{display:none}
.vc-consent p{margin:0 0 12px;background:#FFF3D6;color:#2B1740;border-radius:16px;padding:10px 14px;font-weight:600;line-height:1.35;box-shadow:3px 3px 0 #FFD23F}
.vc-consent a{color:#2B1740;font-weight:800}
.vc-consent button{margin:4px;border-radius:999px;border:0;padding:10px 18px;font-weight:800;cursor:pointer;background:#FFD23F;color:#2B1740}
.vc-consent .vc-consent-no{background:transparent;color:#FFF3D6;border:2px solid #FFF3D6}
.vc-consent :focus-visible{outline:3px solid #FFD23F;outline-offset:2px}
/* caption history: fills the space between the status line and the buttons, and scrolls inside it */
.vc-log{flex:1 1 0;min-height:5.5em;width:100%;margin-top:14px;padding:2px 6px 6px 2px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:#FFD23F transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
.vc-log:focus-visible{outline:3px solid #FFD23F;outline-offset:2px;border-radius:12px}
.vc-line{flex:none;margin:0;text-align:center;overflow-wrap:anywhere}
.vc-ai{background:#FFF3D6;color:#2B1740;border-radius:16px;padding:10px 14px;font-weight:600;line-height:1.35;box-shadow:3px 3px 0 #FFD23F}
.vc-you{color:#CDBEDD;font-size:.85rem;font-style:italic}
.vc-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vc-ts{margin-top:8px}
.vc-controls{margin-top:14px;display:flex;gap:18px}
.vc-controls button{width:58px;height:58px;border-radius:50%;border:2px solid #FFF3D6;background:transparent;color:#FFF3D6;display:grid;place-items:center;cursor:pointer}
.vc-controls button svg{width:26px;height:26px}
.vc-controls .vc-hang{background:#E5484D;border-color:#E5484D}
.vc-controls .vc-mute[aria-pressed="true"]{background:#FFF3D6;color:#2B1740}
.vc-controls button:focus-visible{outline:3px solid #FFD23F;outline-offset:3px}
.vc-note{position:absolute;inset:auto 18px 100px;background:#1C1029;border:2px solid #FFD23F;border-radius:16px;padding:14px;text-align:center}
.vc-note p{margin:0 0 10px}
.vc-note button{margin:4px;border-radius:999px;border:0;padding:9px 14px;font-weight:800;cursor:pointer;background:#FFD23F;color:#2B1740}
.vc-note .vc-retry{background:transparent;color:#FFF3D6;border:2px solid #FFF3D6}
.vc-times{width:220px;background:#26173A;border:2px solid #FFD23F;border-radius:16px;padding:14px}
.vc-times b{display:block;color:#FFD23F;margin-bottom:8px}
.vc-times button{display:block;width:100%;margin:6px 0;border:0;border-radius:10px;padding:9px;font-weight:700;background:#FFF3D6;color:#2B1740;cursor:pointer}
@media (max-width:720px){.vc-wrap{flex-direction:column}.vc-times{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);width:min(320px,86vw)}}

/* ---------- start sequence: handset + rotary dial, then zoom ---------- */
.vc-handset,.vc-dial{position:absolute;opacity:0;pointer-events:none}
.vc-handset{width:84px;right:-40px;top:40px}
.vc-dial{width:96px;left:-54px;bottom:-10px}
.vc-stage[data-phase="dialing"] .vc-handset{opacity:1;animation:vc-lift .4s ease-out both}
.vc-stage[data-phase="dialing"] .vc-dial{opacity:1}
.vc-stage[data-phase="dialing"] .vc-dial .vc-wheel{animation:vc-spin .7s ease-in-out 3 both;transform-origin:50% 50%;transform-box:fill-box}
@keyframes vc-lift{from{transform:translateY(20px) rotate(20deg)}to{transform:none}}
@keyframes vc-spin{0%{transform:rotate(0)}60%{transform:rotate(200deg)}100%{transform:rotate(0)}}

@media (prefers-reduced-motion:reduce){
  .vc-bar,.vc-disc{transition:none;transform:none}
  .vc-stage[data-phase] .vc-dial .vc-wheel,.vc-stage[data-phase] .vc-handset,.vc-stage[data-phase="ringing"] .vc-disc::after{animation:none}
}