/* Voice call with Ana (assets/call.js). The phone button in the composer grows into this card, like the Menu pill.
   Tokens and motion from design.md §2 and §4. */

@keyframes rich-content-in { from { opacity: 0; filter: blur(6px); transform: translateY(10px) scale(.99); } }

/* the phone button in the composer and the dock; navy while a call is on */
.icon-btn.call-btn { position: relative; }
.icon-btn.call-btn.on { color: var(--navy); background: var(--ink-5); }
.icon-btn.call-btn.on::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 999px; background: var(--navy); box-shadow: 0 0 0 2px #fff; }
.dock .icon-btn.call-btn.on::after { top: 4px; right: 4px; }

/* the white surface the button grows into; it follows the card's size as captions come and go. The card sits top right, under the Menu, clear of the dock */
.call-surface { position: fixed; z-index: 120; border-radius: var(--r-40); background: #fff; box-shadow: 0 0 0 1px var(--ink-5), 2px 11px 24px #0000001a, 8px 42px 43px #00000017, 18px 95px 58px #0000000d; pointer-events: none; visibility: hidden; transition: top .45s var(--ease), height .45s var(--ease), left .45s var(--ease), width .45s var(--ease), border-radius .45s var(--ease); }
.call-surface.on { visibility: visible; }
.call-surface.morph { transition: none; }

.call { --lvl: 0; position: fixed; right: 24px; top: 124px; z-index: 121; width: min(380px, calc(100vw - 32px)); padding: 8px; visibility: hidden; }
.call.open, .call.closing { visibility: visible; }
.call.closing .call-in { opacity: 0; transition: opacity 80ms linear; }

/* top: a muted panel with the voice dot, who and the status line */
.call-top { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 30px; background: var(--grey-50); }
.call-dot { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--navy); color: #fff; transform: scale(calc(1 + var(--lvl) * .06)); transition: transform .12s linear; }
.call-dot svg { width: 18px; height: 18px; }
.call-dot::before, .call-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid #00148926; transform: scale(calc(1.18 + var(--lvl) * .35)); opacity: calc(.2 + var(--lvl) * .8); transition: transform .12s linear, opacity .12s linear; }
.call-dot::after { border-color: #00148914; transform: scale(calc(1.4 + var(--lvl) * .6)); }
.call.connecting .call-dot { animation: pulse 1.6s linear infinite; }
.call-who { flex: 1; min-width: 0; display: grid; }
.call-who b { font-weight: 500; font-size: 16px; line-height: 1.35; }
.call-st { display: flex; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-65); white-space: nowrap; }
.call-st .wv { display: grid; overflow: hidden; }
.call-st .g { grid-area: 1 / 1; } .call-st .g span { display: inline-block; white-space: pre; }
.call-st .g.busy { animation: pulse 2s linear infinite; }
.call-st .t { font-variant-numeric: tabular-nums; }
.call-st .t:empty { display: none; }
.call-st .t::before { content: "· "; }
.call-st .err { color: #b42318; }
.call-x { width: 36px; height: 36px; flex: none; border-radius: 999px; border: 0; background: var(--ink-5); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease); }
.call-x:hover { background: var(--ink-10); }
.call-x svg { width: 18px; height: 18px; }

/* caption: what Ana (or you) just said, sharpening word by word */
.call-cap { margin: 0; padding: 16px 14px 4px; min-height: 52px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.call-cap:empty { display: none; }
.call-cap .you { display: block; font-size: 13px; color: var(--ink-45); margin-bottom: 2px; }
.call-cap .w { display: inline-block; white-space: pre; }
.call-hint { padding: 14px 14px 2px; font-size: 14px; line-height: 1.4; color: var(--ink-65); }
.call-cap:not(:empty) + .call-hint { display: none; }

.call-row { display: flex; gap: 8px; padding: 12px 6px 6px; }
.call-row button { flex: 1; height: 44px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), scale .2s var(--ease); }
.call-row button:active { scale: .97; }
.call-row svg { width: 18px; height: 18px; }
.call-mute { background: var(--ink-5); color: var(--ink); }
.call-mute:hover { background: var(--ink-10); }
.call-mute[aria-pressed="true"] { background: var(--ink); color: #fff; }
.call-end { background: var(--navy); color: #fff; }

/* minimised: a small live pill; click it to open the card again */
.call.mini { width: auto; padding: 6px; cursor: pointer; }
.call.mini .call-top { padding: 0 18px 0 0; background: none; gap: 10px; }
.call.mini .call-dot { width: 36px; height: 36px; }
.call.mini .call-dot svg { width: 15px; height: 15px; }
.call.mini .call-x, .call.mini .call-cap, .call.mini .call-hint, .call.mini .call-row { display: none; }

@media (max-width: 767px) {
  .call { right: 12px; left: 12px; top: 68px; width: auto; }
  .call.mini { left: auto; }
}
@media (prefers-reduced-motion: reduce) { .call-surface { transition: none; } }