/* The call lives in the top bar, as a phone's call lives in its status pill (call-sheet.js; the Founder, 8 October 2026,
   22:17: "show it in the header instead of following you; it doesn't disturb your screen, it just lives there"). One dark
   pill (the Founder, 9 October 2026, 02:00): the face as a circle on the left, matching the round red hang-up on the
   right, and between them "Calling…" while it rings, then the call's running time. No ring around the face; while it
   rings, the face pulses. With the Chief the crown sits on the face's corner, as in the chat's header, and the top bar's
   own crown steps aside. The pill sits at the bar's dead centre at every width (his 07:16); the page's title in the bar
   truncates first. */
.call-pill{--pill-ink:#fff;--pill-bg:#1b1825;display:inline-flex;flex:none;align-items:center;gap:4px;height:36px;box-sizing:border-box;padding:3px;margin:0 4px;border-radius:999px;background:var(--pill-bg);color:var(--pill-ink);box-shadow:0 2px 10px #1b182533;max-width:min(260px,calc(100vw - 190px));min-width:0}
[data-theme=dark] .call-pill{--pill-bg:#000;box-shadow:inset 0 0 0 1px #3a3548}
.call-pill-face{display:inline-flex;flex:none;align-items:center;gap:3px;height:30px;padding:0;border:0;border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer}
.call-pill-ring{position:relative;display:block;flex:none;width:30px;height:30px;border-radius:50%}
.call-pill .call-pill-portrait,.call-pill [data-portrait].call-pill-portrait,.call-pill [data-portrait].call-pill-portrait.portrait-neutral{display:grid;place-items:center;line-height:1;box-sizing:border-box;width:30px;height:30px;min-width:30px;overflow:hidden;border-radius:50%;background:#f2ecfa;color:#541c91}
/* The face's picture or emoji centred in its circle, and the time on the pill's middle line (his 06:37). */
.call-pill .call-pill-portrait>:is(img,svg,canvas){display:block;width:100%;height:100%;object-fit:cover;margin:0}
.call-pill .call-pill-portrait>:not(img,svg,canvas){display:grid;place-items:center;width:100%;height:100%;margin:0;line-height:1;text-align:center}
/* The Chief's crown on the face's corner, the chat header's own badge (agent-row.css), sized for the pill. */
.call-pill-crown{position:absolute;top:-4px;inset-inline-end:-5px;display:grid;place-items:center;box-sizing:border-box;width:15px;height:15px;padding:2px;border-radius:50%;background:#fff;color:var(--chief-ink,var(--purple,#6d28b5));box-shadow:0 0 0 1.5px var(--pill-bg);z-index:2;pointer-events:none}
.call-pill-crown .primary-crown{width:100%;height:100%}
.call-pill-said{display:block;align-self:center;flex:0 1 auto;min-width:0;padding:0 6px;font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.call-pill-said:empty{display:none}
/* The digits' own ink on the pill's middle line (the Founder, 9 October 2026, 07:16, on iPhone Safari: "still not
   aligned in the center of the pill"). The line box is the font's ascent and descent, so a line-height of 1 centred the
   box and left the digits, which sit on the baseline with nothing below it, 1.5px high. Trimmed to cap height and
   baseline, the block is the digits' ink, and the pill's centring centres the ink; where the trim is not known, the box is
   pushed down by the measured difference. */
@supports (text-box:trim-both cap alphabetic){.call-pill-said{text-box:trim-both cap alphabetic}}
@supports not (text-box:trim-both cap alphabetic){.call-pill-said{padding-top:.23em}}
.call-pill-end{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#e5484d;color:#fff;cursor:pointer}
.call-pill-end .icon{width:20px;height:20px}
.call-pill-end[hidden]{display:none}
.call-pill-face:focus-visible,.call-pill-end:focus-visible{outline:3px solid #b987ef;outline-offset:2px}
/* Ringing: the face pulses, and the pill says Calling…. */
.call-pill[data-state=calling] .call-pill-ring{animation:call-pill-ringing 1.2s ease-in-out infinite}
/* Failed or not answered: the reason for a moment, in two lines at most, then the pill goes. */
.call-pill[data-state=failed]{height:auto;min-height:36px;border-radius:18px;padding-inline-end:10px}
.call-pill[data-state=failed] .call-pill-said{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.75rem;font-weight:500}
/* A second Call while a call is on: the pill nods. */
.call-pill.nudge{animation:call-pill-nudge .5s ease-out}
@keyframes call-pill-ringing{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}
@keyframes call-pill-nudge{0%,100%{transform:scale(1)}40%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.call-pill[data-state=calling] .call-pill-ring,.call-pill.nudge{animation:none}}
.reduced-motion .call-pill[data-state=calling] .call-pill-ring{animation:none}
/* With the Chief the pill holds the crown: the top bar's own crown is not shown while it does. */
body[data-call-chief] .topbar [data-chief-crown]{display:none}
/* During a call, leave room for the centred call controls. Chats still offers New chat;
   another workspace call cannot be started while this call is active. */
body[data-call-on] .topbar .top-right>:is([data-group-call="choose"],[data-action="new-chat"]),body[data-call-on] .topbar .top-right>:where(.top-more)>:is([data-group-call="choose"],[data-action="new-chat"]){display:none}
/* The pill at the bar's dead centre, at every width (the Founder, 9 October 2026, 07:16: calling an agent who is not the
   Chief, it "drifts too much to the left… I want it to be maintained in the center"). It is placed on the bar itself, so
   nothing beside it moves it; the page's title gives way before anything reaches it. `translate` composes with the
   pill's own nod and pulse, which animate `transform`. */
.topbar .call-pill{position:absolute;top:50%;left:50%;translate:-50% -50%;margin:0;z-index:3;max-width:300px}
body[data-call-on] .topbar .top-title{flex:0 1 auto;max-width:calc(50% - 160px)}
/* On a phone the bar holds the pill in its middle and the same width either side of it: the crown moves from the right
   to just after the menu, left of the pill (with the Chief the pill carries it), and the right-hand presses close up to
   36px across, each still 44px tall. */
@media (max-width:700px){
 .topbar .call-pill{max-width:min(144px,calc(100vw - 244px))}
 body[data-call-on] .topbar .top-title{max-width:calc(50% - 72px)}
 body[data-call-on] .topbar .top-right>:is(.icon-button,.search-trigger,.human-badge),body[data-call-on] .topbar .top-right>:where(.top-more)>:is(.icon-button,.search-trigger,.human-badge){width:36px;min-width:36px;padding:0;margin:0}
 body[data-call-on]:not([data-call-chief]) .topbar .top-right>[data-chief-crown]{position:absolute;top:50%;inset-inline-start:54px;translate:0 -50%;width:44px;min-width:44px}
 body[data-call-on]:not([data-call-chief]) .topbar .top-title>.mobile-menu{margin-inline-end:44px}
}
/* Beside the sidebar on a narrow screen (a tablet, a small window), the right-hand presses close up the same way. */
@media (min-width:701px) and (max-width:900px){
 .topbar .call-pill{max-width:180px}
 body[data-call-on] .topbar .top-right>:is(.icon-button,.search-trigger,.human-badge),body[data-call-on] .topbar .top-right>:where(.top-more)>:is(.icon-button,.search-trigger,.human-badge){width:36px;min-width:36px;padding:0}
}
/* The call in the chat's header, before the three dots (a one-to-one call's, primary-call.js; a group call's, group-call.js).
   Call, before a call, is a plain icon as the header's own. During the call (the Founder, 9 October 2026, 02:15: "the
   hang up button should be also like a red button. The microphone needs to be inside a circle, clearly pressable, and
   crossed out when muted"): Mute is a round outlined button with the microphone, filled with the microphone crossed out
   while muted; End is a round red button with the hang-up. Both keep a 44px place to press. */
.chat-call-tools{display:inline-flex;align-items:center;flex:none;gap:2px}
.chat-call-tools .icon-button{width:44px;min-width:44px;height:44px;padding:0;border:0;background:none;color:var(--muted,#686577)}
.chat-call-tools .icon-button:hover{background:var(--soft,#f2ecfa);color:var(--chief-ink,var(--purple,#6d28b5))}
.chat-call-tools .icon-button .icon{width:22px;height:22px}
.chat-call-tools .icon-button.chat-call-mute,.chat-call-tools .icon-button.chat-call-end{display:grid;place-items:center;background:none;border-radius:50%}
.chat-call-tools .icon-button.chat-call-mute::before,.chat-call-tools .icon-button.chat-call-end::before{content:"";grid-area:1/1;width:36px;height:36px;border-radius:50%;box-sizing:border-box}
.chat-call-tools .icon-button.chat-call-mute>.icon,.chat-call-tools .icon-button.chat-call-end>.icon{grid-area:1/1;position:relative;width:20px;height:20px}
.chat-call-tools .icon-button.chat-call-mute{color:var(--ink,#24212d)}
.chat-call-tools .icon-button.chat-call-mute::before{border:1.5px solid var(--line-strong,#bdb6cc);background:var(--surface,#fff)}
.chat-call-tools .icon-button.chat-call-mute:hover::before{border-color:var(--chief-ink,var(--purple,#6d28b5));background:var(--soft,#f2ecfa)}
.chat-call-tools .icon-button.chat-call-mute[aria-pressed=true]{color:#fff}
.chat-call-tools .icon-button.chat-call-mute[aria-pressed=true]::before{border-color:var(--ink,#24212d);background:var(--ink,#24212d)}
.chat-call-tools .icon-button.chat-call-end,.chat-call-tools .icon-button.chat-call-end:hover{color:#fff}
.chat-call-tools .icon-button.chat-call-end::before{background:#e5484d}
.chat-call-tools .icon-button.chat-call-end:hover::before{background:#d1343b}
.chat-call-tools .icon-button:hover{background:none}
.chat-call-tools .icon-button.chat-call:hover{background:none}
/* The Call button's ground is a round disc behind the phone, never the button's own box, which is not square (the Founder,
   10 October 2026, 23:34: "it's not a circle, it's oval"). The same 40px disc as Mute and End's. */
.chat-call-tools .icon-button.chat-call{display:grid;place-items:center;background:none;border-radius:50%}
.chat-call-tools .icon-button.chat-call::before{content:"";grid-area:1/1;width:40px;height:40px;border-radius:50%;box-sizing:border-box;background:transparent}
.chat-call-tools .icon-button.chat-call>.icon{grid-area:1/1;position:relative}
.chat-call-tools .icon-button.chat-call:hover::before{background:var(--soft,#f2ecfa)}
.chat-call-tools .icon-button:focus-visible{outline:3px solid var(--purple,#7a3bc4);outline-offset:-2px}
[data-theme=dark] .chat-call-tools .icon-button.chat-call-mute{color:#fff}
[data-theme=dark] .chat-call-tools .icon-button.chat-call-mute::before{border-color:#6b6580;background:transparent}
[data-theme=dark] .chat-call-tools .icon-button.chat-call-mute[aria-pressed=true]{color:#1b1825}
[data-theme=dark] .chat-call-tools .icon-button.chat-call-mute[aria-pressed=true]::before{border-color:#fff;background:#fff}
.chat-call-said{padding:0 4px;font-size:.8125rem;font-weight:600;color:var(--chief-ink,var(--purple,#6d28b5));white-space:nowrap}
@media (max-width:700px){.chat-call-tools .icon-button{width:40px;min-width:40px}}
/* The chat's Call takes the agent's chat colour, as the bubbles and Send do (the Founder, 10 October 2026, 22:30: "can't
   keep things purple when everything else is pink"). A colour of the person's own (that night's palette) draws the glyph
   in `--staff-glyph`, its ink for the theme, so a white or near-black colour still shows the phone; the seventeen have none. */
.chat-call-tools .icon-button.chat-call[class*="chat-color-"],[data-theme=dark] .chat-call-tools .icon-button.chat-call[class*="chat-color-"]{color:var(--staff-glyph,var(--staff-accent));background:none}
.chat-call-tools .icon-button.chat-call[class*="chat-color-"]::before,[data-theme=dark] .chat-call-tools .icon-button.chat-call[class*="chat-color-"]::before{background:color-mix(in srgb,var(--staff-accent) 12%,var(--surface,#fff))}
.chat-call-tools .icon-button.chat-call[class*="chat-color-"]:hover::before{background:color-mix(in srgb,var(--staff-accent) 20%,var(--surface,#fff))}
.chat-call-tools .icon-button.chat-call[class*="chat-color-"]:focus-visible{outline:2px solid var(--staff-accent);outline-offset:2px}