/* The call bar (public/calls/bar.js): top centre whenever you are in a huddle,
   over the grid or a space; below a desktop's menubar inside one, so Ask AI,
   which is centred on that menubar, stays reachable. */
/* The band a desktop keeps free below its menubar while a call is on
   (html.in-call, set by the desktop's paintHuddle): windows, a maximised
   window, Ask AI and the toast start below the bar, never under it. On a
   computer the in-space bar ends at 92 px (top 48, then 6 + 30 + 6 + 2), and
   the menubar is 34 px: 58 px. On a phone it is the bar's own 50 px
   (2 + 44 + 2 + 2), flush under the phone's 44 px bar. */
:root{--callband:0px}
html.in-call{--callband:58px}
html.phone.in-call{--callband:50px}
.callbar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);
  padding:6px 8px 6px 12px;border-radius:12px;border:1px solid rgba(150,175,235,.22);
  background:rgba(16,21,38,.94);backdrop-filter:blur(14px);color:#e8edfb;
  font:13px/1.2 system-ui,-apple-system,sans-serif;box-shadow:0 18px 40px -16px rgba(0,0,0,.9)}
.callbar[hidden]{display:none}
.callbar.in-space{top:48px}
.callbar.flash{animation:callflash .9s ease}
@keyframes callflash{0%{box-shadow:0 0 0 0 rgba(79,214,255,.7)}100%{box-shadow:0 0 0 14px rgba(79,214,255,0)}}
.callbar button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:0;
  border-radius:8px;background:rgba(150,175,235,.1);color:inherit;font:inherit;cursor:pointer}
.callbar button:hover{background:rgba(150,175,235,.2)}
/* On: your microphone, camera or shared screen is live (bar.js's is-on). */
.callbar button.is-on{background:rgba(79,214,255,.16);color:#4fd6ff;box-shadow:inset 0 0 0 1px rgba(79,214,255,.35)}
.callbar button.is-on:hover{background:rgba(79,214,255,.26)}
.callbar button:focus-visible{outline:2px solid #4fd6ff;outline-offset:1px}
.callbar button[hidden]{display:none}
.callbar .callspace{background:none;font-weight:600;max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callbar .callspace:disabled{cursor:default}
.callbar .callleave{background:#c9364f;color:#fff}
/* Icons only: each button's words stay in its title (the tooltip) and its
   aria-label, from bar.js's labelled(). Turn on sound keeps its words on a
   computer: it is rare, and a speaker alone would not say what it asks. */
.callbar .calllabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.callbar .callsound .calllabel{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.callbar .callmute,.callbar .callcamera,.callbar .callshare,.callbar .callpresent{min-width:32px;padding:0 7px;justify-content:center}
.callbar .callleave{min-width:44px;justify-content:center}
.callbar .callleave:hover{background:#dc4862}
.callbar .callfaces{display:flex;gap:3px}
.callbar .callface{display:inline-flex;border-radius:50%;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.callbar .callface.speaking{box-shadow:0 0 0 2px #4fd6ff}
.callbar .callfaces{background:none;padding:0;min-height:0}
.callbar .callface{position:relative}
.callbar .callcam{position:absolute;right:-4px;bottom:-4px;padding:1px;border-radius:50%;background:#101526;color:#4fd6ff}
.callbar button:disabled{opacity:.5;cursor:default}
.callbar .callinitial{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#3a4670}
.callbar .callnote{color:#ffcf7a;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callbar[data-status="failed"] .callnote{color:#ff9fb6}
.callbar .callhint{color:#9aa6c8;font-size:12px;max-width:30ch}
.callbar .callnote:empty,.callbar .callhint[hidden]{display:none}
/* Who presents, with the one button that changes it: Stop, Stop following, Follow again, Go there. */
.callbar .callfollow{display:inline-flex;align-items:center;gap:6px;color:#9fe8ff}
.callbar .callfollow[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.callbar.flash{animation:none}}
/* A sentence said for a while by a desktop holding its own huddle (desktop.js's toastInto).
   Below the bar while it shows (html.in-call), so it never hides Leave, Mute or Retry. */
.calltoast{position:fixed;left:50%;top:48px;transform:translateX(-50%);z-index:61;max-width:calc(100vw - 24px);
  padding:8px 14px;border-radius:10px;background:rgba(16,21,38,.96);border:1px solid rgba(255,159,182,.35);
  color:#ffd6e0;font:13px/1.3 system-ui,-apple-system,sans-serif}
html.in-call .calltoast{top:100px}

/* Phones (html.phone, from /ui/phone.js): across the top, under the
   launcher's header on the grid and under a desktop's 44 px bar in a space;
   icons only, Turn on sound too, 44 px targets; no Share (sharing is computer-only). */
html.phone .callbar{left:0;right:0;transform:none;max-width:none;border-radius:0;justify-content:space-between;
  padding:2px 8px;top:calc(52px + env(safe-area-inset-top))}
html.phone .callbar.in-space{top:calc(44px + env(safe-area-inset-top))}
html.phone .callbar button{min-height:44px;min-width:44px;justify-content:center;padding:0 8px}
html.phone .callbar .callsound .calllabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.phone .callbar .callshare{display:none}
html.phone .callbar .callhint{display:none}
html.phone .callbar .callnote{flex:1;min-width:0}
html.phone .callbar .callfollowtext{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.phone .calltoast{top:calc(96px + env(safe-area-inset-top))}
html.phone.in-call .calltoast{top:calc(102px + env(safe-area-inset-top))}