/* A group call in a Workspace (group-call.js; the Founder, 8 October 2026: "group voice chats with agents and humans…
   Like Zoom style"). The call lives in the top bar in the one-to-one call's own pill (call-sheet.css; the Founder, 22:17:
   never a floating bubble; 9 October, 02:00: round faces, no ring, the time in the centre): only what a group adds is
   here. The faces of who is in the call stack on the left, each overlapping the last; whoever speaks is lifted above the
   rest; the running time sits in the centre and Leave on the right. */
.group-call-pill .call-pill-faces{display:inline-flex;align-items:center;padding-inline-start:2px}
.group-call-pill .call-pill-ring{box-shadow:0 0 0 2px var(--pill-bg);transition:transform .15s ease-out}
.group-call-pill .call-pill-ring+.call-pill-ring{margin-inline-start:-6px}
.group-call-pill .call-pill-human>.human-photo{display:grid;place-items:center;box-sizing:border-box;width:30px;height:30px;min-width:30px;overflow:hidden;border-radius:50%;background:#f2ecfa;color:#541c91;font-size:.625rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.group-call-pill .call-pill-human>.human-photo *{font-size:inherit;line-height:inherit}
.group-call-pill .call-pill-more{display:grid;place-items:center;font-size:.6875rem;font-weight:700;background:#f2ecfa;color:#541c91}
/* Whoever speaks now: lifted above the faces beside them, never ringed. */
.group-call-pill[data-state=live] .call-pill-ring.speaking{transform:translateY(-2px) scale(1.1);z-index:1}
@media (prefers-reduced-motion:reduce){.group-call-pill .call-pill-ring{transition:none}}
.group-call-pill .call-pill-hear{border:0;background:none;color:inherit;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;text-decoration:underline}
/* Ended: how it ended for a moment (that the call is in the Group chat, or what went wrong), then the pill goes. */
.group-call-pill[data-state=ended]{height:auto;min-height:36px;border-radius:18px;padding-inline-end:10px}
.group-call-pill[data-state=ended] .call-pill-said{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.75rem;font-weight:500}
/* Start a group call and Join on the Group chat's header; Call, Join or Leave on Group info. While the call is on, the
   header carries Mute and Leave (call-sheet.css .chat-call-tools, the one-to-one call's own). */
.group-chat-head .group-call-start{flex:none}
.group-call-join{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--green,#16794d);color:#fff;font:inherit;font-size:.875rem;font-weight:700;cursor:pointer}
.group-call-join .icon{width:18px;height:18px}
.group-call-join:focus-visible{outline:3px solid var(--purple,#7a3bc4);outline-offset:2px}
.group-info-action.group-call-on .group-info-action-icon{background:var(--green,#16794d);color:#fff}
.group-info-action.group-call-leave .group-info-action-icon{background:#e5484d;color:#fff}
.group-info-action.group-call-leave .group-info-action-icon .icon{width:22px;height:22px}
/* Expanded audio controls, laid out as WhatsApp's call screen (open list 49; the Founder's reference, 15 October 2026):
   Minimise top left as a dark round button with the shrink arrows and no ring, the name and time in the centre, Add people
   and the chat bubble stacked top right; who is on the call in tiles in the middle, each with the face, the name, the
   role, the bars while they speak and the live caption of whoever speaks now; a rounded panel of round buttons in two
   rows with their labels under them. Minimize/Escape returns to the same centered header pill. */
.group-call-screen{position:fixed;inset:0;width:min(46rem,calc(100vw - 2rem));max-width:none;height:min(44rem,calc(100dvh - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:0;border-radius:1.5rem;background:#1f1a29;color:#f4f1f8;box-sizing:border-box;overflow:hidden}
.group-call-screen[open]{display:flex;flex-direction:column}
.group-call-screen::backdrop{background:rgb(20 10 30 / .55)}
.group-call-screen:focus{outline:none}
.group-call-screen-head{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:.5rem;padding:calc(.75rem + env(safe-area-inset-top)) .75rem .25rem}
.group-call-screen-title{min-width:0;text-align:center}
.group-call-screen-head h2{margin:.35rem 0 .1rem;font-size:1.15rem;overflow-wrap:anywhere;color:inherit}
.group-call-corner{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#0d0b10;color:#fff;cursor:pointer;box-shadow:none}
.group-call-corner:hover{background:#000}
.group-call-corner .icon,.group-call-round .icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.group-call-corner:disabled{opacity:.45;cursor:default}
.group-call-corner{min-width:44px;min-height:44px}
.group-call-screen .btn{min-height:44px;white-space:normal}
.group-call-screen-status{text-align:center;margin:0;font-variant-numeric:tabular-nums;color:rgb(244 241 248 / .8);font-size:.875rem;overflow-wrap:anywhere}
.group-call-screen-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));grid-auto-rows:11.5rem;align-content:center;align-items:start;gap:.75rem;overflow:auto;min-height:0;flex:1;padding:.75rem 1rem 1rem}
/* A tile is fixed (the Founder, 16 October 2026): face, name, role and bars, each in a box of its own size; nothing said
   on the call is ever written into it, so speech never resizes or moves a tile. */
.group-call-person{position:relative;box-sizing:border-box;height:11.5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem .5rem;border-radius:1rem;background:rgb(255 255 255 / .07);text-align:center;min-width:0;overflow:hidden}
.group-call-person>strong{display:block;max-width:100%;height:1.25rem;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-call-person>.group-call-role{display:block;max-width:100%;height:1rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-call-person>.group-call-role[hidden]{display:block;visibility:hidden}
.group-call-screen-face{position:relative;width:72px;height:72px}
.group-call-screen-face>:not(.group-call-crown){display:grid;place-items:center;width:72px;height:72px;border-radius:50%;overflow:hidden;background:#f2ecfa;color:#541c91}
/* The Chief: a small crown on the face's corner, never the word. */
.group-call-crown{position:absolute;top:-2px;inset-inline-end:-2px;display:grid;place-items:center;box-sizing:border-box;width:24px;height:24px;padding:4px;border-radius:50%;background:#fff;color:var(--chief-ink,var(--purple,#6d28b5));box-shadow:0 0 0 2px #1f1a29}
.group-call-crown .primary-crown{width:100%;height:100%}
.group-call-screen-face img{width:100%;height:100%;object-fit:cover}
.group-call-person small{font-size:.75rem;color:rgb(244 241 248 / .75)}
/* The one caption, at the bottom of the screen: the speaker's name and what they just said. Two lines are always laid
   out, filled or not, so the tiles above never move. */
/* Tap to hear: a voice this phone held back. The whole tile is its button; the words sit where the bars were. */
.group-call-hear{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 .25rem 1rem;border:0;border-radius:inherit;background:none;color:#fff;font:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}
.group-call-hear[hidden]{display:none}
.group-call-hear span{display:block;height:24px;line-height:24px;text-decoration:underline}
.group-call-hear:focus-visible{outline:3px solid #c9a6f2;outline-offset:-3px}
/* What stops the agents hearing or speaking, in a box with its one button. */
.group-call-screen-alert{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .75rem;margin:0 1rem .75rem;padding:.75rem 1rem;border-radius:1rem;background:#fff3cd;color:#3d2c00;font-size:.875rem;line-height:1.4}
.group-call-screen-alert[hidden]{display:none}
.group-call-screen-alert p{margin:0;flex:1 1 14rem;overflow-wrap:anywhere}
.group-call-screen-alert .btn{flex:none;background:#2d2439;color:#fff;border-color:#2d2439}
.group-call-screen>[data-call-screen-action=hear]{background:var(--purple,#6d28b5);border-color:var(--purple,#6d28b5);color:#fff}
.group-call-screen>[data-call-screen-action=hear],.group-call-screen>[data-call-screen-action=close]{align-self:center;margin:.25rem 0 .5rem;min-width:9rem}
/* The bottom panel: six round buttons in two rows, End red (WhatsApp's, the Founder's reference of 15 October 2026). */
.group-call-screen-footer{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;margin:0 .75rem calc(.75rem + env(safe-area-inset-bottom));padding:.9rem .5rem;border-radius:1.75rem;background:#2c2538}
.group-call-round{display:flex;flex-direction:column;align-items:center;gap:.45rem;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.875rem;cursor:pointer}
.group-call-round-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#0d0b10}
.group-call-round{min-height:44px}
.group-call-round-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-call-round[aria-pressed=true] .group-call-round-icon{background:#f4f1f8;color:#1f1a29}
.group-call-round:disabled{opacity:.45;cursor:default}
.group-call-screen-leave .group-call-round-icon{background:#e5484d;color:#fff}
.group-call-round:focus-visible,.group-call-corner:focus-visible{outline:3px solid #c9a6f2;outline-offset:2px}
.group-call-screen-over .group-call-screen-status{color:#fff;font-weight:600}
@media(max-width:600px){.group-call-screen{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}}
@media(prefers-reduced-motion:reduce){.group-call-person.speaking .group-call-screen-face>:not(.group-call-crown){transition:none}}
/* Keep the actual centered header pill reachable when mobile Group chat otherwise fills the viewport. */
@media(max-width:699px){
 body:has(.group-call-pill){--group-call-header-height:65px}
 body:has(.group-call-pill) .topbar{height:var(--group-call-header-height);min-height:var(--group-call-header-height)}
 body:has(.group-call-pill) .chat-app.group-chat-app{top:var(--group-call-header-height)}
 html.chat-kb body:has(.group-call-pill) .chat-app.group-chat-app.chat-kb-host{top:var(--group-call-header-height)!important;height:calc(var(--vvh,100dvh) - var(--group-call-header-height))!important}
}
/* Narrow screens retain every global action below the centered pill, instead of overlapping it. */
@media(max-width:420px){
 body:has(.group-call-pill){--group-call-header-height:104px}
 body:has(.group-call-pill) .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px minmax(44px,auto);height:auto;min-height:0;padding:4px 8px!important;gap:0!important}
 body:has(.group-call-pill) .topbar .top-title{display:contents}
 body:has(.group-call-pill) .topbar .top-title>.top-crumb{display:none}
 body:has(.group-call-pill) .topbar .top-title>.top-page{display:block;grid-row:2;grid-column:1;min-width:0;max-width:100%;padding-inline-end:8px}
 body:has(.group-call-pill) .topbar .top-title>.mobile-menu{grid-row:1;grid-column:1;justify-self:start;margin:0}
 body:has(.group-call-pill) .topbar .top-right{grid-row:2;grid-column:2;justify-self:end;position:static;gap:0}
 body:has(.group-call-pill) .topbar [data-chief-crown]{display:none}
 /* Three faces, the +N and the running time whole: at 180px the time read "0…" (22 October 2026, the night's walk). Clear
    of the menu at 320px. */
 body:has(.group-call-pill) .topbar .group-call-pill{top:28px;max-width:min(212px,calc(100vw - 112px))}
 body:has(.group-call-pill) .group-chat-head{flex-wrap:wrap}
 body:has(.group-call-pill) .group-chat-head .chat-call-tools{order:4;width:100%;justify-content:center}
}
/* The people chooser (call-people.js): the Chief's crown on the face's corner, and a round phone button that calls. */
.call-people-face-box{position:relative;flex:none;width:40px;height:40px}
.call-people-crown{position:absolute;top:-3px;inset-inline-end:-3px;display:grid;place-items:center;box-sizing:border-box;width:17px;height:17px;padding:2px;border-radius:50%;background:#fff;color:var(--chief-ink,var(--purple,#6d28b5));box-shadow:0 0 0 1.5px var(--surface,#fff),0 1px 2px rgb(0 0 0 / .2)}
.call-people-crown .primary-crown{width:100%;height:100%}
.call-people-call{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--green,#16794d);color:#fff;cursor:pointer}
.call-people-call .icon{width:22px;height:22px}
.call-people-call:disabled{opacity:.45;cursor:default}
.call-people-call:focus-visible{outline:3px solid var(--purple,#7a3bc4);outline-offset:2px}
/* The one-to-one call's screen (call-sheet.js, the Founder, 17 October 2026): the same screen, with the one agent's face
   large at its centre, the name under it, and no tile around them, as a phone's call screen. */
.one-call-screen .group-call-screen-people{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;align-content:center;justify-items:center}
.one-call-screen .group-call-person{height:auto;background:none;padding:0;gap:.6rem;width:100%}
.one-call-screen .group-call-screen-face,.one-call-screen .group-call-screen-face>:not(.group-call-crown){width:144px;height:144px}
.one-call-screen .group-call-screen-face [data-portrait]{font-size:56px}
.one-call-screen .group-call-crown{width:40px;height:40px;padding:7px;top:0;inset-inline-end:0}
.one-call-screen .group-call-person>strong{font-size:1.6rem;height:2rem;line-height:2rem}

/* A tile (the Founder, 17 October 2026): the face carries a ring in the person's accent while they speak, a small muted
   mark and, for an agent, its state dot at its foot. Nothing is written into a tile and nothing resizes it. */
.group-call-screen-face>:not(.group-call-crown):not(.group-call-mark):not(.group-call-state){transition:box-shadow .15s}
.group-call-person.speaking .group-call-screen-face>:not(.group-call-crown):not(.group-call-mark):not(.group-call-state){box-shadow:0 0 0 3px #1f1a29,0 0 0 6px var(--purple,#6d28b5)}
.group-call-mark{position:absolute;bottom:-2px;inset-inline-end:-2px;display:grid;place-items:center;box-sizing:border-box;width:24px;height:24px;padding:4px;border-radius:50%;background:#e5484d;color:#fff;box-shadow:0 0 0 2px #1f1a29}
.group-call-mark .icon{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.group-call-state{position:absolute;bottom:0;inset-inline-start:0;width:14px;height:14px;border-radius:50%;background:#9aa2b1;box-shadow:0 0 0 2px #1f1a29}
.group-call-state.state-online{background:#16c784}
.group-call-state.state-unresponsive{background:#ff931f}
.group-call-state.state-disconnected{background:#f04458}
.group-call-hear .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:.35rem;flex:none}
.group-call-hear{align-items:flex-end}
.group-call-person.group-call-held .group-call-screen-face{opacity:.6}
@media(forced-colors:active){.group-call-person.speaking .group-call-screen-face>:not(.group-call-crown){outline:3px solid Highlight}}

.group-call-wave{flex:none;height:24px;display:flex;align-items:center;gap:3px;color:var(--purple,#c9a6f2)}
.group-call-wave i{width:3px;height:3px;border-radius:3px;background:currentColor}
.group-call-person.speaking .group-call-wave i{height:16px;animation:group-call-wave .7s ease-in-out infinite alternate}
.group-call-person.speaking .group-call-wave i:nth-child(2n){animation-delay:-.3s;height:9px}
.group-call-person.speaking .group-call-wave i:nth-child(3){animation-delay:-.5s;height:22px}
.group-call-person[data-call-status] .group-call-wave{visibility:hidden}
.group-call-person.group-call-held .group-call-wave{visibility:hidden}
@keyframes group-call-wave{to{transform:scaleY(.35)}}
.one-call-screen .group-call-wave{display:none}
/* Calling: a soft ring breathes round the face until they answer; No answer dims the tile. */
.group-call-person.group-call-calling .group-call-screen-face>:not(.group-call-crown):not(.group-call-mark):not(.group-call-state){animation:group-call-ring 1.6s ease-in-out infinite}
.group-call-person[data-call-status=noanswer]{opacity:.6}
@keyframes group-call-ring{0%,100%{box-shadow:0 0 0 3px #1f1a29,0 0 0 4px color-mix(in srgb,var(--purple,#6d28b5) 25%,transparent)}50%{box-shadow:0 0 0 3px #1f1a29,0 0 0 9px color-mix(in srgb,var(--purple,#6d28b5) 55%,transparent)}}
@media(prefers-reduced-motion:reduce){.group-call-person.speaking .group-call-wave i,.group-call-person.group-call-calling .group-call-screen-face>*{animation:none}}

/* Keep the four action labels whole on narrow phones. */
@media(max-width:360px){.group-call-screen-footer .group-call-round{font-size:.75rem}.group-call-round-label{white-space:normal;overflow-wrap:anywhere;text-align:center}}
/* The chooser's rows: the agent's state beside the name, a hint under the row, the ticks in the person's accent. */
.call-people input[type=checkbox]{accent-color:var(--purple,#6d28b5)}
.call-people-state{flex:none;display:inline-flex}
.call-people-hint{color:var(--muted)}