/* A call is a window, an expanded stage, or a compact dock. Each state has a visible way back. */
#callPanel.call-overlay{inset:7vh max(24px,calc((100vw - 1060px)/2)) auto;width:auto;height:min(760px,86dvh);padding:18px;background:#101514;color:#edf2ed;border:1px solid #ffffff20;border-radius:24px;box-shadow:0 28px 110px #0009;gap:14px;isolation:isolate}
#callPanel .call-top{position:relative;inset:auto;padding:0 2px;min-height:44px;background:none;flex-shrink:0;gap:12px;pointer-events:auto}
#callPanel .call-person h2{font-size:17px;letter-spacing:-.03em;margin:0 0 5px;font-weight:600}
#callPanel .call-meta{display:flex;align-items:center;gap:12px}
#callPanel .call-top-btn{border-radius:12px;background:#202923;border:1px solid #ffffff15;width:40px;height:40px;color:#edf2ed}
#callPanel .call-workspace-return{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #bad5c244;background:#bad5c2;color:#101514;border-radius:12px;font-size:12px;font-weight:650;min-height:40px}
#callPanel .call-workspace-return svg{width:16px;height:16px}
#callPanel .call-stage{background:radial-gradient(ellipse at 50% 40%,#26362c 0,#171d1b 65%);border-radius:17px;border:1px solid #ffffff0d;position:relative;inset:auto;flex:1;min-height:0}
#callPanel .remote-placeholder{gap:16px;font-size:13px;letter-spacing:.02em}
#callPanel .remote-placeholder .avatar{box-shadow:0 0 0 18px #bad5c206,0 0 0 36px #bad5c204}
#callPanel .local-tile{border-radius:14px;border:1px solid #ffffff30;box-shadow:0 12px 32px #0005;max-width:38%}
#callPanel .call-controls{position:relative;inset:auto;transform:none;margin:0 auto;padding:6px!important;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #ffffff12;background:#171d1b;border-radius:18px!important;width:max-content;max-width:100%;flex-shrink:0;box-shadow:none;overflow:visible}
#callPanel .call-control{display:flex;flex-direction:column;justify-content:center;gap:5px;border-radius:12px;width:64px;height:58px;min-height:58px;background:transparent;color:#d2ded5;position:relative;flex-shrink:0;border:1px solid transparent;transform:none!important}
#callPanel .call-control::after{content:attr(data-label);font-size:10px;line-height:1;font-weight:500;white-space:nowrap}
#callPanel .call-control svg{width:19px;height:19px}
#callPanel .call-control:hover,#callPanel .call-control.active{background:#bad5c21a;border-color:#bad5c22b;color:#edf2ed}
#callPanel .call-control.off{background:#663d43;color:#ffd8d8}
#callPanel .call-end{height:46px;min-height:46px;border-radius:12px;background:#813e45;margin:0 4px;padding:0 17px;gap:8px;font-size:12px;flex-shrink:0}
#callPanel .call-end:hover{background:#a14b54}
#callPanel .call-secondary-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;padding:8px;border:1px solid #ffffff1a;border-radius:16px;background:#202923;position:absolute;z-index:30;bottom:119px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;box-shadow:0 15px 50px #0006}
#callPanel .call-secondary-controls .call-control{width:72px}
#callPanel .call-note{margin:0;font-size:10px;line-height:1.4;color:#8f9e93;flex-shrink:0}
#callPanel :is(button,textarea):focus-visible{outline:2px solid #bad5c2;outline-offset:3px}
#callPanel [hidden]{display:none!important}
#callPanel .call-chat-panel{border:1px solid #ffffff20;border-radius:18px;background:#171d1b;color:#edf2ed;max-height:calc(100% - 130px)}
#callPanel .call-chat-head{background:#202923;border-bottom:1px solid #ffffff12}
#callPanel .call-chat-composer{background:#101514}
#callPanel .call-chat-message.own .call-chat-text{background:#2d4234}
#callPanel.call-overlay:is(.focus-remote,.focus-self){inset:0;width:100%;height:100dvh;border-radius:0;padding:max(14px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom));border:none;gap:14px}
#callPanel:is(.focus-remote,.focus-self) .call-top{position:relative;inset:auto;background:none;padding:0;z-index:20}
#callPanel:is(.focus-remote,.focus-self) .call-stage{position:relative;inset:auto;border-radius:16px;flex:1}
#callPanel:is(.focus-remote,.focus-self) .call-controls{position:relative;inset:auto;transform:none;margin:0 auto;z-index:20}
#callPanel.focus-self .local-tile{max-width:none;border-radius:0}
#callPanel.focus-self .self-camera-tools{bottom:14px}
#callPanel:is(.focus-remote,.focus-self) .call-secondary-controls{bottom:100px}
#callPanel.call-overlay.minimized{inset:auto 18px 18px auto;width:320px;max-width:calc(100vw - 24px);height:244px;max-height:calc(100dvh - 24px);border-radius:20px;padding:10px;gap:8px}
#callPanel.minimized .call-top{min-height:32px;padding:0}
#callPanel.minimized .call-person h2{font-size:12px;margin:0 0 3px}
#callPanel.minimized .call-quality{display:none}
#callPanel.minimized .call-stage{min-height:70px;border-radius:12px}
#callPanel.minimized .call-controls{padding:2px!important;gap:6px;border:none;background:transparent}
#callPanel.minimized .call-controls .call-control{width:38px;height:34px;min-height:34px}
#callPanel.minimized .call-control::after{display:none}
#callPanel.minimized .call-end{height:34px;min-height:34px;padding:0 12px;margin:0}
#callPanel.minimized :is(#expandCall,#restoreCall,#callMoreTools,#moreCall,#screenCall,#callChatToggle){display:none!important}
#callPanel.minimized .local-tile{max-width:76px}
@media(max-width:640px){
 #callPanel.call-overlay{inset:max(8px,env(safe-area-inset-top)) 8px auto;height:calc(100dvh - max(16px,env(safe-area-inset-top)) - env(safe-area-inset-bottom));padding:12px;border-radius:20px;gap:10px}
 #callPanel .call-control{width:45px;height:52px;min-height:52px;gap:5px}
 #callPanel .call-controls{gap:2px;padding:4px!important}
 #callPanel .call-end{padding:0 11px;margin:0 1px}
 #callPanel .call-end span{display:none}
 #callPanel .call-workspace-return{padding:10px;font-size:11px}
 #callPanel .call-top-actions{gap:5px}
 #callPanel .call-person h2{font-size:14px}
 #callPanel .call-quality{font-size:10px}
 #callPanel .call-secondary-controls{bottom:110px;width:calc(100% - 24px)}
 #callPanel .call-secondary-controls .call-control{width:66px}
 #callPanel.call-overlay.minimized{inset:auto 12px max(12px,env(safe-area-inset-bottom)) auto;width:286px;height:224px}
}
@media(prefers-reduced-motion:reduce){#callPanel,#callPanel *{animation:none!important;transition:none!important}}