:root { color-scheme:dark; font:15px system-ui,sans-serif; background:#111428; }
body { margin:0; }
[hidden] { display:none !important; }
#universe { position:fixed; inset:0; width:100%; height:100%; border:0; }
#call {
  position:fixed; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right));
  width:min(295px,calc(100% - 16px)); box-sizing:border-box; padding:10px;
  border:1px solid #756d99; border-radius:16px; color:#fff6ea; background:#201b38;
  box-shadow:0 6px 24px #0008;
}
#call[data-mini] { width:min(150px,calc(100% - 16px)); }
.call-bar,.call-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.call-bar { justify-content:space-between; }
#call[data-mini] .call-bar { justify-content:center; }
#call[data-mini] #call-video { margin-top:6px; }
#call[data-mini] #self { display:none; }
#call[data-mini] #call-status,#call[data-mini] .call-actions { display:none; }
#call button { font:inherit; font-size:.85rem; cursor:pointer; color:inherit; background:#443568; border:1px solid #8b7da8; border-radius:9px; padding:.42rem .55rem; }
#call button:disabled { opacity:.55; cursor:default; }
#end,#decline { background:#772f4b !important; }
#call-status { font-size:.84rem; margin:.55rem 0; }
#call-video { position:relative; margin-top:8px; }
#partner { display:block; width:100%; aspect-ratio:16/10; background:#100d1b; border-radius:9px; object-fit:contain; }
#self { position:absolute; width:27%; right:5px; bottom:5px; border-radius:6px; background:#292046; transform:scaleX(-1); }

.call-window-actions { display:flex; align-items:center; gap:6px; }
#call .call-window-actions button { min-height:44px; }
#call #close { min-width:44px; font-size:1.5rem; line-height:1; background:#772f4b; }
#call button:focus-visible { outline:2px solid #ffe4a8; outline-offset:2px; }