/* Peiskos: "Glød", ember on oat by day and on charcoal by night. */

@font-face {
  font-family: 'Fraunces';
  src: url(fonts/fraunces-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url(fonts/nunito-sans.woff2) format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* oat (light) */
  --bg: #f6f0e7;            /* oat */
  --sidebar: #ede4d6;
  --topbar: #e6dbca;
  --sidebar-ink: #241c17;
  --surface: #fffaf3;
  --surface-2: #efe6d9;
  --hover: rgba(196, 86, 28, .07);
  --line: #e2d6c4;
  --text: #2f2620;
  --text-strong: #1f1813;   /* char */
  --muted: #7d6d60;
  --accent: #c4561c;        /* ember */
  --accent-hover: #a84715;
  --accent-ink: #ffffff;
  --accent-soft: rgba(196, 86, 28, .13);
  --moss: #d27a3e;          /* the secondary highlight: focus rings, hovers */
  --berry: #b8352b;
  --cloudberry: #e0962f;
  --mention-bg: rgba(240, 138, 75, .18);
  --code-bg: #efe6d9;
  --shadow: 0 1px 2px rgba(60, 30, 10, .06), 0 4px 16px rgba(60, 30, 10, .06);
  --online: #5c8a4f;
  --ember: #c4561c;          /* the fire */
  --ember-soft: rgba(240, 138, 75, .18);
  --glow: #ffc46b;
  --scene-sky: #f3e6d3; --scene-sun: #ffd9a0; --scene-far: #e6c9a8; --scene-mid: #c98a5e;
  --scene-near: #7a3b1c; --scene-hole: #2a1a12;
  --radius: 14px;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1c1612;            /* char */
  --sidebar: #15100d;
  --topbar: #110d0a;
  --sidebar-ink: #eadfd3;
  --surface: #241c17;
  --surface-2: #2e241d;
  --hover: rgba(240, 138, 75, .07);
  --line: #33281f;
  --text: #eadfd3;
  --text-strong: #fbf4ec;
  --muted: #a1907f;
  --accent: #f08a4b;        /* ember by night */
  --accent-hover: #f6a06a;
  --accent-ink: #1f1813;
  --accent-soft: rgba(240, 138, 75, .16);
  --moss: #e39a5c;
  --berry: #e8695e;
  --cloudberry: #ffc46b;
  --mention-bg: rgba(240, 138, 75, .16);
  --code-bg: #15100d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
  --online: #8fbf7a;
  --ember: #f08a4b;
  --ember-soft: rgba(240, 138, 75, .16);
  --glow: #ffc46b;
  --scene-sky: #1d1612; --scene-sun: #d9c7aa; --scene-far: #2c2018; --scene-mid: #21180f;
  --scene-near: #140e0a; --scene-hole: #070403;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1612; --sidebar: #15100d; --topbar: #110d0a; --sidebar-ink: #eadfd3; --surface: #241c17; --surface-2: #2e241d;
    --hover: rgba(240, 138, 75, .07); --line: #33281f; --text: #eadfd3; --text-strong: #fbf4ec; --muted: #a1907f;
    --accent: #f08a4b; --accent-hover: #f6a06a; --accent-ink: #1f1813; --accent-soft: rgba(240, 138, 75, .16);
    --moss: #e39a5c; --berry: #e8695e; --cloudberry: #ffc46b; --mention-bg: rgba(240, 138, 75, .16);
    --code-bg: #15100d; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3); --online: #8fbf7a;
    --ember: #f08a4b; --ember-soft: rgba(240, 138, 75, .16); --glow: #ffc46b;
    --scene-sky: #1d1612; --scene-sun: #d9c7aa; --scene-far: #2c2018; --scene-mid: #21180f;
    --scene-near: #140e0a; --scene-hole: #070403;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; }
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: var(--text); }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.error { color: var(--berry); font-size: 13px; min-height: 1em; }
svg { display: block; }

.logo-mark { display: inline-block; width: 28px; height: 28px; border-radius: 8px; background: url(icon.svg) center / cover; flex: none; }
.logo-mark.big { width: 72px; height: 72px; border-radius: 20px; }

/* ---------- buttons & inputs ---------- */
.btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 700; transition: background .15s, transform .05s; }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--surface-2); color: var(--text); }
.btn.secondary:hover { background: var(--line); }
.btn.danger { background: var(--berry); color: #fff; }
.icon-btn { background: none; border: 0; color: var(--muted); padding: 6px; border-radius: 10px; display: grid; place-items: center; }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn:hover { color: var(--text-strong); background: var(--hover); }
.small-btn { font-size: 18px; line-height: 1; padding: 2px 8px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
label input, .modal-card input, .modal-card textarea, .gif-picker input { background: var(--surface-2); border: 1.5px solid transparent; border-radius: 10px; padding: 10px 12px; font-size: 15px; font-weight: 400; outline: none; transition: border-color .15s; }
label input:focus, .modal-card input:focus, .modal-card textarea:focus, .gif-picker input:focus { border-color: var(--moss); }

/* ---------- auth ---------- */
.auth { height: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
.auth-scene { position: relative; overflow: hidden; background: var(--scene-sky); }
.auth-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-brand { position: absolute; top: 32px; left: 40px; display: flex; gap: 10px; align-items: center; font-family: var(--font-head); font-size: 26px; color: var(--scene-near); text-transform: lowercase; }
.auth-tagline { position: absolute; top: 76px; left: 40px; right: 40px; max-width: 360px; margin: 0; color: var(--scene-near); font-size: 17px; }
:root[data-theme="dark"] .auth-brand, :root[data-theme="dark"] .auth-tagline { color: var(--text-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-brand, :root:not([data-theme="light"]) .auth-tagline { color: var(--text-strong); } }
.auth-side { display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h1 { margin: 0; font-size: 32px; }
.auth-card > p { margin: 0 0 8px; }
.auth-card .btn { padding: 12px; margin-top: 4px; }
.get-desktop { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.get-desktop p { margin: 0; }
.get-desktop-row { display: flex; gap: 8px; }
.auth-card .get-desktop-row .btn { flex: 1; margin: 0; padding: 10px 8px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 14px; }
.get-desktop-row svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
/* The apple's weight sits low (leaf on top), so lift it to line up with the word. */
.get-desktop-row [data-os="mac"] svg { transform: translateY(-1.5px); }
.auth-card .get-desktop-row .btn.mine { background: var(--accent); color: var(--accent-ink); }

/* ---------- layout ----------
   A computer shows the top bar (burrows), the burrow's rooms, the chat and who's here.
   A phone shows one screen at a time (see "phones" below). */
.app { display: grid; height: 100%; grid-template-columns: 272px minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "side chat members"; }
.topbar { grid-area: top; }
.sidebar { grid-area: side; }
.chat { grid-area: chat; }
.member-pane { grid-area: members; }
.tabbar { display: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 14px 0 18px; background: var(--topbar); border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--text-strong); margin-right: 12px; flex: none; text-transform: lowercase; } /* the wordmark: peiskos */
.burrow-nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; padding: 4px 2px; }
.pill { flex: none; height: 42px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; padding: 0 16px 0 4px; background: transparent; color: var(--muted); font-weight: 800; font-size: 14px; position: relative; white-space: nowrap; transition: background .12s, color .12s; }
.pill:hover { background: var(--hover); color: var(--text-strong); }
.pill.on { background: var(--surface); color: var(--text-strong); box-shadow: 0 0 0 2px var(--accent); }
.pill.unread::after, .burrow-switch.unread::after, .tab.unread::after, .tile.unread::after { content: ""; position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--cloudberry); box-shadow: 0 0 0 2px var(--topbar); }
.pill-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.pill.more { padding: 0 14px 0 10px; gap: 4px; }
.pill.more .chev { width: 16px; height: 16px; }
.pill .tile { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }
.chev { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 18px; height: 18px; flex: none; }
.tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; font-weight: 800; font-size: 14px; position: relative; }
.tile.dm-tile { background: var(--accent); color: var(--accent-ink); }
.tile.dm-tile svg { width: 18px; height: 18px; fill: currentColor; }
.tile.unread::after { top: -3px; right: -3px; width: 11px; height: 11px; box-shadow: 0 0 0 2.5px var(--surface); }
.add-burrow { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--line); background: none; color: var(--muted); font-size: 20px; line-height: 1; }
.add-burrow:hover { color: var(--accent); border-color: var(--accent); }
.burrow-switch { display: none; }
.burrow-nav [hidden] { display: none !important; }
.campfire-chip { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--ember-soft); color: var(--ember); font-weight: 800; font-size: 14px; max-width: 260px; }
#campfire-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campfire-chip svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.campfire-chip:hover { background: color-mix(in srgb, var(--ember-soft) 100%, var(--ember) 12%); }
.me-btn { flex: none; position: relative; border: 0; background: none; padding: 3px; border-radius: 50%; margin-left: 4px; }
.me-btn:hover { background: var(--hover); }
.me-btn .avatar { width: 36px; height: 36px; border-radius: 50%; }
.me-btn.offline::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 2.5px var(--topbar); }

.me-menu { position: fixed; z-index: 20; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); display: flex; flex-direction: column; }
.me-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-name { font-weight: 800; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.me-menu button { text-align: left; border: 0; background: none; padding: 10px; border-radius: 10px; font-weight: 700; color: var(--text); }
.me-menu button:hover, .me-menu button:focus-visible { background: var(--hover); outline: none; }
.danger-item { color: var(--berry) !important; }

.switcher { position: fixed; z-index: 20; width: 320px; max-height: min(520px, calc(100vh - 90px)); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 8px; box-shadow: 0 16px 44px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 2px; }
.switch-row { display: flex; align-items: center; gap: 2px; border-radius: 14px; padding-right: 6px; }
.switch-row:hover { background: var(--hover); }
.switch-row.on { background: var(--accent-soft); }
.switch-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 58px; border: 0; background: none; border-radius: 14px; padding: 0 6px 0 10px; text-align: left; color: var(--text); }
.switch-main:focus-visible, .star:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.star { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--muted); display: grid; place-items: center; }
.star svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.star:hover:not(:disabled) { color: var(--ember); background: var(--ember-soft); }
.star.on { color: var(--ember); }
.star.on svg { fill: currentColor; }
.star:disabled { opacity: .3; cursor: not-allowed; }
.switcher > * { flex: none; }
.switch-head { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.switch-hint { margin: 4px 10px 6px; font-size: 13px; color: var(--muted); }
.switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.switch-text b { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-status { font-size: 13px; font-weight: 700; color: var(--muted); }
.switch-status.ember { color: var(--ember); }
.switch-status.news { color: var(--text); }
.switch-row .check { width: 22px; height: 22px; fill: var(--accent); flex: none; }
.switch-foot { display: flex; gap: 8px; padding: 8px 4px 4px; margin-top: 4px; border-top: 1px solid var(--line); }
.switch-foot .btn { flex: 1; padding: 11px 10px; }

/* ---------- the burrow's rooms ---------- */
.sidebar { background: var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; min-height: 0; padding: 14px 12px 12px; gap: 10px; border-right: 1px solid var(--line); }
.side-head { display: flex; align-items: center; gap: 4px; padding: 0 2px 0 8px; }
.side-head h2 { flex: 1; margin: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.eyebrow, .section-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 8px 6px; }
.section-title { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; }
#channel-list li { min-height: 38px; padding: 0 8px 0 10px; border-radius: 10px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 9px; margin: 1px 0; font-weight: 600; font-size: 15px; }
.room-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; opacity: .8; }
#channel-list li:hover { background: var(--hover); color: var(--text); }
#channel-list li.active { background: var(--accent-soft); color: var(--text-strong); }
#channel-list li.unread { color: var(--text-strong); font-weight: 800; }
#channel-list li.unread::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cloudberry); flex: none; }
#channel-list li.unread .room-gear { margin-left: 4px; }
#channel-list li.dm.unread { font-weight: 800; }
#channel-list li.hint { cursor: default; font-weight: 400; font-size: 13px; }
#channel-list li.hint:hover { background: none; color: var(--muted); }
.member-pane li.can-dm { cursor: pointer; border-radius: 10px; }
.member-pane li.can-dm:hover { background: var(--hover); }
.people-picker { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.people-picker li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.people-picker li:hover { background: var(--hover); }

.conn { font-size: 12px; color: var(--berry); }
.conn.ok { color: var(--online); }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; position: relative; }
.avatar.lg { width: 40px; height: 40px; border-radius: 13px; font-size: 16px; }
.avatar.xl { width: 88px; height: 88px; border-radius: 26px; font-size: 34px; }
.avatar.has-picture { background-size: cover; background-position: center; }
.account-picture { display: flex; align-items: center; gap: 18px; }
.account-picture .buttons { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.account-picture .buttons div { display: flex; gap: 8px; }
.modal-card h3 { margin: 10px 0 0; font-size: 17px; }
.success { color: var(--online); font-size: 13px; min-height: 1em; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.chat-header { flex: none; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 14px 8px 28px; border-bottom: 1px solid var(--line); }
.chat-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.chat-header h1 { margin: 0; font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; max-width: 60%; }
.chat-header #channel-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-btn { display: none; }
.voice-pill { display: none; }
.messages { flex: 1; overflow-y: auto; padding: 8px 22px 12px; }
.group { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 14px; margin-top: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.group .head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.group .author { font-weight: 800; color: var(--text-strong); }
.group .time { font-size: 12px; color: var(--muted); }
.line { position: relative; padding: 2px 8px; margin: 0 -8px; border-radius: 8px; }
.line:hover { background: var(--hover); }
.line .content { white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }
.line .content code { background: var(--code-bg); padding: 1px 5px; border-radius: 5px; font-size: 90%; }
.line .content pre { background: var(--code-bg); padding: 10px 12px; border-radius: 10px; overflow-x: auto; white-space: pre; }
.line .edited { font-size: 11px; color: var(--muted); }
.line .actions { position: absolute; right: 6px; top: -14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: none; box-shadow: var(--shadow); }
.line .actions .icon-btn { font-size: 14px; padding: 4px 8px; }
.line:hover .actions { display: flex; }
.line.mentions-me { background: var(--mention-bg); box-shadow: inset 3px 0 0 var(--cloudberry); }
.mention { color: var(--accent); font-weight: 700; }
.line textarea.edit { width: 100%; background: var(--surface-2); border: 1.5px solid var(--moss); border-radius: 10px; padding: 8px 10px; resize: none; outline: none; }
.group.mine { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.day-divider { display: flex; align-items: center; justify-content: center; margin: 22px 0 6px; }
.day-divider span { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 3px 12px; border-radius: 999px; }
.history-start { padding: 28px 8px 8px; }
.history-start h2 { margin: 0 0 4px; font-size: 26px; }

.composer-wrap { padding: 0 28px 18px; position: relative; }
.mention-box { position: absolute; left: 28px; right: 28px; bottom: calc(100% - 22px); z-index: 15; display: flex; flex-direction: column; gap: 2px; padding: 6px; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.mention-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; font: inherit; }
.mention-option.active, .mention-option:hover { background: var(--hover); }
.typing { height: 22px; padding: 0 6px; font-size: 13px; color: var(--muted); font-style: italic; }
.composer { display: flex; align-items: flex-end; gap: 8px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 6px 6px 6px 16px; box-shadow: var(--shadow); transition: border-color .15s; }
.composer:focus-within { border-color: var(--moss); }
.composer textarea { flex: 1; background: transparent; border: 0; resize: none; outline: none; padding: 8px 0; max-height: 40vh; line-height: 1.4; }
.send { flex: none; width: 38px; height: 38px; border-radius: 14px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.send svg { width: 18px; height: 18px; fill: currentColor; }
.send:hover { background: var(--accent-hover); }
.send:disabled { opacity: .4; cursor: default; }

.empty-state { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 16px; }
.empty-state h2 { margin: 12px 0 0; font-size: 26px; }
.empty-state p { margin: 0 0 12px; max-width: 340px; }

/* ---------- members ---------- */
.member-pane { width: 240px; border-left: 1px solid var(--line); overflow-y: auto; padding: 18px 14px; }
.member-head { display: none; }
.member-pane.collapsed { display: none; }
.member-pane h3 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 6px 8px; }
.member-pane h3 + ul { margin-bottom: 20px; }
.member-pane li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; font-weight: 600; }
.member-pane li:hover { background: var(--hover); }
.member-pane li.offline { opacity: .5; }
.member-pane .avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--bg); background: var(--muted); }
.member-pane li.online .avatar::after { background: var(--online); }
.owner-badge { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; margin-left: auto; }
.member-pane li .member-more { margin-left: auto; padding: 0 6px; opacity: 0; }
.member-pane li .member-more + .owner-badge { margin-left: 4px; }
.member-pane li:hover .member-more, .member-more:focus-visible { opacity: 1; }
.room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock-icon { width: 13px; height: 13px; fill: currentColor; opacity: .6; flex: none; }
.room-gear { margin-left: auto; padding: 2px; opacity: 0; }
.room-gear svg { width: 15px; height: 15px; }
#channel-list li:hover .room-gear, #voice-list li:hover .room-gear, .room-gear:focus-visible { opacity: 1; }
@media (hover: none) { .room-gear { opacity: 1 !important; } }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
label.check input { width: auto; }
.access-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; }
.modal-row .spacer { flex: 1; }
.ban-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-weight: 600; }
.ban-list .btn { padding: 6px 14px; }
.owner-badge.role { color: var(--role); background: color-mix(in srgb, var(--role) 16%, transparent); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.modal-card h4 { margin: 4px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.role-list li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 10px; }
.role-list li:hover { background: var(--hover); }
.role-list .spacer { flex: 1; }
.role-list .role-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-list .icon-btn { padding: 2px 6px; font-size: 11px; }
.role-list .icon-btn:disabled { opacity: .25; cursor: default; }
.role-list .btn { padding: 6px 14px; }
.color-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.color-row input[type="color"] { width: 32px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; }
.role-preview { margin-left: auto; font-weight: 800; }
.perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.perm-list label.check { align-items: flex-start; font-weight: 400; }
.perm-list input { margin-top: 3px; }
.perm-list input:disabled + span { opacity: .5; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(20, 14, 10, .55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal-card { background: var(--surface); border-radius: 20px; padding: 26px; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal-card h2 { margin: 0; font-size: 24px; }
.modal-card p { margin: 0; }
.modal-card form { display: flex; flex-direction: column; gap: 10px; }
.modal-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.invite-box { display: flex; gap: 8px; }
.invite-box input { flex: 1; font-family: ui-monospace, monospace; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- narrow windows ---------- */
@media (max-width: 980px) {
  .member-pane { display: none; }
  .member-pane.open { display: block; position: fixed; right: 0; top: 0; bottom: 0; width: min(300px, 100%); background: var(--bg); z-index: 8; box-shadow: var(--shadow); }
  .member-pane.open .member-head { display: flex; }
  .brand-name { display: none; }
}
@media (max-width: 980px) and (min-width: 761px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "top top" "side chat"; }
}
.member-head { align-items: center; justify-content: space-between; padding: 0 0 10px 6px; }
.member-head h2 { margin: 0; font-size: 20px; }
.member-head .icon-btn { font-size: 22px; width: 40px; height: 40px; }

/* ---------- phones: one screen at a time ---------- */
@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
  .auth-tagline { display: none; }
  .auth-brand { top: 20px; left: 20px; }

  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "main" "tabs"; height: 100dvh; }
  .app[data-view="rooms"] .chat { display: none; }
  .app[data-view="chat"] .topbar, .app[data-view="chat"] .sidebar, .app[data-view="chat"] .tabbar { display: none; }
  .sidebar, .chat { grid-area: main; }
  .app[data-view="chat"] { grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }

  .topbar { height: auto; padding: 10px 10px 10px 12px; gap: 6px; position: relative; z-index: 21; padding-top: max(10px, env(safe-area-inset-top)); }
  .brand, .burrow-nav { display: none; }
  .burrow-switch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 50px; border: 0; border-radius: 15px; background: var(--surface); padding: 0 12px 0 5px; color: var(--text-strong); position: relative; }
  .burrow-switch[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
  .burrow-switch[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .burrow-switch.unread::after { top: 6px; right: 34px; box-shadow: 0 0 0 2px var(--surface); }
  .switch-name { flex: 1; min-width: 0; text-align: left; font-family: var(--font-head); font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .campfire-chip { height: 44px; padding: 0 14px 0 12px; }
  #campfire-chip-label { display: none; }
  .side-head { display: none; }
  .switch-foot { flex-wrap: wrap; }
  .switch-foot .settings { flex-basis: 100%; }
  .room-gear { opacity: .6 !important; }
  .me-btn { display: none; }
  .app.switching .sidebar { filter: brightness(.6); pointer-events: none; }
  .star { width: 44px; height: 44px; }
  .switcher { left: 10px !important; right: 10px; top: 78px !important; width: auto; border-radius: 20px; max-height: calc(100dvh - 170px); }

  .sidebar { padding: 6px 10px 10px; border-right: 0; border-radius: 0; }
  .side-head { padding: 10px 2px 0 10px; }
  #channel-list li { min-height: 48px; font-size: 16px; padding-left: 14px; }
  .room-gear { opacity: 1; }
  #voice-list li { padding: 12px 14px; }

  .tabbar { grid-area: tabs; display: flex; background: var(--sidebar); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tab { flex: 1; min-height: 62px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-weight: 800; font-size: 12px; position: relative; }
  .tab svg { width: 22px; height: 22px; fill: currentColor; }
  .tab .avatar { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; }
  .tab.on { color: var(--accent); }
  .tab.unread::after { top: 9px; right: calc(50% - 18px); box-shadow: 0 0 0 2px var(--sidebar); }
  .me-menu { left: 10px !important; right: 10px; top: auto !important; bottom: calc(72px + env(safe-area-inset-bottom)); min-width: 0; }
  .me-menu button { padding: 14px 12px; font-size: 16px; }

  .chat-header { padding: 8px 6px; padding-top: max(8px, env(safe-area-inset-top)); gap: 2px; min-height: 60px; }
  .back-btn { display: grid; color: var(--text-strong); }
  .chat-title { flex-direction: column; gap: 0; line-height: 1.2; }
  .chat-header h1 { font-size: 20px; max-width: 100%; }
  .chat-header .icon-btn { width: 44px; height: 44px; }
  .chat-header .icon-btn svg { width: 22px; height: 22px; }
  .voice-pill { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; text-align: left; }
  .voice-pill.hidden { display: none; }
  .voice-pill span:not(.dot) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voice-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); flex: none; }
  .messages { padding: 4px 8px 12px; }
  .group { padding: 10px 10px; gap: 10px; grid-template-columns: 36px minmax(0, 1fr); border-radius: 16px; }
  .group .avatar.lg { width: 36px; height: 36px; font-size: 14px; }
  .line .content { font-size: 16px; }
  .composer-wrap { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .mention-box { left: 10px; right: 10px; }
  .mention-option { padding: 10px; }
  .composer textarea { font-size: 16px; } /* 16px stops phones zooming in on focus */
  .send { width: 42px; height: 42px; }
  .line:hover .actions { display: none; }
  .line.touched .actions { display: flex; }
  .stage-head { padding: 10px 12px; }
  .stage-grid { padding: 4px 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-grid.focused { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vtile.focus { width: 100%; }

  /* Pop-ups become sheets that slide up from the bottom. */
  .modal { place-items: end stretch; padding: 0; }
  .modal-card { max-width: none; border-radius: 24px 24px 0 0; max-height: 92dvh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); animation: sheet-up .2s ease-out; }
  .modal-card::before { content: ""; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: -10px 0 4px; flex: none; }
  .modal-card.wide { width: 100%; }
  .modal-row .btn { flex: 1; padding: 12px; }
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: .4; } }

/* ---------- person sheet ---------- */
.person { display: flex; align-items: center; gap: 16px; }
.person .avatar.xl { width: 68px; height: 68px; border-radius: 50%; font-size: 26px; }
.person-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.person-meta h2 { font-size: 24px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.person-status { font-size: 14px; font-weight: 800; color: var(--muted); }
.person-status.live { color: var(--berry); }
.person-meta .owner-badge { margin-left: 0; }
.person-sliders { background: var(--surface-2); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.person-sliders label { color: var(--text-strong); font-size: 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; }
.person-sliders label span { color: var(--muted); }
.person-sliders input { grid-column: 1 / -1; accent-color: var(--accent); padding: 0; background: none; height: 28px; }
.person-actions { display: flex; flex-direction: column; }
.person-actions .action { text-align: left; border: 0; background: none; min-height: 48px; padding: 0 6px; border-radius: 10px; font-weight: 700; font-size: 15px; color: var(--text); }
.person-actions .action:hover { background: var(--hover); }

/* ---------- voice rooms ---------- */
#voice-list { list-style: none; margin: 0; padding: 0; }
#fire-main { margin-top: 4px; }
.fire-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s; }
.fire-card:hover { border-color: var(--ember); }
.fire-card.joined { border-color: var(--accent); }
.fire-card .voice-room-name { gap: 10px; }
.fire-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--ember-soft); color: var(--ember); display: grid; place-items: center; flex: none; }
.fire-badge svg { width: 20px; height: 20px; fill: currentColor; }
.fire-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fire-text .room-name { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text-strong); }
.fire-sub { font-size: 12px; font-weight: 700; color: var(--muted); }
.fire-card .voice-people { margin: 0; }
.fire-action { align-self: flex-end; font-size: 13px; font-weight: 800; color: var(--accent); }
.fire-action:empty { display: none; }
.fire-card .room-gear { opacity: 0; }
.fire-card:hover .room-gear { opacity: 1; }
#voice-list li { padding: 7px 10px; border-radius: 10px; color: var(--muted); cursor: pointer; margin: 2px 0; font-weight: 600; }
#voice-list li:hover { background: var(--hover); color: var(--text); }
#voice-list li.joined { background: var(--accent-soft); color: var(--text-strong); cursor: default; }
.voice-room-name { display: flex; align-items: center; gap: 8px; }
.voice-icon { width: 16px; height: 16px; fill: currentColor; flex: none; color: var(--ember); }
.voice-people { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px 24px; }
.voice-person { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.avatar.xs { width: 22px; height: 22px; border-radius: 8px; font-size: 11px; transition: box-shadow .12s; }
.voice-person.speaking .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--moss); }
.muted-icon { width: 14px; height: 14px; fill: var(--berry); flex: none; }
.voice-bar { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: var(--radius); padding: 8px 8px 6px 12px; box-shadow: var(--shadow); flex: none; }
.voice-top { display: flex; align-items: center; gap: 4px; }
.voice-controls { display: flex; justify-content: space-between; margin-left: -6px; }
.voice-controls .icon-btn.on { color: var(--accent-ink); background: var(--accent); }
#voice-watch.has-video { color: var(--accent); position: relative; }
#voice-watch.has-video::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--berry); }
.voice-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.voice-room-label { font-size: 13px; font-weight: 700; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#voice-mute.on { color: var(--berry); background: rgba(178, 67, 61, .12); }
.hang-up:hover { color: #fff; background: var(--berry); }
.kind-choice { display: flex; gap: 18px; margin: 4px 0 2px; }
.kind-choice label { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-weight: 600; font-size: 14px; }

/* ---------- attachments ---------- */
.composer { padding-left: 6px; }
.composer .attach { align-self: flex-end; margin-bottom: 2px; }
.composer:has(#gif-btn:not(.hidden)) { padding-left: 6px; }
.composer .gif-btn { align-self: flex-end; margin: 0 0 3px -4px; height: 32px; width: auto; min-width: 38px; padding: 0 8px; border: 1.5px solid var(--line); line-height: 1; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.composer .gif-btn[aria-expanded="true"] { background: var(--hover); color: var(--text-strong); border-color: var(--moss); }

/* ---------- GIF picker ---------- */
.gif-picker { position: absolute; right: 28px; bottom: calc(100% - 22px); z-index: 16; width: min(440px, calc(100% - 56px)); height: min(460px, 60vh); display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.gif-picker input { width: 100%; }
.gif-grid { flex: 1; min-height: 0; overflow-y: auto; columns: 3 120px; column-gap: 6px; overscroll-behavior: contain; }
.gif-tile { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); break-inside: avoid; cursor: pointer; }
.gif-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-tile:hover, .gif-tile:focus-visible { outline: 2.5px solid var(--moss); outline-offset: -2.5px; }
.gif-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.gif-credit { font-size: 11px; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 760px) {
  .gif-picker { left: 10px; right: 10px; width: auto; height: min(420px, 55vh); }
  .gif-grid { columns: 2; }
  .gif-picker input { font-size: 16px; } /* no zooming in on focus */
}

/* ---------- burrow pictures ---------- */
.tile.has-picture { background: var(--surface-2) !important; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tile.xl { width: 88px; height: 88px; border-radius: 26px; font-size: 30px; }
.burrow-picture { margin: 4px 0 2px; }
.pending-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pending { position: relative; display: flex; align-items: center; gap: 8px; max-width: 260px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 6px 30px 6px 6px; overflow: hidden; box-shadow: var(--shadow); }
.pending img, .pending .file-icon { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.pending-name { font-size: 13px; font-weight: 700; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-meta { font-size: 12px; color: var(--muted); flex: none; }
.pending .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--moss); transition: width .15s; }
.pending.failed { border-color: var(--berry); }
.pending.failed .pending-meta { color: var(--berry); }
.pending-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 16px; line-height: 1; }
.pending-remove:hover { background: var(--berry); color: #fff; }
.file-icon { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.file-icon svg { width: 22px; height: 22px; fill: currentColor; }
.attachments { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 2px; }
.att-image { max-width: min(400px, 100%); max-height: 300px; border-radius: 12px; cursor: zoom-in; display: block; background: var(--surface-2); }
.att-video { max-width: min(480px, 100%); max-height: 320px; border-radius: 12px; background: #000; }
.att-file { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); max-width: 360px; }
.att-file .file-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.att-file:hover { border-color: var(--moss); }
.att-file-text { display: flex; flex-direction: column; min-width: 0; }
.att-file-name { font-weight: 700; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat { position: relative; }
.chat.dropping::after { content: "Drop to attach"; position: absolute; inset: 12px; display: grid; place-items: center; border: 2.5px dashed var(--moss); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 85%, transparent); font-family: var(--font-head); font-size: 22px; color: var(--accent); pointer-events: none; z-index: 5; }
.modal-card.wide { width: min(92vw, 1100px); max-width: none; }
.lightbox img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto 14px; border-radius: 12px; }

a.btn { text-decoration: none; display: inline-block; }

/* ---------- replies & reactions ---------- */
.line .actions .icon-btn svg { width: 18px; height: 18px; }
.reply-quote { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 2px 0 2px; padding-left: 14px; position: relative; cursor: pointer; max-width: 100%; }
.reply-quote::before { content: ""; position: absolute; left: 2px; top: 50%; width: 9px; height: 10px; border-left: 2px solid var(--line); border-top: 2px solid var(--line); border-top-left-radius: 6px; }
.reply-author { font-weight: 800; flex: none; }
.reply-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reply-quote:hover .reply-text { color: var(--text); }
.line.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 40% { background: var(--mention-bg); } 100% { background: transparent; } }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.reaction { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13px; }
.reaction:hover { border-color: var(--moss); }
.reaction.mine { background: var(--accent-soft); border-color: var(--accent); color: var(--text-strong); }
.r-emoji { font-size: 16px; line-height: 1; }
.reaction.add { padding: 0 6px; color: var(--muted); opacity: 0; transition: opacity .1s; }
.reaction.add svg { width: 16px; height: 16px; fill: currentColor; }
.line:hover .reaction.add { opacity: 1; }
.emoji-picker { position: fixed; z-index: 20; display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.emoji-picker button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: none; font-size: 21px; line-height: 1; }
.emoji-picker button:hover { background: var(--hover); transform: scale(1.1); }
.reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); background: var(--surface-2); border-radius: 12px 12px 0 0; padding: 4px 6px 4px 14px; margin: 0 12px -2px; }
.reply-bar b { color: var(--text-strong); }


/* ---------- voice volume and sounds ---------- */
.voice-person.adjustable { cursor: pointer; border-radius: 8px; }
.voice-person.adjustable:hover { background: var(--hover); }
.volume-tag { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted); }
.volume-pop { position: fixed; z-index: 20; width: 230px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 8px; }
.volume-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.volume-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volume-head span { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.volume-pop input[type="range"], .sound-volume input[type="range"] { width: 100%; accent-color: var(--accent); padding: 0; background: none; border: none; box-shadow: none; }
.volume-foot { display: flex; justify-content: space-between; align-items: center; }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; }
.sound-volume { display: flex; align-items: center; gap: 10px; }
.sound-volume .btn { padding: 6px 14px; }
.modal-card select { background: var(--surface-2); border: 1.5px solid transparent; border-radius: 10px; padding: 10px 12px; font-size: 15px; font-weight: 400; outline: none; }
.modal-card select:focus { border-color: var(--moss); }
.voice-lock { color: var(--online); padding: 6px; }
.voice-lock svg { width: 16px; height: 16px; fill: currentColor; }
#voice-deafen.on { color: var(--berry); background: rgba(178, 67, 61, .12); }
#voice-settings svg { width: 18px; height: 18px; }

/* ---------- voice and video settings ---------- */
.voice-settings { display: flex; flex-direction: column; gap: 10px; }
.voice-settings select { width: 100%; text-overflow: ellipsis; }
.voice-settings input[type="range"] { width: 100%; accent-color: var(--accent); padding: 0; background: none; border: none; box-shadow: none; }
.voice-settings .range-value { float: right; color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.voice-settings label:has(.range-value) { display: block; }
.voice-settings label:has(.range-value) input { display: block; margin-top: 6px; }
.voice-settings .link-btn { align-self: flex-start; font-size: 14px; }
.mic-test { display: flex; align-items: center; gap: 10px; }
.mic-test .btn { padding: 6px 14px; flex: none; }
.level-meter { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.level-meter span { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--online); transition: width .06s linear; }
.cam-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #000; transform: scaleX(-1); }
.cam-preview.hidden { display: none; }

/* ---------- video: camera and screen sharing ---------- */
.stage { position: absolute; inset: 0; z-index: 4; background: var(--bg); display: flex; flex-direction: column; min-height: 0; }
.stage-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 10px; }
.stage-head h1 { margin: 0; font-size: 24px; }
.stage-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-content: start; }
.stage-grid.focused { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.vtile { position: relative; aspect-ratio: 16 / 9; background: var(--sidebar); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); }
.vtile.focus { grid-column: 1 / -1; justify-self: center; aspect-ratio: var(--ar, 16 / 9); width: min(100%, calc((100vh - var(--reserve, 250px)) * var(--ar, 1.7778))); cursor: zoom-out; background: #0d0907; }
.stage-grid.solo { --reserve: 110px; }
.vtile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vtile.screen { background: #0d0907; }
.vtile.camera video { object-fit: cover; }
.vtile.focus.camera video { object-fit: contain; }
.vtile.mirror video { transform: scaleX(-1); }
.vtile .avatar.lg { width: 72px; height: 72px; font-size: 28px; }
.stage-grid.focused .vtile:not(.focus) .avatar.lg { width: 40px; height: 40px; font-size: 16px; margin-bottom: 18px; }
.vtile.speaking { box-shadow: 0 0 0 3px var(--moss), var(--shadow); }
.vtile-name { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 999px; background: rgba(20, 14, 10, .72); color: #fbf4ec; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtile-name svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.vtile:fullscreen { border-radius: 0; background: #000; box-shadow: none; cursor: default; }
.vtile:fullscreen video { object-fit: contain; }
.vtile-full { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 14, 10, .72); color: #fbf4ec; opacity: 0; transition: opacity .15s; }
.vtile-full:hover { background: rgba(20, 14, 10, .9); }
.vtile-full svg { width: 18px; height: 18px; fill: currentColor; }
.vtile-full .exit, .vtile:fullscreen .vtile-full .enter { display: none; }
.vtile:fullscreen .vtile-full .exit { display: block; }
.vtile:hover .vtile-full, .vtile-full:focus-visible { opacity: 1; }
.vtile.no-video .vtile-full { display: none; }
@media (hover: none) { .vtile-full { opacity: 1; } }
.app.watching .member-pane { display: none; }

/* ---------- the Campfire: everyone sitting around the fire, and the fireside chat ---------- */
.stage[data-show="fire"] .video-view, .stage[data-show="video"] .fire-space { display: none; }
.video-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fire-space { --camp: color-mix(in srgb, var(--bg) 95%, #000); flex: 1; min-height: 0; display: flex; position: relative; }
.fire-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse 60% 55% at 50% 58%, color-mix(in srgb, var(--ember) 16%, transparent), transparent 70%), var(--camp); }
.fire-main .stage-head { justify-content: flex-start; border-bottom: 1px solid var(--line); min-height: 60px; padding: 8px 16px 8px 28px; }
.fire-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.fire-title h1 { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fire-sub { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fire-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--online); background: var(--accent-soft); border-radius: 8px; padding: 3px 8px; }
.fire-lock.hidden { display: none; }
.fire-lock svg { width: 13px; height: 13px; fill: currentColor; }
.fire-chat-open { position: relative; }
.fire-chat-open svg { width: 22px; height: 22px; fill: currentColor; }
.badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--berry); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.badge.hidden { display: none; }

.fire-ring-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; container-type: size; }
.fire-ring { position: relative; width: min(640px, 100cqw, 123cqh); aspect-ratio: 640 / 520; --face: 84px; --rx: 41; --ry: 40; }
.fire-ring.crowded { --face: 60px; }
.fire-glow, .fire-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; aspect-ratio: 1; }
.fire-glow { background: radial-gradient(circle, color-mix(in srgb, var(--glow) 34%, transparent), color-mix(in srgb, var(--ember) 10%, transparent) 60%, transparent 72%); }
.fire-glow.outer { width: 47%; }
.fire-glow.inner { width: 28%; animation: fire-breathe 3.2s ease-in-out infinite; }
.fire-core { width: 15.6%; background: radial-gradient(circle at 50% 62%, var(--glow), var(--ember) 72%); color: #fff8ee; display: grid; place-items: center; box-shadow: 0 0 36px 6px color-mix(in srgb, var(--ember) 45%, transparent); }
.fire-core svg { width: 48%; height: 48%; fill: currentColor; }
@keyframes fire-breathe { 50% { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .fire-glow.inner { animation: none; } }

.seat { position: absolute; translate: -50% -50%; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; transition: left .3s, top .3s; }
.seat-face-wrap { position: relative; display: grid; place-items: center; }
.seat-face { display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 50%; transition: box-shadow .12s; }
button.seat-face { cursor: pointer; }
.seat-face .avatar { width: var(--face); height: var(--face); border-radius: 50%; font-size: calc(var(--face) * .36); }
.seat.speaking .seat-face { box-shadow: 0 0 0 4px var(--camp), 0 0 0 7px var(--glow), 0 0 26px 6px color-mix(in srgb, var(--ember) 55%, transparent); }
.seat-face.video { width: calc(var(--face) * 1.8); height: calc(var(--face) * 1.15); border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.seat.speaking .seat-face.video { box-shadow: 0 0 0 3px var(--glow), 0 0 22px 4px color-mix(in srgb, var(--ember) 50%, transparent); }
.seat-face.video video { width: 100%; height: 100%; object-fit: cover; }
.seat.me .seat-face.video video { transform: scaleX(-1); }
.seat-live { position: absolute; left: 50%; bottom: -8px; translate: -50% 0; background: #c4473e; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; border-radius: 6px; padding: 2px 6px; }
.seat-name { margin-top: 4px; max-width: 100%; font-weight: 800; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-status { font-size: 12px; font-weight: 700; color: var(--muted); min-height: 1em; }
.seat-status:empty { display: none; }
.seat-status.talking { color: var(--moss); font-weight: 800; }
.seat-watch { display: flex; white-space: nowrap; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; }
.seat-watch:hover { background: var(--accent-hover); }
.seat-watch svg { width: 15px; height: 15px; fill: currentColor; }
.seat.open .seat-face { width: calc(var(--face) * .76); height: calc(var(--face) * .76); border: 2px dashed var(--line); }

.fire-controls { flex: none; display: flex; justify-content: center; gap: 12px; padding: 6px 12px 22px; }
.fc { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.fc.hidden { display: none; }
.fire-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text-strong); display: grid; place-items: center; padding: 0; }
.fire-btn:hover:not(:disabled) { background: var(--line); }
.fire-btn:disabled { opacity: .5; }
.fire-btn svg { width: 22px; height: 22px; fill: currentColor; }
.fire-btn.on { background: var(--berry); color: #fff; }
#fire-camera.on, #fire-screen.on { background: var(--accent); color: var(--accent-ink); }
.fire-btn.leave { background: var(--berry); color: #fff; }
.fire-chat-bar { display: none; }

.fire-chat { width: 330px; flex: none; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line); min-height: 0; }
.fire-space.chat-hidden .fire-chat { display: none; }
.fire-space:not(.chat-hidden) .fire-chat-open { display: none; }
.fire-chat-head { min-height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); }
.fire-chat-head b { flex: 1; color: var(--text-strong); }
.fire-chat-head .icon-btn { font-size: 22px; width: 40px; height: 40px; }
.fire-chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.fire-chat-note { margin-top: auto; text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding: 0 10px 6px; }
.fire-msg { background: var(--surface); border-radius: 14px; padding: 8px 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.fire-msg.more { margin-top: -4px; }
.fire-msg.mine { background: color-mix(in srgb, var(--surface) 88%, var(--accent)); }
.fire-msg b { display: block; color: var(--text-strong); }
.fire-chat-form { display: flex; align-items: center; gap: 6px; margin: 0 12px 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 6px 6px 6px 12px; }
.fire-chat-form:focus-within { border-color: var(--accent); }
.fire-chat-form input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 15px; color: var(--text); }
.fire-chat-form .send { width: 34px; height: 34px; border-radius: 12px; }
.fire-chat-form .send svg { width: 18px; height: 18px; fill: currentColor; }

/* Narrower screens: the chat opens over the fire, from a bar under the circle. */
@media (max-width: 1099px) {
  .fire-chat { position: absolute; inset: 0; z-index: 2; width: auto; border-left: 0; display: none; }
  .fire-space.chat-open .fire-chat { display: flex; }
  .fire-space.chat-hidden.chat-open .fire-chat { display: flex; }
  .fire-chat-open { display: none !important; }
  .fire-chat-bar { position: relative; display: flex; align-items: center; gap: 10px; width: min(560px, calc(100% - 24px)); align-self: center; margin: 0 12px 10px; min-height: 52px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; }
  .fire-chat-bar > svg { width: 22px; height: 22px; fill: var(--muted); flex: none; }
  .fire-chat-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .fire-chat-bar-text b { color: var(--text-strong); font-size: 14px; }
  .fire-chat-bar-text span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fire-chat-bar .badge { position: static; }
}
@media (max-width: 760px) {
  .fire-main .stage-head { padding: 8px 6px; padding-top: max(8px, env(safe-area-inset-top)); gap: 2px; }
  #stage-close { display: none; }
  .fire-title { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
  .fire-title h1 { font-size: 20px; max-width: 100%; }
  .fire-sub { font-size: 12px; gap: 6px; }
  .fire-lock { background: none; padding: 0; }
  #stage-video { display: none; }
  .fire-ring { --face: 64px; --rx: 34; --ry: 39; width: min(420px, 100cqw, 92cqh); aspect-ratio: 360 / 400; }
  .fire-glow.outer { width: 56%; }
  .fire-glow.inner { width: 34%; }
  .fire-core { width: 19%; }
  .fire-ring.crowded { --face: 48px; }
  .seat { width: 120px; font-size: 14px; }
  .fire-ring-wrap { padding: 8px; }
  .fire-controls { gap: 6px; justify-content: space-around; padding: 6px 6px calc(16px + env(safe-area-inset-bottom)); }
  .fire-chat-head { padding-top: env(safe-area-inset-top); }
  .fire-chat-form { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .fire-chat-form input { font-size: 16px; }
}
.campfire-chip { position: relative; }
.campfire-chip.unread::after { content: ""; position: absolute; top: 3px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 2px var(--topbar); }
.stream-audio { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(20, 14, 10, .72); color: #fbf4ec; opacity: 0; transition: opacity .15s; }
.vtile:hover .stream-audio, .stream-audio.muted, .stream-audio:focus-within { opacity: 1; }
.stream-audio button { background: none; border: 0; color: inherit; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
.stream-audio button:hover { background: rgba(255, 255, 255, .14); }
.stream-audio svg { width: 16px; height: 16px; fill: currentColor; }
.stream-audio.muted button { color: #ff9a92; }
.stream-audio input { width: 96px; accent-color: #fbf4ec; }
.stream-audio span { font-size: 12px; font-weight: 700; min-width: 34px; text-align: right; }
.live-tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--berry); border-radius: 4px; padding: 1px 5px; }
.cam-tag { display: inline-flex; color: var(--muted); }
.cam-tag svg { width: 14px; height: 14px; fill: currentColor; }
.screen-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 55vh; overflow-y: auto; margin: 12px 0; }
.screen-picker button { background: var(--surface-2); border: 2px solid transparent; border-radius: 12px; padding: 8px; color: var(--text); display: flex; flex-direction: column; gap: 6px; text-align: left; font-weight: 600; font-size: 13px; }
.screen-picker button:hover { border-color: var(--accent); }
.screen-picker img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0d0907; border-radius: 8px; }
.screen-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- theme color wheel ---------- */
.theme-picker { display: flex; align-items: center; gap: 18px; }
.wheel { position: relative; flex: none; width: 150px; height: 150px; border-radius: 50%; cursor: crosshair; touch-action: none;
  background: radial-gradient(circle closest-side, hsl(0 0% 62%), hsl(0 0% 62% / 0)),
    conic-gradient(hsl(0 80% 50%), hsl(60 80% 50%), hsl(120 80% 50%), hsl(180 80% 50%), hsl(240 80% 50%), hsl(300 80% 50%), hsl(360 80% 50%));
  box-shadow: 0 0 0 1px var(--line); }
.wheel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wheel-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); pointer-events: none; }
.theme-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 520px) { .theme-picker { flex-direction: column; align-items: flex-start; } }

/* ---- chat and messages: unread, jumping, pins, threads, polls, previews, emoji, voice messages */

.messages-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.unread-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; max-width: calc(100% - 24px); background: var(--accent); color: var(--accent-ink); border-radius: 999px; box-shadow: var(--shadow); overflow: hidden; }
.unread-bar.hidden { display: none; }
.unread-bar button { border: 0; background: none; color: inherit; font-weight: 800; font-size: 13px; padding: 8px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread-bar button:hover { background: rgba(255, 255, 255, .12); }
.unread-clear { border-left: 1px solid rgba(255, 255, 255, .25) !important; flex: none; }
.present-bar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 5; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 8px 16px; font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; }
.present-bar b { color: var(--accent); margin-left: 6px; }
.present-bar.hidden { display: none; }
.new-divider { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; color: var(--berry); }
.new-divider::before { content: ""; flex: 1; border-top: 1.5px solid var(--berry); }
.new-divider span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.seen-mark { text-align: right; font-size: 11px; color: var(--muted); padding: 2px 4px 0; }
.line.pinned { box-shadow: inset 3px 0 0 var(--moss); }
.pin-mark { position: absolute; right: 8px; top: 4px; color: var(--moss); }
.pin-mark svg { width: 13px; height: 13px; fill: currentColor; }
.line:hover .pin-mark, .line.touched .pin-mark { display: none; }
.line .edited { border: 0; background: none; padding: 0; font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; }
.line .edited:hover { text-decoration: underline; }
.content.jumbo { font-size: 40px; line-height: 1.2; }
.content.jumbo .cemoji { width: 48px; height: 48px; }
.content .md-h { font-family: var(--font-head); font-weight: 600; color: var(--text-strong); line-height: 1.25; margin: 4px 0 2px; }
.content .md-h1 { font-size: 1.5em; }
.content .md-h2 { font-size: 1.3em; }
.content .md-h3 { font-size: 1.12em; }
.content blockquote { margin: 2px 0; padding: 0 0 0 12px; border-left: 3px solid var(--line); color: var(--text); }
.content ul, .content ol { margin: 2px 0; padding-left: 24px; white-space: normal; }
.content mark { background: var(--mention-bg); color: inherit; border-radius: 3px; box-shadow: 0 0 0 1px var(--cloudberry); }
.spoiler { background: var(--text); color: transparent; border-radius: 4px; cursor: pointer; transition: background .15s, color .15s; }
.spoiler * { visibility: hidden; }
.spoiler.shown { background: var(--code-bg); color: inherit; cursor: auto; }
.spoiler.shown * { visibility: visible; }
.att-spoiler { position: relative; border-radius: 12px; overflow: hidden; max-width: 100%; }
.att-spoiler:not(.shown) > :first-child { filter: blur(28px); pointer-events: none; }
.spoiler-cover { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, .25); color: #fff; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.tok-k { color: #7a5aa6; font-weight: 700; }
.tok-s { color: #3f7d4a; }
.tok-n { color: #b0527a; }
.tok-c { color: var(--muted); font-style: italic; }
:root[data-theme="dark"] .tok-k { color: #c3a6ea; } :root[data-theme="dark"] .tok-s { color: #9fd49a; } :root[data-theme="dark"] .tok-n { color: #f0a0c0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tok-k { color: #c3a6ea; } :root:not([data-theme="light"]) .tok-s { color: #9fd49a; } :root:not([data-theme="light"]) .tok-n { color: #f0a0c0; } }
.cemoji { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
.reaction .cemoji { width: 18px; height: 18px; vertical-align: middle; }
.sticker { display: block; width: 160px; height: 160px; object-fit: contain; margin: 4px 0; }

.forwarded { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 2px 0; }
.forwarded svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.forwarded b { color: var(--text); }
.forwarded + .content, .forwarded ~ .attachments { border-left: 3px solid var(--line); padding-left: 10px; }

.thread-chip { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; max-width: 100%; }
.thread-chip:hover { border-color: var(--moss); }
.thread-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cloudberry); }
.thread-icon { width: 16px; height: 16px; fill: currentColor; flex: none; }
#channel-list li.thread-row { min-height: 32px; margin-left: 22px; font-size: 14px; }
#channel-list li.thread-row.unread { color: var(--text-strong); font-weight: 800; }
#channel-list li.thread-row.unread:not(:has(.ping-count))::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cloudberry); flex: none; }
#channel-list li.thread-row.active { background: var(--accent-soft); color: var(--text-strong); }
#channel-list li:has(.ping-count)::after { display: none; }
.ping-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--berry); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; flex: none; }
.pill .ping-count { position: absolute; top: -4px; right: -4px; margin: 0; box-shadow: 0 0 0 2px var(--topbar); }
.pill:has(.ping-count)::after { display: none; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); font-weight: 700; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

.poll { margin: 6px 0 2px; padding: 12px; max-width: 440px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.poll-q { font-weight: 800; color: var(--text-strong); font-size: 15px; }
.poll-option { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: left; overflow: hidden; }
.poll-option:not(:disabled):hover { border-color: var(--moss); }
.poll-option.mine { border-color: var(--accent); }
.poll-option.winner .poll-text { font-weight: 800; }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); transition: width .3s; }
.poll-text { position: relative; flex: 1; min-width: 0; }
.poll-count { position: relative; font-size: 12px; color: var(--muted); font-weight: 700; flex: none; }
.poll-option.mine .poll-text::before { content: "✓ "; color: var(--accent); font-weight: 800; }
.poll-edit { display: flex; flex-direction: column; gap: 6px; }
.poll-edit-row { display: flex; gap: 6px; align-items: center; }
.poll-edit-row input { flex: 1; }

.embeds { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.embed { position: relative; display: flex; gap: 12px; max-width: 520px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--moss); background: var(--surface-2); }
.embed.big { flex-direction: column; }
.embed-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.embed-site { font-size: 12px; color: var(--muted); }
.embed-title { font-weight: 800; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.embed-title:hover { text-decoration: underline; }
.embed-desc { font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.embed-image { flex: none; display: block; position: relative; }
.embed:not(.big) .embed-image img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; display: block; }
.embed.big .embed-image img { max-width: 100%; max-height: 300px; border-radius: 8px; display: block; }
.embed-image.video::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; font-size: 22px; padding-left: 4px; box-sizing: border-box; }
.embed-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); opacity: 0; font-size: 15px; line-height: 1; }
.line:hover .embed-remove, .line.touched .embed-remove { opacity: 1; }

.voice-msg { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.voice-play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.voice-play svg { width: 18px; height: 18px; fill: currentColor; }
.voice-track { flex: 1; height: 6px; border-radius: 3px; background: var(--line); cursor: pointer; overflow: hidden; }
.voice-fill { height: 100%; width: 0; background: var(--moss); }
.voice-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.att-audio { display: flex; flex-direction: column; gap: 4px; }
.att-audio-name { font-size: 13px; font-weight: 700; }
.att-text { width: min(560px, 100%); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.att-text-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.att-text-head .file-icon { width: 26px; height: 26px; }
.att-text-head .btn { padding: 4px 10px; font-size: 13px; }
.att-text-body { margin: 0; padding: 8px 12px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; background: var(--code-bg); }
.att-text.collapsed .att-text-body { max-height: 220px; overflow: hidden; }
.att-text-more { width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--surface); color: var(--accent); font-weight: 800; padding: 6px; }

.pending-spoiler { flex: none; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); font-size: 11px; font-weight: 800; padding: 3px 6px; }
.pending-shrink { flex: none; border: 1px solid var(--moss); border-radius: 8px; background: none; color: var(--accent); font-size: 11px; font-weight: 800; padding: 3px 6px; }
.pending-shrink:hover { background: var(--surface-2); }
.pending-spoiler.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.pending.spoilered img { filter: blur(6px); }
.scheduled-note { display: block; margin: 0 0 6px; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 700; padding: 0 6px; }
.scheduled-note:hover { color: var(--accent); }
.scheduled-note.hidden { display: none; }
.composer #emoji-btn, .composer #mic-btn, .composer #plus-btn { align-self: flex-end; margin-bottom: 2px; }
.recorder { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--text-strong); font-weight: 800; font-variant-numeric: tabular-nums; }
.recorder.hidden { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--berry); animation: rec 1s ease-in-out infinite alternate; }
@keyframes rec { to { opacity: .3; } }
.rec-label { flex: 1; font-weight: 600; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recorder .btn { padding: 6px 12px; }
.composer.recording textarea, .composer.recording #plus-btn, .composer.recording #gif-btn, .composer.recording #emoji-btn, .composer.recording #mic-btn { display: none; }

.pop-menu { position: fixed; z-index: 30; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); display: flex; flex-direction: column; }
.pop-menu button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 9px; font: inherit; font-weight: 700; color: var(--text); }
.pop-menu button:hover, .pop-menu button:focus-visible { background: var(--hover); outline: none; }
.pop-menu .danger-item { color: var(--berry); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 10px 8px 10px 14px; background: var(--text-strong); color: var(--bg); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 14px; }
.toast span { flex: 1; }
.toast .btn { padding: 6px 12px; flex: none; }
.toast .icon-btn { color: inherit; opacity: .7; font-size: 18px; }

.card-list { display: flex; flex-direction: column; gap: 8px; }
.msg-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.msg-card.openable { cursor: pointer; }
.msg-card.openable:hover { border-color: var(--moss); }
.msg-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.msg-card-head .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-card .content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.msg-card .content pre { white-space: pre; overflow-x: auto; background: var(--code-bg); padding: 8px; border-radius: 8px; }
.msg-card .content code { background: var(--code-bg); padding: 1px 4px; border-radius: 4px; }
.msg-card-note { color: var(--ember); font-weight: 700; }
.msg-card-actions { display: flex; gap: 6px; justify-content: flex-end; }
.msg-card-actions .btn { padding: 5px 12px; font-size: 13px; }
.history-start .msg-card { margin-top: 10px; }
.quick-times { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-times .btn { padding: 7px 12px; }
.modal-card.search-modal { max-width: 660px; }
.search-form input[type="search"] { width: 100%; }
.search-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.search-filters select, .search-filters input { padding: 7px 10px; font-size: 14px; }
.search-filters select.hidden { display: none; }
.search-date { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

.emoji-picker .more-emoji { font-size: 20px; font-weight: 800; color: var(--muted); }
.emoji-panel { position: fixed; z-index: 25; width: 360px; height: min(420px, 60vh); display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
.emoji-panel input { background: var(--surface-2); border: 1.5px solid transparent; border-radius: 10px; padding: 8px 10px; font-size: 15px; outline: none; }
.emoji-panel input:focus { border-color: var(--moss); }
.emoji-tabs { display: flex; gap: 2px; overflow-x: auto; flex: none; }
.emoji-tabs button { border: 0; background: none; border-radius: 8px; font-size: 18px; width: 32px; height: 32px; flex: none; padding: 0; }
.emoji-tabs button:hover { background: var(--hover); }
.emoji-scroll { flex: 1; overflow-y: auto; }
.emoji-scroll h4 { margin: 8px 2px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emoji-grid button { height: 36px; border: 0; border-radius: 9px; background: none; font-size: 22px; line-height: 1; padding: 0; }
.emoji-grid button:hover { background: var(--hover); }
.emoji-grid .cemoji { width: 26px; height: 26px; vertical-align: middle; }
.emoji-add { display: flex; gap: 8px; }
.emoji-add label:first-child { flex: 1; }
.emoji-manage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.emoji-manage li { display: flex; align-items: center; gap: 10px; }
.emoji-manage .btn { padding: 5px 10px; font-size: 13px; }
.emoji-manage .cemoji { width: 32px; height: 32px; }
.em-sticker { width: 56px; height: 56px; object-fit: contain; }
.em-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sticker-grid button { border: 0; border-radius: 12px; background: var(--surface-2); padding: 6px; aspect-ratio: 1; }
.sticker-grid button:hover { background: var(--hover); outline: 2px solid var(--moss); }
.sticker-grid img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 760px) {
  .unread-bar button { font-size: 12px; padding: 8px 10px; }
  .toasts { left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); align-items: stretch; }
  .emoji-panel { height: min(380px, 55vh); }
  .rec-label { display: none; }
  .pin-mark { display: none; }
}
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.line .content pre code, .msg-card .content pre code { padding: 0; background: none; font-size: inherit; }

/* ---------- rooms, burrows and organization ---------- */
.burrow-banner { margin: -14px -12px 0; height: 96px; overflow: hidden; flex: none; }
.burrow-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-title { flex: 1; min-width: 0; }
.side-title h2 { margin: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-desc { margin: 2px 0 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* headings, archived rooms, muted rooms, dragging */
#channel-list li.room-group { min-height: 30px; margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; gap: 4px; padding-left: 4px; }
#channel-list li.room-group .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .15s; }
#channel-list li.room-group.folded .chev { transform: rotate(-90deg); }
#channel-list li.room-group span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#channel-list li.room-group.unread { color: var(--text-strong); }
#channel-list li.muted-room:not(.active) { opacity: .5; }
#channel-list li.dragging { opacity: .4; }
#channel-list li.drop-here { box-shadow: inset 0 2px 0 var(--accent); }
#channel-list li.room-group.drop-here { box-shadow: inset 0 0 0 2px var(--accent); }
.fold-btn { width: 100%; border: 0; background: none; cursor: pointer; justify-content: flex-start; gap: 6px; }
.fold-btn::before { content: "▸"; font-size: 12px; transition: transform .15s; }
.fold-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
#archived-list li { min-height: 34px; padding: 0 8px 0 10px; border-radius: 10px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 9px; margin: 1px 0; font-weight: 600; font-size: 14px; opacity: .7; }
#archived-list li:hover { background: var(--hover); opacity: 1; }
#archived-list li.active { background: var(--accent-soft); color: var(--text-strong); opacity: 1; }
#archived-list li:hover .room-gear { opacity: 1; }
.arrange-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.arrange-list li { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 10px; }
.arrange-list li:hover { background: var(--hover); }
.arrange-list li .arrange-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.arrange-list li select { width: auto; max-width: 140px; padding: 4px 8px; }
.arrange-list li.arrange-head { margin-top: 8px; background: var(--surface-2); }
.arrange-list li.arrange-head b { flex: 1; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.arrange-list .btn { padding: 4px 12px; font-size: 13px; }
.arrange-list .icon-btn:disabled { opacity: .3; }

/* writing: announcement, archived and rules locks, slow mode */
.composer-lock { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; background: var(--surface-2); border-radius: 20px; padding: 14px 16px; color: var(--muted); font-weight: 600; font-size: 14px; }
.composer-lock .btn { padding: 8px 18px; }
.slow-note { margin: 0 0 6px; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
#notify-btn.on { color: var(--accent); }
#notify-btn svg { width: 20px; height: 20px; fill: currentColor; }
.rules-text { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; max-height: 50vh; overflow-y: auto; }

/* burrow settings, banner, invites */
.settings-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-edit { display: flex; flex-direction: column; gap: 8px; }
.banner-preview { aspect-ratio: 3 / 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.banner-preview img { width: 100%; height: 100%; object-fit: cover; }
.transfer-row { display: flex; gap: 8px; }
.transfer-row select { flex: 1; }
.invite-make { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.invite-make label { flex: 1; min-width: 120px; }
.invite-list { display: flex; flex-direction: column; gap: 4px; }
.invite-list li { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.invite-list li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.invite-list .btn { padding: 6px 12px; font-size: 13px; }
.invite-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.invite-card > p { margin: 0; padding: 0 14px 12px; }
.invite-banner { aspect-ratio: 3 / 1; overflow: hidden; }
.invite-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invite-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.invite-body b { font-size: 18px; color: var(--text-strong); }
.auth-card .invite-card { margin-bottom: 4px; }
.small-card .invite-banner { display: none; }

/* events */
.event-list { display: flex; flex-direction: column; gap: 2px; }
.event-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; cursor: pointer; color: var(--text); }
.event-row:hover { background: var(--hover); }
.event-row svg, .event-when svg { width: 17px; height: 17px; fill: var(--ember); flex: none; }
.event-row.now svg { fill: var(--berry); }
.event-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.event-text b, .event-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-more, .event-list .hint { padding: 4px 10px; font-size: 13px; color: var(--muted); }
.event-more { cursor: pointer; font-weight: 700; }
.event-list.big .event-row { padding: 10px; }
.event-when { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0; }
.event-details { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; }
.rsvp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rsvp-row .btn { flex: 1; }

/* group conversations */
.group-avatar { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.group-avatar svg { width: 70%; height: 70%; fill: currentColor; }
.dm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-picker li .pick-tick { margin-left: auto; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); flex: none; }
.people-picker li.picked { background: var(--accent-soft); }
.people-picker li.picked .pick-tick { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.group-people { display: flex; flex-direction: column; gap: 6px; }
.group-people li { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* folders in the burrow list */
.folder-head { display: flex; align-items: center; padding: 6px 4px 2px; }
.folder-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 4px 6px; border-radius: 8px; text-align: left; }
.folder-toggle:hover { background: var(--hover); }
.folder-toggle .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; flex: none; transition: transform .15s; }
.folder-toggle.folded .chev { transform: rotate(-90deg); }
.folder-toggle > svg:not(.chev) { width: 15px; height: 15px; fill: currentColor; flex: none; }
.folder-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-toggle.unread span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--cloudberry); vertical-align: middle; }
.folder-more svg { width: 18px; height: 18px; fill: currentColor; }
.folder-btn { width: 36px; height: 36px; flex: none; opacity: .5; }
.folder-btn svg { width: 17px; height: 17px; fill: currentColor; }
.switch-row:hover .folder-btn, .folder-btn:focus-visible { opacity: 1; }
@media (hover: none) { .folder-btn { opacity: .8; } }
.modal-card textarea { resize: vertical; line-height: 1.4; }

/* ---- voice and the Campfire: push to talk, moderating voice, soundboard, listen together, calls */
.conn.talking { color: var(--moss); font-weight: 800; }
.voice-icon + .room-name + .seat-count, .seat-count { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.fire-card.talking .fire-badge { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--moss); }
.muted-icon.server-muted { fill: var(--berry); }
.vs-group { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.vs-label { font-size: 13px; font-weight: 800; color: var(--text-strong); }
.vs-group input[type="range"] { width: 100%; accent-color: var(--accent); padding: 0; background: none; border: none; box-shadow: none; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; }
.key-btn { min-width: 120px; padding: 6px 12px; font-variant-numeric: tabular-nums; }
.key-btn.capturing { border-color: var(--accent); color: var(--accent); }
.level-meter { position: relative; }
.level-meter i { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--berry); border-radius: 1px; }
.volume-mod { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.volume-mod .btn { padding: 6px 10px; font-size: 13px; }
.volume-mod label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.board-pop { width: 280px; }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.board-sound { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.board-sound:hover:not(:disabled) { border-color: var(--accent); }
.board-sound:disabled { opacity: .5; cursor: default; }
.board-sound span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-emoji { flex: none; width: 22px; height: 22px; display: grid; place-items: center; font-size: 18px; }
.board-emoji svg { width: 18px; height: 18px; fill: var(--muted); }
.board-emoji .custom-emoji { width: 22px; height: 22px; object-fit: contain; }
.sound-manage .sound-emoji { width: 52px; text-align: center; }
.sound-manage .sound-name { flex: 1; min-width: 0; }
.sound-add { display: flex; flex-direction: column; gap: 8px; }
.sound-add-row { display: flex; gap: 8px; }
.sound-add-row input:first-child { width: 64px; flex: none; text-align: center; }
.sound-add-row input:last-child { flex: 1; min-width: 0; }
.fire-notes { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 1; }
.fire-note { padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--text-strong); font-size: 13px; font-weight: 700; box-shadow: var(--shadow); white-space: nowrap; animation: fire-note 4s ease-out forwards; }
@keyframes fire-note { 0% { opacity: 0; transform: translateY(8px); } 10%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .fire-note { animation: none; } }
.listen-panel { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "video info" "video controls"; align-items: center; gap: 4px 14px; width: min(640px, calc(100% - 24px)); align-self: center; margin: 0 12px 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.listen-panel.hidden { display: none; }
.listen-video { grid-area: video; width: 192px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.listen-panel.video-hidden { grid-template-areas: "info" "controls"; grid-template-columns: minmax(0, 1fr); }
/* Hidden, the video keeps playing (and is heard), just out of sight. */
.listen-panel.video-hidden .listen-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.listen-frame { width: 100%; height: 100%; border: 0; display: block; }
.listen-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.listen-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.listen-controls { grid-area: controls; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.listen-controls .icon-btn svg { width: 20px; height: 20px; }
.listen-controls input[type="range"] { width: 90px; accent-color: var(--accent); padding: 0; background: none; border: none; box-shadow: none; }
.listen-controls .link-btn { font-size: 13px; }
.danger-link { color: var(--berry); }
#fire-listen.on { background: var(--accent); color: var(--accent-ink); }
.call-btn svg { fill: currentColor; }
.call-btn.live { color: var(--online); }
.call-bar { flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 22px 0; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--text-strong); font-weight: 700; font-size: 14px; }
.call-bar.hidden { display: none; }
.call-bar #call-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); flex: none; }
.call-bar .btn { padding: 6px 14px; }
.ring-card { position: fixed; z-index: 40; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(420px, calc(100% - 32px)); padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.ring-card.hidden { display: none; }
.ring-card .avatar { flex: none; animation: ring-pulse 1.4s ease-out infinite; }
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 var(--online); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .ring-card .avatar { animation: none; box-shadow: 0 0 0 3px var(--online); } }
.ring-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ring-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.ring-card .btn { padding: 8px 14px; flex: none; }
@media (max-width: 760px) {
  /* Eight buttons fit across a phone. */
  .fire-controls { gap: 2px; justify-content: space-between; padding-left: 8px; padding-right: 8px; }
  .fire-btn { width: 40px; height: 40px; }
  .fc { font-size: 11px; min-width: 0; }
  .listen-video { width: 128px; }
  .listen-controls input[type="range"] { width: 70px; }
  .call-bar { margin: 8px 12px 0; }
  .ring-card { top: max(12px, env(safe-area-inset-top)); }
}

/* ---- status, custom status, playing now, mentions inbox, notification settings */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.status-dot.online { background: var(--online); }
.status-dot.away { background: var(--cloudberry); }
.status-dot.dnd { background: var(--berry); position: relative; }
.status-dot.dnd::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--surface); }
.status-dot.offline { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
#me-dot { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; box-shadow: 0 0 0 2.5px var(--topbar); }
#me-dot.offline { box-shadow: inset 0 0 0 2px var(--muted), 0 0 0 2.5px var(--topbar); }
.me-btn.offline #me-dot { display: none; }
.tab-avatar-wrap { position: relative; display: inline-flex; }
#tab-dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--topbar); }
.inbox-btn { position: relative; }
.inbox-btn svg { width: 20px; height: 20px; }

.status-picks { display: flex; flex-direction: column; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.status-picks button { display: flex; align-items: center; gap: 10px; }
.status-picks button > span:last-child { display: flex; flex-direction: column; }
.status-picks small { font-weight: 500; font-size: 12px; color: var(--muted); }
.status-picks button[aria-checked="true"] { background: var(--accent-soft); }
#custom-status-btn { display: flex; flex-direction: column; gap: 1px; }
.custom-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.custom-now img, .status-emoji img, .status-emoji-btn img { width: 1.2em; height: 1.2em; vertical-align: -.25em; }

.member-pane .avatar-wrap { position: relative; display: inline-flex; flex: none; }
.member-pane .avatar::after { display: none; }
.member-pane .avatar-wrap .status-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; box-shadow: 0 0 0 2.5px var(--bg); }
.member-pane .avatar-wrap .status-dot.offline { box-shadow: inset 0 0 0 2px var(--muted), 0 0 0 2.5px var(--bg); }
.member-pane li:hover .avatar-wrap .status-dot { box-shadow: 0 0 0 2.5px var(--bg); }
.member-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-sub { font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The ⋯ button only takes room while it shows, so the line under a name gets the space. */
.member-pane li:not(:hover):not(:focus-within) .member-more { width: 0; padding: 0; overflow: hidden; }
.member-sub .status-emoji { margin-right: 4px; }
.playing svg { display: inline-block; width: 14px; height: 14px; fill: currentColor; vertical-align: -2px; margin-right: 4px; }
.playing b { font-weight: 700; color: var(--text); }
.person-custom { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.person-custom .status-emoji { margin-right: 4px; }

.status-row { display: flex; gap: 8px; align-items: stretch; }
.status-row input { flex: 1; min-width: 0; }
.status-emoji-btn { flex: none; width: 46px; padding: 0; font-size: 20px; }
.status-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.status-ideas .chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.status-ideas .chip:hover { background: var(--hover); }

.msg-card.unread { border-color: var(--cloudberry); box-shadow: inset 3px 0 0 var(--cloudberry); }
.ping-avatar { color: #fff; font-weight: 800; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }

.quiet-times { display: flex; gap: 12px; }
.quiet-times label { flex: 1; }
.email-settings { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.email-settings .link-btn { align-self: flex-start; }
.inline-form { display: flex; gap: 8px; margin-top: 4px; }
.inline-form input { flex: 1; min-width: 0; }
.inline-form .btn { flex: none; }
@media (max-width: 720px) {
  .status-picks button { padding: 12px; }
  .inline-form { flex-direction: column; }
}
.auth-card > .forgot-row { margin: -6px 0 0; text-align: right; }
.forgot-row a { color: var(--accent); font-weight: 700; }
.reset-step2 { display: flex; flex-direction: column; gap: 14px; }
#reset-resend { margin-right: 10px; }

/* moderation: reports and the audit log */
.msg-card.resolved { opacity: 0.6; }
.audit-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.audit-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); overflow-wrap: anywhere; }
.audit-row .small { margin-left: auto; }

/* ---------- watching streams: tools on a tile, viewers, chat over a stream, drawing, previews, clips ---------- */
.vtile-tools { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.vtile:hover .vtile-tools, .vtile-tools:focus-within, .vtile.drawing .vtile-tools, .vtile:fullscreen .vtile-tools { opacity: 1; }
.vtile-tools .vtile-full { position: static; opacity: 1; }
.vtile-tool { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 14, 10, .72); color: #fbf4ec; }
.vtile-tool:hover { background: rgba(20, 14, 10, .9); }
.vtile-tool.on { background: var(--accent); color: var(--accent-ink); }
.vtile-tool.tool-clip.on { background: #c4473e; color: #fff; }
.vtile-tool svg { width: 18px; height: 18px; fill: currentColor; }
.vtile.no-video .vtile-tools { display: none; }
/* The chat button only does something on a big or full screen video. */
.vtile:not(.focus):not(:fullscreen) .tool-chat { display: none; }
@media (hover: none) { .vtile-tools { opacity: 1; } }
.vtile-viewers { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(20, 14, 10, .72); color: #fbf4ec; font-size: 13px; font-weight: 800; cursor: default; }
.vtile-viewers svg { width: 15px; height: 15px; fill: currentColor; }
.vtile-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.vtile.drawing { cursor: crosshair; }
.vtile.drawing .vtile-draw { pointer-events: auto; touch-action: none; }
/* Several screens at once: side by side, as wide as there's room for. */
.stage-grid.side-by-side { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.stage-grid.side-by-side .vtile { grid-column: span 2; }
.stage-grid.side-by-side .vtile.focus { grid-column: span 6; width: 100%; aspect-ratio: 16 / 9; justify-self: stretch; cursor: zoom-in; }
@media (max-width: 760px) { .stage-grid.side-by-side .vtile.focus { grid-column: 1 / -1; } .stage-grid.side-by-side .vtile { grid-column: span 6; } }
.stage-grid.side-by-side.many .vtile.focus { grid-column: span 4; }
.vtile .stream-audio, .vtile .vtile-name { z-index: 3; }
.video-view .stage-head { gap: 8px; }
#video-layout { margin-left: auto; }
/* The fireside chat over a big or full screen video. */
.vtile .fire-chat.overlay { position: absolute; z-index: 4; top: 52px; right: 10px; bottom: 10px; width: min(340px, 45%); display: flex; border: 0; border-radius: 16px; background: rgba(20, 14, 10, .78); color: #f6eee4; backdrop-filter: blur(6px); cursor: default; }
.vtile .fire-chat.overlay .fire-chat-head { min-height: 46px; border-bottom-color: rgba(255, 255, 255, .12); }
.vtile .fire-chat.overlay .fire-chat-head b, .vtile .fire-chat.overlay .fire-msg b { color: #fff; }
.vtile .fire-chat.overlay .fire-msg { background: rgba(255, 255, 255, .1); color: #f6eee4; }
.vtile .fire-chat.overlay .fire-msg.mine { background: rgba(255, 255, 255, .18); }
.vtile .fire-chat.overlay .fire-chat-head .icon-btn { color: #f6eee4; }
.vtile .fire-chat.overlay .fire-chat-note { color: rgba(246, 238, 228, .7); }
.vtile .fire-chat.overlay .fire-chat-form { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.vtile .fire-chat.overlay .fire-chat-form input { color: #fff; }
@media (max-width: 760px) { .vtile .fire-chat.overlay { width: auto; left: 10px; top: auto; height: 60%; } }
/* A preview of someone's screen, over the button to watch it. */
.stream-peek { position: fixed; z-index: 60; width: 260px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.stream-peek img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 9px; display: block; background: #0d0907; }
.stream-peek .peek-wait { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 9px; background: #0d0907; color: #d8cbbd; font-size: 12px; font-weight: 700; text-align: center; padding: 10px; }
.stream-peek span { font-size: 12px; font-weight: 800; color: var(--text-strong); padding: 0 4px 2px; }
.clip-preview { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; }
/* Picking what to share in the web app. */
.share-choices { display: grid; gap: 10px; margin-bottom: 12px; }
.share-choice { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; align-items: center; text-align: left; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); }
.share-choice:hover { border-color: var(--accent); }
.share-choice svg { grid-row: span 2; width: 26px; height: 26px; fill: var(--accent); }
.share-choice b { color: var(--text-strong); }
.share-choice span { font-size: 13px; color: var(--muted); }
/* "Someone is live" posts. */
.live-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 12px; max-width: 520px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.live-card .live-text { flex: 1; min-width: 160px; font-weight: 700; color: var(--text-strong); }
.live-badge { background: #c4473e; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; border-radius: 6px; padding: 2px 7px; }
.live-card.over .live-badge { background: var(--muted); }
.live-card.over .live-text { color: var(--muted); font-weight: 600; }
/* Tabs inside a window: your account, friends. */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); overflow-x: auto; flex: none; }
.tabs button { flex: 1 0 auto; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.tabs button:hover { color: var(--text-strong); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.modal-card.account-modal { max-width: 520px; }
.account-pane { display: flex; flex-direction: column; gap: 12px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-row .btn { flex: none; white-space: nowrap; }
#username-box, #two-step-box, #passkey-box, #device-box { display: flex; flex-direction: column; gap: 10px; }
.banner-row, .accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.accent-pick { flex-direction: row; align-items: center; gap: 10px; display: flex; }
.accent-pick input[type="color"] { width: 44px; height: 32px; padding: 2px; border-radius: 8px; cursor: pointer; }
.recovery-codes { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); font-size: 15px; line-height: 1.7; columns: 2; user-select: all; }
.qr-box { align-self: center; width: 200px; height: 200px; padding: 8px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #333; font-size: 13px; text-align: center; }
.qr-box svg { width: 100%; height: 100%; }
.secret-key { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 14px; letter-spacing: .04em; user-select: all; word-break: break-all; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plain-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.plain-list li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plain-list .owner-badge { margin-left: 4px; }
.danger-zone { border: 1.5px solid color-mix(in srgb, var(--berry) 40%, transparent); border-radius: 14px; padding: 14px; }
.passkey-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.passkey-btn svg { width: 18px; height: 18px; fill: currentColor; }
/* Someone's card: banner (or their colour), picture over its edge, names, about me. */
.profile-modal { gap: 10px; }
.profile-head { --card-accent: var(--accent); display: flex; flex-direction: column; position: relative; }
.profile-banner { height: 104px; margin: -26px -26px 0; border-radius: 20px 20px 0 0; background: var(--card-accent); background-size: cover; background-position: center; }
.account-pane .profile-banner { margin: 0; border-radius: 14px 14px 0 0; }
.profile-preview { border: 1px solid var(--line); border-radius: 15px; padding: 0 14px 14px; }
.profile-preview .profile-banner { margin: 0 -14px; }
.profile-avatar.avatar.xl { width: 84px; height: 84px; border-radius: 50%; margin-top: -42px; margin-left: 4px; box-shadow: 0 0 0 5px var(--surface); font-size: 32px; }
.profile-names { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; min-width: 0; }
.profile-names h2 { overflow: hidden; text-overflow: ellipsis; }
.profile-username { color: var(--muted); font-weight: 700; font-size: 14px; }
.profile-bio { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; border-left: 3px solid var(--card-accent); }
.profile-modal .person-meta { gap: 5px; }
.person-status { display: inline-flex; align-items: center; gap: 6px; }
.person-status .status-dot { position: static; box-shadow: none; }
@media (max-width: 760px) {
  .profile-banner { margin: -22px -18px 0; border-radius: 24px 24px 0 0; }
  .modal-card.profile-modal::before { position: absolute; left: 50%; translate: -50% 0; margin-top: 0; z-index: 1; }
}
.opens-card { cursor: pointer; }
.group .author { cursor: pointer; }
.group .author:hover { text-decoration: underline; }
/* Friends */
.friends-row .dm-name .small { font-weight: 600; }
.friends-row .group-avatar svg { width: 14px; height: 14px; }
.friends-panel { display: flex; flex-direction: column; gap: 10px; }
.friend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-height: 120px; }
.friend-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.friend-list li:hover { background: var(--hover); }
.friend-list .avatar-wrap { position: relative; flex: none; }
.friend-list .avatar-wrap .status-dot { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2.5px var(--surface); }
.friend-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: none; padding: 0; font: inherit; color: var(--text-strong); text-align: left; cursor: pointer; }
.friend-text .small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-list .btn { padding: 7px 12px; font-size: 13px; }
.friend-list .friend-heading { padding: 10px 8px 2px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.friend-list .friend-heading:hover, .friend-list .hint:hover { background: none; }
.friend-list .hint { color: var(--muted); font-size: 14px; padding: 18px 8px; }
/* A message from someone you blocked, folded away. */
.blocked-line { padding: 3px 18px; }
.blocked-line button { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.blocked-line button:hover { color: var(--text); text-decoration: underline; }

/* ---- display: compact messages, less motion, keyboard focus ---- */

/* Compact: plain lines instead of rounded cards, for big screens and long chats. */
[data-density="compact"] .group { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 4px 10px; margin-top: 2px; border: 0; border-radius: 8px; background: transparent; }
[data-density="compact"] .group:hover { background: var(--hover); }
[data-density="compact"] .group.mine { border: 0; }
[data-density="compact"] .group .avatar.lg { width: 28px; height: 28px; font-size: 13px; }
[data-density="compact"] .messages { padding-top: 4px; }
[data-density="compact"] .day-divider, [data-density="compact"] .new-divider { margin: 8px 0 4px; }

/* Less motion: chosen in Peiskos, or asked for by the system. */
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-motion="system"] *, [data-motion="system"] *::before, [data-motion="system"] *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* Where the keyboard is, always visible when using one. */
:where(button, a, [tabindex], select, summary, [role="button"], [role="link"], [role="option"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#channel-list li:focus-visible, #dm-list li:focus-visible { outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.skip-link:focus { top: 8px; }

/* ---- the app: offline, waiting messages, quick switcher, shortcuts, servers ---- */

.offline-bar { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 12px; background: var(--text-strong); color: var(--bg); font-size: 13px; font-weight: 700; box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); text-align: center; }
.outbox { margin: 0 0 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.outbox-head { color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.outbox-row { display: flex; align-items: center; gap: 8px; }
.outbox-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.75; }
.place-modal { width: min(560px, 100%); }
.place-search { width: 100%; font-size: 16px; }
.place-list { list-style: none; margin: 10px 0 6px; padding: 0; max-height: min(420px, 55vh); overflow-y: auto; }
.place-list li { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.place-list li.active, .place-list li:hover { background: var(--accent-soft); }
.place-list li.unread .place-label { font-weight: 800; color: var(--text-strong); }
.place-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; margin: 8px 0 14px; }
.shortcut-list dt { text-align: right; }
.shortcut-list dd { margin: 0; }
kbd { display: inline-block; padding: 2px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); font: 600 12px/1.4 inherit; white-space: nowrap; }
.server-accounts { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.server-accounts li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.account-text { flex: 1; min-width: 0; display: grid; }
.auth-accounts { display: grid; gap: 6px; margin-top: 12px; }
#messages .line { transition: transform 0.15s ease; }
@media (hover: none) { #shortcuts-btn { display: none; } }
/* ---- Server admin, bots and webhooks, slash commands */
.modal-card.admin-modal { max-width: 640px; }
.modal-card.bots-modal { max-width: 560px; }
.admin-pane { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.admin-stats div { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 12px; background: var(--surface-2); }
.admin-stats b { font-size: 22px; color: var(--text-strong); }
.admin-stats span { font-size: 12px; color: var(--muted); }
.admin-checks, .admin-voice, .backup-list, .bot-list, .signup-links, .error-list, .update-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.update-changes { list-style: disc; padding-left: 20px; gap: 2px; }
.admin-checks li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.admin-checks li span { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--online); }
.admin-checks li.warn span { background: var(--cloudberry); }
.admin-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.admin-list dt { color: var(--muted); }
.admin-list dd { margin: 0; }
.admin-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.admin-table td { padding: 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.admin-table td:last-child { text-align: right; white-space: nowrap; }
.tiny-btn { padding: 4px 10px; font-size: 13px; }
.signup-links li, .backup-list li, .bot-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.signup-links li.used { opacity: .6; }
.signup-text, .bot-list li > span:first-child { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.backup-list li > span { flex: 1; }
.signup-new, .bot-new { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px; }
.signup-new input, .bot-new input { flex: 1 1 160px; }
.bot-secret { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--mention-bg); }
.bot-secret code { font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.bot-secret button { align-self: flex-start; }
.bot-tag { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px; line-height: 1.4; }
.error-list details { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.error-list summary { cursor: pointer; overflow-wrap: anywhere; }
.error-list pre { margin: 8px 0 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto; }
#command-box .mention-option { justify-content: space-between; }
.command-name { font-weight: 700; }
@media (max-width: 600px) {
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}