/* STORM newui2 — extracted from storm-wc.html
   Single stylesheet for the conference UI. Do not inline in HTML. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ═══════════════════════════════════════════════════════════
   STORM newui2 — single token + layout source
   Blur = static chrome ONLY. Never backdrop-filter over video.
   Accent: professional navy (light #1E4D8C · dark #7A9EC2)
   ═══════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --font:"Urbanist",system-ui,sans-serif;
  --font-display:"Urbanist",system-ui,sans-serif;
  --bg:#F4F5F6;
  --surface:#FFFFFF;
  --surface-solid:#F0F1F3;
  --elevated:#E8EAED;
  --text:#111318;
  --text2:#3D424A;
  --text3:#6B717A;
  --border:rgba(17,19,24,0.10);
  --accent:#1E4D8C;
  --accent-hover:#163A6B;
  --primary:var(--accent);
  --primary-hover:var(--accent-hover);
  --secondary:var(--accent);
  --secondary-hover:var(--accent-hover);
  --tertiary:var(--accent);
  --tertiary-hover:var(--accent-hover);
  --on-accent:#FFFFFF;
  --on-secondary:#FFFFFF;
  --on-tertiary:#FFFFFF;
  --red:#D92D20;
  --green:#12B76A;
  --orange:#C47A1A;
  --control-bg:rgba(255,255,255,0.78);
  --control-border:rgba(17,19,24,0.10);
  --video-bg:#0A0B0D;
  --stage-bg:#E8EAED;
  --accent-glow:rgba(30,77,140,0.28);
  --accent-glow-soft:rgba(30,77,140,0.12);
  --primary-glow:var(--accent-glow);
  --primary-glow-soft:var(--accent-glow-soft);
  --secondary-glow:var(--accent-glow-soft);
  --tertiary-glow:var(--accent-glow-soft);
  --chat-me:var(--accent);
  --chat-them:#E8EAED;
  --chat-me-text:#fff;
  --chat-them-text:#111318;
  --blur:saturate(180%) blur(40px);
  --blur-sm:saturate(160%) blur(22px);
  --radius:24px;
  --radius-sm:16px;
  --radius-pill:999px;
  --tile-radius:18px;
  --shadow:0 8px 28px rgba(17,19,24,0.08);
  --shadow-lg:0 24px 64px rgba(17,19,24,0.14);
  --atmosphere-top:#E8EAED;
  --atmosphere-mid:#F4F5F6;
  --atmosphere-bot:#DDE0E4;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --dur:0.55s;
  --dur-fast:0.28s;
  --speak-halo:#22C55E;
  --speak-halo-soft:rgba(34,197,94,0.42);
  /* Meeting chrome + control hover — theme-aware. Dark values equal the former
     AMOLED literals (so dark is unchanged); light values give a real light call. */
  --chrome-bg:rgba(255,255,255,0.94);
  --chrome-border:var(--border);
  --hover-overlay:rgba(17,19,24,0.05);
  --hover-border:rgba(17,19,24,0.16);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;
  --surface:#0E0E0E;
  --surface-solid:#0E0E0E;
  --elevated:#161616;
  --text:#F2F2F2;
  --text2:#A0A4AA;
  --text3:#6A6E74;
  --border:rgba(255,255,255,0.08);
  --accent:#7A9EC2;
  --accent-hover:#93B3D4;
  --primary:var(--accent);
  --primary-hover:var(--accent-hover);
  --secondary:var(--accent);
  --secondary-hover:var(--accent-hover);
  --tertiary:var(--accent);
  --tertiary-hover:var(--accent-hover);
  --on-accent:#0A1018;
  --on-secondary:#0A1018;
  --on-tertiary:#0A1018;
  --red:#E2554F;
  --green:#3CB87A;
  --orange:#C9923A;
  --control-bg:#0E0E0E;
  --control-border:rgba(255,255,255,0.08);
  --video-bg:#000000;
  --stage-bg:#0E0E0E;
  --accent-glow:rgba(122,158,194,0.22);
  --accent-glow-soft:rgba(122,158,194,0.10);
  --primary-glow:var(--accent-glow);
  --primary-glow-soft:var(--accent-glow-soft);
  --secondary-glow:var(--accent-glow-soft);
  --tertiary-glow:var(--accent-glow-soft);
  --chat-me:var(--accent);
  --chat-them:rgba(255,255,255,0.06);
  --chat-me-text:#0A1018;
  --chat-them-text:#F2F2F2;
  --shadow:none;
  --shadow-lg:none;
  --atmosphere-top:#000000;
  --atmosphere-mid:#000000;
  --atmosphere-bot:#000000;
  --chrome-bg:rgba(10,12,14,0.94);
  --chrome-border:rgba(255,255,255,0.06);
  --hover-overlay:rgba(255,255,255,0.08);
  --hover-border:rgba(255,255,255,0.22);
}
@media (color-gamut: p3){
  :root{
    --accent:color(display-p3 0.12 0.30 0.52);
    --accent-hover:color(display-p3 0.09 0.22 0.40);
    --primary:var(--accent);
    --primary-hover:var(--accent-hover);
    --secondary:var(--accent);
    --tertiary:var(--accent);
    --accent-glow:color(display-p3 0.12 0.30 0.52 / 0.28);
    --accent-glow-soft:color(display-p3 0.12 0.30 0.52 / 0.12);
    --primary-glow:var(--accent-glow);
    --primary-glow-soft:var(--accent-glow-soft);
    --secondary-glow:var(--accent-glow-soft);
    --tertiary-glow:var(--accent-glow-soft);
    --red:color(display-p3 0.85 0.18 0.13);
    --chat-me:var(--accent);
  }
  [data-theme="dark"]{
    --bg:#000000;
    --surface:#0E0E0E;
    --surface-solid:#0E0E0E;
    --elevated:#161616;
    --accent:color(display-p3 0.48 0.62 0.75);
    --accent-hover:color(display-p3 0.58 0.70 0.82);
    --primary:var(--accent);
    --primary-hover:var(--accent-hover);
    --secondary:var(--accent);
    --tertiary:var(--accent);
    --accent-glow:color(display-p3 0.48 0.62 0.75 / 0.22);
    --accent-glow-soft:color(display-p3 0.48 0.62 0.75 / 0.10);
    --primary-glow:var(--accent-glow);
    --primary-glow-soft:var(--accent-glow-soft);
    --text:#F2F2F2;
    --stage-bg:#000000;
    --video-bg:#000000;
    --red:color(display-p3 0.86 0.35 0.32);
    --chat-me:var(--accent);
    --on-accent:#0A1018;
    --shadow:none;
    --shadow-lg:none;
  }
}

/* Utility: glass chrome (static surfaces only) */
.glass{
  background:var(--control-bg);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
}
.glass-sm{
  background:var(--control-bg);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--border);
}

@media (prefers-reduced-motion: reduce){
  /* newui2 keeps product motion; opt-out via ?reduceMotion=1 or localStorage storm-reduce-motion=1 */
  body[data-reduce-motion="1"] *,
  body[data-reduce-motion="1"] *::before,
  body[data-reduce-motion="1"] *::after{
    animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important}
}

/* ─── Join Screen ─────────────────────────────────────── */

.gate-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--bg);animation:none;filter:none}
.gate-atmosphere::before,.gate-atmosphere::after{content:none;display:none}
.join-compose{position:relative;z-index:1;width:100%;max-width:440px;text-align:left;
  padding:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;box-shadow:none;animation:none}
.join-brand{font-family:var(--font-display);font-size:clamp(52px,12vw,76px);font-weight:800;
  letter-spacing:-0.04em;line-height:.9;color:var(--text);margin-bottom:14px;text-transform:uppercase;
  background:none;-webkit-text-fill-color:unset;filter:none;text-shadow:none}
.join-tag{color:var(--text2);font-size:15px;font-weight:500;margin-bottom:28px;max-width:34ch;
  line-height:1.5}
.join-input{width:100%;padding:15px 18px;border-radius:14px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text);font-size:16px;font-family:var(--font);font-weight:500;
  outline:none;transition:border-color .25s,box-shadow .3s,transform .2s;
  margin-bottom:10px}
.join-input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow-soft);
  transform:translateY(-1px)}
.join-input::placeholder{color:var(--text3)}
.join-btn{width:100%;padding:16px;border-radius:14px;border:none;background:var(--accent);
  color:#FFFFFF;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--font);
  letter-spacing:0.08em;text-transform:uppercase;margin-top:10px;
  box-shadow:none;transition:background var(--dur)}
.join-btn:hover{background:var(--accent-hover);color:#FFFFFF}
.join-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.join-or{color:var(--text3);font-size:11px;margin:18px 0 10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase}
.join-create{color:var(--text);font-size:14px;font-weight:700;cursor:pointer;
  background:none;border:none;font-family:var(--font);padding:0;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--accent);
  transition:color var(--dur-fast)}
.join-create:hover{color:var(--accent)}
a.join-create,a.join-signin{
  display:block;text-align:center;text-decoration:none;padding:10px 0;
}
a.join-signin{
  margin-top:6px;padding:11px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--elevated);font-size:13px;font-weight:800;letter-spacing:.01em;
  text-decoration:none;color:var(--text);transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast);
}
a.join-signin:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft,rgba(30,77,140,.10))}
.join-account-chip{
  margin-top:14px;padding:10px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--elevated);display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:700;color:var(--text2);
}
.join-account-chip a{
  color:var(--accent);font-weight:800;padding:6px 10px;border-radius:999px;
  background:var(--accent-soft,rgba(30,77,140,.10));text-decoration:none;
}
.join-theme{position:absolute;top:20px;right:20px;z-index:2;
  background:var(--control-bg);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--border);width:48px;height:48px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--text);
  transition:border-color var(--dur-fast),box-shadow var(--dur),transform var(--dur-fast)}
.join-theme:hover{border-color:var(--accent);box-shadow:0 8px 24px var(--accent-glow-soft);transform:translateY(-2px)}
.join-theme .theme-icon,
.header-btn .theme-icon{
  position:relative;display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;
}
.join-theme .theme-icon svg,
.header-btn .theme-icon svg{
  position:absolute;inset:0;width:20px !important;height:20px !important;
  fill:currentColor;color:inherit;display:none;pointer-events:none;
}
/* Dark → moon. Light → sun. */
body:not([data-theme="light"]) .theme-icon-moon{display:block !important}
body:not([data-theme="light"]) .theme-icon-sun{display:none !important}
body[data-theme="light"] .theme-icon-moon{display:none !important}
body[data-theme="light"] .theme-icon-sun{display:block !important}
.join-logo{display:none}
.join-subtitle{display:none}

/* ─── Lobby ───────────────────────────────────────────── */

#lobby-screen.active{display:flex}
#lobby-screen .gate-atmosphere{z-index:0}
.lobby-card{position:relative;z-index:1;padding:0;width:100%;max-width:none;
  border-radius:0;overflow:hidden;text-align:left;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;box-shadow:none;animation:none}
.lobby-head{padding:20px 22px 14px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lobby-brand{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-0.04em;text-transform:uppercase;
  color:var(--text);background:none;-webkit-text-fill-color:unset}
.lobby-title{font-size:13px;font-weight:600;color:var(--text2);margin:0}
.lobby-sub{font-size:12px;color:var(--text3);margin:0;font-weight:500}
.lobby-room{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);
  font-weight:700;font-size:13px}
.lobby-preview-wrap{position:relative;width:100%;aspect-ratio:16/10;margin:0;border:none}

.lobby-preview-wrap.cam-off video{visibility:hidden;opacity:0}
.lobby-avatar{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:var(--video-bg)}
.lobby-preview-wrap.cam-off .lobby-avatar{display:flex}
.lobby-avatar-circle{width:76px;height:76px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;font-family:var(--font-display);
  box-shadow:none}
.lobby-meter{position:absolute;left:14px;bottom:14px;display:flex;align-items:flex-end;gap:3px;
  height:24px;padding:5px 10px;border-radius:12px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,.12)}
.lobby-meter span{width:3px;border-radius:2px;background:var(--accent);opacity:.35;
  transition:height .08s linear,opacity .08s}
.lobby-meter.live span{opacity:1}
.lobby-foot{padding:16px 18px 18px}
.lobby-controls{display:flex;justify-content:center;gap:12px;margin-bottom:14px}
.lobby-ctrl{width:50px;height:50px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:var(--elevated);color:var(--text);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur),transform var(--dur-fast)}
.lobby-ctrl:hover{border-color:var(--primary);box-shadow:0 10px 24px var(--primary-glow-soft);transform:translateY(-2px)}
.lobby-ctrl svg{width:22px;height:22px;fill:currentColor}
.lobby-ctrl.muted{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none;transform:none}
.lobby-status{min-height:20px;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:12px;text-align:center}
.lobby-status.waiting{color:var(--text2)}
.lobby-status.error{color:var(--red)}
.lobby-status.ok{color:var(--accent)}
.lobby-actions{display:flex;gap:10px;flex-wrap:wrap}
.lobby-actions button{flex:1;min-width:120px;border:none;border-radius:var(--radius-sm);padding:14px;
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:transform var(--dur-fast),background var(--dur-fast),box-shadow var(--dur)}
.lobby-btn-primary{background:var(--accent);color:#FFFFFF;box-shadow:none}
.lobby-btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.lobby-btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.lobby-btn-secondary{background:var(--elevated);color:var(--text);border:1.5px solid var(--border) !important}
.lobby-spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--border);
  border-top-color:var(--primary);border-radius:50%;animation:lobby-spin .7s linear infinite;
  vertical-align:-1px;margin-right:6px}
@keyframes lobby-spin{to{transform:rotate(360deg)}}
.waiting-section{border-bottom:1px solid var(--border);padding:12px 16px;display:none}
.waiting-section.visible{display:block}
.waiting-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text3);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.waiting-section-actions{display:flex;gap:6px}
.waiting-section-actions button{border:1px solid var(--border);background:var(--elevated);color:var(--text2);
  border-radius:10px;padding:3px 8px;font:inherit;font-size:10px;font-weight:700;cursor:pointer}
.waiting-section-actions button.admit{color:var(--primary);border-color:var(--primary)}
.waiting-item{display:flex;align-items:center;gap:10px;padding:8px 0}
.waiting-item + .waiting-item{border-top:1px solid var(--border)}
.waiting-avatar{width:32px;height:32px;border-radius:50%;background:var(--secondary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.waiting-info{flex:1;min-width:0}
.waiting-name{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.waiting-meta{font-size:11px;color:var(--text3);font-weight:500}
.waiting-btns{display:flex;gap:6px;flex-shrink:0}
.waiting-btns button{border:none;border-radius:10px;padding:6px 10px;font:inherit;font-size:11px;
  font-weight:700;cursor:pointer}
.waiting-btns .admit{background:var(--primary);color:var(--on-accent)}
.waiting-btns .deny{background:var(--elevated);color:var(--red);border:1px solid var(--border)}
.header-waiting-badge{display:none;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--red);color:#fff;font-size:11px;font-weight:700;cursor:pointer;
  transition:transform var(--dur-fast)}
.header-waiting-badge.visible{display:inline-flex}
.header-waiting-badge:hover{transform:scale(1.05)}
.header-bo-badge{display:none;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700}
.header-bo-badge.visible{display:inline-flex}
.bo-banner{display:none;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:600;z-index:21;
  background:var(--control-bg);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--border)}
.bo-banner.visible{display:flex}
.bo-banner .bo-spacer{flex:1}
.bo-banner button{border:1px solid var(--border);background:var(--elevated);color:var(--text);
  border-radius:12px;padding:6px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.bo-banner button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-accent)}
.bo-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.bo-card{border:1px solid var(--border);border-radius:18px;padding:14px;background:var(--elevated)}
.bo-card h4{font-size:14px;font-weight:800;margin:0 0 8px}
.bo-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.bo-row label{font-size:12px;font-weight:700;color:var(--text2)}
.bo-row input,.bo-row select{padding:8px 10px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-solid);color:var(--text);font:inherit;font-size:13px}
.bo-assign{font-size:12px;margin:4px 0;display:flex;justify-content:space-between;gap:8px}
.bo-actions{display:flex;flex-wrap:wrap;gap:8px}
.bo-actions button{border:1px solid var(--border);background:var(--surface-solid);color:var(--text);
  border-radius:12px;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.bo-actions button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-accent)}
.bo-actions button.danger{color:var(--red)}
.bo-msg{font-size:12px;color:var(--text3);font-weight:600}

/* VB / devices */
.lobby-preview-wrap video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;
  transform:scaleX(-1);border-radius:inherit}
.lobby-preview-wrap canvas.lobby-vb-canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
  transform:scaleX(-1);display:none;border-radius:inherit}
.lobby-preview-wrap.vb-on video{visibility:hidden;opacity:0}
.lobby-preview-wrap.vb-on canvas.lobby-vb-canvas{display:block}
.lobby-preview-wrap.cam-off canvas.lobby-vb-canvas{display:none !important}
.vb-panel{display:none;margin:0 0 14px;padding:12px;border-radius:18px;border:1px solid var(--border);
  background:var(--elevated);text-align:left}
.vb-panel.open{display:block;animation:none}
@keyframes panel-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.vb-panel-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text3);margin-bottom:10px}
.vb-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vb-preset{position:relative;border:2px solid transparent;border-radius:14px;overflow:hidden;
  aspect-ratio:1.3;cursor:pointer;padding:0;background:var(--surface-solid);font:inherit;
  transition:border-color var(--dur-fast),transform var(--dur-fast)}
.vb-preset:hover{border-color:var(--primary);transform:scale(1.03)}
.vb-preset.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.vb-preset-thumb{position:absolute;inset:0;background-size:cover;background-position:center}
.vb-preset-label{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font-size:10px;
  font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:center}
.vb-preset.none .vb-preset-thumb{background:repeating-linear-gradient(45deg,#333 0 4px,#444 4px 8px)}
.vb-preset.blur .vb-preset-thumb{background:linear-gradient(135deg,var(--primary),var(--secondary))}
.vb-upload-row{display:flex;gap:8px;margin-top:10px;align-items:center}
.vb-upload-row label{flex:1;border:1px dashed var(--border);border-radius:12px;padding:8px 10px;
  font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;text-align:center}
.vb-upload-row label:hover{color:var(--text);border-color:var(--primary)}
.vb-upload-row input{display:none}
.vb-status{font-size:11px;color:var(--text3);margin-top:8px;font-weight:500;min-height:14px}
.lobby-ctrl.active,.ctrl-btn.vb-active,.ctrl-btn.device-active{background:var(--primary);border-color:var(--primary);color:var(--on-accent)}
.vb-conf-panel{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:min(320px,80vw);z-index:200}
#vb-conf-group,#device-conf-group{position:relative}
.device-panel{display:none;margin:0 0 14px;padding:12px;border-radius:18px;border:1px solid var(--border);
  background:var(--elevated);text-align:left}
.device-panel.open{display:block;animation:none}
.device-panel-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text3);margin-bottom:10px}
.device-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:12px;font-weight:600;color:var(--text2)}
.device-field:last-of-type{margin-bottom:0}
.device-field select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface-solid);color:var(--text);font:inherit;font-size:13px;font-weight:500}
.device-field select:disabled{opacity:.55}
.device-hint{font-size:11px;color:var(--text3);margin-top:8px;font-weight:500;min-height:14px}
.device-conf-panel{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:min(320px,86vw);z-index:200;margin:0;box-shadow:var(--shadow-lg);
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:20px;padding:14px}
.device-conf-panel::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--control-bg)}
@media(max-width:768px){
  .device-conf-panel{position:fixed !important;bottom:var(--ctrl-popover-bottom, 96px) !important;left:50% !important;
    transform:translateX(-50%) !important;max-height:50vh;overflow:auto}
  .device-conf-panel::after{display:none}
}

/* Cam flip — solid overlay on live video (NO blur) */
.cam-flip-fab{
  position:absolute;right:12px;bottom:12px;z-index:6;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:rgba(8,12,16,.78);color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:transform var(--dur-fast),opacity var(--dur-fast),background var(--dur-fast)}
.cam-flip-fab:hover{background:rgba(16,22,28,.9)}
.cam-flip-fab:active{transform:scale(0.9)}
.cam-flip-fab svg{width:22px;height:22px;fill:currentColor}
.cam-flip-fab.visible{display:flex}
.cam-flip-fab.busy,.ctrl-btn.cam-flip-busy{opacity:.45;pointer-events:none}
.lobby-preview-wrap.facing-rear video,
.lobby-preview-wrap.facing-rear canvas.lobby-vb-canvas{transform:none}
.video-tile.local.facing-rear > video.tile-feed{transform:none}
.video-tile.local.facing-rear.screensharing > video.tile-feed{transform:none !important}
.ctrl-group.cam-flip-group{display:none}
.ctrl-group.cam-flip-group.visible{display:flex}
/* Stacked ABOVE .tile-fullscreen-btn, never across it. That button is 34px at
   bottom:10px (40px at bottom:8px on phones), so its top edge is at 44px / 48px:
   anything below 52px / 56px overlaps it. */
.tile-cam-flip{
  position:absolute;right:8px;bottom:52px;z-index:13;
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:rgba(8,12,16,.78);color:#fff;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tile-cam-flip.busy{opacity:.55;pointer-events:none}
.tile-cam-flip svg{width:18px;height:18px;fill:currentColor}
.tile-cam-flip.visible{display:flex}
.tile-cam-flip:active{transform:scale(0.9)}
@media(min-width:900px){.tile-cam-flip{display:none !important}}

/* ─── Conference chrome (layout owned by CANONICAL block) ─ */

@keyframes conf-in{from{opacity:0}to{opacity:1}}

.header{display:flex;align-items:center;padding:10px 16px;gap:10px;flex-shrink:0;
  border-radius:var(--radius);z-index:20;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:background var(--dur),border-color var(--dur),box-shadow var(--dur);
  animation:none}
.header-room{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;font-family:var(--font-display);letter-spacing:-0.02em}
.header-room-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  cursor:pointer;padding:5px 12px;font-size:13px;transition:background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)}
.header-room-code:hover{box-shadow:0 6px 18px var(--primary-glow-soft);transform:translateY(-1px)}
.header-count{color:var(--text2);font-size:13px;font-weight:500}
.header-timer{color:var(--text2);font-size:13px;font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.header-spacer{flex:1}
.header-btn{background:var(--elevated);border:1px solid var(--border);color:var(--text2);cursor:pointer;padding:8px;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  transition:color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}
.header-btn svg{width:18px;height:18px;fill:currentColor}
.header-btn:hover{color:var(--text);border-color:var(--primary);transform:translateY(-1px)}
.leave-btn{color:#fff;border:none;padding:8px 18px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);
  transition:opacity var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur);}
.leave-btn:hover{opacity:.9;transform:translateY(-1px)}

.shortcut-wrap{position:relative;display:inline-flex}
.shortcut-tooltip{position:absolute;top:calc(100% + 10px);right:0;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:16px;padding:14px 16px;width:230px;
  box-shadow:var(--shadow-lg);z-index:200;display:none;font-size:12px;line-height:2;
  animation:panel-pop .28s var(--ease-spring)}
.shortcut-wrap:hover .shortcut-tooltip{display:block}
.shortcut-row{display:flex;justify-content:space-between;gap:8px}
.shortcut-key{background:var(--elevated);border:1px solid var(--border);border-radius:8px;
  padding:1px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text2)}

/* main/video layout owned by CANONICAL — stubs only */
.main-area{position:relative;min-height:0;overflow:hidden}
.video-area{position:relative;min-height:0;overflow:hidden;min-width:0}
.video-area.chat-open,.video-area.people-open,.video-area.chat-open.people-open{margin-right:0}

.video-grid.spotlight{display:flex;flex-direction:column;gap:0}
.video-grid.spotlight .video-tile{display:none}
.video-grid.spotlight .video-tile.spotlight-main{display:flex;flex:1;min-height:0;cursor:pointer}
.spotlight-filmstrip{display:flex;gap:8px;padding:8px;overflow-x:auto;flex-shrink:0;
  height:118px;align-items:center}
.spotlight-filmstrip::-webkit-scrollbar{height:4px}
.spotlight-filmstrip::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.spotlight-filmstrip .video-tile{width:168px;min-width:168px;height:100px;flex-shrink:0;
  cursor:pointer;border-radius:16px;border:2px solid transparent;transition:border-color var(--dur-fast)}
.spotlight-filmstrip .video-tile:hover{border-color:var(--primary)}
.spotlight-filmstrip .video-tile.filmstrip-active{border-color:var(--tertiary)}
#spotlight-exit{position:absolute;top:16px;right:16px;z-index:50;background:rgba(0,0,0,0.65);
  color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;
  display:none;align-items:center;justify-content:center;transition:transform var(--dur-fast)}
#spotlight-exit:hover{transform:scale(1.08)}
#spotlight-exit.visible{display:flex}

.video-tile{position:relative;background:#000;border-radius:var(--tile-radius);
  overflow:hidden;border:0;display:flex;align-items:center;justify-content:center;
  min-height:160px;min-width:0;width:100%;height:100%;isolation:isolate;
  transition:none}
.video-tile > video.tile-feed,
.video-tile > canvas.tile-feed{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:#000;border-radius:inherit;z-index:1}
.video-tile.local > video.tile-feed{transform:scaleX(-1)}
.video-tile.screensharing{background:#000}
.video-tile.screensharing > video.tile-feed,
.video-tile.screensharing > canvas.tile-feed{
  position:absolute !important;
  inset:0 !important;
  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  object-fit:contain !important;
  transform:none !important;
  border-radius:0 !important;
  background:#000 !important}
.video-tile.local.screensharing > video.tile-feed{transform:none !important}
.video-tile.screensharing.tile-immersive > video.tile-feed,
.video-tile.screensharing.tile-immersive > canvas.tile-feed,
.video-tile.screensharing:fullscreen > video.tile-feed,
.video-tile.screensharing:-webkit-full-screen > video.tile-feed{
  object-fit:contain !important}
/* Speaking halo — smooth neon ring, no outer glow */
.video-tile.speaking{
  border:0;
  box-shadow:none;
}
.video-tile.speaking::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:6;
  box-sizing:border-box;
  border:5px solid var(--speak-halo);
  opacity:0.72;
  animation:speak-halo 2.4s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes speak-halo{
  0%,100%{opacity:0.48;border-width:4px}
  50%{opacity:1;border-width:6px}
}
body[data-reduce-motion="1"] .video-tile.speaking::after{animation:none;opacity:0.82;border-width:5px}
.video-tile.cam-off > video.tile-feed,
.video-tile.cam-off > canvas.tile-feed{
  visibility:hidden !important;opacity:0 !important;display:none !important;pointer-events:none !important}
.video-tile.cam-off .tile-avatar{display:flex !important;opacity:1 !important;visibility:visible !important;z-index:4}
.video-tile:fullscreen,.video-tile:-webkit-full-screen{
  border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;background:#000;
  display:flex;align-items:center;justify-content:center}
.video-tile:fullscreen > video.tile-feed,.video-tile:fullscreen > canvas.tile-feed,
.video-tile:-webkit-full-screen > video.tile-feed,.video-tile:-webkit-full-screen > canvas.tile-feed{border-radius:0}
.video-tile.screensharing:fullscreen,
.video-tile.screensharing:-webkit-full-screen{background:#000}
.tile-info{position:absolute;bottom:0;left:0;right:0;padding:10px 12px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;align-items:center;gap:6px;
  border-radius:0;z-index:6;pointer-events:none}
.tile-name{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-label{position:absolute;bottom:0;left:0;right:0;padding:10px 12px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:12px;font-weight:600;
  border-radius:0;z-index:6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
  display:flex;align-items:center;gap:6px}
.tile-label .tile-status{margin-left:auto;display:flex;gap:5px;align-items:center;opacity:.95}
.tile-badge{font-size:11px;opacity:.9}
.tile-avatar{width:100%;height:100%;display:none;align-items:center;justify-content:center;
  position:absolute;inset:0;z-index:3;background:var(--video-bg)}
.tile-avatar.visible{display:flex}
.tile-avatar-circle{width:clamp(56px,18%,96px);height:clamp(56px,18%,96px);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(22px,4vw,36px);font-weight:700;user-select:none;flex-shrink:0;}
.tile-connecting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:13px;z-index:2;pointer-events:none}
.tile-hand-badge{position:absolute;top:10px;left:10px;z-index:10;display:none;align-items:center;
  justify-content:center;width:36px;height:36px;border-radius:14px;background:var(--secondary);
  color:#fff;box-shadow:0 8px 20px var(--secondary-glow);
  animation:pulse-hand 1.2s ease-in-out infinite}
.tile-hand-badge.visible{display:flex}
.tile-hand-badge svg{width:18px;height:18px;fill:currentColor}
.ui-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:1em;height:1em;vertical-align:-0.12em;color:inherit;line-height:0}
.ui-ico svg{width:100%;height:100%;fill:currentColor;display:block}
.tile-status .ui-ico{width:14px;height:14px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.people-icons{display:flex;gap:6px;align-items:center}
.people-icons .ui-ico{width:15px;height:15px;color:var(--text2)}
.people-icons .ui-ico-hand{color:var(--secondary)}
.people-icons .ui-ico-mic-off,.people-icons .ui-ico-cam-off{color:var(--red)}
.people-icons .ui-ico-screen{color:var(--text)}
.file-icon{flex-shrink:0;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:var(--elevated);color:var(--primary);border:1px solid var(--border)}
.file-icon svg{width:20px;height:20px;fill:currentColor}
.tile-local-hint .ui-ico{width:12px;height:12px}

/* Tile overlays on video — solid, NO blur */
.tile-fullscreen-btn{position:absolute;top:auto;bottom:10px;right:10px;left:auto;background:rgba(0,0,0,0.62);
  border:1px solid rgba(255,255,255,.18);color:#fff;width:34px;height:34px;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:12;
  transition:opacity .15s,background .15s,transform .15s;opacity:0.55}
.tile-fullscreen-btn:hover{background:rgba(0,0,0,0.82);opacity:1;transform:scale(1.06)}
.tile-fullscreen-btn svg{width:15px;height:15px;fill:currentColor}
.video-tile:hover .tile-fullscreen-btn,
.video-tile:focus-within .tile-fullscreen-btn,
.video-tile.tile-immersive .tile-fullscreen-btn{opacity:1}
.video-tile:fullscreen .tile-fullscreen-btn,.video-tile:-webkit-full-screen .tile-fullscreen-btn{opacity:1}
@media(hover:none){.tile-fullscreen-btn{opacity:0.85}}

.video-grid{display:grid;gap:10px;width:100%;height:100%;max-width:100%;max-height:100%;
  transition:gap .35s var(--ease-out);align-content:stretch;justify-content:stretch;padding:4px;
  grid-auto-rows:minmax(0,1fr)}

.video-grid[data-count="3"],.video-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.video-grid[data-count="5"],.video-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.video-grid[data-count="7"],.video-grid[data-count="8"],.video-grid[data-count="9"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:768px){
  .video-grid[data-count="1"]{grid-template-columns:1fr}
  .video-grid[data-count="2"]{grid-template-columns:1fr;grid-auto-rows:minmax(140px,1fr)}
  .video-grid[data-count="3"],.video-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-grid[data-count="5"],.video-grid[data-count="6"],
  .video-grid[data-count="7"],.video-grid[data-count="8"],.video-grid[data-count="9"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@keyframes pulse-hand{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.tile-quality-dot{position:absolute;top:10px;left:10px;width:8px;height:8px;border-radius:50%;
  background:var(--tertiary);z-index:10;transition:background .5s;display:none;
  box-shadow:0 0 8px var(--tertiary-glow)}
.tile-quality-dot.visible{display:block}
.tile-quality-dot.quality-good{background:var(--tertiary)}
.tile-quality-dot.quality-ok{background:var(--secondary)}
.tile-quality-dot.quality-bad{background:var(--red)}

.reaction-float{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  font-size:32px;z-index:50;pointer-events:none;}
@keyframes float-up{
  0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  60%{opacity:1;transform:translateX(-50%) translateY(-60px) scale(1.25)}
  100%{opacity:0;transform:translateX(-50%) translateY(-120px) scale(0.8)}
}

/* ─── Controls — solid dock bar ──────────────────── */
.controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;flex-shrink:0;
  width:100%;max-width:100%;margin:0;
  border-radius:0;
  background:rgba(10,12,14,0.96);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;border-top:1px solid rgba(255,255,255,0.06);box-shadow:none;z-index:20;
  transition:background var(--dur),border-color var(--dur);
  animation:none}
@keyframes dock-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ctrl-cluster{display:flex;align-items:center;gap:8px}
.ctrl-sep{width:1px;height:28px;background:var(--border);margin:0 6px;align-self:center;flex-shrink:0}
.ctrl-btn{display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:20px;color:var(--text);position:relative;transform:translateZ(0)}
.ctrl-btn:hover{background:var(--hover-overlay);}

.ctrl-btn.active{box-shadow:0 10px 28px var(--primary-glow)}
.ctrl-btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
.ctrl-btn.muted{background:var(--red);color:#fff;border-color:var(--red)}
.ctrl-btn.raised{box-shadow:0 8px 22px var(--secondary-glow)}
.ctrl-btn svg{width:20px;height:20px;fill:currentColor}
.ctrl-label{font-size:10px;color:var(--text3);text-align:center;margin-top:3px;font-weight:600;letter-spacing:.02em}
.ctrl-group{display:flex;flex-direction:column;align-items:center;position:relative}
.chat-badge{position:absolute;top:-4px;right:-4px;background:var(--secondary);color:#fff;font-size:10px;
  min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;
  font-weight:700;padding:0 5px;box-shadow:0 4px 12px var(--secondary-glow)}
.chat-badge.visible{display:flex;animation:panel-pop .3s var(--ease-spring)}
.more-group{position:relative}
#ctrl-popover-scrim{
  position:fixed;inset:0;z-index:1;border:0;padding:0;margin:0;
  background:rgba(0,0,0,0.28);cursor:default;-webkit-tap-highlight-color:transparent;
}
#ctrl-popover-scrim[hidden]{display:none !important}
@media(min-width:901px){
  #ctrl-popover-scrim{background:rgba(0,0,0,0.18)}
}
.more-sheet{
  display:none;position:fixed;bottom:var(--ctrl-popover-bottom, 88px);right:12px;
  width:min(328px,calc(100vw - 16px));padding:12px 12px 14px;gap:10px 6px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-lg);z-index:4;
  max-height:calc(100dvh - var(--ctrl-popover-bottom, 88px) - 12px - env(safe-area-inset-top, 0px));
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.more-sheet.open{display:grid}
.more-sheet[hidden]{display:none !important}
.more-sheet-head{
  display:none;grid-column:1 / -1;align-items:center;justify-content:space-between;
  padding:0 4px 8px;margin-bottom:2px;border-bottom:1px solid var(--border);
}
.more-sheet-title{font-size:13px;font-weight:800;letter-spacing:.02em}
.more-sheet-close{
  width:32px;height:32px;border:none;border-radius:10px;background:var(--elevated);
  color:var(--text2);font-size:20px;line-height:1;cursor:pointer;
}
.more-sheet-close:hover{color:var(--text)}
.more-sheet .ctrl-group{width:100%}
.more-sheet .ctrl-btn{width:48px;height:48px;margin:0 auto}
.more-sheet .ctrl-label{
  display:block !important;font-size:10px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-top:4px;color:var(--text3) !important;
}
#ctrl-float-root{position:relative;z-index:4;pointer-events:none}
#ctrl-float-root > *{pointer-events:auto}
#ctrl-float-root .vb-conf-panel,
#ctrl-float-root .device-conf-panel,
#ctrl-float-root .files-modal,
#ctrl-float-root .reactions-popup,
#ctrl-float-root .host-menu{
  position:fixed !important;
  bottom:var(--ctrl-popover-bottom, 100px) !important;
  left:50% !important;right:auto !important;
  transform:translateX(-50%) !important;
  z-index:5;
  max-width:min(420px, calc(100vw - 16px));
  max-height:calc(100dvh - var(--ctrl-popover-bottom, 100px) - 12px - env(safe-area-inset-top, 0px));
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
#ctrl-float-root .device-conf-panel::after,
#ctrl-float-root .files-modal::after{display:none}
#ctrl-float-root .device-conf-panel::after,
#ctrl-float-root .files-modal::after{display:none}
#ctrl-float-root .reactions-popup{padding:12px 14px;gap:6px;border-radius:20px;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);box-shadow:var(--shadow-lg)}
#ctrl-float-root .reactions-popup.open{display:flex}

.reactions-popup{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:20px;
  padding:10px 12px;display:none;gap:6px;box-shadow:var(--shadow-lg);z-index:100;
  animation:panel-pop .28s var(--ease-spring)}
.reactions-popup.open{display:flex}
.reaction-btn{background:none;border:none;font-size:26px;cursor:pointer;border-radius:12px;
  padding:4px 6px;transition:background .15s,transform .2s var(--ease-spring)}
.reaction-btn:hover{background:var(--elevated);transform:scale(1.3)}
@media(max-width:768px){
  .reactions-popup{position:fixed;bottom:auto;left:50% !important;bottom:92px !important;
    transform:translateX(-50%);z-index:300}
}

/* Side panels — inset glass sheets (static) */
.side-panel{position:absolute;top:12px;right:12px;bottom:12px;width:340px;height:auto;
  display:flex;flex-direction:column;z-index:30;overflow:hidden;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;
  transition:none}
.side-panel.open{transform:translateX(0);opacity:1;pointer-events:auto}
@media(max-width:768px){
  .side-panel{top:0;right:0;bottom:0;width:100%;height:100%;border-radius:0;
    transform:translateX(100%)}
  .side-panel.open{transform:translateX(0)}
}
.side-panel-header{display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border);
  gap:10px}
.side-panel-title{font-size:17px;font-weight:700;flex:1;font-family:var(--font-display);letter-spacing:-0.02em}
.side-panel-close{background:var(--elevated);border:1px solid var(--border);color:var(--text2);cursor:pointer;
  font-size:18px;padding:4px 10px;border-radius:12px;transition:transform var(--dur-fast),color var(--dur-fast)}
.side-panel-close:hover{color:var(--text);transform:rotate(90deg)}

.engage-tabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--border)}
.engage-tab{flex:1;border:none;background:transparent;color:var(--text2);font:inherit;font-size:13px;
  font-weight:700;padding:10px 8px;border-radius:12px 12px 0 0;cursor:pointer;transition:color var(--dur-fast),background var(--dur-fast)}
.engage-tab.active{color:var(--primary);background:var(--elevated)}
.engage-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.engage-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text3);margin-bottom:2px}
.engage-card{border:1px solid var(--border);border-radius:16px;padding:12px;background:var(--elevated)}
.engage-card h4{font-size:14px;font-weight:700;margin:0 0 8px;line-height:1.35}
.engage-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.engage-actions button,.engage-btn{border:1px solid var(--border);background:var(--surface-solid);color:var(--text);
  border-radius:12px;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.engage-actions button.primary,.engage-btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-accent)}
.engage-actions button.danger{color:var(--red)}
.engage-input,.engage-select{width:100%;padding:10px 12px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-solid);color:var(--text);font:inherit;font-size:13px;outline:none;margin-bottom:8px}
.engage-input:focus{border-color:var(--primary)}
.engage-opt-row{display:flex;gap:6px;margin-bottom:6px}
.engage-opt-row input{flex:1;margin-bottom:0}
.engage-vote-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  border:1px solid var(--border);background:var(--surface-solid);border-radius:14px;padding:10px 12px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:6px;text-align:left;color:var(--text);
  position:relative;overflow:hidden;transition:border-color var(--dur-fast),transform var(--dur-fast)}
.engage-vote-btn:hover{border-color:var(--primary);transform:translateX(2px)}
.engage-vote-btn.selected{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.engage-vote-btn .bar{position:absolute;left:0;top:0;bottom:0;background:var(--primary-glow-soft);z-index:0}
.engage-vote-btn span{position:relative;z-index:1}
.engage-meta{font-size:11px;color:var(--text3);font-weight:600;margin-top:4px}
.qa-item{border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:var(--surface-solid);
  margin-bottom:8px}
.qa-item.answered{opacity:.65}
.qa-text{font-size:13px;font-weight:600;line-height:1.35;margin-bottom:4px}
.qa-meta{font-size:11px;color:var(--text3);display:flex;justify-content:space-between;gap:8px;align-items:center}
.qa-up{border:1px solid var(--border);background:var(--elevated);border-radius:10px;padding:4px 8px;
  font:inherit;font-size:11px;font-weight:700;cursor:pointer;color:var(--text)}
.qa-up.mine{border-color:var(--primary);color:var(--primary)}
.engage-empty{font-size:13px;color:var(--text3);padding:16px 4px;text-align:center}
.poll-live-card{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:25;
  width:min(420px, calc(100% - 24px));
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:14px;display:none;animation:panel-pop .35s var(--ease-spring)}
.poll-live-card.visible{display:block}
.poll-live-card h4{font-size:14px;font-weight:800;margin:0 0 8px}
.poll-live-card .engage-vote-btn{margin-bottom:6px}

.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth}
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.chat-msg{max-width:82%;display:flex;flex-direction:column;gap:2px;animation:msg-in .35s var(--ease-out)}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-msg.mine{align-self:flex-end}
.chat-msg.theirs{align-self:flex-start}
.chat-msg-name{font-size:11px;color:var(--text3);font-weight:600;padding:0 4px}
.chat-msg-bubble{padding:10px 14px;border-radius:20px;font-size:14px;line-height:1.4;word-break:break-word}
.chat-msg.mine .chat-msg-bubble{
  border-bottom-right-radius:6px;}
.chat-msg.theirs .chat-msg-bubble{background:var(--chat-them);color:var(--chat-them-text);
  border-bottom-left-radius:6px}
.chat-sys{text-align:center;color:var(--text3);font-size:12px;padding:4px 0}
.chat-input-area{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.chat-input{flex:1;padding:11px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--border);
  background:var(--elevated);color:var(--text);font-size:14px;font-family:var(--font);
  outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.chat-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow-soft)}
.chat-send{width:40px;height:40px;border-radius:50%;border:none;background:var(--primary);
  color:var(--on-accent);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-fast),box-shadow var(--dur);flex-shrink:0;
  box-shadow:0 6px 16px var(--primary-glow)}
.chat-send:hover{transform:scale(1.08)}
.chat-send svg{width:16px;height:16px;fill:currentColor}

.people-list{flex:1;overflow-y:auto;padding:12px}
.people-item{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:14px;
  transition:background .15s,transform .2s}
.people-item:hover{background:var(--elevated);transform:translateX(2px)}
.people-avatar{width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}
.people-info{flex:1;min-width:0}
.people-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people-you{font-size:11px;color:var(--text3);font-weight:500}
.people-host-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--tertiary);color:var(--on-tertiary);font-size:10px;font-weight:700;vertical-align:middle}
.people-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.people-actions button{border:1px solid var(--border);background:var(--elevated);color:var(--text2);
  border-radius:10px;padding:4px 8px;font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.people-actions button:hover{color:var(--text);border-color:var(--primary)}
.people-actions button.danger{color:var(--red)}
.header-host-badge{display:none;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--tertiary);color:var(--on-tertiary);font-size:11px;font-weight:700}
.header-host-badge.visible{display:inline-flex}
.header-lock-badge{display:none;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:12px;background:var(--elevated);border:1px solid var(--border);color:var(--text2)}
.header-lock-badge.visible{display:inline-flex}
.header-lock-badge svg{width:14px;height:14px;fill:currentColor}
#host-group{display:none;position:relative}
#host-group.visible{display:flex}
.host-menu{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  min-width:220px;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:200;flex-direction:column;gap:2px;
  animation:panel-pop .28s var(--ease-spring)}
.host-menu.open{display:flex}
.host-menu[hidden]{display:none !important}
.host-menu button{border:none;background:transparent;color:var(--text);text-align:left;
  padding:10px 12px;border-radius:12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s}
.host-menu button:hover{background:var(--elevated)}
.host-menu button.danger{color:var(--red)}
.host-menu .host-menu-check{color:var(--text3);font-weight:500;font-size:12px}

.chat-toast-stack{position:fixed;right:16px;bottom:110px;z-index:1200;display:flex;
  flex-direction:column-reverse;gap:8px;width:min(320px, calc(100vw - 32px));pointer-events:none}
.chat-toast-card{
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:12px 14px;
  opacity:0;transform:translateY(12px) scale(.96);transition:opacity .28s var(--ease-out),transform .35s var(--ease-spring);
  pointer-events:auto;cursor:pointer}
.chat-toast-card.visible{opacity:1;transform:translateY(0) scale(1)}
.chat-toast-card.leaving{opacity:0;transform:translateY(8px)}
.chat-toast-name{font-size:11px;font-weight:700;color:var(--secondary);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-toast-text{font-size:13px;font-weight:500;color:var(--text);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
@media(max-width:768px){
  .chat-toast-stack{right:10px;bottom:96px;width:min(280px, calc(100vw - 20px))}
}

.toast{position:fixed;top:88px;left:50%;transform:translateX(-50%) translateY(0);
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  color:var(--text);padding:12px 22px;border-radius:16px;font-size:13px;font-weight:600;
  box-shadow:var(--shadow-lg);z-index:1000;opacity:0;pointer-events:none;visibility:hidden;
  border:1px solid var(--border);will-change:transform,opacity}
.toast.visible{visibility:visible}
#reconnect-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1200;display:none;align-items:center;
  justify-content:center;gap:10px;padding:12px 20px;font-size:13px;font-weight:700;letter-spacing:.01em;
  background:var(--primary);color:var(--on-accent);box-shadow:0 12px 36px var(--primary-glow);pointer-events:none;
  border-radius:var(--radius-pill);max-width:calc(100vw - 24px)}
#reconnect-banner.visible{display:flex;animation:panel-pop .35s var(--ease-spring)}
#reconnect-banner .reconnect-dot{width:8px;height:8px;border-radius:50%;background:var(--on-accent);
  opacity:.85;flex-shrink:0}
.reaction-float{will-change:transform,opacity;animation:none}

.files-modal{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%);
  width:420px;max-width:calc(100vw - 32px);
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);
  z-index:200;overflow:hidden;display:none;flex-direction:column;max-height:480px;
  animation:panel-pop .32s var(--ease-spring)}
.files-modal.open{display:flex}
.files-modal[hidden]{display:none !important}
.reactions-popup[hidden]{display:none !important}
.vb-conf-panel[hidden],.device-conf-panel[hidden]{display:none !important}
.files-modal::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:14px;height:8px;background:var(--control-bg);clip-path:polygon(0 0,100% 0,50% 100%)}
.files-modal-header{display:flex;align-items:center;padding:16px 18px 12px;gap:8px;
  border-bottom:1px solid var(--border);flex-shrink:0}
.files-modal-title{font-size:15px;font-weight:700;flex:1;font-family:var(--font-display)}
.files-modal-count{font-size:12px;color:var(--text3);font-weight:500;
  background:var(--elevated);border-radius:10px;padding:2px 8px}
.files-modal-close{background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:18px;line-height:1;padding:2px;border-radius:6px;transition:color .15s}
.files-modal-close:hover{color:var(--text)}
.files-dropzone{margin:12px 16px 0;border:2px dashed var(--border);border-radius:16px;
  padding:20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
  flex-shrink:0}
.files-dropzone:hover,.files-dropzone.dragover{border-color:var(--primary);
  background:var(--primary-glow-soft)}
.files-dropzone-icon{font-size:28px;margin-bottom:6px}
.files-dropzone-text{font-size:13px;color:var(--text2);font-weight:500}
.files-dropzone-sub{font-size:11px;color:var(--text3);margin-top:3px}
.files-list{flex:1;overflow-y:auto;padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px}
.files-list::-webkit-scrollbar{width:5px}
.files-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.files-empty{text-align:center;color:var(--text3);font-size:13px;padding:20px 0}
.file-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  background:var(--elevated);border:1px solid var(--border);transition:background .15s,transform .2s}
.file-item:hover{background:var(--surface-solid);transform:translateY(-1px)}
.file-thumb{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{font-size:11px;color:var(--text3);margin-top:2px}
.file-progress{height:3px;background:var(--border);border-radius:2px;margin-top:5px;overflow:hidden}
.file-progress-bar{height:100%;background:var(--primary);border-radius:2px;transition:width .3s;width:0%}
.file-dl-btn{background:var(--primary);border:none;color:var(--on-accent);width:28px;height:28px;
  border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:opacity .2s,transform .15s}
.file-dl-btn:hover{opacity:.85;transform:scale(1.08)}
.file-dl-btn svg{width:14px;height:14px;fill:currentColor}
.file-dl-btn:disabled{opacity:.4;cursor:not-allowed}

#wb-canvas{position:absolute;inset:auto;width:100%;height:100%;pointer-events:none;z-index:15;
  border-radius:0;display:none;touch-action:none;cursor:crosshair;left:0;top:0;
  object-fit:fill;background:transparent}
#wb-canvas.active{pointer-events:auto;display:block}
#wb-canvas.mode-room.active{background:rgba(0,0,0,0.18);inset:0;width:100%;height:100%}
#wb-canvas.mode-screen.active{background:transparent;box-shadow:inset 0 0 0 2px var(--primary-glow);
  inset:auto;border-radius:0 !important;z-index:15}
.video-tile > #wb-canvas.mode-screen{
  inset:auto;object-fit:fill;border-radius:0 !important;transform:none !important}
#wb-toolbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  display:none;align-items:center;gap:6px;padding:10px 14px;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);z-index:25;
  flex-wrap:wrap;max-width:calc(100% - 20px);animation:panel-pop .3s var(--ease-spring)}
#wb-toolbar.visible{display:flex}
#wb-toolbar.wb-toolbar-fixed{position:fixed;top:12px;z-index:2147483646;max-width:calc(100vw - 24px)}
#wb-mode-label{font-size:11px;font-weight:700;color:var(--text2);padding:0 6px;white-space:nowrap;
  letter-spacing:0.04em;text-transform:uppercase}
.annotate-banner{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:24;display:none;align-items:center;gap:10px;padding:10px 14px 10px 16px;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);
  font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;
  max-width:min(92vw,560px);overflow:hidden;
  transition:max-width .55s var(--ease-out), padding .45s ease, gap .35s ease,
    border-radius .45s ease, background .3s ease, box-shadow .3s ease, transform .25s}
.annotate-banner.visible{display:flex}
.annotate-banner .ann-icon{display:none;width:18px;height:18px;flex-shrink:0;color:var(--primary)}
.annotate-banner .ann-icon svg{display:block;width:18px;height:18px}
.annotate-banner .ann-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;
  transition:width .35s ease, height .35s ease, opacity .25s ease;box-shadow:0 0 10px var(--primary-glow)}
.annotate-banner .ann-body{display:flex;align-items:center;gap:10px;min-width:0;
  transition:opacity .3s ease, max-width .55s var(--ease-out), margin .35s ease}
.annotate-banner button{border:none;border-radius:999px;padding:7px 14px;font:inherit;font-size:12px;
  font-weight:700;cursor:pointer;background:var(--primary);color:var(--on-accent);flex-shrink:0}
.annotate-banner button.secondary{background:var(--elevated);color:var(--text)}
.annotate-banner button:hover{opacity:.9}
.annotate-banner.collapsed{width:52px;height:52px;max-width:52px;min-width:52px;padding:0;gap:0;
  cursor:pointer;border-radius:50%;justify-content:center;
  background:var(--elevated);color:var(--text);border:1px solid var(--border);
  box-shadow:var(--shadow)}
.annotate-banner.collapsed:hover{opacity:.9;transform:translateX(-50%) scale(1.06)}
.annotate-banner.collapsed:active{transform:translateX(-50%) scale(0.94)}
.annotate-banner.collapsed .ann-body{opacity:0;max-width:0;width:0;margin:0;padding:0;overflow:hidden;pointer-events:none}
.annotate-banner.collapsed .ann-dot{display:none}
.annotate-banner.collapsed .ann-icon{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;color:var(--text);flex-shrink:0}
.annotate-banner.collapsed .ann-icon svg{width:22px;height:22px;fill:currentColor;display:block}
#annotate-group{display:none}
#annotate-group.visible{display:flex}

/* Local tile controls — solid veil over video, NO blur */
.tile-local-controls{position:absolute;inset:0;z-index:14;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:12px;
  background:rgba(4,8,12,0.72);
  border-radius:inherit;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease-out)}
.video-tile.controls-open .tile-local-controls{display:flex;opacity:1;pointer-events:auto}
.tile-local-controls .tlc-close{position:absolute;top:8px;right:8px;width:36px;height:36px;
  border-radius:50%;border:1px solid rgba(255,255,255,0.22);background:rgba(16,22,28,0.92);
  color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:0;font:inherit;z-index:1}
.tile-local-controls .tlc-close:hover{background:rgba(32,40,48,0.95);border-color:rgba(255,255,255,0.4)}
.tile-local-controls .tlc-close svg{width:16px;height:16px;fill:currentColor}
.tile-local-controls .tlc-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tile-local-controls .tlc-row button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.22);
  background:rgba(16,22,28,0.92);color:#fff;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;padding:0;font:inherit;transition:transform .15s}
.tile-local-controls .tlc-row button svg{width:18px;height:18px;fill:currentColor}
.tile-local-controls .tlc-row button:hover{background:rgba(32,40,48,0.95);border-color:rgba(255,255,255,0.4);transform:scale(1.06)}
.tile-local-controls .tlc-row button.on{background:var(--primary);border-color:var(--primary);color:var(--on-accent)}
.tile-local-controls .tlc-row button.danger.on{background:var(--red);border-color:var(--red);color:#fff}
.tile-local-controls .tlc-vol{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:rgba(16,22,28,0.9);border:1px solid rgba(255,255,255,0.16);color:#fff;font-size:11px;font-weight:700}
.tile-local-controls .tlc-vol input[type=range]{width:88px;accent-color:var(--primary)}
.tile-local-hint{position:absolute;top:8px;left:8px;z-index:11;display:none;gap:4px;pointer-events:none}
.tile-local-hint.visible{display:flex}
.tile-local-hint span{font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,0.7);
  color:#fff;font-weight:700;display:none;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.12)}
.video-tile.local-audio-muted .tile-local-hint .tlc-m,
.video-tile.local-video-hidden .tile-local-hint .tlc-v{display:inline-flex}
.tile-local-hint .tlc-m,.tile-local-hint .tlc-v{display:none}
.video-tile{cursor:pointer}
.video-tile.local{cursor:default}
.ctrl-btn.recording{background:var(--red);color:#fff;animation:rec-pulse 1.2s ease-in-out infinite}
@keyframes rec-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,0.45)}50%{box-shadow:0 0 0 8px rgba(255,59,48,0)}}
.rec-banner{position:absolute;top:12px;left:14px;z-index:26;display:none;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;background:rgba(255,59,48,0.92);color:#fff;font-size:12px;
  font-weight:700;box-shadow:var(--shadow-lg);pointer-events:none;max-width:min(70vw,420px);
  animation:panel-pop .3s var(--ease-spring)}
.rec-banner.visible{display:flex}
.rec-banner .rec-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:rec-pulse 1.2s ease-in-out infinite}
.header-rec-timer{font-size:12px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;
  display:none;align-items:center;gap:6px}
.header-rec-timer.visible{display:inline-flex}
.header-rec-timer::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red)}

#end-screen{display:none;align-items:center;justify-content:center;height:100%;padding:24px;
  padding-top:max(24px, env(safe-area-inset-top, 0px));
  padding-right:max(24px, env(safe-area-inset-right, 0px));
  padding-bottom:max(24px, env(safe-area-inset-bottom, 0px));
  padding-left:max(24px, env(safe-area-inset-left, 0px));
  background:var(--bg);overflow:auto;position:relative}
#end-screen.active{display:flex}
#end-screen::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 50% 30%, var(--primary-glow-soft), transparent 60%)}
.end-card{position:relative;z-index:1;width:100%;max-width:480px;
  background:var(--control-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:36px 30px;
  animation:compose-in .55s var(--ease-out)}
.end-title{font-size:28px;font-weight:800;letter-spacing:-0.03em;margin-bottom:4px;font-family:var(--font-display)}
.end-sub{font-size:13px;color:var(--text2);margin-bottom:22px}
.end-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13px}
.end-row:last-of-type{border-bottom:none}
.end-label{color:var(--text3);font-weight:600}
.end-value{font-weight:700;text-align:right;word-break:break-word}
.end-recs{margin-top:18px}
.end-recs-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text3);margin-bottom:10px}
.end-rec-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;
  background:var(--elevated);border:1px solid var(--border);margin-bottom:8px}
.end-rec-link{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.end-rec-link:hover{text-decoration:underline}
.end-rec-copy{border:none;border-radius:10px;padding:6px 10px;font:inherit;font-size:11px;
  font-weight:700;cursor:pointer;background:var(--primary);color:var(--on-accent);flex-shrink:0}
.end-rec-empty{font-size:13px;color:var(--text3);padding:8px 0}
.end-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.end-actions button{flex:1;min-width:120px;border:none;border-radius:14px;padding:13px 14px;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform var(--dur-fast)}
.end-actions button:hover{transform:translateY(-2px)}
.end-btn-primary{box-shadow:0 10px 28px var(--primary-glow)}
.end-btn-secondary{background:var(--elevated);color:var(--text);border:1px solid var(--border) !important}

/* Share / create modals */
.storm-modal{
  position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;
  padding:24px;padding-top:max(24px, env(safe-area-inset-top, 0px));
  padding-bottom:max(24px, env(safe-area-inset-bottom, 0px));
}
.storm-modal[hidden]{display:none !important}
.storm-modal-scrim{
  position:absolute;inset:0;background:rgba(8,10,12,0.48);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.storm-modal-card{
  position:relative;z-index:1;width:min(420px,100%);max-height:min(88dvh,680px);overflow:auto;
  background:var(--control-bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 24px 64px rgba(0,0,0,.28);animation:storm-modal-in .38s var(--ease-out);
}
@keyframes storm-modal-in{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}
}
.storm-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:22px 22px 12px;border-bottom:1px solid var(--border);
}
.storm-modal-title{font-size:20px;font-weight:800;letter-spacing:-0.03em;font-family:var(--font-display);margin:0}
.storm-modal-sub{font-size:12px;color:var(--text3);font-weight:600;margin-top:4px}
.storm-modal-close{
  background:none;border:none;color:var(--text3);font-size:28px;line-height:1;
  cursor:pointer;padding:0 4px;border-radius:10px;transition:color var(--dur-fast),background var(--dur-fast);
}
.storm-modal-close:hover{color:var(--text);background:var(--elevated)}
.invite-link-row{
  display:flex;gap:8px;padding:14px 18px 6px;align-items:stretch;
}
.invite-link-input{
  flex:1;min-width:0;border:1.5px solid var(--border);border-radius:12px;
  background:var(--surface-solid);color:var(--text);font:inherit;font-size:12px;font-weight:600;
  padding:10px 12px;
}
.invite-copy-btn{
  border:none;border-radius:12px;padding:0 14px;font:inherit;font-size:12px;font-weight:800;
  cursor:pointer;background:var(--accent);color:var(--on-accent);white-space:nowrap;flex-shrink:0;
}
.invite-copy-btn:hover{background:var(--accent-hover)}
.invite-share-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 18px 20px;
}
.invite-share-btn{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--border);background:var(--elevated);cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--text);text-align:left;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.invite-share-btn:hover{background:var(--surface-solid);border-color:var(--accent);transform:translateY(-1px)}
.invite-share-wide{grid-column:1 / -1}
.invite-share-icon{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;color:#fff;
}
.invite-icon-wa{background:#25D366}
.invite-icon-tg{background:#229ED9}
.invite-icon-mail{background:var(--accent)}
.invite-icon-sms{background:#64748B}
.invite-icon-share{background:var(--text2);font-size:16px}
body.invite-modal-open{overflow:hidden}

.wb-tool-btn{width:34px;height:34px;border-radius:12px;border:none;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:background .15s,color .15s,transform .15s;flex-shrink:0}
.wb-tool-btn:hover{background:var(--elevated);color:var(--text);transform:scale(1.06)}
.wb-tool-btn.active{background:var(--primary);color:var(--on-accent)}
.wb-tool-btn svg{width:16px;height:16px;fill:currentColor}
.wb-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 2px}
.wb-color-btn{width:22px;height:22px;border-radius:50%;border:2.5px solid transparent;
  cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0}
.wb-color-btn:hover{transform:scale(1.18)}
.wb-color-btn.active{border-color:var(--primary);transform:scale(1.12)}
.wb-size-btn{width:28px;height:28px;border-radius:10px;border:1.5px solid var(--border);
  background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:background .15s,border-color .15s;flex-shrink:0;font-size:0}
.wb-size-btn:hover{background:var(--elevated)}
.wb-size-btn.active{background:var(--primary);border-color:var(--primary)}
.wb-size-dot{background:currentColor;border-radius:50%;display:block;background:var(--text2)}
.wb-size-btn.active .wb-size-dot{background:var(--on-accent)}
.wb-action-btn{height:28px;padding:0 10px;border-radius:10px;border:1px solid var(--border);
  background:none;cursor:pointer;color:var(--text2);font-size:11px;font-weight:600;
  font-family:var(--font);transition:background .15s,color .15s;flex-shrink:0;white-space:nowrap}
.wb-action-btn:hover{background:var(--elevated);color:var(--text)}
.wb-action-btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* Responsive */
@media(max-width:768px){
  #conference{padding:8px;gap:8px}
  .lobby-card{border-radius:20px}
  .lobby-preview-wrap{aspect-ratio:4/3}
  .lobby-ctrl{width:46px;height:46px}
  .header{padding:8px 12px;gap:8px;border-radius:18px}
  .header-room{font-size:13px;gap:4px}
  .header-room > span:first-child{display:none}
  .header-room-code{font-size:12px;padding:3px 8px}
  .header-count{font-size:11px}
  .header-timer{font-size:11px}
  .shortcut-wrap{display:none}
  .leave-btn{font-size:12px;padding:7px 14px}
  .controls{padding:10px 12px;gap:4px;flex-wrap:nowrap;justify-content:center;border-radius:24px;width:100%}
  .ctrl-sep{height:24px;margin:0 4px}
  .ctrl-btn{width:46px;height:46px;min-width:46px;font-size:16px;border-radius:16px}
  .ctrl-btn svg{width:20px;height:20px}
  .ctrl-label{display:none}
  .more-sheet{
    position:fixed;bottom:var(--ctrl-popover-bottom, 88px);left:50%;right:auto;
    width:min(360px,calc(100vw - 16px));grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .more-sheet .ctrl-label{display:block !important}
  #ctrl-float-root .vb-conf-panel,
  #ctrl-float-root .device-conf-panel,
  #ctrl-float-root .files-modal,
  #ctrl-float-root .reactions-popup,
  #ctrl-float-root .host-menu{bottom:var(--ctrl-popover-bottom, 88px) !important}
  .video-grid{gap:8px;padding:8px}
  .video-area{padding:0}
  .video-tile{border-radius:14px}
  .tile-name{font-size:11px}
  .tile-avatar-circle{width:48px;height:48px;font-size:22px}
  .tile-fullscreen-btn{display:flex !important;opacity:0.85;background:rgba(0,0,0,0.62);
    width:40px;height:40px;top:auto;bottom:8px;right:8px;left:auto}
  /* clears the 40px fullscreen button at bottom:8px, with an 8px gap */
  .tile-cam-flip{width:40px;height:40px;right:8px;bottom:56px}
  .tile-cam-flip svg{width:20px;height:20px}
  .main-area{border-radius:0}
  .spotlight-filmstrip{height:80px;padding:4px 6px;gap:4px}
  .spotlight-filmstrip .video-tile{width:110px;min-width:110px;height:66px;border-radius:12px}
  .files-modal{position:fixed !important;bottom:var(--ctrl-popover-bottom, 90px) !important;left:50% !important;
    transform:translateX(-50%) !important;width:min(420px, calc(100vw - 16px));max-height:min(70dvh, calc(100dvh - var(--ctrl-popover-bottom, 90px) - 16px));z-index:5}
  .files-modal::after{display:none}
  .reaction-btn{font-size:22px;padding:3px 4px}
  #wb-toolbar{padding:6px 8px;gap:4px}
  #spotlight-exit{width:30px;height:30px;font-size:14px;top:8px;right:8px}
}
@media(max-width:480px){
  #conference{padding:6px;gap:6px}
  .header{padding:6px 10px;gap:6px}
  .header-room-code{font-size:11px;padding:2px 6px}
  .header-timer{display:none}
  .leave-btn{padding:6px 12px;font-size:11px;border-radius:14px}
  .controls{padding:8px 10px;gap:4px}
  .ctrl-btn{width:42px;height:42px;min-width:42px;border-radius:14px}
  .ctrl-btn svg{width:18px;height:18px}
  .more-sheet{bottom:var(--ctrl-popover-bottom, 78px)}
  #ctrl-float-root .vb-conf-panel,
  #ctrl-float-root .device-conf-panel,
  #ctrl-float-root .files-modal,
  #ctrl-float-root .reactions-popup,
  #ctrl-float-root .host-menu{bottom:var(--ctrl-popover-bottom, 78px) !important}
  .files-modal{bottom:var(--ctrl-popover-bottom, 80px) !important;max-height:min(70dvh, calc(100dvh - var(--ctrl-popover-bottom, 80px) - 16px))}
  .video-grid{gap:8px;padding:8px}
  .video-area{padding:0}
  .video-tile{border-radius:14px}
  .tile-avatar-circle{width:40px;height:40px;font-size:18px}
  .spotlight-filmstrip{height:70px}
  .spotlight-filmstrip .video-tile{width:90px;min-width:90px;height:54px}
}

/* ═══════════════════════════════════════════════════════════════
   newui2 CANONICAL — industry black/white · single layout source
   Conference uses absolute fill for stage (no %-height collapse)
   ═══════════════════════════════════════════════════════════════ */

/* tokens live once at file top — do not redefine :root here */

html,body{
  height:100%;
  overflow:hidden;
  font-family:var(--font);
  font-weight:500;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior:none;-webkit-text-size-adjust:100%;
  /* Edge paint for Safari/Android chrome + rubber-band */
  min-height:100%;
  min-height:100dvh;
}
html{
  background:var(--bg);
}
body{
  min-height:100%;
  min-height:100dvh;
}
/* Meeting: edge paint follows theme (not hard black) */
body:has(#conference.active),
html:has(#conference.active){
  background:var(--bg) !important;
}
.join-brand,.lobby-brand,.jb-form-title,.end-title,.side-panel-title,
.header-room,.header-meeting-label,.js-kicker{
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  letter-spacing:-0.04em;
}

/* Glass — static chrome only (no fake light edge / outer glow) */
.glass-pane{
  position:relative;
  isolation:isolate;
  background:var(--control-bg) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--border) !important;
  box-shadow:none !important;
  border-radius:var(--radius);
}
.glass-pane::before{content:none !important;display:none !important}
.glass-pane > *{position:relative;z-index:1}
.controls.glass-pane{overflow:visible !important}

/* Atmosphere orbs (flat gate bg set once above) */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(56px);opacity:.22;will-change:transform}
.orb-a{width:min(50vw,420px);height:min(50vw,420px);left:-12%;top:-20%;
  background:radial-gradient(circle, rgba(42,155,148,0.35), transparent 70%)}
.orb-b{width:min(40vw,360px);height:min(40vw,360px);right:-10%;bottom:-16%;
  background:radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%)}
.orb-c,.orb-d{display:none !important}
.gate-mesh{display:none !important}

/* Kill leftover toy/bento join fragments */
.jb-tile,.jb-strip,.jb-pills,.jb-signal,.jb-room,.join-bento:not(.join-shell){display:none !important}

/* ── JOIN ── */
#join-screen{
  display:flex;align-items:center;justify-content:center;
  height:100%;padding:24px;position:relative;z-index:100;overflow:hidden;
  padding-top:max(24px, env(safe-area-inset-top, 0px));
  padding-right:max(24px, env(safe-area-inset-right, 0px));
  padding-bottom:max(24px, env(safe-area-inset-bottom, 0px));
  padding-left:max(24px, env(safe-area-inset-left, 0px));
  background:var(--bg);
}
.join-shell{
  position:relative;z-index:1;width:min(960px,100%);
  display:grid !important;
  grid-template-columns:1.15fr 0.85fr;
  gap:16px;
  min-height:min(500px,78vh);
}
.js-brand{padding:40px 36px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.js-kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.join-shell .join-brand{
  font-size:clamp(56px,8vw,88px);line-height:.86;margin:0;
  color:var(--text);background:none;-webkit-text-fill-color:unset;filter:none;text-shadow:none;
}
.join-shell .join-tag{margin:0;font-size:16px;font-weight:600;color:var(--text2);max-width:28ch;line-height:1.45}
.js-points{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.js-points li{font-size:13px;font-weight:600;color:var(--text3);padding-left:18px;position:relative}
.js-points li::before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.js-form{padding:32px 28px;display:flex;flex-direction:column;justify-content:center}
.js-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:12px;font-weight:700;color:var(--text3)}
.js-field .join-input{margin:0}
.js-form.glass-pane.join-compose{
  padding:32px 28px;
  background:var(--control-bg);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--border);
  box-shadow:none;
  overflow:hidden;
}
.join-pane-view{
  display:flex;flex-direction:column;justify-content:center;width:100%;
  min-height:min(420px,100%);
}
.join-compose.create-room-open #join-form-view{display:none}
#create-room-view[hidden]{display:none !important}
.join-compose.create-room-open #create-room-view{display:flex !important}
.join-compose.create-room-open #arrive-room-view,
.join-compose.schedule-room-open #arrive-room-view{display:none !important}
.join-compose.schedule-room-open #join-form-view{display:none}
#schedule-room-view[hidden]{display:none !important}
.join-compose.schedule-room-open #schedule-room-view{display:flex !important;flex-direction:column}
.join-compose.arrive-room-open #join-form-view,
.join-compose.arrive-room-open #create-room-view,
.join-compose.arrive-room-open #schedule-room-view{display:none !important}
#arrive-room-view[hidden]{display:none !important}
.join-compose.arrive-room-open #arrive-room-view{display:flex !important;flex-direction:column;justify-content:flex-start;gap:0;min-height:0}
#join-screen.arrive-flow .js-brand .join-tag{max-width:32ch}
#join-screen.arrive-flow .js-points{display:none}
#join-screen.arrive-flow .js-kicker{color:var(--accent)}

/* ── Arrive / invite gate (Set → Ready → Go) ── */
.arrive-steps{
  display:flex;align-items:center;gap:0;margin:0 0 18px;
}
.arrive-step{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;color:var(--text3);letter-spacing:0.02em;
}
.arrive-step span{
  width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;border:1.5px solid var(--border);background:var(--elevated);color:var(--text3);
}
.arrive-step.is-active{color:var(--text)}
.arrive-step.is-active span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.arrive-step.is-done{color:var(--accent)}
.arrive-step.is-done span{background:var(--accent-glow-soft);border-color:var(--accent);color:var(--accent)}
.arrive-step-line{
  flex:1;height:1px;background:var(--border);margin:0 8px;min-width:12px;
}
.arrive-badge{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;margin-bottom:10px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-glow-soft);border:1px solid transparent;width:fit-content;
}
.arrive-title{
  margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-0.03em;
  font-family:var(--font-display);color:var(--text);line-height:1.15;
}
.arrive-sub{margin:0 0 16px;font-size:13px;font-weight:600;color:var(--text2);line-height:1.45}
.arrive-card{
  padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--elevated);margin-bottom:14px;
}
.arrive-card-kicker{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;
}
.arrive-card-title{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.02em;line-height:1.25}
.arrive-card-when{margin-top:6px;font-size:13px;font-weight:600;color:var(--text2);line-height:1.4}
.arrive-card-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;
  font-size:12px;font-weight:600;color:var(--text3);
}
.arrive-card-meta code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;color:var(--text);
}
.arrive-pill{
  display:inline-flex;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;
  color:var(--accent);background:var(--accent-glow-soft);
}
.arrive-notes{
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--border);
  font-size:13px;font-weight:600;color:var(--text2);line-height:1.45;
}
.arrive-name-field{margin-bottom:12px}
.arrive-ready{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.arrive-check{
  display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--text3);
}
.arrive-check[data-ok="1"]{color:var(--text)}
.arrive-check-dot{
  width:10px;height:10px;border-radius:50%;border:1.5px solid var(--border);background:transparent;flex-shrink:0;
}
.arrive-check[data-ok="1"] .arrive-check-dot{
  background:var(--green);border-color:var(--green);box-shadow:0 0 0 3px rgba(18,183,106,.15);
}
.arrive-secondary{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.arrive-secondary .join-create{margin-top:0}
.arrive-card[data-state="cancelled"]{border-color:rgba(217,45,32,.28)}
.arrive-card[data-state="cancelled"] .arrive-card-kicker{color:var(--red)}
@media (max-width:860px){
  #join-screen.arrive-flow .join-shell{grid-template-columns:1fr}
  #join-screen.arrive-flow .js-brand{display:none}
}

.join-schedule{margin-top:8px}
.sched-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sched-notes{min-height:64px;resize:vertical;font-family:inherit;font-weight:600}
.sched-status{font-size:13px;font-weight:600;color:var(--accent);margin:0 0 10px}
.sched-status-err{color:#ff6b6b !important}
.sched-success-title{font-size:20px;font-weight:800;font-family:var(--font-display);margin:0 0 6px}
.sched-success-sub{font-size:13px;color:var(--text2);font-weight:600;margin:0 0 14px}
.sched-success-hint{font-size:12px;color:var(--text2);font-weight:600;margin:8px 0 14px;line-height:1.45}
.sched-cal-link{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-bottom:10px}
.sched-cal-row{font-size:13px;font-weight:600;margin:12px 0}
.sched-cal-row a{color:var(--accent)}
.plan-manage-card{max-width:440px}
body.plan-manage-open{overflow:hidden}

/* ── Manage meeting (newui2 glass modal) ───────────────────────────── */
.pm-modal{padding:20px}
.pm-panel.storm-modal-card{
  width:min(640px,100%);
  max-height:min(92dvh,860px);
  overflow:auto;
  background:var(--control-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 24px 64px rgba(0,0,0,.28);
  font-family:var(--font);
}
.pm-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 20px 14px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:2;
  background:var(--control-bg);
}
.pm-head-text{min-width:0;flex:1}
.pm-title{
  margin:0;font-size:20px;font-weight:800;letter-spacing:-0.03em;
  font-family:var(--font-display);color:var(--text);line-height:1.15;
}
.pm-sub{
  margin:4px 0 0;font-size:12px;font-weight:600;color:var(--text3);
  line-height:1.35;
}
.pm-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pm-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:700;color:var(--text2);
  background:var(--elevated);border:1px solid var(--border);
}
.pm-status::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--text3);
}
.pm-status[data-state="scheduled"]{
  color:var(--green);border-color:rgba(18,183,106,.28);background:rgba(18,183,106,.10);
}
.pm-status[data-state="scheduled"]::before{background:var(--green)}
.pm-status[data-state="cancelled"]{
  color:var(--red);border-color:rgba(217,45,32,.28);background:rgba(217,45,32,.10);
}
.pm-status[data-state="cancelled"]::before{background:var(--red)}
.pm-status[data-state="loading"]{opacity:.75}
.pm-body{padding:0 0 4px}
.pm-loading{
  padding:36px 20px;text-align:center;font-size:13px;font-weight:600;color:var(--text3);
}
.pm-section{padding:14px 20px;border-bottom:1px solid var(--border)}
.pm-section:last-of-type{border-bottom:none}
.pm-sec-h{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 10px;font-size:12px;font-weight:700;color:var(--text2);
}
.pm-sec-h span:last-child{font-weight:600;color:var(--text3);font-size:11px}
.pm-hero-title{
  margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:-0.02em;
  font-family:var(--font-display);color:var(--text);line-height:1.25;
}
.pm-hero-when{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--text2);line-height:1.4}
.pm-hero-meta{margin:0;font-size:12px;font-weight:600;color:var(--text3)}
.pm-hero-meta code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;color:var(--text);font-size:12px;
}
.pm-notes{
  margin:10px 0 0;padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--elevated);border:1px solid var(--border);
  font-size:13px;font-weight:600;color:var(--text2);line-height:1.45;
}
.pm-link-row{display:flex;gap:8px;align-items:stretch}
.pm-link-input{
  flex:1;min-width:0;border:1.5px solid var(--border);border-radius:12px;
  background:var(--surface-solid);color:var(--text);
  font:inherit;font-size:12px;font-weight:600;padding:10px 12px;
}
.pm-btn{
  border:1.5px solid var(--border);border-radius:12px;padding:0 14px;
  font:inherit;font-size:12px;font-weight:800;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  background:var(--elevated);color:var(--text);min-height:40px;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast),color var(--dur-fast);
}
.pm-btn:hover{background:var(--surface-solid);border-color:var(--accent);color:var(--accent)}
.pm-btn-primary{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
.pm-btn-primary:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent);
  transform:translateY(-1px);
}
.pm-btn-danger{color:var(--red);border-color:rgba(217,45,32,.28)}
.pm-btn-danger:hover{background:rgba(217,45,32,.10);border-color:var(--red);color:var(--red)}
.pm-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.pm-cal-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pm-chip{
  display:inline-flex;align-items:center;padding:8px 12px;
  border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:700;
  text-decoration:none;color:var(--accent);background:var(--accent-glow-soft);
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.pm-chip:hover{border-color:var(--accent);background:var(--accent-glow)}
.pm-crew{display:flex;flex-direction:column;gap:8px;max-height:140px;overflow:auto}
.pm-crew-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--elevated);border:1px solid var(--border);
}
.pm-crew-avatar{
  width:34px;height:34px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-glow-soft);color:var(--accent);
  font-size:13px;font-weight:800;
}
.pm-crew-who{min-width:0;flex:1}
.pm-crew-who strong{
  display:block;font-size:13px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pm-crew-who span{
  display:block;font-size:11px;font-weight:600;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;
}
.pm-crew-tag{
  flex-shrink:0;font-size:11px;font-weight:700;color:var(--text3);
  padding:4px 8px;border-radius:999px;background:var(--surface-solid);
}
.pm-mail-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pm-stat{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text2);
  background:var(--elevated);
}
.pm-stat b{font-variant-numeric:tabular-nums;color:var(--text)}
.pm-stat[data-k="sent"]{color:var(--green);border-color:rgba(18,183,106,.28);background:rgba(18,183,106,.08)}
.pm-stat[data-k="queued"],.pm-stat[data-k="sending"]{color:var(--orange);border-color:rgba(196,122,26,.3);background:rgba(196,122,26,.08)}
.pm-stat[data-k="failed"]{color:var(--red);border-color:rgba(217,45,32,.28);background:rgba(217,45,32,.08)}
.pm-jobs{display:flex;flex-direction:column;gap:6px;max-height:120px;overflow:auto}
.pm-job{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:12px;background:var(--elevated);border:1px solid var(--border);
  font-size:12px;
}
.pm-job-to{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-weight:600;flex:1}
.pm-job-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pm-job-kind{color:var(--text3);font-weight:600;font-size:11px}
.pm-job-st{font-weight:800;font-size:11px}
.pm-job-st[data-s="sent"]{color:var(--green)}
.pm-job-st[data-s="queued"],.pm-job-st[data-s="sending"]{color:var(--orange)}
.pm-job-st[data-s="failed"]{color:var(--red)}
.pm-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:16px 20px 20px;border-top:1px solid var(--border);
}
.pm-actions .pm-btn{width:100%;min-height:44px;border-radius:var(--radius-sm)}
.pm-actions .pm-btn-primary{grid-column:1 / -1}
.pm-actions.pm-actions-solo .pm-btn-primary{grid-column:1 / -1}
.pm-actions-3{grid-template-columns:1fr 1fr}
.pm-actions-3 .pm-btn-primary{grid-column:1 / -1}
.pm-err{padding:28px 20px;color:var(--red);font-size:13px;font-weight:700;text-align:center}
.pm-countdown{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  padding:8px 12px;border-radius:999px;background:var(--accent-glow-soft);
  border:1px solid transparent;font-size:12px;font-weight:700;color:var(--accent);
}
.pm-form .js-field{margin-bottom:10px}
.pm-form .js-field span{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:5px;display:block}
.pm-form .join-input{
  width:100%;border:1.5px solid var(--border);border-radius:12px;
  background:var(--surface-solid);color:var(--text);font:inherit;font-size:14px;font-weight:600;
  padding:10px 12px;box-sizing:border-box;
}
.pm-form textarea.join-input{min-height:72px;resize:vertical;font-weight:600}
.pm-form .sched-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
.pm-guest-add{display:flex;gap:8px;margin-top:10px}
.pm-guest-add .join-input{flex:1;min-width:0}
.pm-guest-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pm-guest-chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;
  border-radius:999px;background:var(--elevated);border:1px solid var(--border);
  font-size:12px;font-weight:700;color:var(--text);
}
.pm-guest-chip button{
  width:22px;height:22px;border:none;border-radius:50%;cursor:pointer;
  background:var(--surface-solid);color:var(--text3);font-size:14px;line-height:1;font-weight:700;
}
.pm-guest-chip button:hover{color:var(--red);background:rgba(217,45,32,.1)}
.pm-save-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;
}
.pm-save-msg{font-size:12px;font-weight:700;color:var(--text3);min-height:16px}
.pm-save-msg.ok{color:var(--green)}
.pm-save-msg.err{color:var(--red)}
.pm-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pm-quick .pm-btn{min-height:36px;border-radius:999px;padding:0 14px;font-size:12px}
@media (max-width:560px){
  .pm-form .sched-row{grid-template-columns:1fr}
  .pm-actions{grid-template-columns:1fr}
  .pm-head{padding:18px 16px 12px}
  .pm-section{padding:12px 16px}
  .pm-actions{padding:14px 16px 16px}
}
@media (max-width:420px){
  .pm-actions{grid-template-columns:1fr}
}

@media (max-width:560px){
  .sched-row{grid-template-columns:1fr}
}
.cr-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px}
.cr-back{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text);cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-fast),transform var(--dur-fast);
}
.cr-back:hover{background:var(--surface-solid);transform:translateX(-2px)}
.cr-head-text{min-width:0}
.cr-title{font-size:22px;font-weight:800;letter-spacing:-0.03em;font-family:var(--font-display);line-height:1.1}
.cr-sub{font-size:13px;color:var(--text2);font-weight:600;margin-top:4px}
.cr-code-row{display:flex;gap:8px;align-items:stretch}
.cr-code-row .join-input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}
.cr-regen{
  width:48px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--elevated);color:var(--accent);font-size:20px;font-weight:700;
  cursor:pointer;flex-shrink:0;transition:background var(--dur-fast),transform var(--dur-fast);
}
.cr-regen:hover{background:var(--accent-glow-soft);transform:rotate(-30deg)}
.cr-settings{display:flex;flex-direction:column;margin:4px 0 16px}
.cr-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;
}
.cr-toggle:last-child{border-bottom:none}
.cr-toggle-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cr-toggle-text strong{font-size:13px;font-weight:700;color:var(--text)}
.cr-toggle-text small{font-size:11px;font-weight:600;color:var(--text3);line-height:1.35}
.cr-toggle input{
  width:46px;height:28px;appearance:none;-webkit-appearance:none;flex-shrink:0;
  border-radius:999px;background:var(--elevated);border:1px solid var(--border);
  position:relative;cursor:pointer;transition:background .25s,border-color .25s;margin:0;
}
.cr-toggle input::after{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .25s var(--ease-soft);
}
.cr-toggle input:checked{background:var(--accent);border-color:var(--accent)}
.cr-toggle input:checked::after{transform:translateX(18px)}
.cr-cancel{margin-top:4px}
#join-screen.create-room-flow .js-brand{
  opacity:0.55;transform:scale(0.985);transition:opacity .35s var(--ease-soft),transform .35s var(--ease-soft);
}
@media(max-width:800px){
  .join-shell{grid-template-columns:1fr;min-height:0}
  .js-brand{min-height:180px}
}

/* ── LOBBY ── */
#lobby-screen{
  display:none;align-items:center;justify-content:center;
  height:100%;padding:20px;position:relative;z-index:110;overflow:hidden;background:var(--bg);
  padding-top:max(20px, env(safe-area-inset-top, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
  padding-bottom:max(20px, env(safe-area-inset-bottom, 0px));
  padding-left:max(20px, env(safe-area-inset-left, 0px));
}
.lobby-shell{
  position:relative;z-index:1;width:min(1100px,100%);
  display:grid;grid-template-columns:0.75fr 1.35fr 0.9fr;gap:14px;
  min-height:min(560px,82vh);
}
.ls-meta{padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.ls-meta .lobby-brand{font-size:26px;color:var(--text);-webkit-text-fill-color:unset;background:none}
.ls-hint{margin-top:auto;font-size:12px;font-weight:600;color:var(--text3);line-height:1.4}
.ls-preview{
  border-radius:var(--radius);overflow:hidden;background:#000;
  border:none;min-height:280px;position:relative;
}
.ls-preview .lobby-preview-wrap{
  position:absolute;inset:0;height:auto;aspect-ratio:auto;border:none;
  border-radius:inherit;overflow:hidden;
}
.ls-rail{padding:0;overflow:auto}
@media(max-width:960px){
  .lobby-shell{grid-template-columns:1fr;overflow:hidden;min-height:0;max-height:none;height:100%}
  .ls-preview{min-height:0}
}

/* ── CONFERENCE (canonical) ── */
#conference{
  display:none !important;
  height:100% !important;
  max-height:100% !important;
  padding:0 !important;
  gap:0 !important;
  margin:0 !important;
  background:var(--bg) !important;
  flex-direction:column !important;
  overflow:hidden !important;
  animation:none !important;
}

/* Call shell dark-token remap — DARK/default theme only. In light theme the
   conference inherits :root light tokens so it follows the chosen theme. */
body:not([data-theme="light"]) #conference.active{
  color-scheme:dark;
  --bg:#000000;
  --surface:#0E0E0E;
  --surface-solid:#121212;
  --elevated:#1C1C1E;
  --text:#F2F2F2;
  --text2:#A0A4AA;
  --text3:#6A6E74;
  --border:rgba(255,255,255,0.10);
  --accent:#7A9EC2;
  --accent-hover:#93B3D4;
  --primary:var(--accent);
  --primary-hover:var(--accent-hover);
  --secondary:var(--accent);
  --secondary-hover:var(--accent-hover);
  --tertiary:var(--accent);
  --tertiary-hover:var(--accent-hover);
  --on-accent:#0A1018;
  --on-secondary:#0A1018;
  --on-tertiary:#0A1018;
  --control-bg:#121212;
  --control-border:rgba(255,255,255,0.10);
  --video-bg:#000000;
  --stage-bg:#0E0E0E;
  --accent-glow:rgba(122,158,194,0.22);
  --accent-glow-soft:rgba(122,158,194,0.10);
  --primary-glow:var(--accent-glow);
  --primary-glow-soft:var(--accent-glow-soft);
  --secondary-glow:var(--accent-glow-soft);
  --tertiary-glow:var(--accent-glow-soft);
  --speak-halo:#3DFFAB;
  --speak-halo-soft:rgba(61,255,171,0.45);
  --chat-me:var(--accent);
  --chat-them:rgba(255,255,255,0.08);
  --chat-me-text:#0A1018;
  --chat-them-text:#F2F2F2;
  --shadow:none;
  --shadow-lg:none;
  color:var(--text);
  background:var(--bg) !important;
}
#conference.active .conf-bento{
  background:var(--bg) !important;
  color:var(--text);
}
#conference.active .conf-stage,
#conference.active .main-area,
#conference.active .video-area,
#conference.active #video-grid{
  background:var(--stage-bg) !important;
  color:var(--text);
}
#conference.active .conf-top .header,
#conference.active .conf-dock .controls{
  color:var(--text);
}
#conference.active .header-count,
#conference.active .header-timer,
#conference.active .header-meeting-label,
#conference.active .header-room{
  color:var(--text);
}
#conference.active .header-btn{
  background:var(--elevated);
  border-color:var(--border);
  color:var(--text2);
}
#conference.active .header-btn:hover{
  color:var(--text);
  border-color:var(--accent);
}
#conference.active .ctrl-btn{
  background:var(--elevated) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}
#conference.active .ctrl-btn:hover{
  background:var(--hover-overlay) !important;
  border-color:var(--hover-border) !important;
  color:var(--text) !important;
}
#conference.active .ctrl-btn.active,
#conference.active .ctrl-btn.raised{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--on-accent) !important;
}
#conference.active .ctrl-btn.danger,
#conference.active .ctrl-btn.muted{
  background:var(--red) !important;
  border-color:var(--red) !important;
  color:#fff !important;
}
#conference.active .ctrl-label{color:var(--text3)}
#conference.active .more-sheet,
#conference.active .side-panel,
#conference.active .shortcut-tooltip,
#conference.active .host-menu,
#conference.active .reactions-popup,
#conference.active .files-modal,
#conference.active .vb-conf-panel,
#conference.active .device-conf-panel{
  background:var(--control-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.conf-bento{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:100% !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  gap:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  background:var(--bg) !important;
  align-items:stretch !important;
}

.conf-main{
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  overflow:hidden !important;
}
.conf-top,.bo-banner,#bo-banner,.conf-dock{
  flex:0 0 auto !important;
}

.conf-top{display:flex;min-height:0}
.conf-top .header{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  box-shadow:none !important;
  animation:none !important;
  overflow:visible !important;
}
.header-meeting-label{font-weight:800;font-size:15px}
.header-group-badge{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  background:var(--accent-glow-soft);color:var(--accent);font-size:11px;font-weight:800;
}
.header-invite{
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:700;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  transition:background .35s var(--ease-soft),box-shadow .4s var(--ease-soft);
  will-change:transform;
}
.header-invite:hover{background:var(--accent-glow-soft)}
.header-room-code{
  background:var(--elevated) !important;border:1px solid var(--border) !important;
  color:var(--text) !important;border-radius:12px !important;
}
.leave-btn{
  background:var(--red) !important;border-radius:14px !important;
  box-shadow:none !important;
}

.bo-banner{margin:0 !important;border-radius:16px}

/* STAGE — immersive, flush video (no card/bezel) */
.conf-stage{
  position:relative !important;
  flex:1 1 0% !important;          /* take ALL remaining height in conf-main */
  min-height:0 !important;
  height:auto !important;          /* used height comes from flex, not content */
  max-height:none !important;
  align-self:stretch !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:var(--stage-bg) !important;
  border:none !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}
.conf-stage .main-area,
.main-area.stage-cell{
  position:relative !important;
  inset:auto !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  flex-direction:row !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

#video-area.video-area,
.conf-stage .video-area{
  position:relative !important;
  inset:auto !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  align-items:unset !important;
  justify-content:unset !important;
  box-sizing:border-box !important;
}

/* Bento stage grid — room around tiles, rounded cards */
#video-grid.video-grid,
.conf-stage .video-grid{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  flex:none !important;
  display:grid !important;
  gap:12px !important;
  padding:12px !important;
  margin:0 !important;
  align-content:stretch !important;
  justify-content:stretch !important;
  grid-auto-rows:minmax(0,1fr) !important;
  transition:none !important;
  box-sizing:border-box !important;
  background:transparent !important;
}
.video-grid[data-count="1"]{
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(0,1fr) !important;
  gap:12px !important;
}
.video-grid[data-count="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:minmax(0,1fr) !important;
}
.video-grid[data-count="3"],
.video-grid[data-count="4"]{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;
}
.video-grid[data-count="5"],
.video-grid[data-count="6"]{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;
}
.video-grid[data-count="7"],
.video-grid[data-count="8"],
.video-grid[data-count="9"]{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
}

/* Tiles — bento cards */
.conf-stage .video-tile,
#video-grid > .video-tile{
  position:relative !important;
  display:flex !important;
  min-height:0 !important;
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  border-radius:var(--tile-radius) !important;
  border:none !important;
  background:#0A0B0D !important;
  overflow:hidden !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  box-shadow:none !important;
}
.conf-stage .video-tile > .tile-feed,
#video-grid > .video-tile > .tile-feed,
.conf-stage .video-tile > video.tile-feed,
.conf-stage .video-tile > canvas.tile-feed,
#video-grid > .video-tile > video.tile-feed,
#video-grid > .video-tile > canvas.tile-feed{
  border-radius:inherit !important;
}
.conf-stage .video-tile.speaking,
#video-grid > .video-tile.speaking{
  border:none !important;
  box-shadow:none !important;
}
body[data-reduce-motion="1"] .conf-stage .video-tile.speaking::after,
body[data-reduce-motion="1"] #video-grid > .video-tile.speaking::after{animation:none !important;opacity:0.82 !important;border-width:5px !important}
.tile-name{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  background:rgba(8,10,12,0.72);border:1px solid rgba(255,255,255,0.1);
  font-weight:700;font-size:12px;
}
.tile-avatar-circle{
  background:var(--elevated) !important;color:var(--text) !important;
  border:1px solid var(--border);box-shadow:none !important;
}

/* Filmstrip / overlays stay inside video-area */
.conf-stage .spotlight-filmstrip{
  position:absolute !important;left:12px;right:12px;bottom:12px;z-index:5;
  height:110px !important;
}
.conf-stage #spotlight-exit{z-index:6}
.conf-stage #wb-toolbar,
.conf-stage .annotate-banner,
.conf-stage .rec-banner,
.conf-stage .poll-live-card{z-index:7}

/* Side panels over stage */
.conf-stage .side-panel,
.main-area .side-panel{
  position:absolute !important;
  top:12px !important;right:12px !important;bottom:12px !important;
  height:auto !important;
  border-radius:20px !important;
  background:var(--control-bg) !important;
  backdrop-filter:var(--blur) !important;-webkit-backdrop-filter:var(--blur) !important;
  border:1px solid var(--border) !important;
  z-index:40 !important;
}

/* Dock — bottom of conf-main, never floating mid-stage */
.conf-dock{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding:0 4px !important;
  flex:none !important;
  min-height:0 !important;
  position:relative !important;
  z-index:80 !important;
  overflow:visible !important;
}
.conf-dock .controls{
  padding:10px 14px !important;
  gap:6px !important;
  animation:none !important;
  position:relative !important;
}
.ctrl-btn{
  width:48px !important;height:48px !important;border-radius:50% !important;
  border:1px solid var(--border) !important;background:var(--elevated) !important;
  transition:background .25s, border-color .25s !important;
  will-change:transform;
}
.ctrl-btn:hover{
  border-color:var(--accent) !important;
  box-shadow:none !important;
}
.ctrl-btn.active{background:var(--accent) !important;color:var(--on-accent) !important;border-color:var(--accent) !important}
.ctrl-btn.danger,.ctrl-btn.muted{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important}
.ctrl-btn.raised{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--on-accent) !important}

.chat-msg.mine .chat-msg-bubble{background:var(--accent) !important;color:var(--on-accent) !important;box-shadow:0 6px 16px var(--accent-glow-soft) !important}
.people-avatar{background:var(--elevated) !important;color:var(--text) !important;border:1px solid var(--border)}
.people-host-badge,.header-host-badge{background:var(--accent) !important;color:var(--on-accent) !important}
.end-card{border-radius:24px !important}
.end-btn-primary{background:var(--accent) !important;color:var(--on-accent) !important}

@media(max-width:900px){
  .conf-bento{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
    gap:0 !important;padding:0 !important;
  }
  .conf-main{grid-column:1 !important;grid-row:1 !important}
  #video-grid.video-grid,.conf-stage .video-grid{inset:0 !important;gap:10px !important;padding:10px !important}
}

@media(max-width:768px){
  .video-grid[data-count="2"]{
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
}

/* FINAL LAYOUT HAMMER — flex fill, never content-collapse */
#conference.active{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  overflow:hidden !important;
}
#conference.active .conf-bento{
  flex:1 1 0% !important;
  min-height:0 !important;
  height:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
}
#conference.active .conf-main{
  grid-column:1 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
}
#conference.active .conf-top,
#conference.active .bo-banner,
#conference.active .conf-dock{
  flex:0 0 auto !important;
}
#conference.active .conf-stage{
  flex:1 1 0% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:var(--stage-bg) !important;
  border-radius:0 !important;
  border:none !important;
}
#conference.active .conf-stage .main-area,
#conference.active .conf-stage .video-area{
  position:relative !important;
  inset:auto !important;
  flex:1 1 0% !important;
  min-height:0 !important;
  height:auto !important;
  width:100% !important;
  overflow:hidden !important;
}
#conference.active #video-grid{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  width:auto !important;
  height:auto !important;
  gap:12px !important;
  padding:12px !important;
  box-sizing:border-box !important;
  background:transparent !important;
}
#conference.active #video-grid > .video-tile{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  visibility:visible !important;
  border-radius:var(--tile-radius) !important;
}
#conference.active .conf-dock .controls{
  visibility:visible !important;
}
.juicy-ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid var(--accent);opacity:0.7;z-index:5;
}

/* Immersive FS must beat #video-grid > .video-tile { position:relative !important } */
#conference.active #video-grid > .video-tile.tile-immersive,
.conf-stage .video-tile.tile-immersive,
#video-grid > .video-tile.tile-immersive,
.video-tile.tile-immersive{
  position:fixed !important;
  inset:0 !important;
  top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
  width:100vw !important;
  width:100dvw !important;
  height:100vh !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  z-index:6000 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:#000 !important;
  box-shadow:none !important;
  transform:none !important;
  align-self:auto !important;
  justify-self:auto !important;
}
#conference.active #video-grid > .video-tile.tile-immersive > .tile-feed,
.video-tile.tile-immersive > video.tile-feed,
.video-tile.tile-immersive > canvas.tile-feed{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.video-tile.tile-immersive:not(.screensharing) > video.tile-feed,
.video-tile.tile-immersive:not(.screensharing) > canvas.tile-feed{
  object-fit:cover !important;
}
body.has-tile-immersive .conf-top,
body.has-tile-immersive .conf-dock,
body.has-tile-immersive .bo-banner,
body.has-native-fs .conf-top,
body.has-native-fs .conf-dock,
body.has-native-fs .bo-banner{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#conference.active #video-grid > .video-tile.tile-immersive .tile-fullscreen-btn,
.video-tile.tile-immersive .tile-fullscreen-btn,
.video-tile:fullscreen .tile-fullscreen-btn,
.video-tile:-webkit-full-screen .tile-fullscreen-btn{
  display:flex !important;opacity:1 !important;
  top:auto !important;
  bottom:max(14px, env(safe-area-inset-bottom, 0px)) !important;
  right:max(14px, env(safe-area-inset-right, 0px)) !important;
  left:auto !important;
  z-index:6001 !important;
  width:48px !important;height:48px !important;
}

/* Native element fullscreen — overrides grid position:relative !important */
#conference.active #video-grid > .video-tile:fullscreen,
#conference.active #video-grid > .video-tile:-webkit-full-screen,
.conf-stage .video-tile:fullscreen,
.conf-stage .video-tile:-webkit-full-screen,
.video-tile:fullscreen,
.video-tile:-webkit-full-screen{
  position:fixed !important;
  inset:0 !important;
  top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
  width:100vw !important;
  width:100dvw !important;
  height:100vh !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  z-index:6000 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:#000 !important;
  box-shadow:none !important;
  transform:none !important;
  align-self:auto !important;
  justify-self:auto !important;
}
#conference.active #video-grid > .video-tile:fullscreen > .tile-feed,
#conference.active #video-grid > .video-tile:-webkit-full-screen > .tile-feed,
.video-tile:fullscreen > video.tile-feed,
.video-tile:fullscreen > canvas.tile-feed,
.video-tile:-webkit-full-screen > video.tile-feed,
.video-tile:-webkit-full-screen > canvas.tile-feed{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:0 !important;
}
.video-tile:fullscreen:not(.screensharing) > video.tile-feed,
.video-tile:fullscreen:not(.screensharing) > canvas.tile-feed,
.video-tile:-webkit-full-screen:not(.screensharing) > video.tile-feed,
.video-tile:-webkit-full-screen:not(.screensharing) > canvas.tile-feed{
  object-fit:cover !important;
}

/* ── Production interaction polish ─────────────────────── */
button,.ctrl-btn,.lobby-ctrl,.join-btn,.join-create,.leave-btn,
.lobby-btn-primary,.lobby-btn-secondary,.tile-fullscreen-btn,.reaction-btn,
.header-invite,.wb-action-btn,.file-dl-btn,[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.ctrl-btn:disabled,.lobby-ctrl:disabled,.join-btn:disabled,
.lobby-btn-primary:disabled,.lobby-btn-secondary:disabled,
.ctrl-btn.busy,.lobby-ctrl.busy,.leave-btn.busy{
  opacity:.45 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  box-shadow:none !important;
  transform:none !important;
}
.ctrl-btn:focus-visible,.lobby-ctrl:focus-visible,.join-btn:focus-visible,
.lobby-btn-primary:focus-visible,.leave-btn:focus-visible,
.tile-fullscreen-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
#toast{pointer-events:none}
@media (hover:none){
  .ctrl-btn:hover,.lobby-ctrl:hover,.join-btn:hover{box-shadow:none}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — edge-to-edge · no scroll lobby · AMOLED chrome
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  html,body{height:100%;height:100dvh;background:#000}
  #join-screen,#lobby-screen,#end-screen{
    padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    overflow:hidden !important;
  }
  #conference.active{
    padding:0 !important;
    padding-top:env(safe-area-inset-top, 0px) !important;
    padding-bottom:env(safe-area-inset-bottom, 0px) !important;
    overscroll-behavior:none !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  /* Join — form-first, brand compact, no scroll */
  .join-shell{
    grid-template-columns:1fr !important;
    gap:8px !important;
    min-height:0 !important;
    height:100% !important;
    max-height:none !important;
    width:100% !important;
    overflow:hidden !important;
    align-content:center;
  }
  .js-brand{
    padding:12px 14px !important;
    min-height:0 !important;
    gap:4px !important;
  }
  .join-shell .join-brand{font-size:clamp(32px,10vw,44px) !important;line-height:.9 !important}
  .join-shell .join-tag{font-size:12px !important;max-width:none !important}
  .js-points{display:none !important}
  .js-form,.js-form.glass-pane.join-compose{padding:14px 14px !important}
  .join-pane-view{min-height:0}
  .cr-title{font-size:18px !important}
  .invite-share-grid{grid-template-columns:1fr}
  .invite-share-wide{grid-column:auto}
  .jb-form-title{font-size:17px}
  .jb-form-sub{font-size:11px}
  .join-btn{padding:12px !important;font-size:13px !important;min-height:44px;box-shadow:none !important}
  .join-theme{top:max(8px, env(safe-area-inset-top)) !important;right:max(8px, env(safe-area-inset-right)) !important;
    width:40px !important;height:40px !important}

  /* Lobby — fixed 3-row viewport, camera never pushes scroll */
  #lobby-screen.active{
    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  .lobby-shell{
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    grid-template-areas:"meta" "preview" "rail" !important;
    gap:6px !important;
    min-height:0 !important;
    height:100% !important;
    max-height:none !important;
    width:100% !important;
    overflow:hidden !important;
  }
  .ls-preview{
    grid-area:preview !important;
    order:unset !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    border-radius:14px !important;
  }
  .ls-preview .lobby-preview-wrap{
    position:absolute !important;
    inset:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    border-radius:inherit !important;
    overflow:hidden !important;
  }
  .ls-meta{
    grid-area:meta !important;
    padding:8px 12px !important;
    gap:2px !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
  }
  .ls-meta .lobby-brand{font-size:16px !important;margin:0}
  .ls-meta .lobby-title{font-size:13px !important;font-weight:700}
  .ls-meta .lobby-sub{font-size:12px !important;margin-left:auto}
  .ls-hint{display:none !important}
  .ls-rail{
    grid-area:rail !important;
    padding:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .lobby-card{padding:8px 10px !important;overflow:hidden !important}
  .lobby-foot{gap:8px}
  .lobby-controls{gap:8px;justify-content:center}
  .lobby-ctrl{width:42px;height:42px}
  .lobby-status{font-size:11px;margin:0;text-align:center}
  .lobby-actions{gap:8px;padding:0}
  .lobby-btn-primary,.lobby-btn-secondary{min-height:44px;box-shadow:none !important}
  .lobby-btn-primary{flex:1.4}
  .vb-panel,.device-panel{max-height:28dvh;overflow:auto}

  /* Conference — edge to edge */
  .conf-bento,#conference.active .conf-bento{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
    gap:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    background:var(--bg) !important;
  }
  .conf-main,#conference.active .conf-main{
    grid-column:1 !important;grid-row:1 !important;gap:0 !important;
  }
  .conf-top .header{
    padding:max(6px, env(safe-area-inset-top, 0px)) 10px 6px 10px !important;
    gap:8px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    min-height:44px;
  }
  .header-meeting-label,.header-group-badge,.header-invite,
  .shortcut-wrap,.header-bo-badge,.header-host-badge,
  #theme-toggle-conf,.header-rec-timer{display:none !important}
  .header-room{min-width:0;flex:1;display:flex;align-items:center;gap:6px;overflow:hidden}
  .header-room-code{font-size:12px !important;padding:4px 8px !important;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-count{font-size:11px;flex-shrink:0}
  .header-timer{font-size:11px;flex-shrink:0;font-variant-numeric:tabular-nums}
  .leave-btn{
    padding:8px 12px !important;font-size:12px !important;border-radius:10px !important;
    box-shadow:none !important;flex-shrink:0;min-width:56px;
    position:relative;z-index:1;
  }

  .conf-dock{padding:0 !important;flex-shrink:0}
  .conf-dock .controls{
    width:100% !important;
    max-width:100% !important;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    gap:0 !important;
    border-radius:0 !important;
    justify-content:space-evenly !important;
    box-shadow:none !important;
  }
  .ctrl-cluster{gap:0;flex:1;justify-content:space-evenly}
  .ctrl-sep{display:none}
  .ctrl-label{display:none !important}
  .ctrl-btn{
    width:48px !important;height:48px !important;min-width:48px !important;
    min-height:48px !important;
    border-radius:14px !important;
    box-shadow:none !important;
  }
  .leave-btn,.lobby-btn-primary,.lobby-btn-secondary,.lobby-ctrl{
    min-height:44px !important;
  }
  .ctrl-btn svg{width:18px !important;height:18px !important}
  .ctrl-btn:hover{box-shadow:none !important}
  .more-sheet{
    bottom:var(--ctrl-popover-bottom, calc(64px + env(safe-area-inset-bottom, 0px))) !important;
    width:min(360px, calc(100vw - 12px)) !important;
    padding:10px 10px 12px !important;
    border-radius:18px !important;
  }
  .more-sheet-head{display:flex !important}
  .more-sheet .ctrl-btn{
    width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;
  }

  #conference.active #video-grid,#video-grid.video-grid{
    inset:0 !important;gap:6px !important;padding:6px !important;
  }
  .video-grid[data-count="1"]{
    padding:0 !important;gap:0 !important;
  }
  .video-grid[data-count="1"] > .video-tile{
    border-radius:0 !important;border:none !important;
  }
  .video-tile,
  #conference.active #video-grid > .video-tile,
  .conf-stage .video-tile{
    border-radius:14px !important;
    box-shadow:none !important;
    border:none !important;
  }
  .video-tile.speaking{
    border:none !important;
    box-shadow:none !important;
  }
  .tile-name,.tile-label{font-size:11px;padding:6px 8px}
  .tile-fullscreen-btn{
    display:flex !important;
    opacity:0.92;
    width:44px;height:44px;
    top:auto;bottom:8px;right:8px;left:auto;
    z-index:12;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .tile-name,.tile-label{
    font-size:11px;padding:5px 8px;
    max-width:calc(100% - 56px);
  }
  .tile-hand-badge{top:8px;left:8px;width:32px;height:32px}
  /* The base rule centres this with left:50% + translateX(-50%). Overriding left
     WITHOUT clearing the transform shifted it left by half its own width, which
     is how the collapsed pencil ended up hanging off the left edge of the
     screen. Expanded: a full-width bar. Collapsed: a centred circle — the tile
     corners already belong to fullscreen/flip. */
  .annotate-banner{
    left:8px !important;right:8px !important;bottom:calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    max-width:none !important;
    transform:none !important;
    justify-content:center;
  }
  .annotate-banner.collapsed{
    left:50% !important;right:auto !important;
    transform:translateX(-50%) !important;
  }
  .annotate-banner.collapsed:hover{transform:translateX(-50%) scale(1.06) !important}
  .annotate-banner.collapsed:active{transform:translateX(-50%) scale(0.94) !important}
  .video-tile.controls-open .tile-fullscreen-btn,
  .video-tile.controls-open .tile-cam-flip{display:none !important}
  .tile-local-controls .tlc-row button{width:48px;height:48px}
  .side-panel{
    top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
    width:100% !important;border-radius:0 !important;
    padding-top:env(safe-area-inset-top, 0px) !important;
    padding-bottom:env(safe-area-inset-bottom, 0px) !important;
  }
  .side-panel-header{padding-top:max(10px, env(safe-area-inset-top, 0px))}
  .chat-input-area{padding-bottom:max(8px, env(safe-area-inset-bottom, 0px))}

  .end-card{padding:24px 18px !important;margin:12px;max-width:100%;box-shadow:none !important}
}

@media(max-width:480px){
  .js-brand{padding:10px 12px !important}
  .join-shell .join-brand{font-size:36px !important}
  .join-tag{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .header-timer{display:none !important}
  .header-count{display:none !important}
  .ctrl-btn{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important}
  .tile-fullscreen-btn{width:48px;height:48px;bottom:10px;right:10px}
  .video-grid[data-count="3"],
  .video-grid[data-count="4"]{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
  .video-grid[data-count="2"]{
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
  .video-grid[data-count="5"],
  .video-grid[data-count="6"],
  .video-grid[data-count="7"],
  .video-grid[data-count="8"],
  .video-grid[data-count="9"]{
    grid-template-columns:1fr 1fr !important;
    grid-auto-rows:minmax(0,1fr) !important;
  }
}

/* Meeting chrome stays dark regardless of join/lobby theme;
   tokens remapped on #conference.active above. */

/* ═══════════════════════════════════════════════════════════
   STORM polish — unique production overrides only
   ═══════════════════════════════════════════════════════════ */
/* Header / dock: flush AMOLED chrome (beats earlier glass header) */
.conf-top .header{
  border-radius:0 !important;border-left:none !important;border-right:none !important;
  border-top:none !important;background:var(--chrome-bg) !important;
}
.conf-dock .controls{
  border-radius:0 !important;border:none !important;border-top:1px solid var(--chrome-border) !important;
  border-left:none !important;border-right:none !important;border-bottom:none !important;
  width:100% !important;max-width:100% !important;margin:0 !important;align-self:stretch !important;
  background:var(--chrome-bg) !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
@media(max-width:900px){
  .side-panel{border-radius:0 !important}
  .conf-top .header{border-radius:0 !important}
  .conf-dock .controls{border-radius:0 !important;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) !important}
}

/* Side panels */
.side-panel{
  border-radius:16px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.45) !important;
}

/* Lobby / join denser */
.join-shell,.lobby-shell{max-width:1100px}
.lobby-preview-wrap{position:relative;border-radius:inherit;overflow:hidden;background:#000}
.lobby-ctrl{box-shadow:none}

/* Toast / reconnect above immersive */
.toast,#reconnect-banner,.chat-toast-stack{z-index:7000 !important}

/* No speak halo in immersive fullscreen */
.video-tile.tile-immersive.speaking{box-shadow:none !important}
.video-tile.tile-immersive.speaking::after{display:none !important}

/* Name chip on bezelless tiles */
.tile-name,.tile-name-text{font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* End screen */
.end-card{border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.4)}

#video-grid, .video-tile, .tile-feed{will-change:auto}

/* Moved from HTML style= attributes */
.is-hidden{display:none}
input.is-hidden[type=file]{display:none}
.wb-color-btn[data-color="#FFFFFF"]{background:#FFFFFF}
.wb-color-btn[data-color="#1c1c1e"]{background:#1c1c1e}
.wb-color-btn[data-color="#FF3B30"]{background:#FF3B30}
.wb-color-btn[data-color="#007AFF"]{background:#007AFF}
.wb-color-btn[data-color="#34C759"]{background:#34C759}
.wb-color-btn[data-color="#FFD60A"]{background:#FFD60A}
.wb-color-btn[data-color="#FF9500"]{background:#FF9500}
.wb-color-btn[data-color="#AF52DE"]{background:#AF52DE}
.wb-size-dot-sm{width:4px;height:4px}
.wb-size-dot-md{width:7px;height:7px}
.wb-size-dot-lg{width:11px;height:11px}
.bo-room-name-input{width:100%;border:none;background:transparent;font:inherit;font-weight:800;color:inherit}
.bo-broadcast-input{flex:1}

/* Mindset / iframe embed — conference-only chrome */
body.storm-embed{overflow:hidden;background:#050505}
body.storm-embed #join-screen,
body.storm-embed #end-screen{display:none!important}
body.storm-embed #lobby-screen .gate-atmosphere,
body.storm-embed #lobby-screen .join-theme,
body.storm-embed #lobby-screen .ls-meta{display:none}
body.storm-embed #lobby-screen .lobby-shell{max-width:none;padding:8px}
body.storm-embed #lobby-screen .ls-preview{min-height:120px}
body.storm-embed #lobby-screen .lobby-btn-secondary{display:none}
body.storm-embed #conference{padding:0;gap:0}
body.storm-embed #conference.active .conf-bento{border-radius:0}
body.storm-embed #conference.active .conf-top .header{padding:6px 10px}

/* Headless embed — media tiles ONLY. No STORM chrome (Pulse/Docked own the UI). */
body.storm-headless{
  margin:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:transparent!important;
}
body.storm-headless #join-screen,
body.storm-headless #lobby-screen,
body.storm-headless .conf-top,
body.storm-headless .conf-bottom,
body.storm-headless .conf-dock,
body.storm-headless .controls,
body.storm-headless #conference .conf-dock,
body.storm-headless #conference.active .conf-dock,
body.storm-headless #conference .controls,
body.storm-headless #conference.active .controls,
body.storm-headless #conference.active .conf-dock .controls,
body.storm-headless .side-panel,
body.storm-headless .storm-modal,
body.storm-headless #toast-wrap,
body.storm-headless .lobby-card,
body.storm-headless .ls-meta,
body.storm-headless .ls-rail,
body.storm-headless #end-screen,
body.storm-headless .chat-toast-stack,
body.storm-headless .tile-fullscreen-btn,
body.storm-headless .video-tile .tile-fullscreen-btn,
body.storm-headless .tile-cam-flip,
body.storm-headless .cam-flip-fab,
body.storm-headless .tile-local-controls,
body.storm-headless .tile-local-hint,
body.storm-headless .tile-label,
body.storm-headless .tile-status,
body.storm-headless .tile-name,
body.storm-headless .bo-banner,
body.storm-headless #bo-banner,
body.storm-headless #wb-toolbar,
body.storm-headless .files-modal,
body.storm-headless .header,
body.storm-headless .conf-top .header,
body.storm-headless .people-drawer,
body.storm-headless #people-panel,
body.storm-headless #chat-panel{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
  height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
body.storm-headless #conference,
body.storm-headless #conference.active{
  display:flex!important;
  flex-direction:column!important;
  position:fixed!important;inset:0!important;
  width:100%!important;height:100%!important;
  padding:0!important;margin:0!important;
  opacity:1!important;visibility:visible!important;
  background:transparent!important;
}
body.storm-headless #conference .conf-bento,
body.storm-headless #conference .conf-main,
body.storm-headless #conference .tiles-wrap,
body.storm-headless #conference .tiles{
  display:grid!important;
  flex:1!important;
  width:100%!important;height:100%!important;
  min-height:0!important;
  margin:0!important;padding:0!important;gap:6px!important;
  border:0!important;border-radius:0!important;
  opacity:1!important;visibility:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))!important;
  grid-auto-rows:minmax(90px, 1fr)!important;
}
body.storm-headless .video-tile{
  display:block!important;
  position:relative!important;
  min-height:90px!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#16191F!important;
  opacity:1!important;visibility:visible!important;
  border:0!important;
  box-shadow:none!important;
}
body.storm-headless .video-tile video,
body.storm-headless .video-tile canvas.tile-feed,
body.storm-headless .video-tile canvas{
  display:block!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  opacity:1!important;visibility:visible!important;
}
body.storm-headless .tile-avatar{
  display:flex!important;
  border-radius:50%!important;
}
/* Voice/audio-only headless: hide tiles; keep engine alive for audio */
body.storm-headless.storm-audio-only .tiles,
body.storm-headless.storm-audio-only .video-tile,
body.storm-headless.storm-audio-only .conf-bento,
body.storm-headless.storm-audio-only .tiles-wrap{
  opacity:0!important;
  pointer-events:none!important;
}
body.storm-headless.storm-audio-only #conference,
body.storm-headless.storm-audio-only #conference.active{
  background:transparent!important;
}