/* callhost-ui.css , the minimized call (BUILD-QUEUE 425, PLAN-call-minimize-A 3.6, mockup FRBuMLH1FBuRCZWpqXVMf4). Everything here is inert until callhost-ui.js draws something, which it never does with call_minimize_on '0'. */

/* ---- the chevron: drawn hidden everywhere, shown only while the switch is ON (html.callmin-on, set by callhost-ui.js) ---- */
.cu-chev { display: none; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255,255,255,.16); color: #fff; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
html.callmin-on .cu-chev { display: inline-flex; }
.cu-chev:focus-visible, .cu-bar:focus-visible, .cu-open:focus-visible, .cu-mini:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- the voice BAR: green, fixed at the very top, below the notch, above the threads (30), the desktop (9000) and the notices (9999, pushed down below), under the sheets (10039+) ---- */
#callUi .cu-bar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 10000; box-sizing: border-box; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 8px 14px; border: 0; background: #1d7a46; color: #fff; font: 600 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: center; cursor: pointer; }
/* --callbar-h (0 when there is no bar) is added to the TOP of everything that is fixed to the top: the page, the full-screen phone threads, the NB full screens, the desktop, the two notice bars */
html { --callbar-h: 0px; }
body.cu-has-bar { padding-top: calc(var(--callbar-h) + env(safe-area-inset-top, 0px)); }
body.cu-has-bar.pc-phone.pc-firm #messagesCard, body.cu-has-bar.pc-phone.pc-group #gtWrap { top: calc(var(--callbar-h) + env(safe-area-inset-top, 0px)) !important; }
body.cu-has-bar #pdRoot { top: calc(var(--callbar-h) + env(safe-area-inset-top, 0px)) !important; }
body.cu-has-bar #i18nBar, body.cu-has-bar #offBar { top: calc(var(--callbar-h) + env(safe-area-inset-top, 0px)); }
body.cu-has-bar.nb .nb-frame, body.cu-has-bar.nb #nbRoot { min-height: calc(100vh - var(--callbar-h)); }

/* ---- the video TILE: 118 x 168, radius 16, over everything but the sheets; the pictures are the call's own ---- */
#callUi .cu-tile, .bfv.bfv-mini { position: fixed; left: var(--cu-x, 252px); top: var(--cu-y, 70px); width: 118px; height: 168px; border-radius: 16px; overflow: hidden; background: #2c3270; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 10000; touch-action: none; cursor: grab; }
.cu-dragging { cursor: grabbing; transition: none; }
#callUi .cu-tile, .bfv.bfv-mini { transition: left .18s ease, top .18s ease; }
#callUi .cu-tile.cu-dragging, .bfv.bfv-mini.cu-dragging { transition: none; }
.cu-open { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 0; z-index: 1; }
.cu-ini { font-size: 30px; font-weight: 700; opacity: .6; }
.cu-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cu-time { position: absolute; left: 6px; top: 6px; z-index: 2; font-size: 11px; background: rgba(0,0,0,.35); border-radius: 8px; padding: 2px 6px; pointer-events: none; }
.cu-btns { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; gap: 10px; }
.cu-mini { width: 30px; height: 30px; border-radius: 15px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; }
.cu-mini[aria-pressed="true"] { background: #fff; color: #1d2252; }
.cu-mini.cu-end { background: #d93a3a; color: #fff; }

/* ---- an office video call (video.js .bfv): the SAME root becomes the tile or goes away as a bar; nothing is moved, so no video element is re-parented ---- */
.bfv.bfv-mini { inset: auto !important; right: auto !important; bottom: auto !important; display: block !important; padding: 0 !important; }
.bfv.bfv-mini > *:not(.cu-over):not(.bfv-grid) { display: none !important; }
.bfv.bfv-mini .bfv-grid { display: block !important; position: absolute !important; inset: 0 !important; padding: 0 !important; grid-template-columns: none !important; }
.bfv.bfv-mini .bfv-grid video { display: none !important; }
.bfv.bfv-mini .bfv-grid video.cu-first { display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; aspect-ratio: auto !important; }   /* the first OTHER person (callhost-ui.js marks it); with none, the initials show */
.bfv.bfv-mini.bfv-voice { width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; left: 0; top: 0; box-shadow: none; }   /* a voice call minimized is the bar; its media keeps playing, only invisible */
.cu-over { position: absolute; inset: 0; z-index: 3; }
.cu-over .cu-open { z-index: 1; }
@media (prefers-reduced-motion: reduce) { #callUi .cu-tile, .bfv.bfv-mini { transition: none; } }