:root{
  --bg:#0f1117; --bg2:#171a23; --sidebar:#13151d; --border:#262a36;
  --text:#e7e9ee; --muted:#9aa0ad; --primary:#7c3aed; --primary2:#a855f7; --input:#0d0f15;
}
*{box-sizing:border-box}
/* Honor the `hidden` attribute even on flex/grid containers. Without this, the
   explicit display on .login-screen/.app-shell/.loader overrides [hidden], so the
   JS auth gate (which toggles el.hidden) has no visual effect and all states paint
   at once. This single rule IS the gate. */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
/* native feel: keyboard focus ring + draggable window top, interactive = no-drag */
:focus-visible{outline:2px solid var(--primary2);outline-offset:2px;border-radius:6px}
button,a,input,select,textarea,.lib-item,.nav-home,.continue-card,.course-card,.lesson-row{ -webkit-app-region:no-drag }
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dashboard,.lesson-view,.empty-state,.course-head,.course-body{animation:viewIn .2s ease both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.bolt{color:var(--primary2)}
.badge{display:inline-block;background:rgba(124,58,237,.18);color:#c4b5fd;font-size:.7rem;font-weight:700;padding:.1rem .5rem;border-radius:6px;vertical-align:middle}
.muted{color:var(--muted)}
.link-btn{background:none;border:none;color:var(--primary2);cursor:pointer;font-size:.85rem;padding:0}
.link-btn:hover{text-decoration:underline}

/* login */
.login-screen{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,rgba(124,58,237,.18),transparent),var(--bg)}
.login-card{width:340px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:2rem;display:flex;flex-direction:column;gap:.35rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.brand{font-size:1.6rem;font-weight:800;text-align:center}
.login-sub{text-align:center;color:var(--muted);margin:.25rem 0 1rem}
.login-card label{font-size:.75rem;color:var(--muted);margin-top:.5rem}
.login-card input{background:var(--input);border:1px solid var(--border);border-radius:8px;padding:.7rem;color:var(--text);font-size:.95rem}
.login-card input:focus{outline:none;border-color:var(--primary)}
.login-card button[type=submit]{margin-top:1.1rem;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:none;border-radius:9px;padding:.8rem;font-weight:700;font-size:1rem;cursor:pointer}
.login-card button[disabled]{opacity:.6;cursor:default}
.login-error{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:.6rem .75rem;font-size:.85rem}
.server-details{margin-top:.6rem}
.server-details summary{color:var(--muted);font-size:.75rem;cursor:pointer}
.server-details input{width:100%;margin-top:.4rem}

/* app shell */
.app-shell{display:grid;grid-template-columns:280px 1fr;height:100%}
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100%}
.sidebar-head{padding:1.1rem 1.25rem;font-size:1.2rem;font-weight:800;border-bottom:1px solid var(--border);-webkit-app-region:drag}
.library-nav{flex:1;overflow-y:auto;padding:.75rem}
.nav-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:2rem 1rem;line-height:1.6}
.lib-item{display:flex;flex-direction:column;gap:.25rem;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:.7rem .8rem;border-radius:9px;cursor:pointer}
.lib-item:hover{background:rgba(255,255,255,.04)}
.lib-item.active{background:rgba(124,58,237,.16)}
.lib-title{font-weight:600;font-size:.95rem}
.lib-meta{font-size:.72rem;color:var(--muted);display:flex;gap:.5rem;align-items:center}
.lib-bar{display:block;height:4px;background:rgba(255,255,255,.08);border-radius:3px;margin-top:.45rem;overflow:hidden}
.lib-bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:3px}
.sidebar-foot{border-top:1px solid var(--border);padding:.85rem 1.25rem;display:flex;justify-content:space-between;align-items:center}
.user-name{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* content */
.content{overflow-y:auto;padding:2rem 2.5rem;height:100%}
.empty-state{color:var(--muted);text-align:center;margin-top:18vh}
.empty-state h2{color:var(--text)}

/* sidebar home + section label */
.nav-home{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:.7rem .8rem;border-radius:9px;cursor:pointer;font-size:.95rem;font-weight:600}
.nav-home:hover{background:rgba(255,255,255,.04)}
.nav-home.active{background:rgba(124,58,237,.16)}
.nav-section-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:.9rem .8rem .35rem}

/* dashboard */
.dashboard{max-width:980px}
.dash-greeting{font-size:1.7rem;margin:0 0 1.25rem}
.dash-h2{font-size:1.05rem;color:var(--muted);margin:1.75rem 0 .85rem;font-weight:600}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem}
.stat-num{font-size:1.7rem;font-weight:800}
.stat-lbl{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.continue-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.continue-card{background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(168,85,247,.06));border:1px solid rgba(124,58,237,.35);border-radius:14px;padding:1.25rem;cursor:pointer;transition:transform .12s}
.continue-card:hover{transform:translateY(-2px)}
.continue-card h3{margin:.5rem 0 .75rem;font-size:1.05rem}
.continue-cta{margin-top:.75rem;color:var(--primary2);font-weight:700;font-size:.85rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.course-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.1rem;cursor:pointer;transition:transform .12s,border-color .12s}
.course-card:hover{transform:translateY(-2px);border-color:var(--primary)}
.course-card h3{margin:0 0 .75rem;font-size:1rem}
.course-progress.small{margin:.25rem 0 0}
.course-progress.small .bar{height:6px}
.course-progress.small span{font-size:.72rem}

/* store */
.store-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.1rem;display:flex;flex-direction:column}
.store-card:hover{border-color:var(--primary)}
.store-tags{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.feat-badge{font-size:.65rem;font-weight:700;color:#fbbf24;background:rgba(251,191,36,.14);padding:.1rem .5rem;border-radius:6px}
.store-card h3{margin:0 0 .5rem;font-size:1.02rem}
.store-desc{color:var(--muted);font-size:.85rem;margin:0 0 1rem;flex:1}
.store-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:.75rem}
.store-price{font-size:1.25rem;font-weight:800}
.btn-primary.buy{margin:0;text-decoration:none;padding:.55rem 1.1rem;font-size:.9rem;white-space:nowrap}
.course-head{margin-bottom:1.75rem}
.course-head h1{margin:.5rem 0 .25rem;font-size:1.9rem}
.course-desc{color:var(--muted);max-width:680px}
.course-progress{display:flex;align-items:center;gap:.75rem;margin:1rem 0 .25rem;max-width:520px}
.course-progress .bar{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.course-progress .bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:5px;transition:width .3s}
.course-progress span{font-size:.78rem;color:var(--muted);white-space:nowrap}
.btn-primary{margin-top:1rem;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:none;border-radius:9px;padding:.7rem 1.4rem;font-weight:700;font-size:.95rem;cursor:pointer}
.btn-primary:hover{filter:brightness(1.08)}
.course-complete{margin-top:1rem;color:#34d399;font-weight:700}
.module{margin-bottom:1.5rem}
.module-title{font-size:1.05rem;margin:0 0 .5rem;color:#c4b5fd}
.lesson-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.lesson-row{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;cursor:pointer;border-bottom:1px solid var(--border)}
.lesson-row:last-child{border-bottom:none}
.lesson-row:hover{background:rgba(255,255,255,.04)}
.lesson-check{width:18px;flex-shrink:0;color:#34d399;font-weight:800}
.lesson-row.done .lesson-name{color:var(--muted)}
.lesson-name{font-weight:500;flex:1}
.lesson-dur{font-size:.75rem;color:var(--muted)}

/* lesson actions */
.lesson-actions{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.btn-complete{background:transparent;color:var(--text);border:1.5px solid var(--border);border-radius:9px;padding:.65rem 1.3rem;font-weight:600;cursor:pointer;font-size:.9rem}
.btn-complete:hover{border-color:var(--primary)}
.btn-complete.is-done{background:rgba(52,211,153,.14);border-color:#34d399;color:#34d399}
.lesson-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.btn-download{background:transparent;color:var(--text);border:1.5px solid var(--border);border-radius:9px;padding:.65rem 1.3rem;font-weight:600;cursor:pointer;font-size:.9rem}
.btn-download:hover{border-color:var(--primary)}
.btn-download.is-saved{background:rgba(124,58,237,.14);border-color:var(--primary);color:var(--primary2)}
.btn-download:disabled{opacity:.6;cursor:default}
.dl-progress{font-size:.8rem;color:var(--muted)}
.dl-note{font-size:.8rem;color:var(--muted);font-style:italic}

/* lesson */
.lesson-view{max-width:820px;margin:0 auto}
.lesson-view h1{font-size:1.6rem;margin:.75rem 0 1.25rem}
.back{margin-bottom:.5rem}
.player{width:100%;border-radius:12px;background:#000;margin-bottom:1.25rem}
.embed{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;margin-bottom:1.25rem;background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media-dl{display:inline-block;margin:0 0 1rem;color:var(--primary2)}
.lesson-content{line-height:1.75}
.lesson-content img{max-width:100%;border-radius:8px}

/* loader */
.loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:50}
.spinner{width:42px;height:42px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--primary2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── mobile / narrow viewports (web interface on phones) ── */
@media (max-width:720px){
  html,body{height:auto;min-height:100%}
  .app-shell{display:flex;flex-direction:column;height:auto;min-height:100vh}
  .sidebar{height:auto;border-right:none;border-bottom:1px solid var(--border)}
  .sidebar-head{-webkit-app-region:none}
  .library-nav{flex:0 0 auto;max-height:42vh;overflow-y:auto}
  .content{padding:1.1rem}
  .login-card{width:92%;max-width:360px}
}

/* ── media: conferencing / podcasts / streaming ── */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:1rem}
.media-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.media-card.is-live{border-color:#ef4444}
.media-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.media-card h3{margin:.2rem 0;font-size:1.05rem}
.media-desc{color:var(--muted);font-size:.85rem;margin:0}
.media-meta{color:var(--muted);font-size:.8rem;margin:.2rem 0 .6rem}
.media-card .btn-primary{margin-top:auto;text-decoration:none;text-align:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:none;border-radius:9px;padding:.7rem 1rem;font-weight:700;cursor:pointer}
.media-soon{color:var(--muted);font-size:.8rem;margin-top:auto}
.live-badge{color:#fca5a5;font-weight:700;font-size:.72rem;letter-spacing:.03em;white-space:nowrap}
.podcast{margin-top:1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.25rem}
.podcast-head{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.podcast-art{width:72px;height:72px;border-radius:10px;object-fit:cover}
.episode{border-top:1px solid var(--border);padding:.9rem 0}
.episode:first-of-type{border-top:none}
.episode-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.episode-title{font-weight:600;font-size:.95rem}
.episode-dur{color:var(--muted);font-size:.78rem;white-space:nowrap}
.episode-desc{color:var(--muted);font-size:.84rem;margin:.35rem 0 .6rem}
.episode audio{width:100%;height:40px}

/* in-app meeting room (Jitsi embed) */
.room-wrap{display:flex;flex-direction:column;height:100%;min-height:66vh}
.room-bar{display:flex;align-items:center;gap:1rem;padding:0 0 .75rem;flex:0 0 auto}
.room-title{font-weight:600}
.jitsi{flex:1;min-height:66vh;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#000}
.jitsi iframe{width:100%!important;height:100%!important;border:0}

/* host (admin) conferencing controls */
.host-actions{display:flex;gap:.5rem;margin-top:auto;align-items:center}
.host-actions .btn-primary{margin:0;flex:1;text-align:center}
.host-form{margin-top:2rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.25rem;max-width:640px}
.host-form .field{margin-bottom:.8rem}
.host-form label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.3rem}
.host-form input,.host-form select{width:100%;background:var(--input);border:1px solid var(--border);border-radius:8px;padding:.6rem;color:var(--text);font-size:.92rem;font-family:inherit}
.host-form input:focus,.host-form select:focus{outline:none;border-color:var(--primary)}
.form-row2{display:grid;grid-template-columns:1fr 110px 150px;gap:.75rem}
@media(max-width:560px){.form-row2{grid-template-columns:1fr}}
.host-err{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:.5rem .7rem;font-size:.82rem;margin-bottom:.6rem}
.host-form>.btn-primary{margin-top:.4rem;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:none;border-radius:9px;padding:.65rem 1.3rem;font-weight:700;cursor:pointer}

/* host podcast episode upload */
.ep-form{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}
.ep-form .field{margin-bottom:.7rem}
.ep-form label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.3rem}
.ep-form input[type=text]{width:100%;background:var(--input);border:1px solid var(--border);border-radius:8px;padding:.6rem;color:var(--text);font-size:.92rem}
.ep-form input[type=file]{width:100%;color:var(--muted);font-size:.85rem}
.ep-form input:focus{outline:none;border-color:var(--primary)}
.ep-form>.btn-primary{margin-top:.3rem;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:none;border-radius:9px;padding:.6rem 1.2rem;font-weight:700;cursor:pointer}
.ep-progress{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 .7rem}
.ep-bar{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.ep-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary2));transition:width .2s}
.ep-pct{font-size:.78rem;color:var(--muted);min-width:38px;text-align:right}

/* login options (remember me / show password) */
.login-opts{display:flex;justify-content:space-between;gap:1rem;margin:.6rem 0 .2rem;flex-wrap:wrap}
.login-opts .opt{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted);cursor:pointer}
.login-opts .opt input{accent-color:var(--primary);cursor:pointer;width:auto}

/* settings */
.settings-group{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.4rem;margin-bottom:1.25rem;max-width:620px}
.settings-group p{margin:.2rem 0}
.settings-group .btn-download{margin-top:.5rem}

.login-build{text-align:center;font-size:.68rem;color:var(--muted);opacity:.6;margin-top:.9rem}

/* ── themes (data-theme on <html>) ─────────────────────────── */
:root[data-theme="aubergine"]{--bg:#191222;--bg2:#241a30;--sidebar:#150f1e;--border:#382a48;--text:#f1eaf7;--muted:#b6a6c8;--primary:#a855f7;--primary2:#c084fc;--input:#150f1e}
:root[data-theme="ocean"]{--bg:#0b1320;--bg2:#121d2e;--sidebar:#0d1726;--border:#22324a;--text:#e6edf7;--muted:#94a3b8;--primary:#38bdf8;--primary2:#7dd3fc;--input:#0a1220}
:root[data-theme="forest"]{--bg:#0d1612;--bg2:#13201a;--sidebar:#0e1813;--border:#22362b;--text:#e8f1ea;--muted:#9bb3a4;--primary:#34d399;--primary2:#6ee7b7;--input:#0a130f}
:root[data-theme="daylight"]{--bg:#f5f6fa;--bg2:#ffffff;--sidebar:#eef0f6;--border:#e2e5ee;--text:#1b1e27;--muted:#5f6675;--primary:#7c3aed;--primary2:#9333ea;--input:#ffffff}
:root[data-theme="sand"]{--bg:#f4efe5;--bg2:#fffdf8;--sidebar:#ece4d4;--border:#e0d6c2;--text:#2a2417;--muted:#7c6e56;--primary:#8b5cf6;--primary2:#a855f7;--input:#fffdf8}

/* ── accent override (data-accent) — wins over theme primary ── */
:root[data-accent="purple"]{--primary:#7c3aed;--primary2:#a855f7}
:root[data-accent="teal"]{--primary:#14b8a6;--primary2:#2dd4bf}
:root[data-accent="blue"]{--primary:#2563eb;--primary2:#3b82f6}
:root[data-accent="emerald"]{--primary:#059669;--primary2:#10b981}
:root[data-accent="amber"]{--primary:#d97706;--primary2:#f59e0b}

/* appearance controls in Settings */
.theme-row,.accent-row{display:flex;flex-wrap:wrap;gap:.6rem}
.theme-chip{display:flex;align-items:center;gap:.5rem;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:.5rem .8rem;color:var(--text);cursor:pointer;font-size:.85rem;font-weight:600}
.theme-chip.is-active{border-color:var(--primary)}
.theme-dots{display:inline-flex}
.theme-dots i{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(128,128,128,.35)}
.theme-dots i+i{margin-left:-5px}
.accent-dot{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.accent-dot.is-active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg) inset}

/* download progress bar */
.dl-bar{width:100%;max-width:280px;height:6px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:.5rem}
.dl-bar-fill{height:100%;width:0;background:var(--primary);transition:width .15s ease}

/* course + lesson artwork (Katie's uploaded covers, right of the names) */
.title-with-thumb{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.course-thumb{width:44px;height:44px;border-radius:10px;object-fit:contain;flex:none}
.course-cover{width:96px;height:96px;border-radius:14px;object-fit:contain;flex:none}
.lib-thumb{width:34px;height:34px;border-radius:8px;object-fit:contain;flex:none}
.lib-item .lib-title{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.lesson-thumb{width:44px;height:44px;border-radius:8px;object-fit:contain;flex:none}
.lesson-row .lesson-name{flex:1}
.lesson-row .lesson-dur{flex:none}

/* lesson image media: expandable poster thumbnails */
.media-figure{margin:1rem 0}
.media-thumb{max-width:160px;max-height:160px;border-radius:10px;cursor:zoom-in;display:block;border:1px solid var(--border)}
.media-cap{font-size:.75rem;color:var(--muted,#9ca3af);margin-top:.35rem}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out;padding:2rem}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

/* login account-recovery links */
.login-links{display:flex;justify-content:space-between;margin-top:.8rem;font-size:.8rem}
.login-links a{color:var(--primary2);text-decoration:none}
.login-links a:hover{text-decoration:underline}
.login-hint{background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.3);border-radius:8px;padding:.6rem .75rem;font-size:.78rem;color:var(--muted);line-height:1.5;margin:.6rem 0 0}

/* Profile avatars (shared with chat) */
.avatar { border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--accent, #a855f7); color: #fff; font-weight: 700; border-radius: 50%; flex: none; vertical-align: middle; }
.form-error { color: #e5484d; font-size: .85rem; margin: .3rem 0; }
.settings-group .field { margin-bottom: .8rem; max-width: 480px; }
.settings-group .field label { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .3rem; }
.settings-group .field input, .settings-group .field textarea { width: 100%; background: var(--input); border: 1px solid var(--border); border-radius: 8px; padding: .6rem; color: var(--text); font-size: .92rem; font-family: inherit; resize: vertical; }
.settings-group .field input:focus, .settings-group .field textarea:focus { outline: none; border-color: var(--primary); }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: .82rem; padding: 0; text-decoration: underline; }
.link-btn:hover { color: var(--text); }
.lesson-cover { display: block; max-width: 320px; width: 100%; border-radius: 14px; margin: 0 0 1rem; cursor: zoom-in; }
.pick-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--input, #241d33); border: 1px solid var(--primary, #a855f7); border-radius: 999px; padding: .25rem .4rem .25rem .7rem; font-size: .85rem; }
.pick-chip button { background: none; border: 0; color: var(--muted, #9aa); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.pick-chip button:hover { color: var(--text, #fff); }

/* In-call chat panel */
.room-body { display: flex; flex: 1; min-height: 0; }
.room-body .rtc-grid { flex: 1; min-width: 0; }
.room-chat { width: 300px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--border, rgba(255,255,255,.12)); background: var(--bg2, #14101d); }
.room-chat[hidden] { display: none; }
.room-chat-msgs { flex: 1; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .45rem; }
.room-chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 92%; }
.room-chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.room-chat-from { font-size: .68rem; color: var(--muted, #9aa); margin: 0 .3rem .1rem; }
.room-chat-bubble { background: rgba(255,255,255,.08); border-radius: 12px; padding: .4rem .65rem; font-size: .88rem; line-height: 1.4; word-break: break-word; }
.room-chat-msg.mine .room-chat-bubble { background: var(--accent, #a855f7); color: #fff; }
.room-chat-form { display: flex; gap: .4rem; padding: .55rem; border-top: 1px solid var(--border, rgba(255,255,255,.12)); }
.room-chat-form input { flex: 1; min-width: 0; background: var(--input, #241d33); border: 1px solid var(--border, #3a3050); border-radius: 8px; padding: .5rem .6rem; color: var(--text, #ece7f4); font: inherit; }
.room-chat-form .btn-primary { padding: .45rem .8rem; }
.room-chat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-left: .25rem; vertical-align: super; }
@media (max-width: 720px) { .room-chat { position: absolute; right: 0; top: 0; bottom: 0; width: min(85vw, 320px); z-index: 20; box-shadow: -12px 0 30px rgba(0,0,0,.45); } .room-body { position: relative; } }