:root{
  --bg:#0d0f13; --bar:#151922; --tile:#0a0c10; --line:#28303c;
  --ink:#e8edf4; --muted:#8b98ab; --lime:#c6f24e; --red:#f7768e;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); overflow:hidden;
  font:13px/1.4 -apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  display:flex; flex-direction:column; user-select:none}

/* ── drag bar ── */
#bar{height:34px; flex:0 0 34px; background:var(--bar); display:flex;
  align-items:center; justify-content:space-between; padding:0 8px 0 12px;
  -webkit-app-region:drag; border-bottom:1px solid var(--line)}
.brand{font-weight:600; letter-spacing:.01em; display:flex; align-items:center; gap:8px}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--lime)}
.room{color:var(--muted); font-weight:500}
.winbtns{-webkit-app-region:no-drag; display:flex; gap:4px}
.wb{width:26px; height:24px; border:0; border-radius:6px; background:transparent;
  color:var(--muted); cursor:pointer; font-size:13px}
.wb:hover{background:#222a36; color:var(--ink)}
.wb.close:hover{background:var(--red); color:#111}
.wb.active{color:var(--lime)}

/* ── stage: tiles + side panel ── */
#stage{flex:1; display:flex; min-height:0; position:relative}
/* tiles auto-arrange for ANY participant count: 1 fills, 2 side-by-side, 3-4 wrap
   into a grid, etc. Narrow/tall windows collapse to a single column. */
#tiles{flex:1; display:grid; gap:8px; padding:8px; min-width:0; min-height:0;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); grid-auto-rows:1fr;
  align-content:stretch; justify-items:center; align-items:center}   /* center tiles, don't stretch */
.tile{position:relative; background:var(--tile); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; min-width:0; min-height:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center}
/* size the FRAME to the video's aspect ratio (JS sets aspect-ratio on loadedmetadata):
   a small window that wraps the picture, centered, with free space around — not a
   full-cell black box with a tiny video floating in it. */
.tile.fit{width:auto; height:auto; max-width:100%; max-height:100%}
.tile.you{border-color:#39506a}
.tile.speaking{border-color:var(--lime); box-shadow:0 0 0 2px rgba(198,242,78,.35)}
/* contain, NOT cover: show the WHOLE camera frame the way the camera sees it —
   letterbox with empty space rather than zooming in and cropping top/bottom (or sides).
   A single wide tile no longer blows the person up into a cropped "sausage". */
.tile video{width:100%; height:100%; object-fit:contain; background:#000}
.tile .ph{color:var(--muted); text-align:center; padding:10px; font-size:12px}
.tile .name{position:absolute; left:8px; bottom:7px; background:rgba(0,0,0,.55);
  padding:2px 8px; border-radius:999px; font-size:11px; display:flex; gap:6px; align-items:center}
.tile .name .m{color:var(--red)}
#tiles.hide-names .name{display:none}   /* ⚙️ → “Show names on tiles” off */
.tile .grip{position:absolute; right:2px; bottom:2px; width:14px; height:14px; cursor:nwse-resize;
  -webkit-app-region:no-drag; opacity:.5}

/* ── side panel: docks to the right and takes its own column (does NOT overlay the video).
      Because tiles now size to the video's aspect ratio, the narrower area just re-centers a
      smaller window — the picture never distorts, so no need to cover the video. ── */
#panel{flex:0 0 320px; background:var(--bar); border-left:1px solid var(--line);
  display:flex; flex-direction:column; min-width:0}
#panel.hidden{display:none}
.ptabs{display:flex; gap:4px; padding:8px 8px 0}
.ptab{flex:1; border:0; background:transparent; color:var(--muted); padding:7px;
  border-radius:8px 8px 0 0; cursor:pointer; font-weight:600}
.ptab.active{background:var(--bg); color:var(--lime)}
.pbody{flex:1; overflow:auto; padding:12px; background:var(--bg)}
.pbody.hidden{display:none}
.muted{color:var(--muted); font-style:italic}
.summary h4{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#9bc32f; margin:12px 0 6px}
.summary ul{padding-left:18px} .summary li{margin:3px 0}
/* ── group chat + AI assistant ── */
.ptab.dot{position:relative}
.ptab.dot::after{content:""; position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--lime)}
.chatpane{display:flex; flex-direction:column; padding:0}
.chatlog{flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:8px}
.cmsg{max-width:88%; padding:7px 10px; border-radius:12px; font-size:13px; line-height:1.4; word-break:break-word}
.cmsg .cwho{display:block; font-size:11px; font-weight:700; margin-bottom:2px}
.cmsg.me{align-self:flex-end; background:#1c3320; border:1px solid #2c5a38}
.cmsg.me .cwho{color:#9bc32f}
.cmsg.them{align-self:flex-start; background:#11151c; border:1px solid var(--line)}
.cmsg.ai{align-self:flex-start; background:#191426; border:1px solid #4a3a6e; white-space:pre-wrap}
.cmsg.ai .cwho{color:#bb9af7}
.cmsg.task{align-self:stretch; max-width:100%; background:#20250f; border:1px solid #4a5a1f}
.cmsg.task .ctask-h{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#c6f24e}
.cmsg.task .ctask-who{font-weight:700; margin-top:3px}
.cmsg.task .ctask-t{margin:2px 0 3px}
.cmsg.task .ctask-by{font-size:11px; color:var(--muted)}
.chatbar{flex:0 0 auto; display:flex; gap:6px; padding:8px; border-top:1px solid var(--line); background:var(--bar)}
.chatbar input{flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:9px 11px; font-size:13px; outline:none}
.chatbar input:focus{border-color:var(--lime)}
.chat-ai,.chat-send{flex:0 0 auto; width:38px; border-radius:9px; border:1px solid var(--line); cursor:pointer; font-size:15px}
.chat-ai{background:#241a38; color:#bb9af7; border-color:#4a3a6e}
.chat-ai.on{background:#3a2d5c; color:#d9caff; box-shadow:0 0 0 1px #bb9af7 inset}
.chat-ai.hidden{display:none}
.chat-send{background:#17331f; color:var(--lime); border-color:#2c5a38}
.chat-send:hover{background:#1d4028}

.line{margin:7px 0; display:flex; gap:8px}
.line .who{font-weight:600; white-space:nowrap}
.line .tc{color:var(--muted); font-variant-numeric:tabular-nums; font-size:11px}

/* ── lobby overlay ── */
#lobby{position:fixed; inset:0; z-index:20; background:rgba(8,10,14,.96);
  display:flex; align-items:center; justify-content:center; -webkit-app-region:drag}
#lobby.hidden{display:none}
.lbox{-webkit-app-region:no-drag; width:300px; background:var(--bar); border:1px solid var(--line);
  border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:6px}
.ltitle{font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; margin-bottom:8px}
.ltitle .dot{width:9px;height:9px;border-radius:50%;background:var(--lime)}
.lbox label{font-size:11px; color:var(--muted); margin-top:6px}
.lbox input{background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:9px 10px; font-size:14px; outline:none}
.lbox input:focus{border-color:var(--lime)}
.lbox #ljoin{margin-top:14px; background:var(--lime); color:#111; font-weight:700; border:0;
  border-radius:8px; padding:11px; cursor:pointer; font-size:14px}
.lhint{color:var(--muted); font-size:11px; margin-top:10px; line-height:1.4}
.linstall{margin-top:12px; width:100%; background:transparent; color:var(--lime); border:1px solid #3a5030;
  border-radius:8px; padding:9px; cursor:pointer; font-size:13px; font-weight:600}
.linstall:hover{background:#141a12; border-color:var(--lime)}
a.linstall{display:block; box-sizing:border-box; text-align:center; text-decoration:none}
.lok{color:var(--lime)}

/* ── vertical dock (tall & narrow window / edge-snap): single column ── */
#tiles.vertical{grid-template-columns:1fr}

/* ── screen share: the shared screen is the BIG tile and camera tiles collapse into a rail, so
      the screen gets the WHOLE height instead of a thin stripe. Landscape -> rail on the right;
      portrait -> a strip along the bottom. Double-click any tile -> fullscreen.
      (aspect-ratio:auto !important overrides the per-tile inline ratio set for camera wrapping.) */
#tiles.presenting{display:flex; flex-direction:row; align-items:stretch; gap:8px}
#tiles.presenting > .tile.screen{flex:1 1 auto; width:auto; height:auto; max-width:none; max-height:none;
  min-width:0; min-height:0; align-self:stretch; aspect-ratio:auto !important}
#tiles.presenting > #prail{flex:0 0 210px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; overflow-x:hidden; min-height:0}
#tiles.presenting > #prail > .tile{flex:0 0 auto; width:100%; height:134px; max-width:none; max-height:none;
  min-height:0; aspect-ratio:auto !important}
#tiles.presenting.vertical{flex-direction:column}
#tiles.presenting.vertical > #prail{flex:0 0 130px; flex-direction:row; overflow-x:auto; overflow-y:hidden}
#tiles.presenting.vertical > #prail > .tile{flex:0 0 auto; width:184px; height:100%}
.tile.screen{border-color:#39506a; width:100%; height:100%; justify-self:stretch; align-self:stretch}
.tile.screen video{object-fit:contain; background:#000}   /* whole screen, uncropped, fills its big area */
.tile video{cursor:zoom-in}                                /* hint: double-click = fullscreen */

/* ── knock: a deafened peer's tile invites a click; a banner shows an incoming knock ── */
.tile.knockable{cursor:pointer}
.tile.knockable::after{content:"✊ knock"; position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:6;
  background:#2b2410; color:#e0af68; border:1px solid #6a5a2f; border-radius:8px;
  padding:3px 8px; font-size:11px; opacity:0; transition:opacity .15s; pointer-events:none}
.tile.knockable:hover::after{opacity:1}
/* "mute them" button on a peer tile whose mic is on (top-left). Hidden by default — clean tiles.
   Revealed on HOVER (the usual way) and, for a reliable click on a laggy machine, it STAYS while
   the tile is "opened" (one click on the tile toggles .controls-open). No more always-on clutter. */
.tile .mutebtn{position:absolute; top:8px; left:8px; z-index:7; width:34px; height:34px; border-radius:50%;
  background:#3a1f26e6; border:1px solid #6a2f39; color:var(--red); cursor:pointer;
  display:none; align-items:center; justify-content:center; opacity:1; transition:background .12s}
.tile .mutebtn svg{width:18px; height:18px}
.tile.canmute:hover .mutebtn,
.tile.canmute.controls-open .mutebtn{display:flex}
.tile.canmute.controls-open{outline:2px solid #6a2f39; outline-offset:-2px}
.tile .mutebtn:hover{background:#5a2530e6}
/* new-version notice: a full-screen, unmissable overlay just before we auto-reload */
#reloadNote{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,12,.72)}
#reloadNote .rn-box{background:var(--lime); color:#111; font-weight:700; font-size:18px; padding:18px 28px;
  border-radius:14px; box-shadow:0 16px 48px #000b; animation:rnPulse 1s ease-in-out infinite}
@keyframes rnPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}}
#knockbar{position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-14px); z-index:40;
  background:var(--lime); color:#111; font-weight:700; border-radius:999px; padding:9px 18px; font-size:14px;
  box-shadow:0 8px 30px #0007; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s}
#knockbar.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ── outgoing ring: caller's "ringing… 0:12 · delivered ✓" bar with a stop button ── */
#ringbar{position:fixed; bottom:56px; left:50%; transform:translateX(-50%); z-index:45;
  display:flex; gap:10px; align-items:center; background:#11251a; color:#d9f7a1; border:1px solid #3a5030;
  border-radius:999px; padding:10px 12px 10px 18px; font-size:13.5px; font-weight:600;
  box-shadow:0 10px 34px #000a; white-space:nowrap; max-width:92vw}
#ringbar .rb-t{overflow:hidden; text-overflow:ellipsis}
#ringbar .rb-x{border:0; background:#1d3527; color:#d9f7a1; width:26px; height:26px; border-radius:50%;
  cursor:pointer; font-size:13px; line-height:1; flex:0 0 auto}
#ringbar .rb-x:hover{background:#2a4a36}

/* ── incoming live ring: "X is calling you into room Y" with Join / Not now ── */
.ringin{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:70; width:340px; max-width:92vw;
  background:var(--bar); border:1px solid #3a5030; border-radius:14px; padding:14px 16px;
  box-shadow:0 18px 48px #000c; animation:ringPulse 1.2s ease-in-out infinite}
@keyframes ringPulse{0%,100%{box-shadow:0 18px 48px #000c, 0 0 0 0 rgba(198,242,78,.0)}
  50%{box-shadow:0 18px 48px #000c, 0 0 0 4px rgba(198,242,78,.25)}}
.ringin .ri-t{font-weight:700; font-size:14px; margin-bottom:11px}
.ringin .ri-btns{display:flex; gap:8px; justify-content:flex-end}
.ringin button{border-radius:9px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--line)}
.ringin .ri-no{background:transparent; color:var(--muted)}
.ringin .ri-no:hover{color:var(--ink); border-color:#39506a}
.ringin .ri-yes{background:var(--lime); color:#111; border-color:var(--lime)}
.ringin .ri-yes:hover{filter:brightness(1.06)}

/* ── connection banner: mobile-visible reconnect state. Amber so it isn't mistaken for a lime knock. ── */
#connbar{position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-14px); z-index:60;
  background:#e0af68; color:#111; font-weight:700; border-radius:999px; padding:9px 18px; font-size:14px;
  box-shadow:0 8px 30px #0007; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; cursor:pointer}
#connbar.show{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}

/* ── first-runs onboarding: offer call alerts (asked at most twice, then never again) ── */
#pushPrompt{position:fixed; left:50%; bottom:78px; transform:translateX(-50%) translateY(16px); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s; max-width:92vw}
#pushPrompt.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
#pushPrompt .pp-box{width:300px; max-width:92vw; background:var(--bar); border:1px solid var(--line);
  border-radius:14px; padding:15px 16px; box-shadow:0 18px 48px #000c}
#pushPrompt .pp-t{font-weight:700; font-size:14.5px}
#pushPrompt .pp-s{color:var(--muted); font-size:12.5px; line-height:1.45; margin:3px 0 13px}
#pushPrompt .pp-btns{display:flex; gap:8px; justify-content:flex-end}
#pushPrompt .pp-btns button{border-radius:9px; padding:8px 15px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--line)}
#pushPrompt .pp-no{background:transparent; color:var(--muted)}
#pushPrompt .pp-no:hover{color:var(--ink); border-color:#39506a}
#pushPrompt .pp-yes{background:var(--lime); color:#111; border-color:var(--lime)}
#pushPrompt .pp-yes:hover{filter:brightness(1.05)}


/* ── self-diagnosis hint on a tile (black camera / dead mic / no data) ── */
.tilehint{position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:7;
  background:#2b2410; color:#e0af68; border:1px solid #6a5a2f; border-radius:9px;
  padding:5px 10px; font-size:12px; max-width:92%; text-align:center; box-shadow:0 4px 16px #0008}

/* ── frozen-frame alarm: a red pulsing glow + centred red message when the feed stops moving ── */
.tile.frozen{animation:freezePulse 1.4s ease-in-out infinite}
@keyframes freezePulse{
  0%,100%{box-shadow:0 0 0 2px #f7768e, 0 0 18px 2px rgba(247,118,142,.40)}
  50%    {box-shadow:0 0 0 3px #ff8a9e, 0 0 34px 8px rgba(247,118,142,.80)}}
.tile .freezehint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8;
  max-width:88%; background:#3a1116f2; color:#ffb3bd; border:1px solid #f7768e; border-radius:11px;
  padding:10px 14px; font-size:12.5px; line-height:1.35; text-align:center; pointer-events:none;
  box-shadow:0 6px 24px #0009}

/* ── graceful peer reconnect: a CALM "frozen" state (NOT the red FROZE alarm) while a peer's link
      recovers. The tile keeps its place and its last frame is dimmed + desaturated, with a soft amber
      "reconnecting" pill — so a brief drop / quality dip never yanks or teleports the grid. ── */
.tile.reconnecting video{filter:grayscale(.55) brightness(.68); transition:filter .25s}
.tile.reconnecting{box-shadow:0 0 0 1px #e0af6899}
.tile .reconnhint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8;
  max-width:90%; background:#241c0fe8; color:#e7c98a; border:1px solid #6a5a2f; border-radius:11px;
  padding:9px 13px; font-size:12.5px; line-height:1.35; text-align:center; pointer-events:none;
  box-shadow:0 6px 24px #0009; animation:reconnPulse 1.6s ease-in-out infinite}
@keyframes reconnPulse{0%,100%{opacity:.8} 50%{opacity:1}}
/* gave up: the 30s recovery window expired — a calmer, redder "didn't recover" before removal */
.tile.gaveup video{filter:grayscale(1) brightness(.38)}
.tile.gaveup{box-shadow:0 0 0 1px #f7768e66}
.tile.gaveup .reconnhint{background:#2a1116f0; color:#ffb3bd; border-color:#7a343e; animation:none}
/* intentional leave: a brief neutral "left the call" note, then the tile is removed */
.tile.leaving video{filter:grayscale(.7) brightness(.5); transition:filter .3s}
.tile.leaving{box-shadow:0 0 0 1px #4a556699; transition:opacity .5s}
.tile .leavehint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8;
  max-width:90%; background:#141821f0; color:#c3ccd8; border:1px solid #38414f; border-radius:11px;
  padding:9px 13px; font-size:12.5px; line-height:1.35; text-align:center; pointer-events:none;
  box-shadow:0 6px 24px #0009}

/* ── mic / speaker-off badges (top-right) + camera-off overlay ── */
.badges{position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:6}
.badge{width:34px; height:34px; border-radius:50%; background:#3a1f26; border:1px solid #6a2f39;
  color:var(--red); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px #0009}
.badge svg{width:20px; height:20px}
.camoff{position:absolute; inset:0; background:#0a0c10e6; color:var(--muted); z-index:3;
  display:flex; align-items:center; justify-content:center}
.camoff svg{width:46px; height:46px; opacity:.8}

/* ── connection quality: TWO thin 10-segment meters per tile ──────────────────
   ↓ = what I receive from them · ↑ = what they receive from me. Direction is the point: a red ↑
   everywhere means MY upload, a red ↓ from one person means THEIRS. Green ≥8, amber 5-7, red ≤4. */
.quality{position:absolute; right:8px; bottom:8px; z-index:6; background:#000a; padding:3px 5px;
  border-radius:6px; display:flex; flex-direction:column; gap:2px; backdrop-filter:blur(2px)}
.qrow{display:flex; align-items:center; gap:4px; line-height:1}
.qrow > b{font:600 9px/1 system-ui,sans-serif; color:#8b949e; width:7px; text-align:center}
.qsegs{display:flex; gap:1px; align-items:center}
.qsegs i{width:3px; height:8px; border-radius:1px; background:#333a45}   /* unlit */
.qrow.qg .qsegs i.on{background:#6fcf5f}
.qrow.qa .qsegs i.on{background:#e0af68}
.qrow.qr .qsegs i.on{background:#f7768e}
.qrow.qr > b{color:#f7768e}
.qrow.qn{opacity:.45}

/* room-level verdict: "it is your upload" / "it is their link" */
#netverdict{position:fixed; left:50%; transform:translateX(-50%); bottom:86px; z-index:40;
  max-width:min(92vw,40rem); padding:7px 14px; border-radius:9px; font:500 13px/1.4 system-ui,sans-serif;
  text-align:center; display:none; box-shadow:0 6px 24px #000a}
#netverdict.show{display:block}
#netverdict.bad{background:#3a1f26; color:#ffd7dd; border:1px solid #6a2f39}
#netverdict.warn{background:#3a3020; color:#ffe9c2; border:1px solid #6a5630}

/* ── drag-to-swap tiles ── */
.tile.dragging{opacity:.45}
.tile[draggable=true]{cursor:grab}
.tile[draggable=true]:active{cursor:grabbing}

/* ── fullscreen focus: clicked tile fills the screen, others stay in a side rail ── */
#tiles.fs{display:block; position:relative; background:#0d0f13; padding:0; gap:0}
#tiles.fs > .tile.focused{position:absolute; inset:0; border:0; border-radius:0; z-index:1}
#tiles.fs #rail{position:absolute; top:12px; right:12px; bottom:12px; z-index:5;
  display:flex; flex-direction:column; gap:8px; overflow:auto; max-width:210px}
#tiles.fs #rail .tile{flex:0 0 auto; width:190px; height:126px; border-radius:10px;
  box-shadow:0 6px 22px #0009}

/* ── browser / phone (no Electron window chrome) ── */
body.web .winbtns{display:none}
/* the OS/PWA title bar already shows the app name — drop our duplicate bar in the
   browser to give the video the full height. */
body.web #bar{display:none}

/* Layout is keyed to WIDTH, not the .web flag: a WIDE window — including the
   installed desktop PWA — keeps the desktop layout (tiles grid + the 300px panel
   docked on the right). Only a NARROW window (phone, or a thin docked strip)
   collapses to one column and turns the panel into a full overlay. Keying on
   width (not pointer) means a Windows touchscreen doesn't get the phone layout
   on a big display. */
@media (max-width:720px){
  #tiles{grid-template-columns:1fr}
  #panel{position:absolute; inset:34px 0 44px 0; flex:none; z-index:15; border-left:0}
  body.web #panel{top:0}                 /* no bar in web -> panel starts at the top */
  #devmenu{left:8px; right:8px; width:auto; bottom:64px}
}

/* Touch devices: bigger tap targets (independent of window width). */
@media (pointer:coarse){
  #controls{height:56px; flex-basis:56px; gap:10px; padding:0 12px}
  .ctl{height:40px; min-width:48px; font-size:17px}
  .ctl.end{padding:0 18px}
  #panel{inset:34px 0 56px 0}          /* taller controls -> lift overlay bottom (only when overlaid) */
  #devmenu{left:8px; right:8px; width:auto; bottom:64px}
  .status{display:none}
}

/* ── room picker (lobby) ── */
.roomrow{display:flex; gap:6px}
#lroom{flex:1; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:9px 10px; font-size:14px; outline:none}
#lroom:focus{border-color:var(--lime)}
#lroomNew{width:42px; background:#17331f; color:var(--lime); border:1px solid #2c5a38;
  border-radius:8px; font-size:18px; cursor:pointer}
#lroomNew:hover{background:#1d4028}
#lroomInput{margin-top:6px}

/* ── room button + switcher (footer) ── */
.roomctl{padding:0 12px; font-weight:600; gap:6px; max-width:180px}
.roomctl span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.people{position:relative; display:inline-flex; align-items:center; height:32px; padding:0 10px; border-radius:8px;
  background:#0f131a; border:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:600;
  white-space:nowrap; user-select:none; cursor:pointer}
.people:hover,.people.open{border-color:#39506a}
/* tap the pill -> panel: who's online (with a volume slider each) + who's been here before */
.peoplelist{position:absolute; bottom:calc(100% + 8px); left:0; z-index:35; width:260px; max-width:86vw;
  max-height:64vh; overflow-y:auto; overflow-x:hidden; background:#131722; border:1px solid var(--line);
  border-radius:10px; padding:6px; display:none; box-shadow:0 10px 34px #000a; cursor:default}
.peoplelist.open{display:block}
.plhdr{font-size:11px; color:var(--muted); padding:6px 8px 5px; text-transform:uppercase; letter-spacing:.05em}
.plhdr.off{margin-top:4px; border-top:1px solid var(--line)}
.plrow{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px; font-size:12.5px;
  font-weight:500; color:var(--ink); white-space:nowrap}
.plrow .dot{width:7px; height:7px; border-radius:50%; background:var(--lime); flex:0 0 auto}
.plrow .plname{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.plrow.you{color:var(--muted)}
.plrow.offline{color:var(--muted)}
.plrow.offline .dot{background:#455063}
.plrow .pldev{margin-left:8px; color:var(--muted); font-size:11px; font-weight:500; white-space:nowrap; flex:0 0 auto}
/* ring an offline person into the room */
.plring{margin-left:8px; flex:0 0 auto; background:transparent; border:1px solid var(--line); border-radius:8px;
  cursor:pointer; font-size:13px; line-height:1; padding:5px 8px}
.plring:hover{border-color:var(--lime); background:#1b2230}
/* turn ON call alerts for THIS device — a clean sticky footer so it's always visible without scrolling */
.plenable{position:sticky; bottom:-6px; display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-top:8px; background:linear-gradient(#161d13,#141a12); color:var(--lime); border:1px solid #3a5030;
  border-radius:9px; padding:10px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap}
.plenable:hover{border-color:var(--lime); background:#18200f}
/* per-person volume: 0–200%, 100% = their natural max, above = artificial boost */
.plvol{display:flex; align-items:center; gap:8px; padding:0 8px 8px 20px}
.plvol .plvico{font-size:12px; opacity:.7}
.plvol input[type=range]{flex:1; height:4px; accent-color:var(--lime); cursor:pointer}
.plvout{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:38px; text-align:right}
.plvout.boost{color:var(--lime); font-weight:700}
#roommenu{position:fixed; left:8px; bottom:52px; z-index:30; width:230px; max-width:calc(100% - 16px);
  background:#11151c; border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:0 14px 40px #000a}
#roommenu.hidden{display:none}
.roomitem{display:block; width:100%; text-align:left; background:transparent; color:var(--ink);
  border:0; border-radius:8px; padding:8px 10px; cursor:pointer; font-size:14px}
.roomitem:hover{background:#1b2230}
.roomitem.cur{color:var(--lime); font-weight:600}
.roomitem.invite{color:var(--lime); border-top:1px solid var(--line); margin-top:4px; padding-top:10px}
.roomrowitem{display:flex; align-items:center; gap:2px}
.roomrowitem .roomitem{flex:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.roomdel{width:28px; flex:0 0 auto; background:transparent; border:0; color:var(--muted);
  cursor:pointer; font-size:18px; line-height:1; border-radius:6px}
.roomdel:hover{background:#3a1f26; color:var(--red)}
.roomnew{display:flex; gap:6px; margin-top:8px; border-top:1px solid var(--line); padding-top:10px}
.roomnew input{flex:1; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:8px 9px; font-size:13px; outline:none}
.roomnew input:focus{border-color:var(--lime)}
.roomnew button{width:38px; background:#17331f; color:var(--lime); border:1px solid #2c5a38;
  border-radius:8px; font-size:17px; cursor:pointer}

/* ── "adjusting" mode: while the ⚙️ menu (devices + virtual-background picker) is open, float MY tile
      as a big preview CLEAR of the menu, so I can see myself with the chosen background as I pick it.
      Menu sits bottom-left -> preview docks top-right on desktop, and a top strip on the phone. ── */
#stage.adjusting #tiles:not(.fs) .tile.you{
  position:absolute; z-index:26; top:10px; right:10px; left:auto; bottom:auto;
  width:min(52vw,400px); height:auto; max-width:400px; max-height:72vh; margin:0;
  border-color:var(--lime); box-shadow:0 14px 44px #000c}
@media (max-width:560px){
  #stage.adjusting #tiles:not(.fs) .tile.you{top:8px; left:8px; right:8px; width:auto; max-width:none; max-height:40vh}
}

/* ── device picker popup ── */
#devmenu{position:fixed; left:8px; bottom:52px; z-index:30; width:290px; max-width:calc(100% - 16px);
  background:#11151c; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  box-shadow:0 14px 40px #000a}
#devmenu.hidden{display:none}
.dm-h{font-size:12px; color:var(--muted); margin:10px 0 5px; font-weight:600}
.dm-h:first-child{margin-top:0}
.dm-h .dm-s{color:#6b7889; font-weight:400}
#devmenu select{width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:8px 9px; font-size:13px; outline:none}
#devmenu select:focus{border-color:var(--lime)}
.dm-toggle{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer}
.dm-toggle input{width:16px; height:16px; accent-color:var(--lime); cursor:pointer}
.dm-reopen{margin-top:12px; width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:9px; font-size:13px; font-weight:600; cursor:pointer}
.dm-reopen:hover{border-color:var(--lime); color:var(--lime)}
.dm-reopen:disabled{opacity:.6; cursor:default}

/* ── virtual-background picker: scrollable swatch grid (blur + many image scenes + upload) ── */
.bgpicker{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:2px;
  max-height:216px; overflow-y:auto; overflow-x:hidden; padding-right:3px}
.bgpicker::-webkit-scrollbar{width:8px}
.bgpicker::-webkit-scrollbar-thumb{background:#2a323f; border-radius:6px}
.bgcat{grid-column:1/-1; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  margin:6px 0 1px; font-weight:600}
.bgcat:first-child{margin-top:0}
.bgsw{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:3px;
  background:var(--bg); border:1px solid var(--line); border-radius:9px; cursor:pointer; overflow:hidden}
.bgsw:hover{border-color:#3a475a}
.bgsw.sel{border-color:var(--lime); box-shadow:0 0 0 1px var(--lime) inset}
.bgsw-cv,.bgsw-img{width:100%; height:34px; border-radius:6px; display:block; object-fit:cover; background:#0a0c10}
.bgsw-cap{font-size:10px; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bgsw.sel .bgsw-cap{color:var(--lime)}
.bgsw-add{align-items:center; justify-content:center; min-height:56px; color:var(--muted)}
.bgsw-add:hover{color:var(--lime); border-color:var(--lime)}
.bgsw-plus{font-size:20px; line-height:1}
.bgstatus{font-size:11px; color:var(--lime); margin-top:6px; min-height:0}
.bgstatus:empty{display:none}
/* blur-strength slider + touch-up toggle */
#bgtune{margin-top:9px; display:flex; flex-direction:column; gap:8px}
.bgtune-row{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink); cursor:pointer}
.bgtune-row span{color:var(--muted); flex:0 0 auto}
.bgtune-row input[type=range]{flex:1; height:4px; accent-color:var(--lime); cursor:pointer}
.bgtune-row input[type=checkbox]{width:16px; height:16px; accent-color:var(--lime); cursor:pointer}
#bgblurRow.hidden{display:none}
.lcompanion{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:10px; cursor:pointer}
.lcompanion input{width:15px; height:15px; accent-color:var(--lime); cursor:pointer}
#toast{position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:40; display:flex; gap:12px;
  align-items:center; background:var(--bar); border:1px solid var(--line); border-radius:12px; padding:10px 14px;
  max-width:92%; font-size:13px; color:var(--ink); box-shadow:0 8px 30px #0009}
#toast button{background:var(--lime); color:#111; border:0; border-radius:8px; padding:5px 10px; font-weight:700; cursor:pointer; white-space:nowrap}
#toast button.tx{background:transparent; color:var(--muted); padding:2px 6px; font-weight:400}

/* ── update pill ── */
.update{background:var(--lime); color:#111; font-weight:700; font-size:12px; border-radius:999px;
  padding:4px 11px; cursor:pointer; margin-right:4px}
.update.hidden{display:none}
.update.downloading{background:var(--panel2); color:var(--lime); cursor:default}

/* ── controls ── */
#controls{height:44px; flex:0 0 44px; background:var(--bar); border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px; padding:0 10px}
.ctl{height:32px; min-width:40px; border:1px solid var(--line); background:#0f131a;
  color:var(--ink); border-radius:9px; cursor:pointer; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center}
.ctl svg{display:block}
/* Summarize button in the panel */
.pbtn{display:inline-flex; align-items:center; gap:7px; margin-bottom:10px; padding:8px 12px;
  background:#17331f; color:var(--lime); border:1px solid #2c5a38; border-radius:9px;
  cursor:pointer; font-weight:600; font-size:13px}
.pbtn:hover{background:#1d4028}
.pbtn:disabled{opacity:.6; cursor:default}
.pbtn svg{width:15px; height:15px}
.pbtns{display:flex; gap:8px; flex-wrap:wrap}
.pbtns .pbtn{margin-bottom:10px}
/* the 2nd agent (Gemini advisor): violet, clearly distinct from the lime summarizer */
.pbtn.adv{background:#241a38; color:#bb9af7; border-color:#4a3a6e}
.pbtn.adv:hover{background:#2d2146}
.pbtn.adv.hidden{display:none}
.advice{background:#191426; border:1px solid #4a3a6e; border-radius:10px; padding:10px 12px;
  margin-bottom:12px; font-size:13px; line-height:1.5; color:#d9d2f0}
.advice.hidden{display:none}
.advice .adv-h{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#bb9af7;
  font-weight:700; margin-bottom:6px}
.ctl:hover{border-color:#3a475a}
.ctl.on{background:#17331f; border-color:#2c5a38}
.ctl.off{background:#3a1f26; border-color:#5a2c34; color:var(--red)}
.ctl.end{background:var(--red); border-color:var(--red); color:#111; font-weight:700; padding:0 14px}
.ctl.active{border-color:var(--lime); color:var(--lime)}
.spacer{flex:1}

/* ── PHONE controls: 11 tiny icons crammed in one row are unusable. Wrap them into big, grouped
      rows — call controls (mic/cam/speaker/share) · tools (⚙/💬/↻/room) · a full-width hang-up.
      Placed AFTER the base #controls/.ctl so it actually overrides them. Info-only + rarely-needed
      controls are dropped from the phone bar to make room. ── */
@media (max-width:560px){
  #controls{height:auto; flex:0 0 auto; flex-wrap:wrap; gap:8px; padding:8px;
    justify-content:center; align-content:center}
  #controls .ctl{flex:1 1 0; min-width:56px; max-width:23%; height:44px; font-size:18px;
    border-radius:11px}
  #controls .ctl svg{width:21px; height:21px}
  /* Only the essentials on the phone bar — mic / cam / speaker / settings + hang-up. Everything
     else (screen, transcript, room, reload) lives in the ⚙️ menu (see .dm-quick). */
  #people,#update,#status,#pipBtn,#archiveBtn,#shareBtn,#panelBtn,#reloadBtn,#roomBtn,
  #controls .spacer{display:none !important}
  #mic,#cam,#spkBtn{order:1}
  #gear{order:2}
  #controls #end{order:3; flex:1 1 100%; max-width:100%; height:42px; font-size:15px; font-weight:700}
}
/* quick actions inside the ⚙️ menu — visible only on the phone, where the bar hides these */
.dm-quick{display:none; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px}
.dm-quick button{display:flex; align-items:center; justify-content:center; gap:7px; padding:11px;
  background:#0f131a; border:1px solid var(--line); color:var(--ink); border-radius:9px;
  font-size:13px; font-weight:600; cursor:pointer}
.dm-quick button:hover{border-color:var(--lime)}
@media (max-width:560px){ .dm-quick{display:grid} }
.status{color:var(--muted); font-size:12px}