:root {
  color-scheme: dark;
  --bg: #0a0f1e;
  --glow-1: rgba(80, 100, 230, 0.20);
  --glow-2: rgba(120, 60, 160, 0.12);
  --panel: #10172b;
  --panel-2: #131b33;
  --raised: #1a2341;
  --raised-2: #212b4d;
  --input: #18213d;
  --line: rgba(160, 180, 255, 0.08);
  --line-strong: rgba(160, 180, 255, 0.14);
  /* the edge of text fields and the message box: 3:1 against the page and the panels */
  --field-line: rgba(160, 180, 255, 0.5);
  --text: #e9edf9;
  --soft: #c3cae0;
  --muted: #8e98b8;
  --faint: #7f8aad;
  --accent: #6b85ff;
  /* the accent behind white text: buttons, the focused menu entry, badges (4.69:1 with white; the hover shade 5.06:1) */
  --accent-strong: #4f68e8;
  --accent-strong-hover: #4a63e0;
  --accent-2: #8fa3ff;
  --accent-soft: rgba(107, 133, 255, 0.16);
  --badge: #f0444f;
  --mention-bg: rgba(240, 68, 79, 0.09);
  --online: #3ccf8b;
  --away: #f5b544;
  --busy: #f0444f;
  --offline: #68739a;
  --danger: #f0565f;
  /* the warning colour behind white text (4.77:1) */
  --danger-strong: #d6333e;
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow: 0 18px 50px rgba(2, 5, 15, 0.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(900px 500px at 0% 0%, var(--glow-1), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, var(--glow-2), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent-2); }
svg { flex: none; }
[hidden] { display: none !important; }
.boot { display: grid; place-items: center; height: 100vh; height: 100dvh; color: var(--faint); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--raised); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- shared bits ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; background: var(--raised);
  transition: background .12s, filter .12s;
}
.btn:hover { background: var(--raised-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--accent-strong); color: #fff; }
.btn.primary:hover { background: var(--accent-strong-hover); }
/* on a profile card the button takes the person's accent, darkened until white text on it passes 4.5:1 for every accent on offer */
.has-accent .btn.primary { background: color-mix(in srgb, var(--accent) 62%, #000); }
.has-accent .btn.primary:hover { background: color-mix(in srgb, var(--accent) 56%, #000); }
.btn.danger { background: var(--danger-strong); color: #fff; }
.btn.ghost { background: none; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 12px; font-size: 13.5px; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--muted);
  position: relative; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--raised); color: var(--text); }
.icon-btn.on { color: var(--text); background: var(--raised); }
.icon-btn.on::after {
  content: ''; position: absolute; bottom: -7px; left: 50%; translate: -50% 0; width: 18px; height: 2px; border-radius: 2px; background: var(--accent);
}
.icon-btn .count {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--badge); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--bg); box-sizing: content-box;
}

.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--badge); color: #fff;
  font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; flex: none;
}
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); flex: none; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--soft); margin-bottom: 6px; }
.field input, .field textarea, .field select, .input {
  width: 100%; background: var(--bg); border: 1px solid var(--field-line); border-radius: var(--r-sm);
  padding: 10px 12px; outline: none; transition: border-color .12s;
}
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { border-color: var(--accent); }
.field .hint { font-size: 12.5px; color: var(--faint); margin-top: 6px; display: block; font-weight: 400; }
.form-error { color: var(--danger); font-size: 14px; margin: -4px 0 12px; }
.form-error:empty { display: none; }

/* avatars: soft rounded squares, like app icons */
.avatar {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  font-weight: 700; font-size: 15px; color: #0d1326; position: relative; user-select: none;
  background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
}
.avatar.lg { width: 72px; height: 72px; border-radius: 20px; font-size: 26px; }
.avatar.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.avatar.xs { width: 18px; height: 18px; border-radius: 6px; font-size: 8px; }
.avatar .dot {
  position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%;
  border: 3px solid var(--panel); background: #4a5475; box-sizing: content-box;
}
.avatar .dot.on, .avatar .dot.online { background: var(--online); }
.avatar .dot.away { background: var(--away); }
.avatar .dot.busy { background: var(--busy); }
.avatar .dot.away::after, .sdot.away::after {   /* crescent */
  content: ''; position: absolute; width: 60%; height: 60%; border-radius: 50%; background: var(--dot-cut, var(--panel)); top: -5%; left: -5%;
}
.avatar .dot.busy::after, .sdot.busy::after {   /* minus bar */
  content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; translate: 0 -50%; border-radius: 2px; background: var(--dot-cut, var(--panel));
}
.avatar .dot { overflow: hidden; }
.sdot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--offline); flex: none; overflow: hidden; --dot-cut: var(--panel); }
.sdot.online { background: var(--online); }
.sdot.away { background: var(--away); }
.sdot.busy { background: var(--busy); }
.sdot.offline { background: transparent; box-shadow: inset 0 0 0 2.5px var(--offline); }
.avatar .dot.offline, .avatar .dot:not(.on):not(.online):not(.away):not(.busy) { background: var(--offline); }
.st-online { color: var(--online) !important; }
.st-away { color: var(--away) !important; }
.st-busy { color: var(--busy) !important; }
.tile {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: 15px; color: #0d1326; letter-spacing: -0.02em;
  background-image: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,0) 65%);
}
.tile.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.tile.has-img { background-image: none; overflow: hidden; }
.tile > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; height: 100vh; height: 100dvh; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; }
.auth-card {
  width: 100%; max-width: 410px; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 20px; padding: 32px 28px 28px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 28px; line-height: 1.15; font-weight: 800; margin: 16px 0 6px; letter-spacing: -0.02em; }
.auth-card p.lede { color: var(--muted); margin: 0 0 22px; }
.auth-card .logo { width: 46px; height: 46px; }
.invite-banner {
  display: flex; gap: 12px; align-items: center; padding: 12px; margin-bottom: 18px;
  background: var(--raised); border-radius: var(--r-md);
}
.invite-banner small { color: var(--muted); display: block; }
.invite-banner strong { font-weight: 700; }
.auth-switch { margin-top: 16px; color: var(--muted); font-size: 14px; }
.auth-switch button { color: var(--accent-2); font-weight: 600; }

/* ---------- shell ---------- */
.app {
  height: 100vh; height: 100dvh; display: grid; gap: 10px;
  /* keeps the top bar and rail clear of a notch, rounded corners and the home bar when installed */
  padding: env(safe-area-inset-top) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  grid-template-columns: 66px minmax(0, 1fr) 300px;
  grid-template-rows: 64px minmax(0, 1fr);
  grid-template-areas: "top top top" "rail work side";
}
.app.side-closed { grid-template-columns: 66px minmax(0, 1fr) 0; }
.app.side-closed .side { display: none; }

/* top bar */
.topbar { grid-area: top; display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 2px; }
.brand { width: 66px; display: grid; place-items: center; flex: none; }
/* the logo sits in the same rounded tile as the rail buttons */
.brand-tile {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent); border: 1px solid var(--line);
}
.brand-tile img { width: 34px; height: 34px; display: block; }
.tabs {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 6px 2px; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tab-bg, var(--panel-2)) 70%, transparent); border: 1px solid var(--line); min-width: 170px; max-width: 230px; flex: none;
  text-align: left; transition: background .12s, border-color .12s;
}
.tab-wrap { position: relative; display: flex; flex: none; }
.tab-wrap .tab { padding-right: 34px; }
.tab-close {
  position: absolute; top: 50%; right: 7px; translate: 0 -50%; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; color: var(--muted); opacity: 0; transition: opacity .12s, background .12s;
}
.tab-wrap:hover .tab-close, .tab-wrap.active .tab-close, .tab-close:focus-visible { opacity: 1; }
.tab-close:hover { background: var(--raised-2); color: var(--text); }
@media (hover: none) { .tab-close { opacity: 1; } }
.tab:hover { background: var(--tab-hover, var(--raised)); }
.tab.active { border-color: var(--accent); background: var(--tab-bg, var(--panel-2)); box-shadow: 0 0 0 3px var(--accent-soft); }
.tab .info { min-width: 0; flex: 1; line-height: 1.2; }
.tab .name { display: block; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.chip-online {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--online);
  background: rgba(60, 207, 139, 0.12); padding: 1px 7px 1px 6px; border-radius: 99px;
}
.chip-online::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tab .badge { height: 17px; min-width: 17px; font-size: 10.5px; padding: 0 5px; }
.tab .unread-dot { width: 7px; height: 7px; }
.tab-add {
  width: 44px; height: 44px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); color: var(--muted);
  display: grid; place-items: center; flex: none;
}
.tab-add:hover { border-style: solid; border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.top-actions {
  display: flex; align-items: center; gap: 4px; padding: 6px; background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-md); flex: none;
}

/* rail: servers, create, discover, then direct messages at the bottom */
.rail {
  grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 6px;
  overflow-y: auto; scrollbar-width: none; min-height: 0;
}
.rail::-webkit-scrollbar { display: none; }
.rail hr { width: 26px; border: 0; border-top: 1px solid var(--line-strong); margin: 2px 0; flex: none; }
.rail-servers { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.rail-item { position: relative; width: 100%; display: flex; justify-content: center; }
.rail-item::before {
  content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 4px; height: 0; border-radius: 0 4px 4px 0;
  background: var(--text); transition: height .15s;
}
.rail-item.unread::before { height: 8px; }
.rail-item:hover::before { height: 18px; }
.rail-item.active::before { height: 30px; background: var(--accent); }
.rail-tile { position: relative; border-radius: 13px; transition: transform .12s; }
.rail-tile:hover { transform: translateY(-1px); }
.rail-tile .tile { transition: border-radius .15s; }
.rail-item.active .tile { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.rail-badge {
  position: absolute; right: -5px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--badge);
  color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; border: 3px solid var(--bg); box-sizing: content-box;
}
.rail-btn {
  position: relative; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent); border: 1px solid var(--line); color: var(--accent-2); transition: background .12s, color .12s, border-radius .15s;
}
.rail-btn:hover { background: var(--accent-strong); color: #fff; border-color: transparent; }
.rail-btn.active { background: var(--accent-strong); color: #fff; border-color: transparent; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-soft); }
.rail-btn.dm { margin-top: 4px; width: 48px; height: 48px; border-radius: 15px; }
.rail-spacer { flex: 1; min-height: 12px; }
.rail-toggle { flex: none; }

/* workspace: channel list + chat in one panel */
.work {
  grid-area: work; display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 0; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.app.sidebar-closed .work, .app.no-sidebar .work { grid-template-columns: 0 minmax(0, 1fr); }
.app.sidebar-closed .sidebar, .app.no-sidebar .sidebar { visibility: hidden; }

.sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.server-head {
  height: 60px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line);
}
.server-head:hover { background: rgba(255,255,255,.02); }
.server-head .title { flex: 1; min-width: 0; line-height: 1.2; }
.server-head strong { display: block; font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.server-head small { color: var(--faint); font-size: 12px; font-weight: 500; }
.server-head .chev { color: var(--muted); }
.channels { flex: 1; overflow-y: auto; padding: 8px 10px 16px; }
.cat { margin-top: 14px; }
.loose:empty + .cat { margin-top: 4px; }
.loose:not(:empty) { margin-bottom: 2px; }
.cat-head { display: flex; align-items: center; gap: 4px; padding: 4px 4px 6px; }
.cat-head .toggle {
  flex: 1; display: flex; align-items: center; gap: 6px; text-align: left; font-size: 13px; font-weight: 700; color: var(--soft);
}
.cat-head .toggle:hover { color: var(--text); }
.cat-head .toggle svg { color: var(--faint); transition: rotate .15s; }
.cat.collapsed .cat-head .toggle svg { rotate: -90deg; }
.cat-head .add { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--faint); }
.cat-head .add:hover { color: var(--text); background: var(--raised); }
.cat.collapsed .channel:not(.active):not(.has-unread) { display: none; }

.channel {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; margin: 2px 0;
  border-radius: var(--r-sm); color: var(--muted); text-align: left; position: relative; cursor: pointer;
}
.channel .ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: var(--raised); color: var(--muted);
}
.channel .label { flex: 1; min-width: 0; line-height: 1.2; }
.channel .name { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel .sub { display: block; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.channel:hover { background: rgba(255,255,255,.035); color: var(--soft); }
.channel.active { background: var(--raised); color: var(--text); }
.channel.active .ico { background: var(--accent); color: #fff; }
.channel.unread { color: var(--text); }
.channel.unread .name { font-weight: 700; }
.channel.unread::before {
  content: ''; position: absolute; left: -10px; top: 50%; translate: 0 -50%; width: 4px; height: 8px;
  background: var(--text); border-radius: 0 4px 4px 0;
}
.channel .edit { opacity: 0; color: var(--muted); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; }
.channel:hover .edit, .channel .edit:focus-visible { opacity: 1; }
.channel .edit:hover { color: var(--text); background: var(--raised-2); }
.channel:hover .badge { display: none; }
.channel.voice .ico { background: transparent; border: 1px dashed var(--line-strong); }

/* chat */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel-2); }
.chat-head {
  height: 60px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line);
}
.chat-head .title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; min-width: 0; }
.chat-head .title .hashmark { color: var(--faint); font-weight: 600; }
.chat-head .title span:last-child { overflow: hidden; text-overflow: ellipsis; }
.chat-head .topic {
  flex: 1; min-width: 0; color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 12px; margin-left: 6px; border-left: 1px solid var(--line-strong);
}
.chat-head .topic:empty { border: 0; }
.chat-head .head-edit { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 8px; margin-left: -8px; border-radius: var(--r-sm); text-align: left; color: inherit; }
.chat-head .head-edit:hover, .chat-head .head-edit:focus-visible { background: var(--raised); }
.chat-head .actions { display: flex; gap: 2px; margin-left: auto; }
.menu-toggle { display: none; }

.status-bar { flex: none; background: var(--accent-strong); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 16px; text-align: center; }

.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 0 10px; overscroll-behavior: contain; position: relative; }
.history-top { padding: 20px 22px 18px; }
.welcome .hash {
  width: 60px; height: 60px; border-radius: 18px; background: var(--raised); display: grid; place-items: center; color: var(--accent-2);
}
.welcome h2 { font-size: 26px; font-weight: 800; margin: 14px 0 4px; letter-spacing: -0.02em; }
.welcome p { margin: 0; color: var(--muted); }
.loading-more { text-align: center; color: var(--faint); font-size: 13px; padding: 10px; }

.divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 22px 6px; color: var(--faint); font-size: 12px; font-weight: 600;
}
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--line-strong); }
.divider.new { color: var(--badge); }
.divider.new::before, .divider.new::after { border-color: rgba(240, 68, 79, .5); }

.msg { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); padding: 3px 56px 3px 22px; }
.msg.first { margin-top: 14px; }
.msg:hover { background: rgba(255, 255, 255, 0.022); }
.msg.mentioned { background: var(--mention-bg); box-shadow: inset 2px 0 0 var(--badge); }
.msg.mentioned:hover { background: rgba(240, 68, 79, 0.12); }
.msg.editing { background: rgba(107, 133, 255, 0.06); }
.msg.pending .text { opacity: .55; }
.msg.failed .text { color: var(--danger); }
.msg .gutter { padding-top: 2px; }
.msg .gutter time { display: block; visibility: hidden; font-size: 10.5px; color: var(--faint); padding-top: 4px; white-space: nowrap; }
.msg:hover .gutter time { visibility: visible; }
.msg .gutter .avatar { cursor: pointer; }
.msg .avatar-btn { display: block; border-radius: 12px; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; line-height: 1.3; margin-bottom: 1px; }
.msg .meta .author { font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: left; }
.msg .meta .author:hover { text-decoration: underline; }
.msg .meta time { font-size: 12px; color: var(--faint); }
.msg .meta .pin-mark { color: var(--accent-2); display: inline-flex; align-self: center; }
.msg .text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--soft); }
.msg .text .edited { font-size: 11px; color: var(--faint); margin-left: 4px; }
.msg .text.jumbo { font-size: 36px; line-height: 1.2; }
.msg .reply-ref {
  grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted);
  margin-top: 12px; position: relative; min-width: 0; text-align: left; max-width: 100%;
}
.msg .reply-ref::before {
  content: ''; position: absolute; left: -38px; top: 9px; width: 32px; height: 12px;
  border: 2px solid var(--line-strong); border-right: 0; border-bottom: 0; border-top-left-radius: 8px;
}
.msg .reply-ref b { font-weight: 700; flex: none; }
.msg .reply-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .reply-ref:hover span { color: var(--text); }
.msg.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 35% { background: var(--accent-soft); } 100% { background: transparent; } }

.msg .tools {
  position: absolute; right: 18px; top: -16px; display: none; align-items: center; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 3px; z-index: 3; box-shadow: 0 6px 18px rgba(2,5,15,.4);
}
.msg:has(:focus-visible) .tools, .msg.tools-open .tools, .msg.tools-touch .tools { display: flex; }
.msg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-xs); }
/* `.tools-focus` keeps the bar up while the keyboard is in it (message-keys.js) */
.msg:focus-visible .tools, .msg.tools-focus .tools { display: flex; }
.msg:focus-visible .gutter time { visibility: visible; }
/* a message at the top edge of the list opens its bar below its first line, where the list does not clip it */
.msg.tools-below .tools { top: auto; bottom: -18px; }
@media (hover: hover) { .msg:hover .tools { display: flex; } }
/* Destructive buttons appear on the bar only while Shift is held (message-bar.js sets .shift-held). */
.msg .tools .destructive { display: none; }
:root.shift-held .msg .tools .destructive { display: grid; }
.msg.tools-touch { background: rgba(255, 255, 255, 0.04); }
@media (hover: none) {
  .msg { -webkit-touch-callout: none; }
  .msg.pressing { -webkit-user-select: none; user-select: none; }
}
.msg .tools button { min-width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; font-size: 16px; }
.msg .tools button:hover { background: var(--raised); color: var(--text); }
.msg .tools button.danger:hover { color: var(--danger); }
.msg .tools .sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 3px; }

.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.attachments button { border-radius: var(--r-md); overflow: hidden; background: var(--raised); display: block; line-height: 0; }
.attachments img { display: block; max-width: min(400px, 100%); max-height: 300px; width: auto; height: auto; object-fit: cover; }
.attachments.multi img { max-width: 240px; max-height: 240px; }
.attachments button { cursor: zoom-in; }
.link-previews button.loading { min-width: 160px; min-height: 90px; }

.reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.reaction {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; font-size: 13px;
  background: var(--raised); border: 1px solid transparent; color: var(--soft); font-weight: 600;
}
.reaction .e { font-size: 15px; line-height: 1; }
.reaction:hover { border-color: var(--line-strong); }
.reaction.mine { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.reaction.add { opacity: 0; color: var(--muted); padding: 0 6px; }
.msg:hover .reaction.add { opacity: 1; }

.edit-box textarea {
  width: 100%; resize: none; background: var(--input); border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 8px 10px; outline: none; max-height: 300px;
}
.edit-box small { font-size: 12px; color: var(--muted); }
.edit-box small button { color: var(--accent-2); }
/* Save and Cancel buttons replace the keyboard hint on touch screens, which have no Escape key */
.edit-actions { display: none; }
@media (pointer: coarse) {
  .edit-box .edit-keys { display: none; }
  .edit-actions { display: flex; gap: 8px; margin-top: 8px; }
}

/* formatting */
.text code { font-family: var(--mono); font-size: 13px; background: var(--bg); padding: 2px 5px; border-radius: 5px; }
.text pre {
  font-family: var(--mono); font-size: 13px; background: var(--bg); border: 1px solid var(--line-strong);
  padding: 10px 12px; border-radius: var(--r-sm); margin: 4px 0; overflow-x: auto; white-space: pre; max-width: 100%;
}
.text pre code { background: none; padding: 0; }
.text blockquote { margin: 2px 0; padding-left: 12px; border-left: 3px solid var(--line-strong); }
.text .spoiler { background: var(--raised-2); color: transparent; border-radius: 4px; cursor: pointer; padding: 0 3px; transition: color .15s; }
.text .spoiler.shown { color: inherit; background: var(--raised); cursor: auto; }
.mention {
  background: var(--accent-soft); color: var(--accent-2); font-weight: 600; padding: 0 4px; border-radius: 5px; cursor: pointer;
  display: inline; text-align: inherit;
}
.mention.me { background: rgba(240, 68, 79, .16); color: #ff8a92; }
.timestamp { background: var(--raised-2); border-radius: 4px; padding: 0 4px; cursor: default; }

/* composer */
.composer { flex: none; padding: 0 18px; position: relative; }
.composer-box { background: var(--input); border: 1px solid var(--field-line); border-radius: var(--r-md); transition: border-color .12s; }
.composer-box:focus-within { border-color: var(--accent); }
/* the message box shows keyboard focus with the same ring as every other control */
.composer-box:has(textarea:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.composer-box.drag { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }
.reply-bar {
  display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px;
  padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line);
}
.reply-bar b { color: var(--text); font-weight: 700; }
.reply-bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-files { display: flex; gap: 10px; padding: 12px 12px 4px; flex-wrap: wrap; }
.pending-file { position: relative; width: 96px; height: 96px; border-radius: var(--r-sm); overflow: hidden; background: var(--raised); }
.pending-file img { width: 100%; height: 100%; object-fit: cover; }
.pending-file.uploading img { opacity: .4; }
.pending-file .state { position: absolute; inset: auto 0 0; font-size: 11px; font-weight: 600; text-align: center; padding: 3px; background: rgba(10,15,30,.75); }
.pending-file .remove {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 7px; background: rgba(10,15,30,.8);
  display: grid; place-items: center; color: var(--text);
}
.pending-file .remove:hover { background: var(--danger); }
.composer-row { display: flex; align-items: flex-end; gap: 2px; padding: 0 6px 0 14px; }
.composer-row textarea {
  flex: 1; resize: none; background: none; border: 0; outline: none; padding: 12px 0 10px; max-height: 40vh; min-height: 46px; line-height: 1.45;
}
.composer-row textarea::placeholder { color: var(--faint); }
.composer-row .icon-btn { margin-bottom: 5px; width: 34px; height: 34px; }
.composer-row .send { color: var(--accent-2); }
.composer-row .send:disabled { opacity: .35; cursor: default; background: none; }
.fmt-row { display: flex; align-items: center; gap: 2px; padding: 0 8px 6px; }
.fmt-row button {
  width: 30px; height: 26px; display: grid; place-items: center; color: var(--faint); border-radius: 6px; font-size: 13.5px; font-weight: 700;
}
.fmt-row button:hover { color: var(--text); background: var(--raised); }
.fmt-row .hint { margin-left: auto; font-size: 11.5px; color: var(--faint); padding-right: 6px; }
.below { height: 26px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding: 0 2px; }
.below .typing b { color: var(--text); font-weight: 700; }
.below .count { color: var(--faint); }
.below .count.over { color: var(--danger); }
.typing-dots { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: bob 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

.suggest {
  position: absolute; left: 18px; right: 18px; bottom: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 6px; box-shadow: var(--shadow); z-index: 5;
}
.suggest .head { font-size: 12px; font-weight: 700; color: var(--faint); padding: 4px 8px 6px; }
.suggest button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--r-xs); text-align: left; }
.suggest button small { color: var(--faint); }
.suggest button.sel { background: var(--raised); }

.jump-latest {
  position: absolute; left: 50%; translate: -50% 0; bottom: calc(100% + 8px); z-index: 4;
  background: var(--accent-strong); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 99px; box-shadow: var(--shadow);
}

.empty-chat { flex: 1; display: grid; place-items: center; padding: 24px; text-align: center; }
.empty-chat > div { max-width: 400px; }
.empty-chat .art { width: 72px; height: 72px; margin: 0 auto 18px; }
.empty-chat .art.orby { width: 170px; height: auto; margin-bottom: 10px; filter: drop-shadow(0 10px 18px rgba(80, 40, 160, .4)); }
.empty-chat h2 { font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; }
.empty-chat p { color: var(--muted); margin: 0 0 22px; }
.empty-chat .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* side panel: members, pins, search */
.side {
  grid-area: side; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 10px 18px; }
.side-head h2 { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.side-search { margin: 0 14px 6px; position: relative; }
.side-search input {
  width: 100%; background: var(--bg); border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 9px 36px 9px 12px; outline: none; font-size: 14px;
}
.side-search input:focus { border-color: var(--accent); }
.side-search svg { position: absolute; right: 11px; top: 50%; translate: 0 -50%; color: var(--faint); pointer-events: none; }
.side-body { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.side-group { margin-top: 10px; }
.side-group > button {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--soft); width: 100%; text-align: left;
}
.side-group > button svg { color: var(--faint); transition: rotate .15s; }
.side-group.collapsed > button svg { rotate: -90deg; }
.side-group.collapsed .member { display: none; }
.member { display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: var(--r-sm); width: 100%; text-align: left; }
.member:hover { background: rgba(255,255,255,.035); }
.member .who { flex: 1; min-width: 0; line-height: 1.25; }
.member .who strong { display: block; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .who small { font-size: 12px; color: var(--faint); }
.member .who small.on { color: var(--online); }
.member.off .avatar { opacity: .55; }
.member.off strong { color: var(--muted); }
.member .crown { color: #f5c04e; }
.side-empty { color: var(--faint); font-size: 14px; text-align: center; padding: 30px 16px; }
.result {
  display: block; width: 100%; text-align: left; padding: 10px; border-radius: var(--r-sm); background: var(--panel-2);
  border: 1px solid var(--line); margin-bottom: 8px;
}
.result:hover { border-color: var(--line-strong); background: var(--raised); }
.result .r-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.result .r-meta b { color: var(--text); font-size: 13px; }
.result .r-text { font-size: 14px; color: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.result mark { background: rgba(245, 192, 78, .25); color: inherit; border-radius: 3px; padding: 0 1px; }
.result .r-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; color: var(--faint); }
.result .r-foot button { color: var(--accent-2); font-weight: 600; min-height: 24px; min-width: 24px; padding: 0 4px; margin-right: -4px; }

/* popovers, modals, toasts */
.popover {
  position: fixed; z-index: 50; min-width: 210px; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 6px; box-shadow: var(--shadow); animation: pop .12s ease-out;
}
.popover .item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 10px;
  border-radius: var(--r-xs); text-align: left; font-size: 14px; font-weight: 600; color: var(--soft);
}
.popover .item:hover, .popover .item:focus-visible { background: var(--accent-strong); color: #fff; outline: none; }
.popover .item.danger { color: var(--danger); }
.popover .item.danger:hover, .popover .item.danger:focus-visible { background: var(--danger-strong); color: #fff; }
.popover hr { border: 0; border-top: 1px solid var(--line-strong); margin: 4px 6px; }
.emoji-pop { width: 340px; padding: 10px; }
.emoji-panel { display: grid; gap: 8px; min-width: 0; }
.emoji-head { display: flex; gap: 8px; align-items: center; }
.emoji-head .input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px; }
.emoji-tabs { display: flex; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.emoji-tabs[hidden] { display: none; }
.emoji-tabs button { flex: 1; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; line-height: 1; color: var(--muted); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.emoji-tabs button:not([aria-selected="true"]) { filter: grayscale(1); opacity: .65; }
.emoji-tabs button[aria-selected="true"] { background: var(--raised); color: var(--text); }
.emoji-tabs button:hover, .emoji-tabs button:focus-visible { opacity: 1; outline: none; }
.emoji-scroll { position: relative; height: 264px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 28px; }
.emoji-cat { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 4px 4px; background: var(--panel); color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.emoji-inline .emoji-cat { background: var(--bg); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button { font-size: 22px; height: 36px; border-radius: 8px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--raised); outline: none; }
.profile-pop { width: 290px; padding: 0; overflow: hidden; }
.profile-pop .banner { height: 88px; }
.profile-pop.has-accent { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel) 70%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow, 0 8px 24px rgba(0,0,0,.35)); }
.name-accent { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 6px; padding: 0 6px; margin-left: -6px; }
.profile-pop h3.name-accent { display: inline-block; }
.profile-pop .inner { padding: 0 16px 16px; margin-top: -36px; }
/* The ring is a border, so its outer radius is the picture's radius plus the border width.
   Keeping them in step makes the picture's corners follow the ring instead of leaving slivers. */
.profile-pop .avatar { border: 5px solid var(--panel); box-sizing: content-box; border-radius: 25px; background-clip: padding-box; }
/* With a picture, the ring is drawn over the picture and the picture runs 2px underneath it.
   Two edges that meet exactly leave a see-through hairline at fractional screen scaling. */
.profile-pop .avatar.has-img { border-color: transparent; position: relative; overflow: visible; }
.profile-pop .avatar.has-img > img { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 22px; }
.profile-pop .avatar.has-img::after { content: ''; position: absolute; inset: -5px; border: 5px solid var(--panel); border-radius: 25px; pointer-events: none; }
.profile-pop h3 { margin: 10px 0 0; font-size: 19px; font-weight: 800; }
.profile-pop .handle { color: var(--muted); font-size: 13.5px; }
.profile-pop .status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 10px 0 14px; }
.profile-pop .card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.profile-pop .card-actions .btn { flex: 1; }

.scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(4, 7, 18, 0.72); backdrop-filter: blur(3px);
  display: grid; place-items: center; animation: fade .12s ease-out;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 450px; background: var(--panel); border-radius: 18px; border: 1px solid var(--line-strong);
  animation: pop .14s ease-out; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--shadow);
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.modal header { padding: 24px 24px 6px; }
.modal header h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.modal header p { margin: 0; color: var(--muted); font-size: 14.5px; }
.modal .body { padding: 14px 24px 4px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-bottom: 14px; }
.choice label {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: var(--r-sm); background: var(--raised);
  cursor: pointer; border: 1px solid transparent; font-weight: 600;
}
.choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { accent-color: var(--accent); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 32px; height: 32px; border-radius: 10px; border: 3px solid transparent; }
.swatches button[aria-pressed="true"] { border-color: var(--text); }
.preview-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border-radius: var(--r-md); margin-bottom: 16px; }
.preview-card small { color: var(--faint); display: block; }
.quote-box { background: var(--bg); border-radius: var(--r-md); padding: 10px 12px; max-height: 140px; overflow: hidden; white-space: pre-wrap; color: var(--soft); font-size: 14px; }
.bulk-delete { margin-top: 12px; }
/* the sentence wraps as text around its checkbox and count, instead of as three narrow columns */
.bulk-delete .check-label { display: block; line-height: 2; }
.bulk-delete .check-label input[type="checkbox"] { vertical-align: middle; margin-right: 6px; }
.bulk-delete .check-label select { display: inline-block; width: auto; vertical-align: middle; background: var(--bg); border: 1px solid var(--field-line); border-radius: var(--r-xs); padding: 2px 6px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.toggle-row strong { display: block; font-size: 14px; }
.toggle-row small { color: var(--faint); font-size: 12.5px; }

.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(4, 7, 18, 0.92); display: grid; place-items: center; padding: 24px; animation: fade .12s; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); border-radius: var(--r-md); }
.lightbox .bar { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); display: flex; gap: 8px; }
.lightbox .bar a, .lightbox .bar button { background: var(--panel); border: 1px solid var(--line-strong); }

.drop-hint {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 2px dashed var(--accent); border-radius: var(--r-lg); font-weight: 700; font-size: 18px; pointer-events: none;
}

#toasts { position: fixed; top: calc(78px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 80; display: grid; gap: 8px; justify-items: center; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--bg); padding: 6px 6px 6px 16px; border-radius: 12px; font-weight: 600; font-size: 14px;
  animation: pop .14s ease-out; box-shadow: var(--shadow); max-width: 90vw;
}
.toast-x { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; line-height: 1; opacity: .75; }
.toast-x:hover, .toast-x:focus-visible { opacity: 1; background: rgba(0, 0, 0, .12); }
.toast.error { background: var(--danger-strong); color: #fff; }

/* ---------- responsive ----------
   The phone layout applies on narrow screens and on short, wide touch screens (a phone held sideways, about 844x390).
   Every phone rule is written against `(max-width: 760px), (hover: none) and (max-height: 500px) and (max-width: 1000px)`
   and every rule for larger screens against its complement, `(min-width: 761px) and (hover: hover), (min-width: 761px) and
   (min-height: 501px), (min-width: 1001px)`. The width cap keeps a tablet whose on-screen keyboard shortens the page on the
   desktop layout. */
@media (max-width: 1180px) {
  .app, .app.side-closed { grid-template-columns: 66px minmax(0, 1fr); grid-template-areas: "top top" "rail work"; }
  .side { display: none; }
  .app.side-open .side {
    display: flex; position: fixed; right: calc(10px + env(safe-area-inset-right)); top: calc(74px + env(safe-area-inset-top)); bottom: calc(10px + env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 20px)); z-index: 30; box-shadow: var(--shadow);
  }
}
@media (max-width: 760px), (hover: none) and (max-height: 500px) and (max-width: 1000px) {
  .app, .app.side-closed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "work"; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); gap: 0; grid-template-rows: 58px minmax(0, 1fr); }
  .rail { display: none; }
  .brand { width: 52px; }
  .brand-tile { width: 38px; height: 38px; border-radius: 11px; }
  .brand-tile img { width: 30px; height: 30px; }
  .top-actions { padding: 3px; margin-right: 8px; border: 0; background: none; }
  .top-actions .hide-sm { display: none; }
  .work { border-radius: 16px 16px 0 0; grid-template-columns: minmax(0, 1fr) !important; border-bottom: 0; }
  .sidebar { display: none; }
  .menu-toggle { display: grid; }
  .app.drawer .rail {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 36; background: var(--bg); padding: calc(12px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)) env(safe-area-inset-left); width: calc(66px + env(safe-area-inset-left));
  }
  .app.drawer .rail-toggle { display: none; }
  .app.drawer .sidebar {
    display: flex; position: fixed; top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom); left: calc(66px + env(safe-area-inset-left)); width: min(300px, calc(100vw - 110px)); z-index: 35; visibility: visible;
    box-shadow: var(--shadow); border-radius: 0 16px 16px 0;
  }
  .user-stack { display: none !important; }
  .app.drawer.no-sidebar .sidebar { display: none; }
  .app.drawer.no-sidebar .user-stack { display: flex !important; }
  .app.sidebar-closed .user-banner, .app.no-sidebar .user-banner { display: flex; }
  .status-btn { padding: 6px; }
  .chat-head .seg { overflow-x: auto; flex: 1; min-width: 0; gap: 2px; margin-left: 4px; padding-left: 8px; scrollbar-width: none; }
  .chat-head .seg::-webkit-scrollbar { display: none; }
  .chat-head .seg button { padding: 5px 7px; }
  /* with tabs beside it, the page title gives way to its icon so the tabs keep their room */
  .chat-head:has(.seg) .title span:last-child:not(.group-ico) { display: none; }
  .settings { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 32px); height: calc(100dvh - 32px); }
  .modal.settings .settings-body { max-height: none; padding: 20px 18px 24px; }
  .settings-nav { flex-direction: row !important; overflow-x: auto; border-right: 0 !important; border-bottom: 1px solid var(--line); padding: 12px !important; }
  .settings-nav h2 { display: none; }
  .settings-close { z-index: 2; top: 10px; right: 10px; background: var(--raised); color: var(--text); box-shadow: -10px 0 10px 4px var(--panel); }
  .settings-nav button span { white-space: nowrap; }
  .drawer-scrim { position: fixed; inset: 0; z-index: 34; background: rgba(4, 7, 18, 0.65); }
  .chat-head { padding-left: 6px; }
  .chat-head .topic { display: none; }
  .msg { padding: 3px 12px 3px 12px; grid-template-columns: 52px minmax(0, 1fr); }
  .msg .tools { right: 8px; }
  .composer { padding: 0 10px; padding-bottom: env(safe-area-inset-bottom); }
  .composer-row textarea, .field input, .side-search input { font-size: 16px; }
  .fmt-row .hint { display: none; }
  .app.side-open .side { top: calc(64px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right)); bottom: calc(6px + env(safe-area-inset-bottom)); }
  .attachments img { max-width: 100%; }
}
@media (hover: none) {
  .reaction.add { opacity: 1; }
  .channel .edit { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- status button and menu ---------- */
.status-btn {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 9px 0 11px; border-radius: var(--r-sm);
  color: var(--soft); font-size: 13.5px; font-weight: 600;
}
.status-btn:hover { background: var(--raised); color: var(--text); }
.dust-btn {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border-radius: var(--r-sm);
  color: var(--soft); font-size: 13.5px; font-weight: 600;
}
.dust-btn svg { color: var(--accent-2); }
.dust-btn:hover, .dust-btn.active { background: var(--raised); color: var(--text); }
.help-btn { width: 30px; height: 30px; align-self: center; margin-right: 8px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.help-btn:hover, .help-btn[aria-expanded="true"] { background: var(--raised); color: var(--text); }
.popover.dust-help { width: 280px; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.dust-help strong { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 6px; }
.dust-help p { margin: 0 0 8px; }
.dust-help p:last-child { margin-bottom: 0; }
.bank { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px; border-radius: var(--r-sm); background: var(--raised); }
.bank svg { color: var(--accent-2); }
.bank-amount { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.store-orby { display: block; width: 190px; height: auto; margin: 0 auto 8px; filter: drop-shadow(0 10px 18px rgba(80, 40, 160, .4)); }
.store-art { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 22px; background: var(--accent-soft); color: var(--accent-2); }
.status-btn .sdot { --dot-cut: var(--panel); }
.status-btn svg { color: var(--faint); }
.status-menu { width: 300px; }
.status-item { justify-content: flex-start !important; align-items: center; gap: 12px !important; }
.status-item .st-text { flex: 1; min-width: 0; line-height: 1.25; }
.status-item strong { display: block; font-size: 14px; }
.status-item small { display: block; font-size: 12px; font-weight: 500; color: var(--faint); }
.popover .status-item:hover small, .popover .status-item:focus-visible small { color: rgba(255,255,255,.8); }
.popover .status-item:hover .sdot { --dot-cut: var(--accent); }
.status-item.current { background: var(--raised); }
.status-item.current small { color: var(--muted); }
.menu-note { font-size: 12.5px; color: var(--faint); margin: 6px 10px 6px; line-height: 1.45; }
.link-btn { color: var(--accent-2); font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.status-choices { display: grid; gap: 4px; }
.status-choices .item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-sm); text-align: left;
  background: var(--bg); border: 1px solid var(--line);
}
.status-choices .item:hover { border-color: var(--line-strong); }
.status-choices .item.current { border-color: var(--accent); background: var(--accent-soft); }
.status-choices .sdot { --dot-cut: var(--bg); }

/* ---------- DM sidebar ---------- */
.server-head.static { cursor: default; }
.server-head.static:hover { background: none; }
.head-ico, .group-ico {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); flex: none;
}
.chat-head .group-ico { width: 30px; height: 30px; }
.chat-head .title .avatar.xs { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.chat-head .title .avatar.xs .dot { width: 8px; height: 8px; border-width: 2px; border-color: var(--panel-2); right: -3px; bottom: -3px; --dot-cut: var(--panel-2); }
.dm-nav { padding: 10px 10px 4px; border-bottom: 1px solid var(--line); }
.dm-nav .channel { margin: 1px 0; }
.sidebar .side-search { margin: 12px 10px 0; }
.sidebar .channels { padding-top: 4px; }
.cat-head .toggle.static { cursor: default; }
.dm-row .avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.dm-row .avatar .dot { border-color: var(--panel); --dot-cut: var(--panel); }
.dm-row.active .avatar .dot { border-color: var(--raised); --dot-cut: var(--raised); }
.group-avatar { background: var(--raised-2); color: var(--accent-2); background-image: none; }
.group-tools { display: grid; gap: 6px; margin-top: 16px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.avatar .dot { --dot-cut: var(--panel); }
.member .avatar .dot { --dot-cut: var(--panel); }

/* ---------- friends and other full pages ---------- */
.seg { display: flex; gap: 4px; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line-strong); }
.seg button { padding: 5px 11px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg button:hover { background: var(--raised); color: var(--text); }
.seg button.on { background: var(--raised-2); color: var(--text); }
.seg button.add { color: var(--online); }
.seg button.add.on { background: rgba(60, 207, 139, .14); }
.page-body { flex: 1; overflow-y: auto; padding: 22px 26px 30px; }
.page-intro { max-width: 640px; margin-bottom: 20px; }
.page-intro h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.page-intro p { margin: 0 0 14px; color: var(--muted); }
.add-friend { display: flex; gap: 8px; }
.add-friend .input { flex: 1; min-width: 0; }
.list-head { font-size: 12.5px; font-weight: 700; color: var(--faint); margin: 0 0 8px 4px; }
.people { display: grid; gap: 2px; max-width: 820px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); border-top: 1px solid var(--line); }
.person-row:hover { background: rgba(255,255,255,.03); }
.who-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.who-btn .who { min-width: 0; line-height: 1.25; }
.who-btn strong { display: block; font-weight: 700; }
.who-btn small { color: var(--faint); font-size: 12.5px; }
.who-btn .avatar .dot { border-color: var(--panel-2); --dot-cut: var(--panel-2); }
.row-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn.round { border-radius: 50%; background: var(--raised); width: 36px; height: 36px; }
.icon-btn.round:hover { background: var(--raised-2); }
.icon-btn.round.ok:hover { color: var(--online); }
.pill { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--raised); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.empty-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--raised); color: var(--accent-2); margin: 0 auto 16px; }

/* ---------- discover ---------- */
.side-search.flush { margin: 0 0 10px; }
.side-search.big input { padding: 12px 40px 12px 14px; font-size: 15px; }
.discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.server-card {
  display: flex; flex-direction: column; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .12s, transform .12s;
}
.server-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.server-card .banner { height: 56px; display: block; }
.server-card .card-body { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 16px; flex: 1; }
.server-card .tile { margin-top: -24px; box-shadow: 0 0 0 4px var(--panel); }
.server-card strong { font-size: 16px; font-weight: 800; margin-top: 4px; }
.server-card .desc { color: var(--muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); font-weight: 600; margin-top: auto; padding-top: 6px; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.detail-stats div { background: var(--bg); border-radius: var(--r-md); padding: 10px 12px; }
.detail-stats strong { display: block; font-size: 20px; font-weight: 800; }
.detail-stats small { color: var(--faint); font-size: 12px; }
.detail-owner { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.detail-channels { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-channels span { display: inline-flex; align-items: center; gap: 5px; background: var(--raised); padding: 4px 10px; border-radius: 8px; font-size: 13px; color: var(--soft); }

/* ---------- promoted list in discover ---------- */
.promos { margin-top: 36px; }
.promos-head { display: flex; align-items: center; gap: 10px; }
.promos-head h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.promos-note { margin: 6px 0 14px; color: var(--muted); font-size: 13.5px; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.promo-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; min-width: 0; color: inherit; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .12s, transform .12s;
}
.promo-card:hover, .promo-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.promo-ico { --k: var(--accent-2); flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); }
.promo-ico.kind-game { --k: #a78bfa; }
.promo-ico.kind-server { --k: var(--accent-2); }
.promo-ico.kind-website { --k: #5ad1f0; }
.promo-ico.kind-app { --k: var(--online); }
.promo-ico.kind-orbit { --k: var(--accent); }
button.promo-card { text-align: left; }
.promo-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.promo-body strong { font-size: 15.5px; font-weight: 800; overflow-wrap: anywhere; }
.promo-body .desc { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.promo-go { flex: none; color: var(--faint); margin-top: 2px; }
.promo-card:hover .promo-go { color: var(--accent-2); }

/* ---------- people picker ---------- */
.pick-list { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; margin: 0 -6px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-sm); text-align: left; width: 100%; }
.pick:hover { background: var(--raised); }
.pick.on { background: var(--accent-soft); }
.pick .who { flex: 1; min-width: 0; line-height: 1.25; }
.pick strong { display: block; font-weight: 700; font-size: 14px; }
.pick small { color: var(--faint); font-size: 12px; }
.pick .check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-strong); display: grid; place-items: center; color: #fff; flex: none; }
.pick.on .check { background: var(--accent); border-color: var(--accent); }
.pick .avatar .dot { border-color: var(--panel); }
.pick-count { font-size: 12.5px; color: var(--faint); margin: 10px 0 0; }

/* ---------- settings ---------- */
.modal.settings { max-width: 820px; display: grid; grid-template-columns: 220px minmax(0, 1fr); position: relative; min-height: min(560px, calc(100vh - 32px)); min-height: min(560px, calc(100dvh - 32px)); overflow: hidden; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: 22px 12px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 18px 0 0 18px; }
.settings-nav h2 { font-size: 13px; font-weight: 800; color: var(--faint); margin: 0 10px 10px; }
.settings-nav button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; font-size: 14px; text-align: left; }
.settings-nav button:hover { background: var(--raised); color: var(--text); }
.settings-nav button[aria-current="true"] { background: var(--accent-soft); color: var(--text); }
.settings-nav button[aria-current="true"] svg { color: var(--accent-2); }
.settings-body { padding: 26px 30px 30px; overflow-y: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); min-height: 0; }
.settings-body h3 { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.settings-body .sec-lede { color: var(--muted); margin: 0 0 20px; font-size: 14px; max-width: 62ch; }
.settings-close { position: absolute; top: 14px; right: 14px; }
.audio-block { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 16px 14px; margin-bottom: 14px; }
.audio-block h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--soft); }
.audio-block .field select { background: var(--panel); }
.slider-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.slider-field label { font-size: 13px; font-weight: 600; color: var(--soft); }
.slider-field output { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--text); background: var(--raised); padding: 2px 8px; border-radius: 6px; min-width: 52px; text-align: center; }
.field input[type="range"], input[type="range"] {
  grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; outline-offset: 6px;
  padding: 0; border: 0; margin: 8px 0 4px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--raised-2) var(--fill, 50%)); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mic-test { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.meter { flex: 1; min-width: 120px; height: 10px; border-radius: 99px; background: var(--raised-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--online), var(--away)); border-radius: 99px; transition: width .06s linear; }
.meter i[data-hot="1"] { background: linear-gradient(90deg, var(--online), var(--away), var(--busy)); }
.check-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--soft); }
.check-label input { accent-color: var(--accent); }
.hint { font-size: 12.5px; color: var(--faint); margin: 8px 0 0; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--raised-2); box-shadow: inset 0 0 0 1px var(--field-line); transition: background .15s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate .15s; }
.switch input:checked + span { background: var(--accent); box-shadow: none; }
.switch input:checked + span::after { translate: 18px 0; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.welcome .avatar.lg { width: 60px; height: 60px; border-radius: 18px; font-size: 22px; }
.status-menu .item { padding: 9px 10px; }

/* ---------- profile pictures ---------- */
.avatar.has-img { background-image: none; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.pfp-actions { display: flex; gap: 6px; margin: 10px 0 2px; flex-wrap: wrap; }
.cropper { display: flex; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--accent); border-radius: var(--r-md); margin-bottom: 14px; background: var(--accent-soft); flex-wrap: wrap; }
.crop-view {
  position: relative; width: 220px; height: 220px; flex: none; overflow: hidden; border-radius: 16px; background: #000;
  cursor: grab; touch-action: none; user-select: none;
}
.crop-view.dragging { cursor: grabbing; }
.crop-view img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 33.33% 33.33%, linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 33.33% 33.33%; }
.crop-side { flex: 1; min-width: 180px; display: grid; gap: 8px; }
.crop-side > small { color: var(--muted); font-size: 12.5px; }
.crop-buttons { display: flex; gap: 6px; }

/* ---------- appearance settings ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-bottom: 18px; }
.theme-card {
  display: grid; gap: 8px; padding: 8px 8px 10px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--bg); text-align: left;
  font-size: 13px; font-weight: 700; color: var(--soft);
}
.theme-card:hover { border-color: var(--line-strong); }
.theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); }
.theme-card .label { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.theme-card .label svg { color: var(--accent-2); }
.mini { display: grid; grid-template-columns: 14px 30px 1fr; gap: 3px; height: 58px; padding: 4px; border-radius: 8px; }
.mini i { border-radius: 4px; display: block; }
.mini i:nth-child(3) { display: grid; align-content: end; padding: 4px; }
.mini b { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); margin-top: 3px; width: 70%; }

/* ---------- profile card banners ---------- */
.profile-pop .banner.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.banner-field { display: grid; gap: 8px; }
.banner-preview { width: 100%; max-width: 315px; border-radius: 8px; background-size: cover; background-position: center; background-repeat: no-repeat; background-clip: padding-box; border: 1px solid var(--line); }
.cropper.wide { flex-direction: column; align-items: stretch; }
.cropper.wide .crop-view { max-width: 100%; border-radius: 8px; }
.cropper.wide .crop-mask { border-radius: 8px; }

/* ---------- server banners ---------- */
/* The picture stops at the border, so the 1px bottom line keeps its normal colour instead of showing the picture's bright edge through it. */
.server-head.has-banner { height: 116px; align-items: flex-end; padding-bottom: 10px; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; background-clip: padding-box; }
.server-head.has-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 10, 22, .85), rgba(6, 10, 22, .15) 70%); }
.server-head.has-banner > * { position: relative; }
.server-head.has-banner strong, .server-head.has-banner .chev { color: #fff; }
.server-head.has-banner small { color: rgba(255, 255, 255, .78); }

/* ---------- group conversation pictures ---------- */
.banner-preview.square { width: 88px; height: 88px; border-radius: 26px; }
.chat-head .avatar.head-pic { width: 30px; height: 30px; border-radius: 9px; }

/* ---------- channel icons and channel settings ---------- */
.emoji-ico { font-size: 16px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.chat-head .title .emoji-ico { font-size: 19px; }
.chan-rows { display: grid; gap: 8px; }
.chan-row { display: flex; gap: 10px; align-items: center; }
.chan-row .input { flex: 1; min-width: 0; }
.chan-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--raised); color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.chan-icon:hover, .chan-icon[aria-expanded="true"] { border-color: var(--accent); }
.chan-icon .emoji-ico { font-size: 20px; }
.emoji-inline { display: grid; gap: 8px; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.emoji-inline-head { display: flex; gap: 8px; align-items: center; }
.emoji-inline-head .input { flex: 1; min-width: 0; }
.emoji-none { margin: 0; padding: 14px 8px; color: var(--faint); font-size: 13px; text-align: center; }

/* ---------- account strip: picture and name, mic mute, deafen, settings ---------- */
.sidebar-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.user-banner {
  flex: none; height: 52px; margin: 0 6px 4px; padding: 0 5px 0 4px; display: flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, var(--raised) 65%, var(--panel)); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ub-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 3px 6px 3px 3px; border-radius: 10px; text-align: left; }
.ub-me:hover { background: var(--raised); }
.ub-me .avatar { --dot-cut: var(--panel); }
.ub-name { min-width: 0; line-height: 1.2; }
.ub-name strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; overflow-wrap: anywhere; }
.ub-name small { display: block; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-btn { width: 32px; height: 32px; flex: none; }
.ub-btn.off { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ub-btn.off:hover { background: color-mix(in srgb, var(--danger) 24%, transparent); color: var(--danger); }
.user-stack { display: none; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); width: 100%; }
.user-stack .ub-me { flex: none; padding: 2px; }
.user-stack .ub-btn { width: 36px; height: 36px; }
.app.sidebar-closed .user-stack, .app.no-sidebar .user-stack { display: flex; }
.app.sidebar-closed .user-banner, .app.no-sidebar .user-banner { display: none; }

/* An emoji channel icon shows on its own, without the tile or outline behind it. */
.channel .ico.emoji, .channel.active .ico.emoji, .channel.voice .ico.emoji { background: transparent; border: 0; }
.channel .ico.emoji .emoji-ico { font-size: 21px; }

/* ---------- server folders and dragging in the rail ---------- */
.rail { position: relative; }
.rail-item { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.rail-folder { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rail-folder.open { width: 56px; padding: 5px 0 6px; gap: 8px; background: rgba(160, 180, 255, 0.07); border-radius: 18px; }
.folder-items { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.folder-tile { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--raised); border: 1px solid var(--line); color: var(--muted); position: relative; }
.rail-folder.open .folder-tile { background: transparent; border-color: transparent; width: 40px; height: 40px; }
.folder-tile:hover { color: var(--text); }
.folder-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; width: 100%; height: 100%; padding: 6px; }
.folder-grid i { display: block; border-radius: 5px; }
.rail-item.dragging { opacity: 0.35; }
.rail-item.drop-into .rail-tile { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.rail-drop-line { position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 3px; background: var(--accent); pointer-events: none; z-index: 5; }
.rail-ghost { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0.92; border-radius: 15px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
body.rail-dragging, body.rail-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* ---------- written status message ---------- */
.status-bubble {
  margin: 10px 0 0; padding: 7px 11px; max-width: 100%; width: fit-content; font-size: 13.5px; line-height: 1.35; color: var(--text);
  background: var(--raised); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; overflow-wrap: anywhere;
}
.profile-pop .status-bubble + .status { margin-top: 12px; }

/* ---------- voice: people in a voice channel, and your connection panel ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.voice-members ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 34px; display: flex; flex-direction: column; gap: 1px; }
.voice-members li {
  display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: var(--r-xs); color: var(--soft); font-size: 13px; cursor: pointer;
}
.voice-members li:hover { background: var(--raised); }
.voice-members .avatar { flex: none; transition: box-shadow 0.08s; }
.ub-me .avatar { transition: box-shadow 0.08s; }
.voice-members li.speaking .avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--online); }
/* Your own picture in the account strip lights up the same way while you talk. */
.ub-me.speaking .avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--online); }
.vm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-muted, .vm-deaf { flex: none; display: grid; color: var(--danger); }
/* Camera on, and the red LIVE pill (with a watcher count on your own share) beside a person sharing their screen. */
.vm-cam { flex: none; display: grid; color: var(--soft); }
.vm-live { flex: none; border: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; line-height: 14px; }
.vm-live:hover { filter: brightness(1.12); }
.vm-live:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.vm-watchers { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; letter-spacing: 0; }
/* End-to-end encryption: a lock in the voice panel, and a warning beside someone whose media cannot be decrypted. */
.e2ee-lock { display: inline-grid; flex: none; margin-left: 2px; color: var(--online); }
.e2ee-lock.warn, .e2ee-mark { color: var(--away); }
.e2ee-mark { flex: none; display: grid; }
/* Whisper: a mark beside the two people in a whisper, a hover button on call rows, and the voice panel's "Whispering to" line. */
.whisper-mark { flex: none; display: grid; color: var(--online); }
.whisper-btn { flex: none; width: 22px; height: 22px; opacity: 0; color: var(--muted); }
.voice-members li:hover .whisper-btn, .call-bar li:hover .whisper-btn, .whisper-btn:focus-visible, .whisper-btn.on { opacity: 1; }
.whisper-btn.on { color: var(--online); background: color-mix(in srgb, var(--online) 18%, transparent); }
/* A row that already shows the mark (someone whispering to you) shows one icon at a time: the hover button replaces the mark. */
.whisper-mark ~ .whisper-btn:not(.on) { display: none; }
@media (hover: hover) {
  .voice-members li:hover .whisper-mark:has(~ .whisper-btn:not(.on)), .call-bar li:hover .whisper-mark:has(~ .whisper-btn:not(.on)) { display: none; }
  .voice-members li:hover .whisper-mark ~ .whisper-btn:not(.on), .call-bar li:hover .whisper-mark ~ .whisper-btn:not(.on) { display: grid; }
}
@media (hover: none) { .whisper-btn { opacity: 1; } }
.voice-panel { flex-wrap: wrap; }
.vp-whisper { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--soft); }
.vp-whisper-text { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-whisper-text strong { overflow: hidden; text-overflow: ellipsis; }
.vp-whisper-in { gap: 6px; padding-top: 2px; }
.vp-whisper-in .vp-whisper-text { flex: 1; white-space: normal; }
.vp-whisper-hint { flex: none; color: var(--muted); font-size: 11px; }
.vp-whisper-dismiss { width: 24px; height: 24px; flex: none; color: var(--muted); }
.voice-panel {
  flex: none; margin: 0 6px 4px; padding: 7px 5px 7px 10px; display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--raised) 65%, var(--panel)); border: 1px solid var(--line); border-radius: var(--r-md);
}
.vp-info { flex: 1; min-width: 0; line-height: 1.25; }
.vp-info strong { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--online); }
.vp-info.connecting strong, .vp-info.reconnecting strong { color: var(--away); }
.vp-where { display: block; max-width: 100%; padding: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.vp-where:hover { color: var(--text); text-decoration: underline; }
.vp-leave { width: 32px; height: 32px; flex: none; color: var(--danger); }
.vp-leave:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); }
.vp-audio-prompt { flex: 1 0 100%; }
.vp-audio-prompt .btn { width: 100%; justify-content: center; }
.vp-audio-prompt.floating { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; flex: none; }
.app.sidebar-closed .voice-panel, .app.no-sidebar .voice-panel { display: none; }

/* On desktop, views with no channel list (Discover, no server selected) keep the account strip and voice panel at the same
   bottom-left spot they have beside a channel list, floating over the content. The collapsed sidebar becomes a click-through
   column that stacks them, and the chat is pinned to the second grid column since the sidebar leaves the grid. */
@media (min-width: 761px) and (hover: hover), (min-width: 761px) and (min-height: 501px), (min-width: 1001px) {
  .app.no-sidebar .sidebar {
    position: fixed; left: 77px; bottom: 11px; width: 268px; z-index: 20; visibility: visible; background: transparent;
    border-right-color: transparent; pointer-events: none; min-height: 0;
  }
  .app.no-sidebar .sidebar-body { display: none; }
  .app.no-sidebar .chat { grid-column: 2; }
  .app.no-sidebar .user-stack { display: none; }
  .app.no-sidebar .user-banner, .app.no-sidebar .voice-panel { pointer-events: auto; box-shadow: 0 6px 18px rgba(2, 5, 15, 0.4); }
  .app.no-sidebar .voice-panel { display: flex; }
  .app.no-sidebar .user-banner { display: flex; }
  .app.no-sidebar .page-body, .app.no-sidebar .empty-chat { padding-bottom: 84px; }
}

/* ---------- calls in direct and group messages ---------- */
.call-bar {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--panel-2); border-bottom: 1px solid var(--line-strong);
}
.call-bar[hidden] { display: none; }
.call-label { display: flex; align-items: center; gap: 6px; flex: none; font-size: 13px; font-weight: 700; color: var(--online); }
.call-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1; min-width: 0; }
.call-bar li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--soft); cursor: pointer; }
.call-bar .avatar { flex: none; transition: box-shadow 0.08s; }
.call-bar li.speaking .avatar { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--online); }
.call-hint { flex: none; font-size: 12.5px; color: var(--muted); }
.callbar-phone { display: none; flex: none; align-items: center; gap: 2px; }
@media (max-width: 760px), (hover: none) and (max-height: 500px) and (max-width: 1000px) { .callbar-phone { display: flex; } .call-bar .call-hint { display: none; } }
.dm-call { flex: none; display: grid; place-items: center; color: var(--online); }

#incomingCalls { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 85; display: grid; gap: 10px; width: min(340px, calc(100vw - 32px)); }
/* on a phone the card drops from the top like a call banner, instead of covering the message box and the keyboard's place */
@media (max-width: 760px), (hover: none) and (max-height: 500px) and (max-width: 1000px) {
  #incomingCalls { top: calc(10px + env(safe-area-inset-top)); bottom: auto; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); width: auto; }
}
.incoming-call {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line-strong); border-left: 3px solid var(--online); border-radius: var(--r-md);
  box-shadow: var(--shadow); animation: pop .14s ease-out;
}
.incoming-call .avatar { flex: none; }
.ic-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ic-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-text span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-actions { flex: none; display: flex; flex-direction: column; gap: 6px; }

/* ---------- call stage: video tiles and camera / screen share controls ---------- */
.voice-panel { flex-wrap: wrap; }
.vp-media { flex: 1 1 100%; display: flex; align-items: center; gap: 4px; }
.vp-media[hidden] { display: none; }
.vp-media .show-call { margin-left: auto; }
.show-call.live { border-color: var(--online); color: var(--online); }
.media-btn { width: 34px; height: 34px; color: var(--soft); }
.media-btn.on { color: var(--online); background: color-mix(in srgb, var(--online) 16%, transparent); }

.call-stage { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line-strong); }
.call-stage[hidden] { display: none; }
.call-stage.page { flex: 1; min-height: 0; border-bottom: 0; }
.stage-view { flex: 1; min-height: 0; display: grid; gap: 8px; }
.call-stage:not(.page) .stage-view { height: min(46vh, 420px); }
.stage-view[data-layout="grid"] .stage-main { display: none; }
.stage-view[data-layout="grid"] .stage-rest {
  display: grid; gap: 8px; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); grid-auto-rows: 1fr; align-content: center;
}
.stage-view[data-layout="grid"][data-count="1"] .stage-rest { grid-template-columns: minmax(0, 1fr); }
.stage-view[data-layout="focus"] { grid-template-columns: minmax(0, 1fr) 190px; }
.stage-view[data-layout="focus"] .stage-main, .stage-view[data-layout="focus"] .stage-rest { min-height: 0; min-width: 0; }
.stage-view[data-layout="focus"] .stage-rest { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.stage-view[data-layout="focus"] .stage-rest .stage-tile { flex: none; aspect-ratio: 16 / 9; }
.stage-main .stage-tile { height: 100%; }

.stage-tile {
  position: relative; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; cursor: pointer;
  background: var(--raised); border-radius: var(--r-md);
}
/* The speaking ring is drawn inside the tile, over the video: a ring outside it is clipped by the scrolling side bar. */
.stage-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--online); opacity: 0; transition: opacity 0.08s;
}
.stage-view[data-layout="grid"] .stage-tile { aspect-ratio: 16 / 9; }
.stage-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.stage-tile.screen video { object-fit: contain; }
.stage-tile.mine:not(.screen) video { transform: scaleX(-1); }
.stage-tile.speaking::after { opacity: 1; }
.stage-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-bar {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 52px); display: flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(5, 8, 20, 0.66);
}
.tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: var(--accent-strong); color: #fff; }
.tile-badge[hidden] { display: none; }
.tile-fs, .tile-more { position: absolute; bottom: 6px; width: 30px; height: 30px; color: #fff; background: rgba(5, 8, 20, 0.66); opacity: 0; transition: opacity 0.12s; }
.tile-fs { right: 6px; }
.tile-more { right: 42px; }
.stage-tile:hover .tile-fs, .stage-tile:hover .tile-more, .tile-fs:focus-visible, .tile-more:focus-visible { opacity: 1; }
@media (hover: none) { .tile-fs, .tile-more { opacity: 1; } }
.tile-muted { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--danger); font-size: 11px; }
.tile-muted[hidden] { display: none; }
/* the tile menu reuses the popover look; a slider row sits between the buttons */
.tile-menu { min-width: 230px; }
.tile-menu .menu-slider { padding: 8px 10px 10px; }
.tile-menu .menu-slider label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--soft); }
.tile-menu .menu-slider output { font-variant-numeric: tabular-nums; color: var(--muted); }
.tile-menu .menu-slider input[type="range"] { width: 100%; }
.tile-menu .item[role="menuitemcheckbox"][aria-checked="true"] { color: var(--accent-2); }
.tile-menu .item[role="menuitemcheckbox"][aria-checked="true"]:hover, .tile-menu .item[role="menuitemcheckbox"][aria-checked="true"]:focus-visible { color: #fff; }
.tile-watch { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; }
/* stream stats overlay on a tile */
.tile-stats {
  position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 6px 10px; border-radius: var(--r-md); pointer-events: none;
  font-size: 12px; line-height: 1.45; color: #fff; background: rgba(5, 8, 20, 0.78); font-variant-numeric: tabular-nums;
}
.tile-stats[hidden] { display: none; }
.tile-stats dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 0 14px; }
.tile-stats dl > div { display: contents; }
.tile-stats dt { color: rgba(255, 255, 255, 0.7); }
.tile-stats dd { margin: 0; text-align: right; font-weight: 700; }
.tile-stats[data-side="local"] [data-side="remote"], .tile-stats[data-side="remote"] [data-side="local"] { display: none; }
.tile-stats[data-limit="cpu"] [data-field="limit"], .tile-stats[data-limit="bandwidth"] [data-field="limit"], .tile-stats[data-limit="other"] [data-field="limit"] { color: var(--danger); }
/* share options popover */
.share-options { width: 260px; padding: 10px; }
.share-title { padding: 2px 4px 8px; font-size: 13px; font-weight: 700; color: var(--soft); }
.share-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-bottom: 6px; padding: 8px 10px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--text); cursor: pointer;
}
.share-choice small { color: var(--muted); font-size: 12.5px; }
.share-choice[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.share-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.share-group.inline { display: flex; gap: 6px; margin-bottom: 6px; }
.share-group.inline .share-choice { margin-bottom: 0; align-items: center; padding: 6px 4px; }
.share-start { width: 100%; justify-content: center; margin-top: 4px; }
.tile-watch[hidden], .tile-stop[hidden], .stage-tile video[hidden] { display: none; }
.tile-stop { position: absolute; top: 8px; right: 8px; color: #fff; background: rgba(5, 8, 20, 0.66); }
.stage-tile:fullscreen { border-radius: 0; background: #000; }
.stage-tile:fullscreen video { object-fit: contain; }

.stage-controls { flex: none; display: flex; justify-content: center; gap: 8px; }
.stage-controls[hidden] { display: none; }
.stage-controls .media-btn { width: 42px; height: 42px; background: var(--raised); border-radius: 50%; }
.stage-controls .media-btn.on { background: color-mix(in srgb, var(--online) 22%, var(--raised)); }
/* microphone, deafen and disconnect: phones only, where the voice panel is tucked away in the channel list */
.stage-call-controls { display: none; gap: 8px; }
.stage-controls .media-btn.off { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, var(--raised)); }
.stage-controls .media-btn.leave { color: #fff; background: var(--danger); }
@media (max-width: 760px), (hover: none) and (max-height: 500px) and (max-width: 1000px) { .stage-call-controls { display: flex; } }
@media (max-width: 760px), (hover: none) and (max-height: 500px) and (max-width: 1000px) {
  .stage-view[data-layout="focus"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 96px; }
  .stage-view[data-layout="focus"] .stage-rest { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .stage-view[data-layout="focus"] .stage-rest .stage-tile { height: 100%; }
}

/* ---------- person menu, volume in the profile card, and moving people between voice channels ---------- */
[data-action="profile-card"][data-id] { -webkit-touch-callout: none; }
.muted-for-me { flex: none; display: grid; color: var(--muted); }
.profile-pop .card-volume { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); }
.profile-pop .card-volume label[for] { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--soft); }
.profile-pop .card-volume output { font-variant-numeric: tabular-nums; color: var(--muted); }
.profile-pop .card-volume input[type="range"] { width: 100%; }
.profile-pop .card-volume .toggle-row { margin-top: 8px; padding: 8px 0 0; }
.profile-pop .card-volume .toggle-row strong { font-size: 13px; }
.voice-members li[draggable="true"] { cursor: grab; }
.voice-members li[draggable="true"]:active { cursor: grabbing; }
.channel.drop-over, .voice-members.drop-over { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ---------- the voice panel: top bar on larger screens, above the account strip on phones ---------- */
.sidebar .vp-extra { display: contents; }
.topbar .voice-panel {
  position: relative; flex: none; margin: 0; padding: 4px 6px 4px 12px; flex-wrap: nowrap; max-width: 46vw;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.topbar .vp-media { flex: none; }
.topbar .vp-media .show-call { margin-left: 0; }
.topbar .vp-info { flex: 0 1 auto; }
/* whisper notices and the call audio prompt drop down under the top bar panel */
.topbar .vp-extra {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; gap: 6px; width: min(340px, calc(100vw - 24px));
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow);
}
.topbar .vp-extra:empty { display: none; }
@media (min-width: 761px) and (hover: hover), (min-width: 761px) and (min-height: 501px), (min-width: 1001px) { .sidebar .voice-panel { display: none !important; } }
@media (max-width: 760px), (hover: none) and (max-height: 500px) and (max-width: 1000px) { .topbar .voice-panel { display: none !important; } }

/* ---------- profile badges ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.user-badge { display: inline-flex; flex: none; width: 32px; height: 32px; user-select: none; }
.user-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.user-badge img { width: 100%; height: 100%; }

.profile-pop .handle .dot-sep { color: var(--faint); margin: 0 2px; }
.profile-pop .handle .pronouns { color: var(--soft); }
.profile-pop .handle .pill.relation { font-size: 11px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }

/* ---------- list colour: the tint a person picks for their own row in member and conversation lists ---------- */
.row-tint { background: linear-gradient(90deg, color-mix(in srgb, var(--row) 52%, transparent), color-mix(in srgb, var(--row) 10%, transparent)); }
.row-tint:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--row) 64%, transparent), color-mix(in srgb, var(--row) 16%, transparent)); }
.channel.active.row-tint { background: linear-gradient(90deg, color-mix(in srgb, var(--row) 64%, transparent), color-mix(in srgb, var(--row) 16%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--row) 70%, transparent); }

/* "Update available": the logo becomes a button with a dot */
button.brand-tile { cursor: pointer; position: relative; padding: 0; font: inherit; color: inherit; }
.brand-update { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.brand-update:hover { background: var(--accent-soft); }
.update-dot {
  position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--badge); border: 2px solid var(--bg);
}

/* Single-line names are clipped to their line box by overflow: hidden (needed for the ellipsis),
   and their parents set a tight line-height, so descenders (g, j, p, q, y) lose their tails.
   Padding below and above the text gives the clip box room for them, and the matching negative
   margin hands that room back so the row height is unchanged. The stacked parents are flex
   columns because block siblings would collapse the negative margins into one. */
.tab .info, .server-head .title, .channel .label, .member .who, .ub-name { display: flex; flex-direction: column; }
.tab .name, .server-head strong, .channel .name, .channel .sub, .member .who strong,
.ub-name strong, .ub-name small, .ic-text strong, .ic-text span {
  padding-block: 0.2em; margin-block: -0.2em;
}

/* ---------- board channels (sticky notes) ---------- */
.chat-head .board-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.board-tools .btn { display: inline-flex; align-items: center; gap: 6px; }
.board-tools .btn.on { background: var(--accent-soft); color: var(--accent-2); }
.board-viewonly { color: var(--muted); font-size: 13px; font-weight: 600; padding: 0 6px; }
.board { --board-a: #0e1428; --board-b: #121a33; flex: 1; min-height: 0; overflow: auto; background: linear-gradient(135deg, var(--board-a), var(--board-b)); }
.board[data-bg="dusk"], .bg-swatch[data-bg="dusk"] { --board-a: #2a1a52; --board-b: #5a2a78; }
.board[data-bg="ocean"], .bg-swatch[data-bg="ocean"] { --board-a: #0b2a4a; --board-b: #11607a; }
.board[data-bg="forest"], .bg-swatch[data-bg="forest"] { --board-a: #0f2a22; --board-b: #1d4a36; }
.board[data-bg="ember"], .bg-swatch[data-bg="ember"] { --board-a: #3a1710; --board-b: #7a3416; }
.board[data-bg="rose"], .bg-swatch[data-bg="rose"] { --board-a: #3a1230; --board-b: #7a2a5a; }
.board[data-bg="slate"], .bg-swatch[data-bg="slate"] { --board-a: #1b2230; --board-b: #2e3a4f; }
.board[data-bg="paper"], .bg-swatch[data-bg="paper"] { --board-a: #d9dbe6; --board-b: #eceef5; }
.bg-swatch { --board-a: #0e1428; --board-b: #121a33; width: 40px; height: 40px; border-radius: var(--r-sm); border: 2px solid transparent; background: linear-gradient(135deg, var(--board-a), var(--board-b)); cursor: pointer; }
.bg-swatch.on { border-color: var(--accent-2); }
.board-bg-picker { display: grid; grid-template-columns: repeat(4, 40px); gap: 8px; padding: 4px; }
.board-canvas { position: relative; background-image: radial-gradient(rgba(160, 180, 255, 0.10) 1px, transparent 1px); background-size: 28px 28px; }
.board[data-bg="paper"] .board-canvas { background-image: radial-gradient(rgba(20, 30, 70, 0.14) 1px, transparent 1px); }
.board-empty { position: sticky; top: 40%; left: 0; width: 100%; max-width: 100vw; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 0 16px; color: var(--muted); pointer-events: none; }
.board-empty strong { color: var(--text); font-size: 18px; }
.board[data-bg="paper"] .board-empty strong { color: #1b2140; }
.note {
  position: absolute; width: 220px; min-height: 150px; padding: 14px 14px 12px; border-radius: var(--r-sm); background: var(--note);
  color: #20243a; box-shadow: 0 10px 24px rgba(2, 5, 15, 0.35), 0 1px 0 rgba(255, 255, 255, 0.35) inset; cursor: grab; touch-action: none; user-select: none;
  transform: rotate(-0.6deg); transition: box-shadow .15s;
}
.note:nth-child(even) { transform: rotate(0.7deg); }
.note:hover { box-shadow: 0 14px 30px rgba(2, 5, 15, 0.45), 0 1px 0 rgba(255, 255, 255, 0.35) inset; }
.note.dragging { cursor: grabbing; z-index: 5; transform: rotate(0deg) scale(1.03); box-shadow: 0 20px 40px rgba(2, 5, 15, 0.5); }
.note-text { font-size: 14.5px; line-height: 1.4; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-blank { opacity: .5; font-weight: 500; }
.note textarea {
  width: 100%; min-height: 84px; resize: vertical; border: 0; outline: 0; border-radius: var(--r-xs); padding: 6px 8px;
  background: rgba(255, 255, 255, 0.45); color: #20243a; font: 600 14.5px/1.4 var(--font); user-select: text; touch-action: auto;
}
.note textarea:focus { background: rgba(255, 255, 255, 0.7); }
.note-x { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--danger); color: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(2, 5, 15, 0.4); }
.note-colours { display: flex; gap: 6px; margin-top: 8px; }
.note-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(32, 36, 58, 0.25); background: var(--c); cursor: pointer; padding: 0; }
.note-dot.on { border-color: #20243a; }
.board.editing .note { cursor: grab; }
.choice.stack { grid-template-columns: 1fr; }
.team-roles { display: grid; gap: 8px; margin-top: 12px; }
.team-role { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.team-role .dot { width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 720px) {
  .board-tools .btn span { display: none; }
  .board-tools .btn { padding: 6px 9px; }
}
.brand-btn:hover { background: var(--raised); }
.brand-menu { min-width: 220px; }
.popover .brand-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.brand-item svg { flex: none; opacity: .85; }
.item-tag { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); }
.brand-item:hover .item-tag, .brand-item:focus-visible .item-tag { background: rgba(255, 255, 255, .22); color: #fff; }

/* channel list: category headers, muting, and dragging */
.cat-head { border-radius: 6px; }
.cat-head .toggle { min-width: 0; }
.cat-head .toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  .cat-head .add { opacity: 0; }
  .cat-head:hover .add, .cat-head .add:focus-visible, .cat-head:focus-within .add { opacity: 1; }
}
.channel.muted:not(.active) { opacity: .5; }
.channel.muted:not(.active):hover { opacity: .8; }
body.sidebar-dragging { user-select: none; cursor: grabbing; }
.drag-ghost { position: fixed; z-index: 200; pointer-events: none; opacity: .92; margin: 0; background: var(--raised); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.drag-source { opacity: .35; }
.drop-line { position: fixed; z-index: 199; height: 2px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.drop-line::before { content: ''; position: absolute; left: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dragging-category .cat-body { display: none; }
.dragging-category .cat { margin-top: 6px; }
.cat.drop-target > .cat-head { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.drop-zone-on { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* shared floating tooltip (tooltip.js) */
.tooltip {
  position: fixed; left: 0; top: 0; z-index: 1000; max-width: 220px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--bg); color: var(--soft); border: 1px solid var(--line-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  font-size: 12px; font-weight: 500; line-height: 1.4; pointer-events: none;
}
.tooltip[hidden] { display: none; }
.tooltip b { display: block; color: var(--text); font-weight: 700; }