/* Video Call: the look. */
:root{--bg:#0f1214;--panel:#181d21;--line:#2a3238;--fg:#e9eef0;--dim:#93a1aa;--go:#3fbf74;--stop:#e0533d;--ring:#f0b429}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 14px;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
button.go{background:var(--go);border-color:var(--go);color:#06150c;font-weight:700}
button.stop{background:var(--stop);border-color:var(--stop);color:#fff;font-weight:700}
input{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
#home{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
h1{font-size:20px;margin:6px 0 10px;letter-spacing:.02em}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs button{flex:1}.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg);font-weight:700}
.sub{color:var(--dim);font-size:13px;margin:0 0 12px}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px}
.row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:#46525a;flex:none}
.on .dot{background:var(--go);box-shadow:0 0 0 3px #3fbf7433}
.row .state{color:var(--dim);font-size:12px;white-space:nowrap}
.row button{padding:7px 14px}
#people .row:not(.on) button{opacity:.35;pointer-events:none}
.form{display:flex;gap:8px;margin:14px 0 6px}.form input{flex:1}
.note{color:var(--dim);font-size:13px;margin:10px 2px}
.camopt{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;margin:4px 2px 14px}
.empty{color:var(--dim);font-size:14px;padding:18px 4px;text-align:center;border:1px dashed var(--line);border-radius:12px}
#call,#ringing,#pick{position:fixed;inset:0;display:none}
#call{background:#000}
#stage{position:absolute;inset:0}
.tile{position:absolute;border:1px solid #000}.tile b{position:absolute;left:8px;bottom:4px;font-size:13px;text-shadow:0 1px 3px #000;z-index:2}
.tile.novid{display:grid;place-items:center;background:#1b2126}.tile.novid i{font-style:normal;font-size:30px;font-weight:700;color:#5c6a73}
#self{position:absolute;display:none;border:1px solid #000;background:#1b2126}#self b{position:absolute;left:8px;bottom:4px;font-size:13px}
#callwho{position:absolute;left:0;max-width:48%;top:max(16px,env(safe-area-inset-top));text-align:left;font-weight:700;text-shadow:0 1px 3px #000;padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#callmsg{position:absolute;left:0;right:0;top:45%;text-align:center;color:var(--dim);padding:0 24px;text-shadow:0 1px 3px #000}
#listen{position:absolute;left:12px;right:12px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 56px);display:flex;gap:6px;overflow-x:auto}
#listen button{padding:5px 10px;font-size:12px;white-space:nowrap;background:#000a}
#bar{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 12px}
#bar button{min-width:76px}
#bar button.off{background:#fff;color:#000}
#ringing,#pick{background:#000c;place-items:center}
.box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;min-width:260px;max-width:90vw}
.box .big{font-size:20px;font-weight:700;margin:4px 0 14px}
.btns{display:flex;gap:12px;justify-content:center}
#picklist button{display:block;width:100%;margin:6px 0}