/* =========================================================
   The Hub — "On air" identity
   Sea-teal surfaces, one warm on-air amber for anything live.
   ========================================================= */
:root,
[data-theme="night"] {
    --bg: #0e1f24;          /* app backdrop + top bar */
    --s1: #132b31;          /* side + people panels */
    --s2: #17333a;          /* main panel */
    --s3: #1f414a;          /* raised: inputs, hovers, cards */
    --s4: #28525c;          /* pressed / selected */
    --line: #2a4f58;
    --line-soft: rgba(146, 196, 196, .12);
    --text: #e6f0ee;
    --text-strong: #ffffff;
    --muted: #93adad;
    --faint: #62807f;
    --air: #ffc94d;         /* on-air amber */
    --air-ink: #2a1e00;
    --air-soft: rgba(255, 201, 77, .14);
    --air-glow: rgba(255, 201, 77, .45);
    --mint: #52e0a4;
    --rose: #ff6b7a;
    --rose-ink: #3a0710;
    --lilac: #a9b8ff;
    --lilac-soft: rgba(169, 184, 255, .16);
    --idle: #ffb44d;
    --offline: #6c8a8a;
    --shadow: 0 18px 50px rgba(3, 14, 17, .55);
    --pop-bg: #102429;
    --stage-bg: #0a171b;
    --scrim: rgba(4, 14, 17, .66);
    color-scheme: dark;
}
[data-theme="day"] {
    --bg: #dde8e5;
    --s1: #eef4f2;
    --s2: #fbfdfc;
    --s3: #e3ece9;
    --s4: #d0dfdb;
    --line: #c6d6d2;
    --line-soft: rgba(16, 38, 43, .08);
    --text: #14292e;
    --text-strong: #07171b;
    --muted: #4d6a6b;
    --faint: #7d9796;
    --air: #f5b81d;
    --air-ink: #2a1e00;
    --air-soft: rgba(245, 184, 29, .18);
    --air-glow: rgba(229, 160, 0, .5);
    --mint: #12a46a;
    --rose: #d9344a;
    --rose-ink: #fff;
    --lilac: #3e56d6;
    --lilac-soft: rgba(62, 86, 214, .12);
    --idle: #df8d00;
    --offline: #93a8a6;
    --shadow: 0 18px 50px rgba(20, 50, 56, .18);
    --pop-bg: #ffffff;
    --stage-bg: #10262b;
    --scrim: rgba(14, 31, 36, .4);
    color-scheme: light;
}
:root {
    --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
    --r-panel: 18px;
    --r-card: 14px;
    --r-ctl: 10px;
    --top-h: 60px;
    --head-h: 58px;
    --gap: 10px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font: 15px/1.45 var(--ui);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--lilac); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; flex-shrink: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; }
.muted { color: var(--muted); }
::selection { background: var(--air-soft); }
:focus-visible { outline: 2px solid var(--air); outline-offset: 2px; border-radius: 6px; }

* { scrollbar-width: thin; scrollbar-color: var(--s4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================== primitives =========================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 18px; border-radius: 999px;
    font-weight: 600; font-size: 14px; transition: background .15s, transform .1s, box-shadow .15s;
    white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--air); color: var(--air-ink); }
.btn-primary:hover { box-shadow: 0 0 0 4px var(--air-soft); }
.btn-secondary { background: var(--s3); color: var(--text); }
.btn-secondary:hover { background: var(--s4); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--s3); }
.btn-danger { background: var(--rose); color: var(--rose-ink); }
.btn-danger:hover { box-shadow: 0 0 0 4px rgba(255, 107, 122, .2); }
.btn-block { width: 100%; }
.btn-lg { min-height: 48px; font-size: 15px; }
.btn-sm { min-height: 32px; padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icon-btn {
    width: 36px; height: 36px; border-radius: var(--r-ctl); display: grid; place-items: center;
    color: var(--muted); transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--s3); color: var(--text); }
.icon-btn.active { color: var(--text); background: var(--s3); }
.icon-btn.off { color: var(--rose); }
.icon-btn.danger:hover { color: var(--rose); }

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field > span em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 4px; }
.field input:not([type=radio]):not([type=checkbox]), .field textarea, .field select, .input {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); outline: 0;
    background: var(--s3); color: var(--text); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.field input:not([type=radio]):not([type=checkbox]):focus, .field textarea:focus, .field select:focus, .input:focus { border-color: var(--air); box-shadow: 0 0 0 3px var(--air-soft); }
.field .hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--faint); }
.field .count { float: right; font-weight: 400; color: var(--faint); }
.form-error { color: var(--rose); font-size: 14px; margin: -6px 0 14px; }

.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--s4); border-radius: 12px; transition: .18s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--text-strong); border-radius: 50%; transition: .18s; }
.switch input:checked + span { background: var(--air); }
.switch input:checked + span::before { transform: translateX(18px); background: var(--air-ink); }
.switch input:focus-visible + span { outline: 2px solid var(--air); outline-offset: 2px; }
input[type=range] { width: 100%; accent-color: var(--air); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-strong); }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--air); color: var(--air-ink); display: grid; place-items: center; flex-shrink: 0; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand-lg .brand-mark { width: 44px; height: 44px; border-radius: 14px; }
.brand-lg .brand-name { font-size: 24px; }

/* =========================== auth =========================== */
.auth { position: fixed; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; overflow-y: auto; background: var(--bg); }
.auth-hero {
    position: relative; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; gap: 18px; overflow: hidden;
    background: var(--s1);
}
.auth-hero .brand { position: absolute; top: 40px; left: 64px; }
.auth-headline { font-size: clamp(40px, 5.2vw, 76px); line-height: .98; margin: 0; max-width: 11ch; color: var(--text-strong); font-weight: 800; letter-spacing: -.035em; }
.auth-lede { margin: 0; font-size: 18px; color: var(--muted); max-width: 34ch; }
.wave { display: flex; align-items: center; gap: 6px; height: 120px; margin-top: 20px; }
.wave i { flex: 0 0 8px; border-radius: 8px; background: var(--air); opacity: .9; height: 8px; transform-origin: center; animation: waveIn 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.wave i:nth-child(3n) { background: var(--mint); opacity: .7; }
.wave i:nth-child(5n) { background: var(--lilac); opacity: .6; }
@keyframes waveIn { from { height: 4px; opacity: 0; } }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: 32px; margin: 0 0 6px; color: var(--text-strong); font-weight: 700; }
.auth-card .muted { margin: 0 0 28px; }
.auth-switch { font-size: 14px; color: var(--muted); margin: 18px 0 0; text-align: center; }
.mobile-brand { display: none; margin-bottom: 28px; }

/* =========================== layout =========================== */
/* #ui wraps the whole interface so a UI scale can be applied to everything, overlays included */
#ui { position: fixed; inset: 0; transform: scale(var(--ui-scale, 1)); transform-origin: 0 0;
    width: calc(100% / var(--ui-scale, 1)); height: calc(100% / var(--ui-scale, 1)); }
.app { display: flex; flex-direction: column; height: 100%; }
.topbar { height: var(--top-h); flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 16px; }
.topbar .brand { padding: 4px; border-radius: 12px; }
.topbar .brand:hover .brand-mark { box-shadow: 0 0 0 4px var(--air-soft); }
.topbar-title { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame { flex: 1; min-height: 0; display: flex; gap: var(--gap); padding: 0 var(--gap) var(--gap); position: relative; }
.panel { border-radius: var(--r-panel); overflow: hidden; }
.side { width: var(--side-w, 272px); flex-shrink: 0; background: var(--s1); display: flex; flex-direction: column; min-height: 0; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--s2); position: relative; }
.people { width: var(--people-w, 268px); flex-shrink: 0; background: var(--s1); overflow-y: auto; }
.people.closed { display: none; }
.scrim { display: none; }
.mobile-only { display: none !important; }
/* drag handles between the panels; hidden where the panels are overlays/drawers */
.divider { position: absolute; top: 0; bottom: var(--gap); width: 9px; z-index: 6; cursor: col-resize; touch-action: none; }
.divider::after { content: ''; position: absolute; inset: 0 3px; border-radius: 3px; background: transparent; transition: background .12s; }
.divider:hover::after, .divider.dragging::after { background: var(--air-soft); }
#divSide { left: calc(var(--gap) + var(--side-w, 272px) + var(--gap) / 2 - 4px); }
#divPeople { right: calc(var(--gap) + var(--people-w, 268px) + var(--gap) / 2 - 4px); }
@media (max-width: 1180px) { #divPeople { display: none; } }
@media (max-width: 760px) { .divider { display: none; } }

/* =========================== spaces bar =========================== */
.spaces { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 6px 4px; scrollbar-width: none; }
.spaces::-webkit-scrollbar { display: none; }
.space-sep { width: 1px; height: 26px; background: var(--line); margin: 0 6px; flex-shrink: 0; }
.space {
    position: relative; flex-shrink: 0; height: 40px; min-width: 40px; border-radius: 13px; display: flex; align-items: center; gap: 8px;
    padding: 0; color: var(--text); background: var(--s1); transition: background .15s, box-shadow .15s;
}
.space:hover { background: var(--s3); }
.space .space-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff; background: var(--srv, var(--s3)); overflow: hidden; flex-shrink: 0; }
.space .space-icon img { width: 100%; height: 100%; object-fit: cover; }
.space .space-label { display: none; font-weight: 600; font-size: 14px; padding-right: 14px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.space.active { background: var(--s3); box-shadow: inset 0 0 0 1.5px var(--line); }
.space.active .space-label { display: block; }
.space.home .space-icon { background: transparent; color: var(--text); }
.space.home.active .space-icon { color: var(--air); }
.space.add .space-icon { background: transparent; color: var(--mint); }
.space.add:hover .space-icon { color: var(--text); }
.space .dot { position: absolute; left: 50%; bottom: -5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--text); }
.space .count {
    position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 3px var(--bg);
}
.space .onair {
    position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--air); color: var(--air-ink);
    display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg), 0 0 10px var(--air-glow);
}
.space.dm-ping .space-icon { border-radius: 50%; }
.space.dm-ping { border-radius: 50%; background: transparent; }

/* =========================== me bar =========================== */
.me-bar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.me-chip { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; margin-left: 4px; }
.me-chip:hover { background: var(--s1); }
.me-chip .who { line-height: 1.15; text-align: left; max-width: 150px; }
.me-chip .n { font-weight: 700; font-size: 14px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-chip .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================== avatars & status =========================== */
.avatar {
    position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; user-select: none;
    background: var(--c, var(--s4)); transition: box-shadow .12s;
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar .st {
    position: absolute; right: -1px; bottom: -1px; width: 32%; height: 32%; min-width: 10px; min-height: 10px; max-width: 18px; max-height: 18px;
    border-radius: 50%; box-shadow: 0 0 0 3px var(--ring, var(--s1)); background: var(--offline);
}
.st.online { background: var(--mint) !important; }
.st.idle { background: var(--idle) !important; }
.st.dnd { background: var(--rose) !important; }
.st.offline, .st.invisible { background: var(--offline) !important; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.me-bar .avatar .st { --ring: var(--bg); }
.main .avatar .st { --ring: var(--s2); }
.popover .avatar .st, .modal .avatar .st { --ring: var(--pop-bg); }
/* on-air glow: the one bold thing */
[data-speak-uid].speaking .avatar, .avatar.speaking { box-shadow: 0 0 0 2px var(--air), 0 0 14px var(--air-glow); }

/* =========================== side panel =========================== */
.side-head { flex-shrink: 0; }
.side-body { flex: 1; overflow-y: auto; padding: 8px 10px 18px; }

.space-card { position: relative; }
.space-card .banner {
    height: 104px; background-color: var(--srv, var(--s4)); background-size: cover; background-position: center;
    position: relative;
}
.space-card .banner.pattern { background-image: var(--wave-pattern); }
.space-card .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, .28)); }
.space-card .menu-btn {
    position: absolute; top: 10px; right: 10px; z-index: 1; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(8, 22, 26, .55); color: #fff; backdrop-filter: blur(6px);
}
.space-card .menu-btn:hover { background: rgba(8, 22, 26, .8); }
.space-card .info { padding: 0 16px 12px; margin-top: -26px; position: relative; z-index: 1; }
.space-card .sicon {
    width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; overflow: hidden;
    background: var(--srv, var(--s4)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px;
    box-shadow: 0 0 0 4px var(--s1);
}
.space-card .sicon img { width: 100%; height: 100%; object-fit: cover; }
.space-card h2 { margin: 10px 0 2px; font-size: 20px; font-weight: 700; color: var(--text-strong); line-height: 1.15; overflow-wrap: anywhere; }
.space-card .desc { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.space-card .stats { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.space-card .stats span { display: inline-flex; align-items: center; gap: 6px; }
.space-card .invite-btn { margin-top: 12px; }

.sect-label {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 6px 6px 8px;
    font-size: 13px; font-weight: 700; color: var(--muted);
}
.sect-label button { color: var(--muted); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.sect-label button:hover { background: var(--s3); color: var(--text); }

.room { border-radius: var(--r-card); margin-bottom: 4px; }
.room.live { background: var(--air-soft); }
.room-row {
    display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: var(--r-card); cursor: pointer;
    color: var(--muted); font-weight: 600;
}
.room-row:hover { background: var(--s3); color: var(--text); }
.room.live .room-row { color: var(--text); }
.room.live .room-row:hover { background: transparent; }
.room.active .room-row { color: var(--text-strong); }
.room.active:not(.live) .room-row { background: var(--s3); }
.room-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row .lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--air); box-shadow: 0 0 8px var(--air-glow); }
.room-row .n { font-size: 12px; font-weight: 700; color: var(--air); }
.room-row .room-timer { font-size: 11.5px; font-weight: 600; color: var(--air); font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 999px; background: var(--air-soft); }
.room-row .tools { display: none; }
.room-row:hover .tools { display: flex; }
.room-row .tools button { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.room-row .tools button:hover { color: var(--text); background: var(--s4); }
.room-people { padding: 0 8px 8px 16px; }
.room-person {
    display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: 10px; font-size: 14px; color: var(--text); cursor: pointer;
}
.room-person:hover { background: rgba(255, 255, 255, .05); }
.room-person .avatar { width: 24px; height: 24px; font-size: 11px; }
.room-person .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-person .ic { display: flex; gap: 5px; color: var(--muted); }
.room-person .ic .off { color: var(--rose); }
.room-person .team-flag { display: inline-flex; color: var(--air); flex: none; }
.live-pill { background: var(--rose); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; letter-spacing: .02em; }

/* categories, drag reordering and drop targets */
.sect-label.cat { cursor: pointer; user-select: none; }
.sect-label.cat > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sect-label.cat .cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sect-label.cat svg { transition: transform .12s; flex: none; }
.sect-label.cat.collapsed svg { transform: rotate(-90deg); }
.sect-label .cat-tools { display: flex; gap: 2px; }
.sect-label .cat-tools button { color: var(--muted); }
.sect-label .cat-tools button:hover { color: var(--text); }
.cat-body { min-height: 2px; }
.drag-grip { display: none; color: var(--faint); cursor: grab; flex: none; }
#sideBody .room-row:hover .drag-grip, #sideBody .chan:hover .drag-grip { display: inline-flex; }
.dragging { opacity: .45; }
.drag-over { outline: 2px solid var(--air); outline-offset: -2px; border-radius: 8px; }
.side-add { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 14px; }
.side-add:hover { color: var(--text); background: var(--s3); }

.chan {
    display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 2px; border-radius: 10px;
    color: var(--muted); cursor: pointer; font-weight: 500; position: relative;
}
.chan:hover { background: var(--s3); color: var(--text); }
.chan.active { background: var(--s4); color: var(--text-strong); }
.chan.unread { color: var(--text-strong); font-weight: 700; }
.chan.unread::before { content: ""; position: absolute; left: -6px; top: 50%; width: 4px; height: 14px; margin-top: -7px; border-radius: 0 4px 4px 0; background: var(--text-strong); }
.chan .hash { color: var(--faint); font-family: var(--display); font-weight: 700; font-size: 17px; width: 16px; text-align: center; }
.chan.active .hash { color: var(--air); }
.chan .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan .tools { display: none; gap: 2px; }
.chan:hover .tools, .chan.active .tools { display: flex; }
.chan .tools button { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.chan .tools button:hover { color: var(--text); background: var(--s3); }
.badge {
    min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--rose); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

.msg-head-side { padding: 18px 16px 6px; }
.msg-head-side h2 { margin: 0 0 12px; font-size: 22px; color: var(--text-strong); }
.dm-filter { width: 100%; }
.dm-item { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 10px; margin-bottom: 2px; border-radius: var(--r-card); color: var(--muted); cursor: pointer; }
.dm-item:hover { background: var(--s3); color: var(--text); }
.dm-item.active { background: var(--s4); color: var(--text-strong); }
.dm-item.unread .n { color: var(--text-strong); font-weight: 700; }
.dm-item .avatar { width: 36px; height: 36px; font-size: 15px; }
.dm-item .info { flex: 1; min-width: 0; line-height: 1.25; }
.dm-item .n { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-item .s { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-item .s.call { color: var(--air); font-weight: 600; }
.home-link { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: var(--r-card); color: var(--muted); font-weight: 600; cursor: pointer; margin-bottom: 4px; }
.home-link:hover { background: var(--s3); color: var(--text); }
.home-link.active { background: var(--s4); color: var(--text-strong); }
.empty-hint { color: var(--faint); font-size: 13.5px; padding: 6px 10px; }

/* =========================== chat header =========================== */
.chat-header {
    height: var(--head-h); flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 20px;
    border-bottom: 1px solid var(--line-soft);
}
.chat-header .h-mark { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--faint); }
.chat-header .h-name { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header .h-topic { flex: 1; min-width: 0; color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--line); }
.chat-header .h-spacer { flex: 1; }
.chat-header .h-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.h-search { position: relative; margin-right: 4px; }
.h-search input {
    width: 200px; height: 34px; padding: 0 12px 0 34px; border-radius: 999px; border: 1px solid transparent; outline: 0;
    background: var(--s3); color: var(--text); font-size: 13.5px; transition: width .2s, border-color .15s;
}
.h-search input:focus { width: 260px; border-color: var(--line); }
.h-search svg { position: absolute; left: 11px; top: 9px; color: var(--muted); pointer-events: none; }
.conn-banner { background: var(--rose); color: var(--rose-ink); text-align: center; font-size: 13px; font-weight: 600; padding: 5px; }

/* =========================== messages =========================== */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 10px; overflow-anchor: none; outline: 0; }
.intro { padding: 36px 24px 12px; }
.intro .mark { width: 64px; height: 64px; border-radius: 20px; background: var(--s3); display: grid; place-items: center; color: var(--air); font-family: var(--display); font-weight: 800; font-size: 34px; margin-bottom: 14px; }
.intro .avatar { width: 80px; height: 80px; font-size: 32px; margin-bottom: 14px; }
.intro h2 { margin: 0 0 6px; font-size: 30px; color: var(--text-strong); font-weight: 800; }
.intro p { margin: 0; color: var(--muted); max-width: 60ch; }
.loading-more { text-align: center; color: var(--muted); font-size: 13px; padding: 14px; min-height: 40px; }

.day-divider { display: flex; justify-content: center; margin: 22px 0 6px; position: relative; }
.day-divider::before { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; border-top: 1px solid var(--line-soft); }
.day-divider span { position: relative; padding: 2px 12px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; font-weight: 600; }
.new-divider { display: flex; align-items: center; gap: 10px; margin: 12px 20px 4px; color: var(--rose); font-size: 12px; font-weight: 700; }
.new-divider::before { content: ""; flex: 1; border-top: 1px solid var(--rose); }

.msg { position: relative; padding: 3px 56px 3px 76px; margin-top: 14px; min-height: 46px; }
.msg.grouped { margin-top: 0; min-height: 0; padding-top: 1px; padding-bottom: 1px; }
.msg:hover { background: var(--line-soft); }
.msg.mentioned { background: var(--air-soft); }
.msg.mentioned::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--air); border-radius: 0 3px 3px 0; }
.msg.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--lilac-soft); } 100% { background: transparent; } }
.msg .msg-avatar { position: absolute; left: 20px; top: 5px; cursor: pointer; }
.msg.has-reply .msg-avatar { top: 27px; }
/* name rows: icons and badges centre on the name's line, while the name and the time share a baseline */
.msg-head { display: flex; align-items: center; gap: 4px; line-height: 22px; flex-wrap: wrap; }
.msg-author { font-family: var(--display); font-weight: 700; font-size: 15.5px; color: var(--name, var(--text-strong)); cursor: pointer; align-self: baseline; }
.msg-author:hover { text-decoration: underline; }
.msg-time { font-size: 12px; line-height: 16px; color: var(--faint); align-self: baseline; margin-left: 4px; }
.msg-pinned { color: var(--air); display: inline-flex; }
.msg-side-time { position: absolute; left: 0; width: 76px; text-align: center; top: 4px; font-size: 11px; color: var(--faint); display: none; line-height: 22px; }
.msg.grouped:hover .msg-side-time { display: block; }
.msg-content { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.45; }
.msg-content.jumbo { font-size: 46px; line-height: 1.15; }
.msg-content code { font-family: var(--mono); font-size: 85%; background: var(--s3); padding: .12em .38em; border-radius: 6px; }
.msg-content pre { margin: 6px 0 0; padding: 10px 12px; background: var(--s1); border: 1px solid var(--line-soft); border-radius: 10px; font-family: var(--mono); font-size: 13.5px; white-space: pre-wrap; max-width: 92%; overflow-x: auto; }
.msg-content pre code { background: none; padding: 0; font-size: inherit; }
.msg-content .quote { border-left: 3px solid var(--s4); padding-left: 12px; margin: 2px 0; color: var(--muted); }
.msg-content .mention { background: var(--lilac-soft); color: var(--lilac); padding: 0 4px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.msg-content .mention:hover { background: var(--lilac); color: var(--s2); }
.msg-content .spoiler { background: var(--s4); color: transparent; border-radius: 4px; cursor: pointer; padding: 0 3px; }
.msg-content .spoiler.shown { background: var(--s3); color: inherit; }
.msg-content .spoiler:not(.shown) * { visibility: hidden; }
.edited { font-size: 11px; color: var(--faint); margin-left: 4px; user-select: none; }
.msg.pending .msg-content { opacity: .55; }
.msg.failed .msg-content { color: var(--rose); }
.failed-note { font-size: 12.5px; color: var(--rose); }
.failed-note a { cursor: pointer; }

.reply-ref { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 19px; color: var(--muted); margin-bottom: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; position: relative; }
.reply-ref::before { content: ""; position: absolute; left: -42px; top: 9px; width: 34px; height: 12px; border-left: 2px solid var(--s4); border-top: 2px solid var(--s4); border-top-left-radius: 8px; }
.reply-ref .avatar { width: 16px; height: 16px; font-size: 8px; }
.reply-ref b { color: var(--text); font-weight: 600; flex-shrink: 0; }
.reply-ref .rtext { overflow: hidden; text-overflow: ellipsis; }
.reply-ref:hover .rtext { color: var(--text); }

.attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: flex-start; }
.att-img { max-width: min(420px, 100%); height: auto; max-height: 360px; border-radius: 12px; cursor: zoom-in; display: block; background: var(--s3); }
.att-video { max-width: min(480px, 100%); max-height: 320px; border-radius: 12px; background: #000; }
.att-audio { width: 100%; margin-top: 8px; }
.att-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; width: min(420px, 100%); background: var(--s1); border: 1px solid var(--line-soft); border-radius: 12px; flex-wrap: wrap; }
.att-file .fi { color: var(--lilac); }
.att-file .meta { flex: 1; min-width: 0; }
.att-file .meta a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.att-file .meta span { font-size: 12px; color: var(--muted); }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reaction { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--s3); border: 1px solid transparent; font-size: 13px; color: var(--muted); font-weight: 700; }
.reaction:hover { border-color: var(--line); }
.reaction.me { background: var(--air-soft); border-color: var(--air); color: var(--text-strong); }
.reaction .e { font-size: 15px; line-height: 1; }
.reaction-add { opacity: 0; width: 34px; justify-content: center; }
.msg:hover .reaction-add { opacity: 1; }

/* custom media player (assets/player.js) */
/* width is explicit because inline-size containment (for the container queries below) makes a flex
   item contribute no intrinsic width of its own */
.pl { position: relative; width: 100%; max-width: min(520px, 100%); border-radius: 12px; overflow: hidden; background: #000; container-type: inline-size; }
.pl-video video { display: block; width: 100%; max-height: 320px; background: #000; }
.pl:focus-visible { outline: 2px solid var(--air); outline-offset: 2px; }
.pl-bar { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: color-mix(in srgb, #000 78%, transparent); color: #fff; backdrop-filter: blur(4px); }
.pl-audio .pl-bar { background: var(--s3); color: var(--text); border-radius: 10px; }
.pl-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: inherit; flex: none; }
.pl-btn:hover { background: rgba(255, 255, 255, .14); }
.pl-audio .pl-btn:hover { background: var(--s4); }
.pl-rate { width: auto; min-width: 32px; padding: 0 5px; font-size: 12px; font-weight: 700; }
.pl-time { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; min-width: 34px; text-align: center; }
.pl-bar input[type=range] { min-width: 0; }          /* let the bars actually shrink in a narrow player */
.pl-seek { flex: 1 1 auto; min-width: 72px; accent-color: var(--air); height: 4px; }
.pl-vol { flex: 0 1 44px; width: 44px; min-width: 0; accent-color: var(--air); height: 4px; }
.pl-audio { max-width: 100%; }
.pl-audio .pl-bar { padding: 4px 8px; }
.att-file .pl-audio { flex-basis: 100%; }
/* the seek bar keeps its space: the volume (then speed) drops out as the player gets narrow */
@container (max-width: 430px) { .pl-vol { display: none; } }
@container (max-width: 360px) { .pl-rate { display: none; } }
/* fullscreen: the video fills the screen and the bar sits at the bottom */
.pl:fullscreen, .pl:-webkit-full-screen { max-width: none; width: 100%; height: 100%; border-radius: 0; background: #000; }
.pl:fullscreen video, .pl:-webkit-full-screen video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.pl:fullscreen .pl-bar, .pl:-webkit-full-screen .pl-bar { position: absolute; left: 0; right: 0; bottom: 0; }
@media (max-width: 560px) { .pl-time { min-width: 32px; } }

.msg-actions {
    position: absolute; right: 16px; top: -18px; display: none; gap: 1px; padding: 3px; background: var(--pop-bg);
    border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); z-index: 2;
}
.msg:hover .msg-actions, .msg.menu-open .msg-actions { display: flex; }
.msg-actions button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.msg-actions button:hover { background: var(--s3); color: var(--text); }
.msg-actions button.on { color: var(--air); }
.msg-actions button.danger:hover { color: var(--rose); }
.msg-actions .quick { font-size: 16px; }

.edit-box textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--air); border-radius: 12px; resize: none; outline: 0; background: var(--s3); color: var(--text); font-size: 15px; line-height: 1.45; }
.edit-box .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.edit-box .hint a { cursor: pointer; }

/* compact density */
.compact .msg { padding-left: 20px; margin-top: 4px; min-height: 0; }
.compact .msg .msg-avatar { display: none; }
.compact .msg.grouped .msg-side-time { display: none !important; }
.compact .msg-head { display: inline-flex; margin-right: 6px; }
.compact .msg-body > .msg-content { display: inline; }
.compact .reply-ref::before { display: none; }

/* =========================== composer =========================== */
.composer-wrap { padding: 0 18px 16px; position: relative; flex-shrink: 0; }
.composer-box { background: var(--s3); border-radius: 22px; border: 1px solid transparent; transition: border-color .15s, box-shadow .15s; }
.composer-box:focus-within { border-color: var(--line); box-shadow: 0 0 0 3px var(--line-soft); }
.composer { display: flex; align-items: flex-end; padding: 4px 6px; min-height: 48px; }
.composer textarea { flex: 1; border: 0; outline: 0; background: transparent; resize: none; padding: 10px 4px; max-height: 45vh; font-size: 15px; line-height: 1.45; color: var(--text); min-width: 0; }
.composer textarea::placeholder { color: var(--faint); }
.composer-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.composer-btn:hover { color: var(--text); background: var(--s4); }
.send-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--air); color: var(--air-ink); flex-shrink: 0; margin-left: 2px; transition: transform .12s, opacity .15s; }
.send-btn:disabled { background: var(--s4); color: var(--faint); cursor: default; }
.send-btn:not(:disabled):hover { transform: scale(1.06); }
.reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 0 18px; font-size: 13.5px; color: var(--muted); }
.reply-bar b { color: var(--text); }
.reply-bar button { color: var(--muted); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.reply-bar button:hover { background: var(--s4); color: var(--text); }
.upload-tray { display: flex; gap: 12px; padding: 12px 12px 4px; overflow-x: auto; }
.up-chip { position: relative; width: 150px; flex-shrink: 0; background: var(--s2); border-radius: 12px; padding: 8px; }
.up-chip .thumb { height: 92px; border-radius: 8px; background: var(--s1) center/cover no-repeat; display: grid; place-items: center; color: var(--lilac); }
.up-chip .nm { font-size: 12.5px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-chip .bar { height: 4px; margin-top: 6px; background: var(--s4); border-radius: 2px; overflow: hidden; }
.up-chip .bar i { display: block; height: 100%; background: var(--air); width: 0; transition: width .2s; }
.up-chip.error .bar i { background: var(--rose); width: 100% !important; }
.up-chip .rm { position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--pop-bg); color: var(--rose); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); }
.typing { height: 22px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; padding-left: 14px; }
.typing b { color: var(--text); font-weight: 700; }
.typing .dots { display: inline-flex; gap: 3px; }
.typing .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--air); opacity: .35; animation: blink 1.4s infinite both; }
.typing .dots i:nth-child(2) { animation-delay: .2s; }
.typing .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

.mention-popup { position: absolute; left: 18px; right: 18px; bottom: calc(100% - 8px); background: var(--pop-bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px; box-shadow: var(--shadow); z-index: 10; max-height: 300px; overflow-y: auto; }
.mention-popup .mp-title { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 8px 6px; }
.mention-popup .mp-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; line-height: 22px; }
.mention-popup .mp-item.sel, .mention-popup .mp-item:hover { background: var(--s3); }
.mention-popup .avatar { width: 26px; height: 26px; font-size: 11px; }
.mention-popup .u { color: var(--muted); font-size: 13px; margin-left: auto; }

/* =========================== people panel =========================== */
.people-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 4px; }
.people-head h3 { margin: 0; font-size: 16px; color: var(--text-strong); }
.mem-group { padding: 14px 18px 4px; font-size: 13px; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.mem { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; margin: 0 8px 2px; border-radius: var(--r-card); cursor: pointer; }
.mem:hover { background: var(--s3); }
.mem .avatar { width: 34px; height: 34px; font-size: 14px; }
.mem .info { min-width: 0; flex: 1; line-height: 1.22; }
/* the clip (needed for the ellipsis) gets room above and below, cancelled by the margin, so tall name fonts' swashes and accents show */
.mem .n { display: flex; align-items: center; gap: 4px; font-weight: 600; overflow: hidden; padding-block: .4em; margin-block: -.4em; color: var(--name, var(--text)); }
.mem .n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: .4em; margin-block: -.4em; }
.mem .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem.offline { opacity: .45; }
.mem.offline:hover { opacity: 1; }
.role-badge { color: var(--air); display: inline-flex; }
.role-badge.admin { color: var(--lilac); }

/* profile card (shared by popover, modal, people panel, settings preview) */
.pcard { --pb: var(--s4); background: var(--pop-bg); position: relative; }
.pcard .pc-banner { height: 112px; background-color: var(--pb); background-size: cover; background-position: center; }
.pcard .pc-banner.pattern { background-image: var(--wave-pattern); }
.pcard .pc-top { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px; margin-top: -44px; }
.pcard .pc-top .avatar { width: 88px; height: 88px; font-size: 34px; box-shadow: 0 0 0 6px var(--pop-bg); }
.pcard .pc-top .avatar .st { --ring: var(--pop-bg); max-width: 20px; max-height: 20px; }
.pcard .pc-actions { display: flex; gap: 6px; padding-bottom: 4px; }
.pcard .pc-body { padding: 10px 18px 18px; }
.pcard h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-strong); line-height: 1.15; overflow-wrap: anywhere; }
.pcard h3 .role-icon { margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }
.pcard .uname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; line-height: 21px; color: var(--muted); margin-top: 2px; }
.pcard .pron { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--s3); color: var(--text); }
.pcard .custom { margin-top: 10px; font-size: 14px; padding: 8px 10px; background: var(--s3); border-radius: 10px; }
.pcard .pc-sect { margin-top: 14px; }
.pcard .pc-sect h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pcard .pc-sect p { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pcard .mutuals { display: flex; flex-direction: column; gap: 4px; }
.pcard .mutual { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 4px 6px; border-radius: 10px; cursor: pointer; }
.pcard .mutual:hover { background: var(--s3); }
.pcard .mutual .mi { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: var(--srv); color: #fff; font-family: var(--display); font-weight: 700; font-size: 11px; }
.pcard .mutual .mi img { width: 100%; height: 100%; object-fit: cover; }
.pcard .pc-foot { display: flex; gap: 8px; margin-top: 16px; }
.people .pcard { background: transparent; }
.people .pcard .pc-top .avatar { box-shadow: 0 0 0 6px var(--s1); }
.people .pcard .pc-top .avatar .st { --ring: var(--s1); }
.people .pcard .custom, .people .pcard .pron { background: var(--s3); }
.pcard.big .pc-banner { height: 170px; }
.pcard.big .pc-top { margin-top: -54px; }
.pcard.big .pc-top .avatar { width: 108px; height: 108px; font-size: 42px; }

/* search & pins panels */
.panel-list { padding: 4px 10px 16px; }
.result { padding: 10px 12px; border-radius: var(--r-card); background: var(--s2); margin-bottom: 8px; cursor: pointer; border: 1px solid transparent; }
.result:hover { border-color: var(--line); }
.result .r-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.result .r-meta b { color: var(--name, var(--text)); font-family: var(--display); font-size: 14px; }
.result .r-meta .ch { margin-left: auto; color: var(--faint); }
.result .r-text { font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.result mark { background: var(--air-soft); color: var(--text-strong); border-radius: 3px; padding: 0 1px; }
.result .r-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

/* =========================== voice stage =========================== */
.stage { background: var(--stage-bg); display: flex; flex-direction: column; position: relative; min-height: 0; }
.stage.full { flex: 1; }
.stage.dm { height: 44vh; min-height: 250px; flex-shrink: 0; }
.stage-grid {
    flex: 1; min-height: 0; padding: 18px; display: grid; gap: 10px; align-content: center; justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); overflow-y: auto;
}
.stage.single .stage-grid { grid-template-columns: minmax(0, min(100%, 900px)); }
.stage.focus .stage-grid { display: flex; flex-direction: column; align-items: stretch; }
.stage.focus .tile.focused { flex: 1; min-height: 0; aspect-ratio: auto; }
.stage.focus .tile-strip { display: flex; gap: 10px; height: 110px; flex-shrink: 0; justify-content: center; overflow-x: auto; }
.stage.focus .tile-strip .tile { width: 180px; flex-shrink: 0; aspect-ratio: auto; }
.stage.focus .tile-strip .tile-avatar .avatar { width: 48px; height: 48px; font-size: 20px; }
.tile-strip { display: contents; }
.tile { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--tile, #1f414a); display: grid; place-items: center; min-height: 0; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; transition: box-shadow .12s; }
.tile.speaking::after { box-shadow: inset 0 0 0 3px var(--air), inset 0 0 24px var(--air-glow); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.tile.screen video { object-fit: contain; }
.tile.mirror video { transform: scaleX(-1); }
.tile.has-video video { display: block; }
.tile.has-video .tile-avatar { display: none; }
.tile-avatar .avatar { width: 84px; height: 84px; font-size: 34px; }
.tile.speaking .tile-avatar .avatar { box-shadow: 0 0 0 4px var(--air), 0 0 30px var(--air-glow); }
.tile-label {
    position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 6px;
    background: rgba(5, 16, 19, .66); color: #fff; font-size: 13.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px);
}
.tile-label .off { color: #ff8c98; }
.tile-live { position: absolute; left: 10px; top: 10px; }
.tile-btns { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-btns, .tile:focus-within .tile-btns { opacity: 1; }
.tile-btns button { width: 32px; height: 32px; border-radius: 50%; background: rgba(5, 16, 19, .6); color: #fff; display: grid; place-items: center; }
.tile-placeholder { color: #c3d6d4; font-size: 13.5px; text-align: center; padding: 12px; }
.tile-placeholder b { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.tile:fullscreen { border-radius: 0; }
.stage-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #b7cbca; padding: 24px; gap: 10px; }
.stage-empty h2 { margin: 0; color: #fff; font-size: 26px; }
.stage-empty .ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 201, 77, .1); color: var(--air); }
.stage-bar { display: flex; justify-content: center; padding: 10px 16px 20px; flex-shrink: 0; }
.stage-title { position: absolute; top: 14px; left: 18px; color: #fff; font-family: var(--display); font-weight: 700; display: flex; align-items: center; gap: 8px; z-index: 2; }
.join-btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 999px; background: var(--air); color: var(--air-ink); font-weight: 700; font-size: 15px; box-shadow: 0 0 0 6px var(--air-soft); }
.join-btn:hover { box-shadow: 0 0 0 9px var(--air-soft); }

/* =========================== on-air dock =========================== */
.dock {
    flex-shrink: 0; margin: 0 var(--gap) var(--gap); padding: 10px 12px 10px 16px; border-radius: var(--r-panel);
    background: var(--s1); display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden;
    padding-bottom: calc(10px + var(--safe-b));
}
.dock::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--air); box-shadow: 0 0 18px var(--air-glow); }
.dock-room { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; padding: 4px 8px 4px 0; border-radius: 12px; }
.dock-lamp { width: 40px; height: 40px; border-radius: 13px; background: var(--air); color: var(--air-ink); display: grid; place-items: center; flex-shrink: 0; }
.dock.connecting .dock-lamp { background: var(--s3); color: var(--air); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.dock-room .t1 { font-size: 12px; font-weight: 700; color: var(--air); display: flex; gap: 8px; align-items: center; }
.dock-room .t1 .timer { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.dock-room .t2 { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.dock-room:hover .t2 { text-decoration: underline; }
.dock-people { display: flex; align-items: center; flex: 1; min-width: 0; padding-left: 6px; }
.dock-people .avatar { width: 34px; height: 34px; font-size: 13px; margin-left: -6px; box-shadow: 0 0 0 3px var(--s1); }
.dock-people [data-speak-uid].speaking .avatar, .dock-people .avatar.speaking { box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px var(--air), 0 0 14px var(--air-glow); z-index: 1; }
.dock-people .more { margin-left: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.dock-people .team { position: relative; }
.dock-people .team::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--air); box-shadow: 0 0 0 2px var(--s1); }
.dock-ctl { display: flex; align-items: center; gap: 6px; }
.ctl { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--s3); color: var(--text); transition: background .12s; }
.ctl:hover { background: var(--s4); }
.ctl.on { background: var(--air); color: var(--air-ink); }
.ctl.off { background: rgba(255, 107, 122, .16); color: var(--rose); }
.ctl.leave { background: var(--rose); color: var(--rose-ink); width: 56px; }
.ctl.leave:hover { filter: brightness(1.08); }
.ctl-sep { width: 1px; height: 28px; background: var(--line); margin: 0 4px; }

/* =========================== popovers / menus / tooltips =========================== */
.popover, .ctx-menu { position: fixed; z-index: 1000; background: var(--pop-bg); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.popover { width: 320px; max-width: calc(100vw / var(--ui-scale, 1) - 16px); overflow: hidden; max-height: calc(100vh / var(--ui-scale, 1) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.popover > .pcard:first-child .pc-banner { border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }
/* the menu behind your own avatar */
.pcard.me-card .pc-banner { height: 70px; }
.pcard.me-card .pc-top { margin-top: -34px; }
.pcard.me-card .pc-top .avatar { box-shadow: 0 0 0 4px var(--pop-bg); }
.pcard.me-card .pc-top .avatar .st { max-width: 16px; max-height: 16px; }
.pcard.me-card .pc-body { padding: 8px 16px 6px; min-width: 0; }
.pcard.me-card h3 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard.me-card .uname { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pop-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-strong); padding: 4px 2px 2px; }
.party-pop { padding: 10px; }
.party-pop p { margin: 4px 0 10px; font-size: 13.5px; }
.party-box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.party-code { display: flex; align-items: center; gap: 10px; width: 100%; }
.party-code code { flex: 1; padding: 8px 12px; border-radius: 10px; background: var(--s3); border: 1px solid var(--line); font-size: 15px; letter-spacing: .08em; color: var(--text-strong); }
.party-join { display: flex; gap: 8px; width: 100%; }
.party-join .input { flex: 1; }
.party-members { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-ghost.danger { color: var(--rose); }
.btn-ghost.danger:hover { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); }
.party-flag { display: inline-flex; color: var(--air); flex: none; }
.ctx-menu { min-width: 200px; padding: 6px; }
.menu { padding: 6px; }
.menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px;
    border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--s3); }
.menu-item .left { display: flex; align-items: center; gap: 10px; }
.menu-item .left svg { color: var(--muted); }
.menu-item.danger { color: var(--rose); }
.menu-item.danger svg { color: var(--rose); }
.menu-item .desc { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.menu-sep { height: 1px; background: var(--line-soft); margin: 5px 4px; }
.menu-label { padding: 6px 10px 2px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.menu-slider { padding: 2px 10px 8px; }
.tooltip { position: fixed; z-index: 2000; background: var(--text-strong); color: var(--bg); font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; pointer-events: none; max-width: 260px; }

.emoji-pop { width: 340px; max-width: calc(100vw / var(--ui-scale, 1) - 16px); padding: 10px; }
.emoji-pop input { width: 100%; padding: 8px 12px; background: var(--s3); border: 1px solid transparent; border-radius: 999px; outline: 0; font-size: 14px; margin-bottom: 8px; color: var(--text); }
.emoji-pop input:focus { border-color: var(--line); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 260px; overflow-y: auto; }
.emoji-grid button { font-size: 23px; height: 38px; border-radius: 10px; line-height: 1; }
.emoji-grid button:hover { background: var(--s3); }

.pins-pop { width: 380px; }
.pins-pop .pp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.pins-pop .pp-head h3 { margin: 0; font-size: 16px; color: var(--text-strong); }
.pins-pop .panel-list { max-height: 60vh; overflow-y: auto; }
.pins-pop .result { background: var(--s2); }

/* =========================== modals =========================== */
.modal-backdrop { position: fixed; inset: 0; z-index: 900; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s ease; backdrop-filter: blur(3px); }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: 460px; max-height: calc(100vh / var(--ui-scale, 1) - 32px); background: var(--pop-bg); border: 1px solid var(--line); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; animation: pop .2s cubic-bezier(.2, .9, .3, 1.15); box-shadow: var(--shadow); }
.modal.wide { max-width: 720px; }
.modal.profile { max-width: 560px; }
@keyframes pop { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.modal-head { padding: 22px 22px 0; position: relative; }
.modal-head h2 { margin: 0 0 6px; font-size: 22px; color: var(--text-strong); padding-right: 32px; }
.modal-head p { margin: 0; color: var(--muted); font-size: 14.5px; }
.modal-head .x { position: absolute; right: 14px; top: 14px; color: var(--muted); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.modal-head .x:hover { color: var(--text); background: var(--s3); }
.modal-body { padding: 18px 22px; overflow-y: auto; }
.modal-foot { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.modal-foot.split { justify-content: space-between; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 10px; text-align: left; font-weight: 700; color: var(--text-strong); font-size: 15px; }
.choice:hover { background: var(--s3); }
.choice .ci { width: 46px; height: 46px; border-radius: 14px; background: var(--air); color: var(--air-ink); display: grid; place-items: center; flex-shrink: 0; }
.choice .ci.alt { background: var(--s3); color: var(--mint); }
.choice small { display: block; font-weight: 400; color: var(--muted); font-size: 13.5px; }
.choice .chev { margin-left: auto; color: var(--muted); }
.invite-box { display: flex; background: var(--s3); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 8px; align-items: center; }
.invite-box input { flex: 1; background: none; border: 0; outline: 0; padding: 6px 12px; font-size: 14.5px; min-width: 0; color: var(--text); }
.radio-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-card); border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; }
.radio-row:hover { background: var(--s3); }
.radio-row.sel { border-color: var(--air); background: var(--air-soft); }
.radio-row input { accent-color: var(--air); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.radio-row > svg { flex-shrink: 0; color: var(--muted); }
.radio-row.sel > svg { color: var(--air); }
.radio-row .t { font-weight: 600; color: var(--text-strong); }
.radio-row small { display: block; color: var(--muted); font-size: 13px; }
.lightbox { background: transparent; border: 0; box-shadow: none; width: auto; max-width: calc(92vw / var(--ui-scale, 1)); align-items: center; cursor: zoom-out; }
.lightbox img { cursor: default; }
.lightbox img { max-width: calc(92vw / var(--ui-scale, 1)); max-height: calc(82vh / var(--ui-scale, 1)); border-radius: 12px; object-fit: contain; }
.lightbox a { color: #fff; opacity: .75; font-size: 14px; margin-top: 10px; }
.media-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); position: relative; }
.swatch.sel::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--text-strong); }
.swatch.none { background: var(--s3) !important; display: grid; place-items: center; color: var(--muted); }
.swatch-picker { width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; overflow: hidden; }
.swatch-picker::-webkit-color-swatch-wrapper { padding: 0; }
.swatch-picker::-webkit-color-swatch { border: 0; border-radius: 50%; }

/* =========================== settings =========================== */
.settings { position: fixed; inset: 0; z-index: 800; display: flex; background: var(--bg); animation: fade .15s; }
.settings-nav { width: 280px; flex-shrink: 0; padding: 28px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.settings-nav .brand { margin: 0 8px 22px; }
.settings-nav .grp { padding: 14px 12px 6px; font-size: 12.5px; font-weight: 700; color: var(--faint); }
.settings-nav button.tab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; color: var(--muted); font-weight: 600; }
.settings-nav button.tab:hover { background: var(--s1); color: var(--text); }
.settings-nav button.tab.active { background: var(--s3); color: var(--text-strong); }
.settings-nav button.tab.danger { color: var(--rose); margin-top: 10px; }
.settings-content { flex: 1; overflow-y: auto; background: var(--s2); margin: var(--gap) var(--gap) var(--gap) 0; border-radius: var(--r-panel); position: relative; }
.settings-content .inner { max-width: 860px; padding: 44px 48px 80px; }
.settings-content h2 { margin: 0 0 6px; font-size: 28px; color: var(--text-strong); font-weight: 800; }
.settings-content .sub { margin: 0 0 28px; color: var(--muted); }
.settings-content h3 { font-size: 15px; color: var(--text-strong); margin: 32px 0 10px; }
.settings-close { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--s3); z-index: 2; }
.settings-close:hover { color: var(--text); background: var(--s4); }
.profile-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.profile-editor .preview { position: sticky; top: 0; }
.profile-editor .preview .pcard { border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line); }
.profile-editor .preview .cap { font-size: 12.5px; color: var(--faint); margin: 8px 4px 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.setting-row .t { font-weight: 600; color: var(--text-strong); }
.setting-row small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.meter { height: 8px; border-radius: 4px; background: var(--s4); overflow: hidden; margin-top: 12px; }
.meter i { display: block; height: 100%; width: 0; background: var(--air); transition: width .08s; }
.noise-row .seg button { display: inline-flex; align-items: center; gap: 6px; }
.noise-row .seg svg { flex-shrink: 0; }
.setting-row small.noise-warn { color: var(--rose); }
.theme-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.theme-card { border: 2px solid var(--line); border-radius: var(--r-card); padding: 10px; text-align: left; cursor: pointer; }
.theme-card.sel { border-color: var(--air); }
.theme-card .sw { height: 70px; border-radius: 10px; margin-bottom: 8px; display: flex; gap: 6px; padding: 8px; }
.theme-card .sw i { border-radius: 6px; }
.theme-card b { font-size: 14px; }
.kbd { background: var(--s3); border: 1px solid var(--line); padding: 3px 9px; border-radius: 8px; font-size: 13px; font-family: var(--mono); }
.cam-preview { width: 100%; max-width: 420px; aspect-ratio: 16/9; background: #000; border-radius: var(--r-card); object-fit: cover; transform: scaleX(-1); display: block; margin-top: 10px; }

/* =========================== toasts / incoming / drop =========================== */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--text-strong); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); animation: toastIn .2s ease; pointer-events: auto; max-width: 90vw; }
.toast.error { background: var(--rose); color: var(--rose-ink); }
.toast.success { background: var(--mint); color: #04261a; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }

.incoming-call { position: fixed; top: 76px; right: 20px; z-index: 950; width: 300px; padding: 16px; background: var(--pop-bg); border: 1px solid var(--air); border-radius: 20px; box-shadow: var(--shadow), 0 0 30px var(--air-glow); display: flex; align-items: center; gap: 14px; }
.incoming-call .avatar { width: 52px; height: 52px; font-size: 20px; animation: ring 1.4s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 var(--air-glow); } 70% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
.incoming-call .who { flex: 1; min-width: 0; }
.incoming-call h3 { margin: 0; font-size: 16px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incoming-call p { margin: 2px 0 0; color: var(--air); font-size: 13px; font-weight: 600; }
.incoming-call .row { display: flex; gap: 8px; }
.incoming-call .row button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.call-accept { background: var(--mint); color: #04261a; }
.call-decline { background: var(--rose); color: var(--rose-ink); }

.drop-zone { position: fixed; inset: 0; z-index: 1500; background: var(--scrim); display: grid; place-items: center; pointer-events: none; }
.drop-zone > div { background: var(--air); color: var(--air-ink); padding: 32px 48px; border-radius: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.drop-zone b { font-family: var(--display); font-size: 22px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--s4); border-top-color: var(--air); border-radius: 50%; animation: spin 1.5s linear infinite; margin: 28px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.welcome { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(20px, 6vw, 72px); gap: 14px; }
.welcome h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.02; color: var(--text-strong); font-weight: 800; max-width: 16ch; }
.welcome p { margin: 0; color: var(--muted); font-size: 16px; max-width: 46ch; }
.welcome .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* =========================== responsive =========================== */
@media (max-width: 1180px) {
    .people { position: absolute; right: var(--gap); top: calc(var(--top-h)); bottom: var(--gap); z-index: 30; box-shadow: var(--shadow); border: 1px solid var(--line); }
    .frame { position: relative; }
    .h-search input { width: 150px; }
    .h-search input:focus { width: 200px; }
}
@media (max-width: 900px) {
    .dock-people { display: none; }
    .dock { justify-content: space-between; }
}
@media (max-width: 760px) {
    :root { --gap: 0px; --top-h: 54px; }
    .mobile-only { display: grid !important; }
    .topbar-title.mobile-only { display: block !important; }
    .topbar { gap: 8px; padding: 0 8px; }
    .topbar > .brand, .spaces { display: none; }
    .me-chip .who { display: none; }
    .me-chip { padding: 2px; }
    .me-bar .icon-btn[data-act=mute], .me-bar .icon-btn[data-act=deafen], .me-bar .icon-btn[data-act=toggle-theme] { display: none; }
    .frame { padding: 0; }
    .panel { border-radius: 0; }
    .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: min(320px, 88vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow); }
    .nav-spaces { display: flex !important; gap: 8px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; scrollbar-width: none; }
    .nav-spaces .space .space-label { display: none; }
    .app.nav-open .side { transform: none; }
    .app.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
    .people { position: fixed; top: var(--top-h); right: 0; bottom: 0; width: min(320px, 88vw); }
    .chat-header { padding-left: 14px; }
    .chat-header .h-topic, .h-search { display: none; }
    .msg { padding-right: 14px; padding-left: 64px; }
    .msg .msg-avatar { left: 12px; }
    .msg-side-time { width: 64px; }
    .msg-actions { right: 8px; }
    .composer-wrap { padding: 0 8px 8px; }
    .dock { margin: 0; border-radius: 0; gap: 8px; padding-left: 14px; }
    .dock-room .t2 { max-width: 40vw; }
    .ctl { width: 40px; height: 40px; }
    .ctl.leave { width: 46px; }
    .ctl-sep, .ctl.hide-sm { display: none; }
    .stage.dm { height: 38vh; }
    .auth { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
    .mobile-brand { display: inline-flex; }
    .settings { flex-direction: column; }
    .settings-nav { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 12px; gap: 4px; flex-shrink: 0; }
    .settings-nav .brand, .settings-nav .grp { display: none; }
    .settings-nav button.tab { width: auto; padding: 8px 12px; }
    .settings-nav button.tab.danger { margin-top: 0; }
    .settings-content { margin: 0; border-radius: 0; }
    .settings-content .inner { padding: 24px 16px 80px; }
    .settings-close { top: 12px; right: 12px; position: fixed; }
    .profile-editor { grid-template-columns: 1fr; }
    .profile-editor .preview { position: static; order: -1; }
    .two-col, .theme-cards { grid-template-columns: 1fr; }
    .incoming-call { left: 12px; right: 12px; width: auto; top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* sound-wave pattern used on banners without an image */
:root { --wave-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cpath d='M0 24c10 0 10-14 20-14s10 28 20 28 10-20 20-20 10 12 20 12 10-18 20-18 10 24 20 24 10-12 20-12 10 6 20 6' fill='none' stroke='white' stroke-opacity='.16' stroke-width='2'/%3E%3C/svg%3E"); }
.space-card .banner.pattern, .pcard .pc-banner.pattern { background-size: 160px 48px; background-repeat: repeat; background-position: 0 30px; }
.modal.profile { position: relative; }
.pm-close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 22, 26, .55); color: #fff; }
.pm-close:hover { background: rgba(8, 22, 26, .85); }
.modal.profile .pcard { max-height: calc(100vh / var(--ui-scale, 1) - 32px); overflow-y: auto; }
.field .swatch-picker { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.field .swatch-picker:focus { box-shadow: 0 0 0 3px var(--air-soft); }
.stage-title:empty { display: none; }

/* =========================== v4: friends, presence, GIFs, sounds =========================== */
.segs { display: flex; gap: 4px; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.seg { height: 30px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg:hover { background: var(--s3); color: var(--text); }
.seg.on { background: var(--s4); color: var(--text-strong); }
.seg-n { background: var(--rose); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; line-height: 17px; }

.friends { padding: 18px 22px 28px; max-width: 900px; }
.fr-filter { margin-bottom: 16px; }
.fr-count { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 6px 8px; }
.fr-count span { color: var(--faint); margin-left: 4px; }
.fr-row { display: flex; align-items: center; gap: 14px; padding: 10px 10px; border-radius: var(--r-card); cursor: pointer; border-top: 1px solid var(--line-soft); }
.fr-row:hover { background: var(--s3); border-top-color: transparent; }
.fr-row:hover + .fr-row { border-top-color: transparent; }
.fr-info { flex: 1; min-width: 0; line-height: 1.3; }
.fr-info .n { font-family: var(--display); font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-info .u { font-family: var(--ui); font-weight: 400; font-size: 13px; color: var(--faint); display: none; }
.fr-row:hover .fr-info .u { display: inline; }
.fr-info .s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-acts { display: flex; gap: 6px; }
.fr-acts .icon-btn { background: var(--s2); border-radius: 50%; }
.fr-row:hover .fr-acts .icon-btn { background: var(--s1); }
.icon-btn.ok:hover { color: var(--mint); }
.fr-empty { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fr-empty .ring { width: 88px; height: 88px; border-radius: 50%; background: var(--s3); color: var(--air); display: grid; place-items: center; margin-bottom: 6px; }
.fr-empty h3 { margin: 0; color: var(--text-strong); font-size: 20px; }
.fr-empty p { margin: 0 0 10px; }
.add-friend { max-width: 640px; }
.add-friend h2 { margin: 6px 0 4px; font-size: 26px; color: var(--text-strong); }
.add-row { display: flex; gap: 10px; margin-top: 16px; padding: 6px; border-radius: 999px; background: var(--s3); border: 1px solid var(--line); }
.add-row:focus-within { border-color: var(--air); box-shadow: 0 0 0 3px var(--air-soft); }
.add-row .input { border: 0; background: transparent; box-shadow: none !important; }
.add-msg { margin: 10px 14px; font-size: 14px; font-weight: 600; }
.add-msg.ok { color: var(--mint); }
.add-msg.err { color: var(--rose); }
.add-tip { display: flex; gap: 14px; align-items: center; margin-top: 34px; padding: 16px; border-radius: var(--r-card); background: var(--s1); }
.add-tip p { margin: 2px 0 0; font-size: 14px; }

.act-line { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-line svg { flex-shrink: 0; color: var(--lilac); }
.act-line b { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.act-line.live svg { color: var(--air); }
.activity-card { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--s3); }
.activity-card.live { background: var(--air-soft); }
.ac-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--s4); color: var(--lilac); display: grid; place-items: center; flex-shrink: 0; }
.activity-card.live .ac-icon { background: var(--air); color: var(--air-ink); }
.add-tip .ac-icon { color: var(--air); }
.ac-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.ac-text b { display: block; color: var(--text-strong); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-text > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-time { color: var(--mint); font-weight: 600; font-variant-numeric: tabular-nums; }
.activity-card.live .ac-time { color: var(--air); }
.ac-people { display: flex; margin-top: 6px; }
.ac-people .avatar { margin-right: -5px; box-shadow: 0 0 0 2px var(--pop-bg); }
.active-card { padding: 12px; border-radius: var(--r-card); background: var(--s2); margin-bottom: 10px; cursor: pointer; }
.active-card:hover { box-shadow: inset 0 0 0 1px var(--line); }
.active-card .ac-head { display: flex; gap: 10px; align-items: center; }
.active-card .ac-head b { font-family: var(--display); color: var(--text-strong); }
.active-card .ac-head .s { font-size: 12.5px; color: var(--muted); }
.active-card .pc-sect { margin-top: 10px; }
.active-card .pc-sect h4 { display: none; }
.default-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px; background: var(--air-soft); color: var(--air); font-size: 11.5px; font-weight: 700; }
.activity-preview { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-card); background: var(--s1); }
.activity-preview > .pc-sect, .activity-preview .pc-sect.flush { flex: 1; margin: 0; }
.activity-preview h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.token-card { margin-top: 14px; padding: 16px; border-radius: var(--r-card); background: var(--s1); border: 1px solid var(--air); }
.token-card p { margin: 0 0 10px; font-size: 14px; }
pre.code { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; color: var(--text); }

.gif-btn { width: auto; padding: 0 9px; border-radius: 8px; height: 26px; margin: 7px 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; border: 1.5px solid currentColor; }
.gif-btn:hover { background: transparent; color: var(--air); }
.gif-pop { display: flex; flex-direction: column; height: min(460px, 70vh); }
.gif-search { margin: 10px 10px 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid transparent; outline: 0; background: var(--s3); color: var(--text); font-size: 14px; }
.gif-search:focus { border-color: var(--line); }
.gif-tabs { display: flex; gap: 4px; padding: 4px 10px 8px; }
/* a real grid: CSS columns inside this fixed-height scroller overflowed sideways into one long row */
.gif-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 10px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; align-items: start; }
.gif-item { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--s3); }
/* even tiles; the GIF's own aspect ratio (set inline) is overridden so rows line up */
.gif-item img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3 !important; object-fit: cover; }
.gif-item:hover img { filter: brightness(1.08); }
.gif-item:hover { box-shadow: 0 0 0 2px var(--air); }
.gif-empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: var(--muted); font-size: 13.5px; }
.gif-empty b { display: block; color: var(--text-strong); font-size: 15px; margin-bottom: 4px; }
.gif-loading { grid-column: 1 / -1; }
.gif-foot { padding: 8px 12px; font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--line-soft); }
.gif-fav { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 16, 19, .6); color: #fff; opacity: 0; transition: opacity .12s; }
.gif-fav.on { color: var(--air); }
.gif-fav.on svg { fill: currentColor; }
.gif-item:hover .gif-fav, .media-wrap:hover .gif-fav, .gif-fav:focus-visible { opacity: 1; }
.media-wrap { position: relative; display: inline-block; max-width: 100%; }
.att-img.embed { max-height: 300px; }

.sound-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sound-card { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border: 2px solid var(--line); border-radius: var(--r-card); cursor: pointer; font-weight: 600; }
.sound-card span { flex: 1; }
.sound-card input { position: absolute; opacity: 0; pointer-events: none; }
.sound-card.sel { border-color: var(--air); background: var(--air-soft); }
.sound-card:focus-within { outline: 2px solid var(--air); outline-offset: 2px; }

@media (max-width: 1180px) { .segs { max-width: 46vw; } }
@media (max-width: 760px) {
    .chat-header .segs { position: absolute; left: 0; right: 0; top: var(--head-h); padding: 8px 12px; margin: 0; border: 0; background: var(--s2); z-index: 2; border-bottom: 1px solid var(--line-soft); max-width: none; }
    .chat-header .h-name { display: none; }
    .friends { padding-top: 58px; }
    .sound-cards { grid-template-columns: 1fr 1fr; }
    .add-row { flex-direction: column; border-radius: var(--r-card); }
    .gif-fav { opacity: 1; }
}

/* =========================== v5: stickers, easter eggs, retro theme =========================== */
.sticker-msg { margin-top: 4px; }
.sticker { width: 160px; height: 160px; object-fit: contain; display: block; cursor: pointer; transition: transform .15s; }
.sticker:hover { transform: scale(1.04) rotate(-2deg); }
.compact .sticker { width: 96px; height: 96px; }

.stk-pop { display: flex; flex-direction: column; height: min(470px, 72vh); }
.stk-body { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.stk-pack { margin-bottom: 8px; }
.stk-head { display: flex; align-items: center; gap: 8px; padding: 8px 4px 6px; font-size: 13px; font-weight: 700; color: var(--muted); position: sticky; top: 0; background: var(--pop-bg); z-index: 1; }
.stk-head .stk-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-pack-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; overflow: hidden; background: var(--srv, var(--s4)); color: #fff; font-family: var(--display); font-size: 9px; font-weight: 800; }
.stk-pack-icon img { width: 100%; height: 100%; object-fit: cover; }
.stk-pack-icon.brand { background: var(--air); color: var(--air-ink); }
.stk-add { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--air); padding: 2px 8px; border-radius: 999px; }
.stk-add:hover { background: var(--air-soft); }
.stk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stk-cell { aspect-ratio: 1; border-radius: 12px; padding: 6px; display: grid; place-items: center; }
.stk-cell:hover { background: var(--s3); }
.stk-cell img { width: 100%; height: 100%; object-fit: contain; }
.stk-empty { margin: 4px; font-size: 13px; color: var(--faint); }
.stk-info { display: flex; gap: 14px; align-items: center; padding: 14px; }
.stk-info img { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.stk-info b { font-family: var(--display); font-size: 17px; color: var(--text-strong); }
.stk-info p { margin: 2px 0 10px; font-size: 13px; }
.stk-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 10px; }
.stk-tile { position: relative; background: var(--s3); border-radius: 12px; padding: 8px 6px 6px; text-align: center; }
.stk-tile img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto 4px; }
.stk-tile span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pop-bg); color: var(--rose); opacity: 0; }
.stk-tile:hover .stk-del, .stk-del:focus-visible { opacity: 1; }
.stk-add-row { display: flex; gap: 8px; align-items: center; }
.stk-add-row .input { padding: 8px 12px; }
.stk-add-row .stk-tag { width: 64px; text-align: center; flex-shrink: 0; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 4000; overflow: hidden; }
.confetti i { position: absolute; top: -40px; width: 8px; border-radius: 4px; animation: confettiFall linear forwards; }
@keyframes confettiFall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
.barrel-roll { animation: barrelRoll 1.2s cubic-bezier(.45, .05, .25, 1); }
@keyframes barrelRoll { to { transform: rotate(360deg); } }
.brand-mark.wiggle { animation: wiggle .35s ease; }
@keyframes wiggle { 30% { transform: rotate(-14deg) scale(1.08); } 70% { transform: rotate(10deg); } }
.studio-party { --air: #ff6bd6; }
.studio-party .panel, .studio-party .dock { animation: partyGlow 1.4s linear infinite; }
@keyframes partyGlow {
    0% { box-shadow: 0 0 0 2px #ffc94d, 0 0 28px rgba(255, 201, 77, .5); }
    33% { box-shadow: 0 0 0 2px #52e0a4, 0 0 28px rgba(82, 224, 164, .5); }
    66% { box-shadow: 0 0 0 2px #a9b8ff, 0 0 28px rgba(169, 184, 255, .5); }
    100% { box-shadow: 0 0 0 2px #ffc94d, 0 0 28px rgba(255, 201, 77, .5); }
}
.studio-party .brand-mark { animation: wiggle .5s ease infinite; }

[data-theme="retro"] {
    --bg: #1b120c; --s1: #241912; --s2: #2b1e15; --s3: #3a2a1d; --s4: #4a3625;
    --line: #5a4330; --line-soft: rgba(255, 214, 160, .1);
    --text: #f3e3c7; --text-strong: #fff4de; --muted: #bfa585; --faint: #8a7458;
    --air: #ff9f1c; --air-ink: #2b1500; --air-soft: rgba(255, 159, 28, .16); --air-glow: rgba(255, 159, 28, .5);
    --mint: #a3c46c; --rose: #e4572e; --rose-ink: #fff; --lilac: #e0b872; --lilac-soft: rgba(224, 184, 114, .16);
    --idle: #e0b872; --offline: #7d6650; --pop-bg: #241912; --stage-bg: #140d08; --scrim: rgba(20, 12, 6, .7);
    --shadow: 0 18px 50px rgba(0, 0, 0, .55);
    color-scheme: dark;
}
[data-theme="retro"] .main::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: repeating-linear-gradient(to bottom, rgba(255, 220, 170, .025) 0 1px, transparent 1px 3px);
}

/* =========================== v8: monochrome themes =========================== */
/* Zero-chroma greys; "on air" is white on dark, near-black on light. The one hue kept is a muted red (--rose) for danger:
   destructive actions, errors, leave/decline call and a muted mic. Statuses use shapes (see html.status-shapes). */
[data-theme="mono"] {
    --bg: #0b0b0b; --s1: #151515; --s2: #1b1b1b; --s3: #292929; --s4: #373737;
    --line: #3b3b3b; --line-soft: rgba(255, 255, 255, .09);
    --text: #ececec; --text-strong: #ffffff; --muted: #a8a8a8; --faint: #808080;
    --air: #f2f2f2; --air-ink: #121212; --air-soft: rgba(255, 255, 255, .12); --air-glow: rgba(255, 255, 255, .4);
    --mint: #e6e6e6; --rose: #e57c83; --rose-ink: #1a1a1a; --lilac: #f5f5f5; --lilac-soft: rgba(255, 255, 255, .13);
    --idle: #b3b3b3; --offline: #767676; --pop-bg: #131313; --stage-bg: #090909; --scrim: rgba(0, 0, 0, .7);
    --shadow: 0 18px 50px rgba(0, 0, 0, .6);
    --tile-mix: #161616; --tile-screen: #090909; /* voice tile bases (app.js tileBg) */
    color-scheme: dark;
}
[data-theme="mono-light"] {
    --bg: #e3e3e3; --s1: #f0f0f0; --s2: #fbfbfb; --s3: #e6e6e6; --s4: #d4d4d4;
    --line: #c4c4c4; --line-soft: rgba(0, 0, 0, .08);
    --text: #1c1c1c; --text-strong: #0a0a0a; --muted: #545454; --faint: #737373;
    --air: #171717; --air-ink: #ffffff; --air-soft: rgba(0, 0, 0, .08); --air-glow: rgba(0, 0, 0, .3);
    --mint: #1f1f1f; --rose: #b0353e; --rose-ink: #ffffff; --lilac: #111111; --lilac-soft: rgba(0, 0, 0, .08);
    --idle: #6b6b6b; --offline: #7f7f7f; --pop-bg: #ffffff; --stage-bg: #141414; --scrim: rgba(10, 10, 10, .4);
    --shadow: 0 18px 50px rgba(0, 0, 0, .16);
    --tile-mix: #1c1c1c; --tile-screen: #0d0d0d;
    color-scheme: light;
}
/* the stage stays dark in Monochrome light (as in Day), so it borrows the dark theme's on-air and danger inks */
[data-theme="mono-light"]:not([style*="--air"]) :is(.stage, .gif-fav) { --air: #f2f2f2; --air-ink: #121212; --air-soft: rgba(255, 255, 255, .12); --air-glow: rgba(255, 255, 255, .4); }
[data-theme="mono-light"] .stage { --rose: #e57c83; --rose-ink: #1a1a1a; }
html.hc[data-theme="mono"] { --muted: #d4d4d4; --faint: #b0b0b0; --line: #8a8a8a; --line-soft: rgba(255, 255, 255, .28); --text: #f7f7f7; }
html.hc[data-theme="mono-light"] { --muted: #303030; --faint: #4d4d4d; --line: #808080; --line-soft: rgba(0, 0, 0, .22); --text: #050505; }
/* statuses: grey fills, told apart by shape; do-not-disturb is a status, not a danger */
[data-theme="mono"] .st { --rose: #cfcfcf; }
[data-theme="mono-light"] .st { --rose: #3a3a3a; }
/* attention without colour: counters invert, LIVE is on air, links underline */
[data-theme^="mono"] :is(.space .count, .badge, .seg-n) { background: var(--text-strong); color: var(--bg); }
[data-theme^="mono"] .live-pill { background: var(--air); color: var(--air-ink); }
[data-theme^="mono"] .new-divider { color: var(--text-strong); }
[data-theme^="mono"] .new-divider::before { border-top-color: var(--muted); }
[data-theme^="mono"] .msg-content a { text-decoration: underline; text-underline-offset: 2px; }
[data-theme^="mono"] :is(.toast.success, .call-accept) { color: var(--bg); }
/* chrome that hard-codes teal, amber or pink */
[data-theme^="mono"] .stage-empty .ring { background: var(--air-soft); }
[data-theme^="mono"] :is(.stage-empty, .tile-placeholder) { color: #bdbdbd; }
[data-theme^="mono"] .tile-label .off { color: var(--rose); }
[data-theme^="mono"] :is(.tile-label, .tile-btns button, .gif-fav, .space-card .menu-btn, .pm-close) { background: rgba(0, 0, 0, .6); }
[data-theme^="mono"] :is(.space-card .menu-btn, .pm-close):hover { background: rgba(0, 0, 0, .82); }
[data-theme^="mono"] .btn-danger:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 24%, transparent); }
[data-theme^="mono"] :is(.ctl.off, .danger-tag) { background: color-mix(in srgb, var(--rose) 16%, transparent); }
[data-theme^="mono"] .danger-row { border-color: color-mix(in srgb, var(--rose) 40%, transparent); }
[data-theme^="mono"] .deco-pill { color: var(--text); background: var(--s3); border-color: var(--line); }
[data-theme="mono-light"] .room-person:hover { background: var(--line-soft); }
@media (prefers-reduced-motion: reduce) { .studio-party .panel, .studio-party .dock, .studio-party .brand-mark { animation: none; } }

/* =========================== v5: roles, badges, space settings =========================== */
.ico.flip { transform: rotate(180deg); }
.danger-text { color: var(--rose) !important; }
.danger-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255, 107, 122, .16); color: var(--rose); vertical-align: 1px; }

/* guild badge */
.gbadge { --bc: var(--air); display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 4px; border-radius: 6px; flex-shrink: 0;
    background: color-mix(in srgb, var(--bc) 18%, transparent); color: var(--bc); border: 1px solid color-mix(in srgb, var(--bc) 40%, transparent);
    font: 800 10.5px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; vertical-align: middle; }
.gbadge.static { cursor: default; }
.gbadge:not(.static):hover { background: color-mix(in srgb, var(--bc) 30%, transparent); }
.gbadge.big { height: 24px; padding: 0 9px 0 6px; font-size: 13px; gap: 5px; border-radius: 8px; }
.gbadge span { overflow: visible !important; white-space: nowrap; }
/* inline after a bare name: vertical-align: middle centres on the x-height, lift it to the cap-height centre */
.dm-item .n > .gbadge, .fr-info .n > .gbadge { margin-left: 4px; position: relative; top: -1px; }
.bg-ico { flex-shrink: 0; object-fit: contain; image-rendering: auto; }
img.bg-ico { border-radius: 3px; }
.badge-pop { padding: 14px; }
.badge-pop .bp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.badge-pop .bp-head b { display: block; color: var(--text-strong); margin-bottom: 5px; }
.badge-pop .bp-icon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-size: 18px; }
.badge-pop .bp-icon img { width: 100%; height: 100%; object-fit: cover; }
.badge-pop .bp-icon.glyph { background: color-mix(in srgb, var(--bc) 20%, var(--s3)); color: var(--bc); }
.badge-pop p { font-size: 13.5px; margin: 0 0 12px; }
.badge-pop .bp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-row:empty { display: none; }
.badge-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-choice { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 13.5px; max-width: 100%; }
.badge-choice .gbadge { margin: 0; }
.badge-choice span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-choice:hover { background: var(--s3); }
.badge-choice.sel { border-color: var(--air); background: var(--air-soft); }

/* role display */
.role-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; }
img.role-icon { object-fit: contain; border-radius: 3px; }
.role-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rc, var(--faint)); flex-shrink: 0; }
.role-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.role-chip { --rc: var(--faint); display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 8px; background: var(--s3); border: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600; color: var(--text); max-width: 100%; }
.role-chip > i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); flex-shrink: 0; }
.role-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip button { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -3px; border-radius: 50%; color: var(--muted); }
.role-chip button:hover { background: var(--rose); color: var(--rose-ink); }
.role-chip.add { padding: 0; width: 24px; justify-content: center; color: var(--muted); cursor: pointer; }
.role-chip.add:hover { color: var(--text-strong); background: var(--s4); }
.owner-line { display: flex; align-items: center; gap: 6px; color: var(--air) !important; font-weight: 600; margin-bottom: 6px !important; }
.msg-content .mention.role { --rc: var(--lilac); background: color-mix(in srgb, var(--rc) 18%, transparent); color: var(--rc); }
.msg-content .mention.role:hover { background: var(--rc); color: var(--s2); }
.mention-popup .role-av { background: color-mix(in srgb, var(--c) 30%, var(--s3)) !important; color: var(--c); font-weight: 800; }
.role-picker .rp-list { max-height: 280px; overflow-y: auto; }
.role-picker .rp-search { margin: 4px 4px 6px; width: calc(100% - 8px); }
.role-toggle .left { min-width: 0; }
.role-toggle .tick { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.role-toggle.on .tick { background: var(--air); border-color: var(--air); color: var(--air-ink); }
.composer-box.locked { opacity: .6; }
.composer-box.locked textarea { cursor: not-allowed; }

/* space settings */
.ss-space { display: flex; align-items: center; gap: 12px; padding: 0 8px 20px; }
.ss-space .ss-icon { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; flex-shrink: 0; background: var(--srv); color: #fff; font-weight: 800; font-family: var(--display); }
.bp-icon:not(.glyph) { background: var(--srv); color: #fff; font-weight: 800; font-family: var(--display); }
.ss-space .ss-icon img { width: 100%; height: 100%; object-fit: cover; }
.ss-space b { display: block; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.ss-space span { font-size: 12.5px; color: var(--muted); }
.settings-content .inner.wide { max-width: 1040px; }
.ss-preview .space-card { border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line); background: var(--s1); }
.lock-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; background: var(--air-soft); color: var(--text); font-size: 13.5px; }
.lock-note svg { color: var(--air); flex-shrink: 0; margin-top: 1px; }
.roles-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.roles-list { position: sticky; top: 0; }
.roles-list .hint { font-size: 12.5px; color: var(--faint); margin: 10px 4px 0; }
.role-items { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.role-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; text-align: left; color: var(--text); font-weight: 600; width: 100%; }
.role-row:hover { background: var(--s3); }
.role-row.sel { background: var(--s4); color: var(--text-strong); }
.role-row .rn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-row .rc { font-size: 12px; color: var(--muted); font-weight: 600; }
.role-row .rl { color: var(--faint); display: inline-flex; }
.role-editor h3 { margin-top: 26px; }
.re-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.re-preview { flex: 1; padding: 14px 16px; border-radius: var(--r-card); background: var(--s1); border: 1px solid var(--line-soft); }
.re-title { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--text-strong); font-family: var(--display); }
.re-title + .re-msg { margin-top: 12px; }
.re-msg { display: flex; gap: 12px; align-items: flex-start; }
.re-msg .msg-content { font-size: 14.5px; }
.re-tools { display: flex; gap: 4px; }
.re-tools .icon-btn:disabled { opacity: .35; pointer-events: none; }
.icon-btn.danger:hover { color: var(--rose); }
.re-emoji { width: 74px !important; text-align: center; font-size: 18px; }
.re-everyone { margin: 0 0 8px; }
.perm-group h4 { margin: 18px 0 2px; font-size: 12.5px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.setting-row.perm.disabled { opacity: .55; }
.setting-row.perm.disabled .switch span { cursor: not-allowed; }
.count-inline { font-weight: 600; color: var(--muted); font-size: 13px; margin-left: 4px; }
.role-holders { display: flex; flex-direction: column; gap: 4px; }
.holder { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.holder:hover { background: var(--s3); }
.holder span { flex: 1; font-weight: 600; }
.holder-add { margin-top: 8px; max-width: 320px; }
.save-bar { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow); animation: fade .15s; z-index: 5; }
.save-bar span { flex: 1; font-weight: 600; color: var(--text-strong); }
.sm-search { max-width: 360px; margin-bottom: 14px; }
.sm-list { display: flex; flex-direction: column; gap: 2px; }
.sm-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-card); }
.sm-row:hover { background: var(--s1); }
.sm-av { cursor: pointer; flex-shrink: 0; }
.sm-who { flex: 1; min-width: 0; }
.sm-who .n { display: flex; align-items: center; gap: 4px; line-height: 22px; font-weight: 700; color: var(--name, var(--text-strong)); }
.sm-who .u { font-size: 13px; color: var(--muted); }
.badge-icons { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 6px; }
.badge-icons .bi { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: var(--s3); border: 2px solid transparent; }
.badge-icons .bi:hover { color: var(--text-strong); }
.badge-icons .bi.sel { border-color: var(--air); color: var(--air); background: var(--air-soft); }
.badge-icons .bi img { width: 22px; height: 22px; object-fit: contain; }
#bgTag { text-transform: uppercase; font-family: var(--display); font-weight: 800; letter-spacing: .08em; max-width: 160px; }
#bgTag.bad { border-color: var(--rose); }
.bg-preview { padding: 18px; border-radius: var(--r-panel); background: var(--s1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.bgp-big { display: grid; place-items: center; padding: 10px 0 4px; }
.bgp-big .gbadge { transform: scale(1.5); }
.bgp-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.bgp-row .mem { cursor: default; }
@media (max-width: 900px) {
    .space-settings .ss-space { width: 100%; padding: 0 52px 6px 4px; }
    .roles-layout { grid-template-columns: 1fr; }
    .roles-list { position: static; }
}

/* =========================== v6: badges, colour wheel, look, accessibility =========================== */
/* profile badges */
.pc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 2px; padding: 5px 6px; border-radius: 10px; background: var(--s1); width: fit-content; border: 1px solid var(--line-soft); }
.popover .pc-badges, .modal .pc-badges { background: color-mix(in srgb, var(--s3) 60%, transparent); }
.pbadge { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 6px; cursor: default; }
.pbadge:hover, .pbadge:focus-visible { background: var(--s4); }
.pbadge img { width: 22px; height: 22px; }
.vl-owner { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.badge-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.badge-shelf .spinner { grid-column: 1 / -1; }
.bs-card { display: flex; gap: 14px; padding: 14px; border-radius: var(--r-card); background: var(--s1); border: 1px solid var(--line-soft); }
.bs-card.locked .bs-art { filter: grayscale(1); opacity: .35; }
.bs-art { width: 48px; height: 48px; flex-shrink: 0; }
.bs-info { min-width: 0; flex: 1; }
.bs-title { display: flex; align-items: center; gap: 8px; }
.bs-title b { color: var(--text-strong); }
.bs-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--s3); color: var(--muted); }
.bs-card.earned .bs-tag { background: var(--air-soft); color: var(--air); }
.bs-info p { margin: 3px 0 8px; font-size: 13px; color: var(--muted); }
.bs-stages { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.bs-stage { display: inline-flex; padding: 2px; border-radius: 7px; border: 1px solid transparent; }
.bs-stage img { width: 22px; height: 22px; filter: grayscale(1); opacity: .3; }
.bs-stage.on img { filter: none; opacity: 1; }
.bs-stage.cur { border-color: var(--air); background: var(--air-soft); }
.bs-prog { font-size: 12.5px; color: var(--muted); }
.bs-prog .bar { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; margin-bottom: 4px; }
.bs-prog .bar i { display: block; height: 100%; background: var(--air); border-radius: 3px; }

/* colour wheel */
.cwf { position: relative; display: inline-block; }
.cwf-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 6px; border-radius: 12px; background: var(--s3); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 13.5px; }
.cwf-btn:hover:not(:disabled) { border-color: var(--faint); }
.cwf-btn:disabled { opacity: .5; cursor: not-allowed; }
.cwf-btn[aria-expanded="true"] { border-color: var(--air); box-shadow: 0 0 0 3px var(--air-soft); }
.cwf-sw { width: 28px; height: 28px; border-radius: 8px; background: var(--v); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.cwf-sw.none { background: repeating-conic-gradient(var(--s4) 0 25%, var(--s2) 0 50%) 0 0 / 10px 10px; }
.cwf-panel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: flex; gap: 16px; padding: 14px; border-radius: 16px; background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow); animation: fade .12s; }
.setting-row .cwf-panel { left: auto; right: 0; }
.cw-wrap { position: relative; flex-shrink: 0; touch-action: none; }
.cw-wrap canvas { display: block; border-radius: 50%; cursor: crosshair; }
.cw-knob { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .4); pointer-events: none; }
.cw-knob:focus-visible { outline: 2px solid var(--air); outline-offset: 3px; pointer-events: auto; }
.cw-side { display: flex; flex-direction: column; gap: 12px; width: 178px; }
.cw-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cwf .cw-val { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; padding: 0; border: 0; border-radius: 6px; background: linear-gradient(90deg, #000, var(--hue, #fff)); outline: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.cw-val::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer; }
.cw-val::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); cursor: pointer; }
.cw-val:focus-visible { box-shadow: 0 0 0 3px var(--air-soft); }
.cw-hexrow { display: flex; gap: 8px; align-items: center; }
.cw-prev { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.cw-hex { font-family: var(--mono); text-transform: uppercase; height: 36px; padding: 0 10px; min-width: 0; }
.cw-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-rc { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.cw-rc:hover { transform: scale(1.12); }
.cw-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: auto; }
.cw-acts .cw-drop { margin-right: auto; }
@media (max-width: 560px) { .cwf-panel { flex-direction: column; align-items: center; } .setting-row .cwf-panel { right: -8px; } }

/* segmented control + ranges */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--s3); flex-shrink: 0; flex-wrap: wrap; }
.seg button { padding: 6px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--s2); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.range-box { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.range-box input[type=range] { width: 180px; accent-color: var(--air); }
.range-box output { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13.5px; }
.avr-row { align-items: flex-start; }
.avr-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.avr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--s2); color: var(--text); font-size: 13px; }
.avr-chip .avatar { width: 20px; height: 20px; font-size: 10px; }
.a11y-preview { margin-top: 22px; padding: 16px; border-radius: var(--r-card); background: var(--s1); border: 1px solid var(--line-soft); }
.a11y-preview .prev-btns { display: flex; gap: 8px; margin-top: 12px; }
.lang-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.lang-row { margin: 0; }
.lang-row b { display: block; color: var(--text-strong); }
.info-card { padding: 14px 16px; border-radius: var(--r-card); background: var(--s1); border: 1px solid var(--line-soft); margin-bottom: 6px; }
.info-card b { color: var(--text-strong); }
.info-card p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.danger-h { color: var(--rose) !important; }
.danger-row { border: 1px solid rgba(255, 107, 122, .35); border-radius: var(--r-card); padding: 14px 16px; }
@media (max-width: 700px) { .setting-row.range-row, .setting-row:has(.seg) { flex-wrap: wrap; } .range-box input[type=range] { width: 150px; } }

/* look: corners, avatars, spacing, wallpaper, chat text */
[data-corners="sharp"] { --r-card: 6px; --r-panel: 8px; }
[data-corners="round"] { --r-card: 20px; --r-panel: 26px; }
[data-corners="sharp"] .btn { border-radius: 8px; }
[data-avatar="rounded"] .avatar, [data-avatar="rounded"] .avatar img { border-radius: 30%; }
[data-avatar="square"] .avatar, [data-avatar="square"] .avatar img { border-radius: 12%; }
.msg { margin-top: var(--msg-gap, 14px); }
.msg.grouped { margin-top: 0; }
.msg-content { font-size: calc(15px * var(--chat-scale, 1)); }
.msg-content.jumbo { font-size: calc(46px * var(--chat-scale, 1)); }
[data-wallpaper="waves"] .messages { background-image: var(--wave-pattern); background-size: 160px 48px; background-attachment: local; }
[data-wallpaper="dots"] .messages { background-image: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1.2px, transparent 1.4px); background-size: 22px 22px; background-attachment: local; }
[data-wallpaper="grid"] .messages { background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 28px 28px; background-attachment: local; }

/* accessibility */
html.desat body > * { filter: saturate(var(--sat, 1)); }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.hc { --muted: #c4d8d6; --faint: #9fb8b6; --line: #5f8f99; --line-soft: rgba(196, 230, 230, .3); --text: #f4fbfa; }
html.hc[data-theme="day"] { --muted: #2a4447; --faint: #46605f; --line: #7d9a96; --line-soft: rgba(16, 38, 43, .22); --text: #061418; }
html.hc[data-theme="retro"] { --muted: #e6cfae; --faint: #c9ad86; --line: #8a6a48; }
html.hc .btn-secondary, html.hc .input, html.hc .field input:not([type=radio]):not([type=checkbox]), html.hc .field textarea { border: 1px solid var(--line); }
html.readable-font { --ui: "Atkinson Hyperlegible", "Figtree", system-ui, sans-serif; --display: "Atkinson Hyperlegible", "Figtree", system-ui, sans-serif; }
html.readable-font .msg-content { letter-spacing: .01em; }
html.underline-links a, html.underline-links .msg-content a { text-decoration: underline; text-underline-offset: 2px; }
html.focus-rings :focus { outline: 2px solid var(--air) !important; outline-offset: 2px; }
html:is(.status-shapes, [data-theme^="mono"]) .avatar .st.idle { background: radial-gradient(circle at 30% 30%, var(--ring, var(--s1)) 0 34%, var(--idle) 36%) !important; }
html:is(.status-shapes, [data-theme^="mono"]) .avatar .st.dnd { background: linear-gradient(var(--rose), var(--rose)) !important; }
html:is(.status-shapes, [data-theme^="mono"]) .st.dnd::after { content: ""; position: absolute; left: 22%; right: 22%; top: 42%; height: 16%; border-radius: 2px; background: var(--ring, var(--s1)); }
html:is(.status-shapes, [data-theme^="mono"]) .avatar .st.offline, html:is(.status-shapes, [data-theme^="mono"]) .avatar .st.invisible { background: var(--ring, var(--s1)) !important; box-shadow: 0 0 0 3px var(--ring, var(--s1)), inset 0 0 0 3px var(--offline) !important; }
html:is(.status-shapes, [data-theme^="mono"]) .status-dot.idle { border-radius: 50% 50% 50% 0; }

/* 67 */
.six-seven { position: fixed; inset: 0; z-index: 3000; pointer-events: none; display: grid; place-items: center; animation: ss-fade 2.5s ease forwards; }
.ss-stage { display: flex; align-items: center; gap: 2vw; font-size: min(18vw, 170px); line-height: 1; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
.ss-hand { font-size: .62em; display: inline-block; animation: ss-hand .6s ease-in-out infinite alternate; }
.ss-hand.l { transform: scaleX(-1); animation-name: ss-hand-l; }
.ss-hand.r { animation-delay: -.3s; }
.ss-hand svg { --hf: color-mix(in srgb, var(--air) 45%, #fff); display: block; width: 1.3em; height: 1em; fill: var(--hf); stroke: var(--air-ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.ss-hand .sh { fill: color-mix(in srgb, var(--hf) 80%, var(--air-ink)); stroke: none; }
.ss-hand .ln { fill: none; stroke-width: 4; }
.ss-hand .ol { stroke-width: 5; }
/* white ink (Monochrome light, or a dark custom Accent): a dark hand with a light outline, like the 6 */
:is([data-theme="mono-light"]:not([style*="--air"]), [data-ink="light"]:not([style*="--air"]), [style*="--air-ink: #fff"]) .ss-hand svg { --hf: color-mix(in srgb, var(--air) 80%, #fff); }
.ss-num { font-family: var(--display); font-weight: 800; color: var(--air); -webkit-text-stroke: 3px var(--air-ink); display: inline-block; animation: ss-num .6s ease-in-out infinite alternate; }
.ss-num.seven { color: var(--rose); animation-delay: -.3s; }
.app.ss-wobble { animation: ss-wobble .6s ease-in-out 4; transform-origin: 50% 80%; }
@keyframes ss-hand { from { transform: translateY(-26%); } to { transform: translateY(26%); } }
@keyframes ss-hand-l { from { transform: scaleX(-1) translateY(26%); } to { transform: scaleX(-1) translateY(-26%); } }
@keyframes ss-num { from { transform: translateY(-14%) scale(1.08) rotate(-6deg); } to { transform: translateY(14%) scale(.94) rotate(6deg); } }
@keyframes ss-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.4deg) translateY(4px); } 75% { transform: rotate(1.4deg) translateY(-4px); } }
@keyframes ss-fade { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }

/* =========================== v7: avatar decorations =========================== */
.status-dot { position: relative; }
.popover .status-dot, .ctx-menu .status-dot { --ring: var(--pop-bg); }
html:is(.status-shapes, [data-theme^="mono"]) .status-dot.idle { background: radial-gradient(circle at 30% 30%, var(--ring, var(--s1)) 0 34%, var(--idle) 36%) !important; border-radius: 50%; }
html:is(.status-shapes, [data-theme^="mono"]) .status-dot.offline, html:is(.status-shapes, [data-theme^="mono"]) .status-dot.invisible { background: transparent !important; box-shadow: inset 0 0 0 2.5px var(--offline); }
.avatar .av-deco { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; max-width: none; pointer-events: none; z-index: 1; border-radius: 0 !important; object-fit: contain; }
.avatar .st { z-index: 2; }
.deco-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.deco-pill { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #ffb347; background: rgba(255, 140, 26, .14); border: 1px solid rgba(255, 140, 26, .35); }
.deco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.deco-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 10px; border-radius: var(--r-card); border: 2px solid transparent; background: var(--s3); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.deco-tile:hover { color: var(--text); background: var(--s4); }
.deco-tile.sel { border-color: var(--air); color: var(--text-strong); background: var(--air-soft); }
.deco-tile .avatar { margin: 4px 0; }
.deco-none { width: 56px; height: 56px; margin: 4px 0; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--line); color: var(--faint); }

/* =========================== v8: name styles =========================== */
/* The ns-* classes go on the element holding only the name text (never its row), so role icons, crowns and badges keep their colours.
   Padding (cancelled by the margin) leaves room for swashes and descenders inside the gradient and the ellipsis clip. */
.ns-g, .ns-f { padding: .2em .12em; margin: -.2em -.12em; }
.ns-g { background-image: var(--ng); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* a currentcolor underline would take the transparent fill: keep it in the first colour, also past `text-decoration: underline` on hover */
.ns-g, .ns-g:hover { text-decoration-color: var(--name); }
/* paused off screen (app.js adds .ns-on while visible); 25 steps a second still reads as a smooth slow shimmer but repaints far less */
.ns-a { background-size: 200% 100%; animation: ns-flow 4s steps(100) infinite paused; }
.ns-a.ns-on { animation-play-state: running; }
@keyframes ns-flow { to { background-position: -200% 0; } }
html.reduce-motion .ns-a { animation: none; }
@media (prefers-reduced-motion: reduce) { .ns-a { animation: none; } }
html.hc .ns-g { background: none; -webkit-text-fill-color: currentColor; }
html:not(.readable-font) .ns-f { font-family: var(--nf); font-weight: var(--nfw); font-size-adjust: var(--nfx); letter-spacing: var(--nls, normal); font-synthesis: none; }
/* tall fonts sit their baseline lower in the line; in chat (baseline-aligned) that must not make the message head taller.
   The margins still add up to minus the padding (.4em), so the head keeps its 22px (compact heads sit in the text line instead). */
html:not(.readable-font) .msg .msg-head > .ns-f { margin-top: -.35em; }
html:not(.readable-font):not(.compact) .msg .msg-head > .ns-f { margin-bottom: -.05em; }
.pcard .pc-name { color: var(--name, var(--text-strong)); }

/* editor (role editor + profile settings) */
.nse { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nse .seg button:disabled, .nse-font:disabled { opacity: .5; cursor: not-allowed; }
.nse-stops { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nse-stops.grad .cwf-btn { gap: 4px; padding: 0 8px 0 6px; }
.nse-stops.grad .cwf-hex { display: none; }
.nse-stop { position: relative; }
.nse-rm { position: absolute; top: -7px; right: -7px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--s4); color: var(--text); box-shadow: 0 0 0 2px var(--s2); }
.nse-rm:hover:not(:disabled) { background: var(--rose); color: #fff; }
.nse-rm:disabled { opacity: .35; cursor: not-allowed; }
.nse-add { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px dashed var(--line); color: var(--muted); }
.nse-add:hover:not(:disabled) { color: var(--text-strong); border-color: var(--faint); background: var(--s3); }
.nse-add:disabled { opacity: .4; cursor: not-allowed; }
.nse-bar { width: min(100%, 300px); height: 8px; border-radius: 999px; background-image: var(--ng); }
.nse-fonts { display: flex; flex-wrap: wrap; gap: 6px; }
.nse-font { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); font-size: 15.5px; line-height: 1; }
.nse-font:hover:not(:disabled) { background: var(--s3); }
.nse-font.on { border-color: var(--air); background: var(--air-soft); color: var(--text-strong); }
.profile-editor .preview .ns-chat { margin-top: 14px; }

/* =========================== v8: plugins =========================== */
.plugin-list { display: flex; flex-direction: column; gap: 10px; }
.plugin-card { padding: 14px 16px; border-radius: var(--r-card); background: var(--s1); border: 1px solid var(--line-soft); }
.plugin-card.on { border-color: color-mix(in srgb, var(--air) 40%, var(--line-soft)); }
.plugin-card.failed { border-color: color-mix(in srgb, var(--rose) 45%, var(--line-soft)); }
.plugin-head { display: flex; align-items: flex-start; gap: 12px; }
.plugin-head .switch { margin-top: 8px; }
.plugin-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--s3); color: var(--muted); }
.plugin-card.on .plugin-ico { background: var(--air-soft); color: var(--air); }
.plugin-meta { flex: 1; min-width: 0; }
.plugin-meta b { color: var(--text-strong); margin-right: 8px; }
.plugin-ver { font-size: 12.5px; color: var(--faint); }
.plugin-meta small { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; }
/* everything below the head lines up with the name, past the icon */
.plugin-status > *, .plugin-panel:not(:empty) { margin-left: 52px; }
.plugin-note { margin-top: 10px; font-size: 13px; color: var(--faint); }
.plugin-cmds { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--muted); }
.plugin-cmds code, .plugin-skipped code { font-family: var(--mono); font-size: 12.5px; background: var(--s3); color: var(--text); padding: 2px 7px; border-radius: 6px; margin-right: 8px; }
.plugin-err { margin-top: 10px; display: flex; align-items: flex-start; gap: 7px; color: var(--rose); font-size: 13.5px; overflow-wrap: anywhere; }
.plugin-err .ico { flex-shrink: 0; margin-top: 2px; }
.plugin-err + .plugin-err { margin-top: 4px; }
.plugin-list > .plugin-err { margin: 0 0 10px; }
.plugin-panel:not(:empty) { margin-top: 12px; border-top: 1px solid var(--line-soft); }
.plugin-panel .setting-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.plugin-hint { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
.plugin-skipped { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--muted); }
/* buttons plugins add next to the message box, and their commands in the suggestion popup */
.plugin-btn-txt { font-size: 18px; line-height: 1; }
.composer-btn.plugin-btn svg { width: 20px; height: 20px; }
.mention-popup .mp-cmd b { font-family: var(--mono); font-size: 14px; color: var(--text-strong); }
.mention-popup .mp-cmd > .ico { color: var(--muted); flex-shrink: 0; }
.mention-popup .mp-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13.5px; }
.mention-popup .mp-cmd .u { flex-shrink: 0; }
@media (max-width: 760px) {
    .plugin-status > *, .plugin-panel:not(:empty) { margin-left: 0; }
    .mention-popup .mp-cmd .u { display: none; }
}

/* =========================== v8: custom themes =========================== */
/* A custom theme (app.js, "custom themes") is its base theme in data-theme, plus data-custom-theme and one <style id="vl-custom-theme">
   with ":root[data-custom-theme] { its tokens }" and its extra CSS. Tokens it leaves out come from the base theme, except these
   companions, worked out from the tokens around them so a theme made from the small base stays in one family (its own win). */
[data-custom-theme] {
    --s4: color-mix(in srgb, var(--s3) 92%, var(--text-strong));
    --air-soft: color-mix(in srgb, var(--air) 14%, transparent);
    --air-glow: color-mix(in srgb, var(--air) 45%, transparent);
    --lilac-soft: color-mix(in srgb, var(--lilac) 15%, transparent);
    --pop-bg: color-mix(in srgb, var(--s1) 60%, var(--bg));
    --stage-bg: color-mix(in srgb, var(--bg) 70%, #000);
    --tile-mix: var(--bg);
    --tile-screen: var(--stage-bg);
}
/* light bases: white-ish menus, and the stage stays dark (as in Day) */
[data-custom-theme]:where([data-theme="day"], [data-theme="mono-light"]) {
    --pop-bg: color-mix(in srgb, var(--s2) 50%, #fff);
    --stage-bg: color-mix(in srgb, var(--text-strong) 94%, var(--bg));
    --tile-mix: color-mix(in srgb, var(--text-strong) 90%, var(--bg));
}
/* high contrast on a custom theme: stronger text, lines and hints from the theme's own colours */
html.hc[data-custom-theme] {
    --text: var(--text-strong);
    --muted: color-mix(in srgb, var(--text-strong) 82%, var(--s2));
    --faint: color-mix(in srgb, var(--text-strong) 64%, var(--s2));
    --line: color-mix(in srgb, var(--text-strong) 45%, var(--s2));
    --line-soft: color-mix(in srgb, var(--text-strong) 26%, transparent);
}

/* Settings → Appearance → Custom themes */
.ct-card { position: relative; padding: 0; cursor: default; }
.ct-card .ct-pick { display: block; width: 100%; padding: 10px; text-align: left; border-radius: inherit; }
.ct-card .sw i { position: relative; }
.ct-card .sw em { position: absolute; right: 7px; bottom: 7px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .18); }
.ct-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-card small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.ct-tools { position: absolute; top: 14px; right: 14px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.ct-card:hover .ct-tools, .ct-card:focus-within .ct-tools { opacity: 1; }
.ct-tools .icon-btn { width: 30px; height: 30px; border-radius: 9px; background: var(--pop-bg); color: var(--text); box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.ct-tools .icon-btn:hover { background: var(--s3); }
@media (hover: none) { .ct-tools { opacity: 1; } }
.ct-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ct-cards + .ct-acts { margin-top: 14px; }
.ct-hint, .te-hint { margin: 8px 0 0; font-size: 13px; color: var(--faint); }

/* theme editor (in place of the Appearance tab) */
.settings-content .inner:has(> .te) { max-width: 1040px; }
.te-back { margin: -10px 0 12px -12px; padding: 0 12px 0 6px; gap: 4px; }
.te-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; }
.te-side { position: sticky; top: 20px; }
.te-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.te-two .field { margin-bottom: 0; }
.te-main > .te-hint { margin: 10px 0 0; }
.te-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 2px; }
.settings-content .te-head h3 { margin: 0; }
.te-tok { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.te-tok:last-child { border-bottom: 0; }
.te-info { min-width: 0; }
.te-info .t { font-weight: 600; color: var(--text-strong); }
.te-info code { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.te-info small { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.te-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.te-ctl .cwf-btn { gap: 4px; padding: 0 7px 0 6px; }
.te-ctl .cwf-hex { display: none; }
/* an inherited colour: the swatch shows what the app is using now, ringed to tell it apart */
.te-tok .cwf-sw.none { background: var(--eff); box-shadow: inset 0 0 0 2px var(--s3), 0 0 0 1.5px var(--faint); }
.te-val { width: 190px; height: 40px; padding: 0 10px; font-family: var(--mono); font-size: 13px; }
.te-val[aria-invalid="true"], .te-val[aria-invalid="true"]:focus { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); }
.te-val::placeholder { color: var(--faint); }
.te-more { margin-top: 18px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-card); }
.te-more summary { padding: 13px 0; font-weight: 700; color: var(--text-strong); cursor: pointer; }
.te-more[open] { padding-bottom: 14px; }
.te-more > .te-hint { margin: -4px 0 8px; }
.te-more .field:last-child { margin-bottom: 0; }
.te-css { width: 100%; min-height: 150px; padding: 10px 12px; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.5; tab-size: 4; }
.te-main .form-error { margin: 14px 0 0; }
.te-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 26px -48px -80px; padding: 14px 48px 18px; background: var(--s2); border-top: 1px solid var(--line-soft); }
.te-tools, .te-save { display: flex; flex-wrap: wrap; gap: 4px; }
.te-save { gap: 8px; margin-left: auto; }

/* the editor's tiny The Hub */
.te-mock { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); font-size: 11.5px; line-height: 1.35; box-shadow: var(--shadow); pointer-events: none; user-select: none; }
.tm-top { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; }
.tm-mark { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: var(--air); color: var(--air-ink); }
.tm-top i { width: 28px; height: 8px; border-radius: 4px; background: var(--s3); }
.tm-me { width: 17px; height: 17px; margin-left: auto; border-radius: 50%; background: var(--s3); }
.tm-frame { display: flex; gap: 5px; height: 236px; padding: 0 5px 5px; }
.tm-side { display: flex; flex-direction: column; gap: 2px; width: 34%; padding: 7px 5px; border-radius: min(var(--r-panel), 12px); background: var(--s1); }
.tm-row { display: flex; align-items: center; gap: 5px; padding: 3px 6px; overflow: hidden; border-radius: 6px; color: var(--muted); white-space: nowrap; }
.tm-row.on { background: var(--s4); color: var(--text-strong); }
.tm-row.live { color: var(--text-strong); }
.tm-row.live i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--air); box-shadow: 0 0 0 3px var(--air-soft); }
.tm-people { display: flex; gap: 6px; margin-top: auto; padding: 4px 6px; }
.tm-people i { width: 10px; height: 10px; border-radius: 50%; }
.tm-people .on { background: var(--mint); }
.tm-people .idle { background: var(--idle); }
.tm-people .off { background: var(--offline); }
.tm-main { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; padding: 9px 8px 8px; border-radius: min(var(--r-panel), 12px); background: var(--s2); }
.tm-msg { display: flex; gap: 7px; }
.tm-av { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--air), var(--rose)); }
.tm-msg b { color: var(--text-strong); }
.tm-msg small { margin-left: 5px; font-size: 10px; color: var(--faint); }
.tm-msg p { margin: 1px 0 0; }
.tm-mention { padding: 0 2px; border-radius: 4px; background: var(--lilac-soft); color: var(--lilac); font-weight: 600; }
.tm-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-btns .btn { min-height: 22px; padding: 0 8px; font-size: 10.5px; }
.tm-stage { display: flex; gap: 5px; padding: 5px; border-radius: 8px; background: var(--stage-bg); }
.tm-tile { flex: 1; height: 34px; border-radius: 6px; background: color-mix(in srgb, var(--lilac) 42%, var(--tile-mix, #0e1f24)); }
.tm-tile.talk { background: color-mix(in srgb, var(--mint) 42%, var(--tile-mix, #0e1f24)); box-shadow: 0 0 0 2px var(--air), 0 0 12px var(--air-glow); }
.tm-input { margin-top: auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: min(var(--r-ctl), 10px); background: var(--s3); color: var(--faint); }

/* import */
.ti-note { margin-top: 14px; }
.ti-sum { display: flex; align-items: baseline; gap: 10px; }
.ti-sum b { font-size: 16px; color: var(--text-strong); }
.ti-sum span { font-size: 13.5px; color: var(--muted); }
.ti-sw { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ti-sw i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .35); }
.ti-err, .ti-warn { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 13.5px; }
.ti-err { color: var(--rose); }
.ti-warn { color: var(--text); }
.ti-warn svg { margin-top: 2px; color: var(--idle); }
.ti-warn code { font-family: var(--mono); font-size: 12.5px; color: var(--muted); word-break: break-all; }
.ti-warn + .ti-warn { margin-top: 4px; }

@media (max-width: 900px) {
    .te-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .te-side { position: static; order: -1; }
    .te-mock { max-width: 420px; }
}
@media (max-width: 760px) {
    .te-foot { margin: 22px -16px -80px; padding: 12px 16px calc(12px + var(--safe-b)); }
}
@media (max-width: 560px) {
    .te-two { grid-template-columns: minmax(0, 1fr); }
    .te-head { flex-wrap: wrap; }
    .te-tok { flex-direction: column; align-items: stretch; gap: 8px; }
    .te-ctl { width: 100%; }
    .te-val { flex: 1; width: auto; min-width: 0; }
    .te-foot .btn { padding: 0 12px; }
}

/* =========================== clip studio =========================== */
.clip-studio { position: fixed; inset: 0; z-index: 900; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px); display: flex; align-items: stretch; justify-content: flex-end; }
.clip-panel { width: min(520px, 100%); background: var(--s1); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow); }
.clip-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.clip-head h3 { margin: 0; font-family: var(--display); font-size: 18px; color: var(--text-strong); }
.clip-head .rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 8px var(--rose); }
.clip-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.clip-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.clip-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-strong); }
.clip-group { margin-bottom: 14px; }
.clip-user { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-strong); margin: 6px 0; font-size: 14px; }
.clip-track { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.clip-track:hover { background: var(--s3); }
.clip-track .kind { width: 74px; color: var(--muted); font-size: 12.5px; flex: none; text-transform: capitalize; }
.clip-track .pl-vol2 { flex: 1; min-width: 50px; accent-color: var(--air); height: 4px; }
.clip-track .lvl { width: 46px; height: 6px; border-radius: 4px; background: var(--s3); overflow: hidden; flex: none; }
.clip-track .lvl i { display: block; height: 100%; width: 0; background: var(--mint); }
.clip-tbtn { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); flex: none; }
.clip-tbtn.on { background: var(--air); color: var(--air-ink); }
.clip-tbtn:hover { color: var(--text); background: var(--s4); }
.clip-tbtn.on:hover { color: var(--air-ink); }
.clip-empty { color: var(--muted); padding: 20px 4px; }
.rec-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.rec-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: recblink 1.4s ease-in-out infinite; }
@keyframes recblink { 50% { opacity: .25; } }
.room-person .rec-flag { color: var(--rose); display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .rec-pill::before { animation: none; } }

.ctl.rec { background: var(--rose); color: #fff; }

/* source picker (desktop app): choose a screen or window to share / capture */
.modal.src-modal { width: min(680px, 94vw); }
.src-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 6px; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.src-tile { display: block; width: 100%; padding: 6px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); color: var(--text); text-align: left; cursor: pointer; }
.src-tile:hover { border-color: var(--air); background: var(--s3); }
.src-tile img, .src-tile .src-blank { display: block; width: 100%; height: 84px; object-fit: cover; border-radius: 8px; background: var(--s1); }
.src-tile .src-blank { display: grid; place-items: center; color: var(--faint); }
.src-tile .src-name { display: block; margin-top: 6px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* clip studio live preview */
.clip-preview { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; margin-bottom: 10px; }
.clip-track .lvl i { background: linear-gradient(90deg, var(--mint), var(--air)); transition: width .08s linear; }

/* desktop-only settings tabs: Games table, hotkey capture */
.gtable { border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; margin-top: 12px; }
.gtable table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gtable th, .gtable td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.gtable tr:last-child td { border-bottom: 0; }
.gtable th { color: var(--muted); font-weight: 600; }
.gtable td.c { text-align: center; }
.gtable .switch { transform: scale(.85); }
.kbd.listening { background: var(--air); color: var(--air-ink); }

/* desktop app: the page fills right up to the top; only the top-right corner belongs to the window
   buttons, which sit in the rounded .win-box container (see the end of this file). Overlays that draw
   their own close button in that corner nudge it down (html.desktop-shell .settings-close / .clip-head). */

/* pseudo picture-in-picture: a playing attachment floats when you change view */
.mini { position: fixed; right: 16px; bottom: 16px; z-index: 950; width: min(320px, calc(100vw - 32px));
    background: var(--pop-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.mini-media .pl { max-width: 100%; border-radius: 0; }
.mini-media .pl video { max-height: 168px; }
.mini-media .pl-audio .pl-bar { border-radius: 0; }
.mini-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--s1); }
.mini-title { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini.muffled .mini-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--air); margin-right: 6px; vertical-align: 1px; }
@media (max-width: 760px) { .mini { right: 8px; bottom: 76px; width: min(280px, calc(100vw - 16px)); } }

/* desktop app: our own window buttons. They live outside #ui (so no overlay can cover them) and keep a
   fixed size, like OS chrome. Blended into the top bar normally; inside Settings or the clip studio they
   sit in a rounded container — the "notch" requested for those views. */
.win-controls { display: none; }
html.desktop-shell .win-controls { display: flex; align-items: center; gap: 2px; position: fixed; top: 0; right: 0;
    z-index: 1100; padding: 6px 6px 2px; -webkit-app-region: no-drag; }
/* Inside Settings the panel is cut away around the buttons: the button area takes the page surface and
   its corner curves inward, letting the panel show through — no border, no box of its own. */
html.desktop-shell.settings-open .win-controls {
    background: var(--bg); border: 0; border-radius: 0 0 var(--notch, 16px) var(--notch, 16px);
    padding: 5px; --notch: 16px; }
/* the clip studio panel is the same surface as the buttons, so there they simply merge */
html.desktop-shell.clip-open .win-controls { background: var(--s1); border: 0; border-radius: 0; padding: 5px; }
.win-btn { display: inline-grid; place-items: center; width: 32px; height: 26px; border-radius: 8px; color: var(--muted); }
.win-btn svg { width: 15px; height: 15px; }
.win-btn:hover { background: var(--s3); color: var(--text); }
.win-btn.close:hover { background: var(--rose); color: #fff; }
.win-btn .ic-restore { display: none; }
html.maximized .win-btn .ic-max { display: none; }
html.maximized .win-btn .ic-restore { display: block; }
/* the settings close button stays below the buttons instead of hiding under them (the settings overlay
   is appended outside #ui, so its offsets are plain pixels) */
html.desktop-shell .settings-close { top: 46px; }
/* the clip studio is inside #ui, so its offsets follow the UI scale */
html.desktop-shell .clip-head { padding-right: calc(156px / var(--ui-scale, 1)); }

/* =========================== v12: invites, patch notes, DEV tag, easter eggs =========================== */
/* custom invite link: the site address, then the code people pick */
.invite-edit { display: flex; align-items: center; background: var(--s3); border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.invite-edit:focus-within { border-color: var(--air); box-shadow: 0 0 0 3px var(--air-soft); }
.invite-edit .pre { flex: 0 1 auto; min-width: 0; max-width: 60%; padding-left: 14px; color: var(--faint); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.field .invite-edit input[name] { flex: 1; min-width: 80px; border: 0; background: none; box-shadow: none; padding-left: 1px; border-radius: 0; color: var(--text-strong); font-weight: 600; }

/* "Update X is out" card */
.update-notice { position: fixed; right: 20px; bottom: 96px; z-index: 940; width: min(380px, calc(100vw / var(--ui-scale, 1) - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
    padding: 14px 14px 12px; background: var(--pop-bg); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); animation: pop .22s ease; }
.update-notice .un-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--air-soft); color: var(--air); flex-shrink: 0; }
.update-notice .un-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.update-notice .un-text b { color: var(--text-strong); font-size: 15px; }
.update-notice .un-text span { color: var(--muted); font-size: 13px; }
.update-notice .un-acts { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-end; }
.update-notice .un-acts .icon-btn { width: 32px; height: 32px; }
@media (max-width: 760px) { .update-notice { right: 8px; left: 8px; width: auto; bottom: 84px; } }

/* patch notes */
.notes-modal .notes-body { display: flex; flex-direction: column; gap: 10px; }
.notes-ver { border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 16px; background: var(--s2); }
.notes-ver[open] { padding-bottom: 10px; }
.notes-ver summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; }
.notes-ver summary::-webkit-details-marker { display: none; }
.notes-ver .nv-title { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text-strong); }
.notes-ver .nv-meta { color: var(--faint); font-size: 13px; white-space: nowrap; }
.notes-ver h4 { margin: 8px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--air); }
.notes-ver ul { margin: 0 0 6px; padding-left: 20px; }
.notes-ver li { margin: 6px 0; line-height: 1.5; font-size: 14.5px; }
.notes-ver li strong { color: var(--text-strong); }

/* the rare ringtone */
.incoming-call.kawaii { border-color: #ff9ad5; box-shadow: var(--shadow), 0 0 30px rgba(255, 154, 213, .45); }
.incoming-call .rare-ring { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #ff9ad5; }

/* "cora s'est fait token": the laughing cat */
.cat-egg { position: fixed; inset: 0; z-index: 3900; pointer-events: none; display: grid; place-items: center; overflow: hidden; transition: opacity .45s; }
.cat-egg.out { opacity: 0; }
.cat-egg img { max-width: min(360px, 70vw); max-height: 50vh; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); animation: catPop 3.8s cubic-bezier(.2, .9, .3, 1.2) both; }
.cat-egg.no-gif img { display: none; }
.cat-egg .cat-rain { position: absolute; inset: 0; }
.cat-egg .cat-rain i { position: absolute; top: -60px; font-style: normal; animation: catFall 2.6s ease-in forwards; }
.cat-egg.still img, .cat-egg.still .cat-rain i { animation: none; }
.cat-egg.still .cat-rain { display: none; }
@keyframes catPop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 12% { transform: scale(1.08) rotate(4deg); opacity: 1; } 20%, 30%, 40%, 50%, 60% { transform: scale(1) rotate(-3deg); } 25%, 35%, 45%, 55% { transform: scale(1.04) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes catFall { to { transform: translateY(calc(100vh + 120px)) rotate(240deg); } }

/* import from Discord */
.choice .ci.discord { background: #5865f2; color: #fff; }
.dt-sum { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -4px 0 12px; color: var(--muted); font-size: 13.5px; }
.dt-sum span { display: inline-flex; align-items: center; gap: 6px; }
.dt-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-bottom: 8px; }
.dt-tree, .dt-roles { max-height: 260px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--s2); }
.dt-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 13.5px; }
.dt-group b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }
.dt-group span { display: flex; align-items: center; gap: 6px; color: var(--text); padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-roles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
@media (max-width: 640px) { .dt-cols { grid-template-columns: 1fr; } }

/* sensitive media filter (assets/filter.js) */
.cf-box { position: relative; display: inline-block; max-width: 100%; vertical-align: top; border-radius: 12px; overflow: hidden; }
.cf-box.cf-video { display: block; width: 100%; max-width: min(520px, 100%); }
.cf-box > .cf-veil { display: none; }
.cf-box:is(.cf-wait, .cf-hide, .cf-flag) > :not(.cf-veil) { filter: blur(26px) saturate(.6); transform: scale(1.08); pointer-events: none; }
.cf-box:is(.cf-wait, .cf-hide, .cf-flag) .gif-fav { display: none; }
.cf-box:is(.cf-wait, .cf-hide, .cf-flag) > .cf-veil { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 120px; min-width: 180px; padding: 12px; border: 0; border-radius: inherit; background: rgba(5, 16, 19, .42); color: #fff; text-align: center; cursor: pointer; font: inherit; }
.cf-box:is(.cf-wait, .cf-hide, .cf-flag) { min-height: 120px; min-width: 180px; background: var(--s3); }
.cf-veil .cf-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); margin-bottom: 2px; }
.cf-veil b { font-size: 14px; }
.cf-veil small { font-size: 12px; opacity: .8; }
.cf-veil:hover small { opacity: 1; text-decoration: underline; }
.cf-veil:focus-visible { outline: 2px solid var(--air); outline-offset: -4px; }
.cf-box.cf-wait > .cf-veil b::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
html.reduce-motion .cf-box.cf-wait > .cf-veil b::after { animation: none; }
.up-chip .sens { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 16, 19, .6); color: #fff; }
.up-chip .sens.on { background: var(--rose); color: var(--rose-ink, #fff); }
.up-chip:has(.sens.on) .thumb { filter: blur(6px); }
.cf-row .seg { flex-shrink: 0; }
.cf-hint { margin: -2px 0 12px; }
@media (max-width: 700px) { .cf-row { flex-wrap: wrap; } }

/* plugin shop (Settings → Plugins) */
.shop-h { display: flex; align-items: center; gap: 8px; }
.shop-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.shop-bar .input { flex: 1; max-width: 360px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.shop-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--s2); }
.shop-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; flex: 1; }
.shop-top { display: flex; align-items: center; gap: 10px; }
.shop-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--lilac-soft, var(--s3)); color: var(--lilac, var(--air)); flex-shrink: 0; }
.shop-name { display: flex; flex-direction: column; min-width: 0; }
.shop-name b { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-name span { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-tags span { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--s3); color: var(--muted); }
.shop-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-acts .sp { flex: 1; }
.shop-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.shop-tag.ok { color: var(--mint); }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; margin: 0 8px; }

/* bots */
.bot-tag { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; margin-left: 5px; border-radius: 5px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; flex-shrink: 0; line-height: 1; }
.pcard h3 .bot-tag { height: 18px; font-size: 11px; position: relative; top: -2px; }
.bot-new { display: flex; gap: 8px; align-items: center; margin: 14px 0; }
.bot-new .input { flex: 1; max-width: 360px; }
.bot-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--s2); margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.bot-top { display: flex; align-items: center; gap: 12px; }
.bot-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; }
.bot-name b { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-name > span:last-child { width: 100%; color: var(--faint); font-size: 13px; }
.bot-spaces { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.bot-acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bot-acts .sp { flex: 1; }
.bot-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bot-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-card); background: var(--s2); }

/* end-to-end encryption */
.e2ee-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; margin-left: 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint); white-space: nowrap; flex-shrink: 0; }
.e2ee-pill:hover { background: color-mix(in srgb, var(--mint) 22%, transparent); }
.e2ee-pill.off { background: var(--s3); color: var(--muted); }
.msg-lock { display: inline-flex; margin-left: 6px; color: var(--faint); vertical-align: -1px; }
.enc-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-style: italic; font-size: 14px; }
.enc-note.err { color: var(--rose); }
.att-enc { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--s3); color: var(--muted); font-size: 13.5px; }
.att-enc.err { color: var(--rose); }
.safety-num { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 20px; letter-spacing: .06em; line-height: 1.6; color: var(--text-strong);
    padding: 14px 16px; border-radius: var(--r-card); background: var(--s2); border: 1px solid var(--line); text-align: center; word-spacing: .3em; }
.e2ee-body h3 { margin: 16px 0 8px; }
.ok-tag { background: color-mix(in srgb, var(--mint) 16%, transparent) !important; color: var(--mint) !important; }
@media (max-width: 760px) { .e2ee-pill { font-size: 0; gap: 0; padding: 0 7px; } }