/* The call screen. Shared by v4/talk (the live demo) and the phone in the v4/sarah hero,
   so the product page shows the real call UI, not a picture of it. Uses the shell token names. */
.call{--ring:min(300px,64vw);position:relative;display:flex;flex-direction:column;align-items:center;color:var(--ink);font-family:var(--sans)}
.call .mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em;font-size:13px;line-height:1.4}

.call-top{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-2);min-height:20px}
.call-top .live{width:7px;height:7px;border-radius:50%;background:var(--mute);flex:none;transition:background .3s}
.call[data-state="listening"] .call-top .live,.call[data-state="speaking"] .call-top .live{background:var(--gold);box-shadow:0 0 0 0 rgba(201,163,94,.5);animation:call-led 2s ease-out infinite}
@keyframes call-led{0%{box-shadow:0 0 0 0 rgba(201,163,94,.45)}70%,100%{box-shadow:0 0 0 8px rgba(201,163,94,0)}}
.call-top .timer{font-variant-numeric:tabular-nums;color:var(--mute)}

/* ring + the one round button in the middle of it */
.ring-wrap{position:relative;width:var(--ring);aspect-ratio:1;display:grid;place-items:center;margin:calc(var(--ring)*.16) 0 calc(var(--ring)*.14)}
.ring{position:absolute;inset:-14%;pointer-events:none}
.ring canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.call-btn{position:relative;z-index:2;width:40%;min-width:88px;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:#141008;background:radial-gradient(circle at 34% 28%,#fff4dc 0%,var(--gold-hi) 36%,var(--gold) 70%,#8d6a2e 100%);
  box-shadow:0 18px 50px -12px rgba(201,163,94,.55),inset 0 1px 2px rgba(255,255,255,.7);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),background .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent;font:inherit}
.call-btn svg{width:34%;height:34%}
.call-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.call-btn:hover:not(:disabled){transform:scale(1.05)}
.call-btn:active:not(:disabled){transform:scale(.96)}
.call-btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:6px}
.call-btn:disabled{cursor:progress;filter:saturate(.3) brightness(.7)}
.call-btn .i-end{display:none}
.call.on .call-btn{background:radial-gradient(circle at 34% 28%,#3a3036 0%,#221c22 70%);color:var(--ink);box-shadow:inset 0 0 0 1px var(--pill-line),0 18px 50px -20px rgba(0,0,0,.8)}
.call.on .call-btn .i-mic{display:none}
.call.on .call-btn .i-end{display:block}

.call-status{color:var(--ink-2);min-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.call-status b{color:var(--gold-ink);font-weight:500}

/* live captions: both sides, newest at the bottom, older lines fade back */
.captions{list-style:none;margin:14px 0 0;padding:0 2px;width:100%;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.captions::-webkit-scrollbar{display:none}
.captions{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);mask-image:linear-gradient(to bottom,transparent 0,#000 26px);padding-top:14px}
.captions:empty{display:none}
.captions .cap{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;align-items:baseline;opacity:.42;transition:opacity .4s}
.captions .cap:nth-last-child(-n+2){opacity:1}
.captions .cap .who{color:var(--mute);padding-top:2px}
.captions .cap.her .who{color:var(--gold-ink)}
.captions .cap p{margin:0;font-size:17px;line-height:1.42;letter-spacing:-.005em;overflow-wrap:anywhere;text-wrap:pretty}
.captions .cap.her p{color:var(--ink)}
.captions .cap.me p{color:var(--ink-2)}
.captions .cap.sys p{color:var(--mute);font-size:14px}
.captions .cap.new{animation:cap-in .35s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes cap-in{from{opacity:0;transform:translateY(8px)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .call-top .live{animation:none!important}
  .captions .cap.new{animation:none}
  .call-btn{transition:none}
}