/* =====================================================================
   Hearth — stylesheet
   Themes are token sets on [data-theme]. Surfaces are RGB triplets so panels
   can turn translucent ("glass") when a background is showing behind them.
   ===================================================================== */

/* ------------------------------------------------------------------ global tokens */
:root {
  --accent: #f2a541;
  --accent-rgb: 242 165 65;
  --on-accent: #1a1407;
  --ok: #3fcf83;
  --ok-ink: #0b1f14;
  --idle: #f0c24b;
  --dnd: #ef5466;
  --offline: #7a7290;
  --danger: #ef5466;
  /* Filled red behind white text (buttons, badges): darker than --danger so the text keeps 4.5:1. */
  --danger-fill: #d03449;
  /* Keyboard focus ring. The light theme swaps in a darker ink so it shows on pale panels. */
  --focus: var(--accent);
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --rail-w: 72px;
  --side-w: 256px;
  --members-w: 272px;
  --thread-w: 400px;
  --head-h: 52px;
  --gap: 6px;
  --island-r: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glass: 1;
  --img-blur: 0px;
  --dim: 0;
}

/* ------------------------------------------------------------------ themes */
:root, [data-theme='dark'] {
  --bg: 16 14 22;
  --s1: 24 21 32;
  --s2: 30 27 40;
  --s3: 40 36 52;
  --field: 17 15 24;
  --elev: 26 23 36;
  --text-rgb: 237 233 245;
  --text: rgb(var(--text-rgb));
  --text-2: #b6afc6;
  --muted: #8c849d;
  --msg-text: #dcd7e7;
  --line: rgb(255 255 255 / .065);
  --line-2: rgb(255 255 255 / .12);
  --hover: rgb(255 255 255 / .045);
  --active: rgb(255 255 255 / .085);
  --accent-ink: var(--accent);
  --dim-rgb: 0 0 0;
  --scrim: rgb(6 4 10 / .62);
  --island-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 10px 30px rgb(0 0 0 / .28);
  --pop-shadow: 0 18px 50px rgb(0 0 0 / .55);
  --name-darken: 0%;
  color-scheme: dark;
}
[data-theme='midnight'], [data-theme='dim'], [data-theme='ember'] {
  --hover: rgb(255 255 255 / .045);
  --active: rgb(255 255 255 / .085);
  --accent-ink: var(--accent);
  --dim-rgb: 0 0 0;
  --scrim: rgb(6 4 10 / .62);
  --island-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 10px 30px rgb(0 0 0 / .28);
  --pop-shadow: 0 18px 50px rgb(0 0 0 / .55);
  --name-darken: 0%;
  --offline: #7a7290;
}
[data-theme='midnight'] {
  --bg: 0 0 0;
  --s1: 10 10 13;
  --s2: 14 14 18;
  --s3: 26 26 32;
  --field: 4 4 6;
  --elev: 16 16 20;
  --text-rgb: 236 236 242;
  --text-2: #a9a9b8;
  --muted: #7c7c91;
  --msg-text: #d9d9e3;
  --line: rgb(255 255 255 / .07);
  --line-2: rgb(255 255 255 / .13);
  --island-shadow: 0 0 0 1px rgb(255 255 255 / .02);
  color-scheme: dark;
}
[data-theme='dim'] {
  --bg: 30 33 41;
  --s1: 39 42 52;
  --s2: 45 49 60;
  --s3: 58 62 75;
  --field: 32 35 44;
  --elev: 44 48 59;
  --text-rgb: 228 231 239;
  --text-2: #aeb4c4;
  --muted: #979cae;
  --msg-text: #d5d9e4;
  --line: rgb(255 255 255 / .07);
  --line-2: rgb(255 255 255 / .12);
  --island-shadow: 0 10px 30px rgb(0 0 0 / .2);
  color-scheme: dark;
}
[data-theme='ember'] {
  --bg: 20 14 12;
  --s1: 30 22 19;
  --s2: 37 27 23;
  --s3: 52 39 33;
  --field: 22 16 13;
  --elev: 34 25 21;
  --text-rgb: 244 234 226;
  --text-2: #c8b6a8;
  --muted: #978473;
  --msg-text: #e6d8cd;
  --line: rgb(255 220 190 / .07);
  --line-2: rgb(255 220 190 / .13);
  color-scheme: dark;
}
[data-theme='light'] {
  --bg: 229 226 238;
  --s1: 244 242 249;
  --s2: 255 255 255;
  --s3: 236 233 243;
  --field: 241 239 247;
  --elev: 255 255 255;
  --text-rgb: 30 26 40;
  --text-2: #4f4860;
  --muted: #6e697e;
  --msg-text: #2c2738;
  --line: rgb(40 20 80 / .09);
  --line-2: rgb(40 20 80 / .16);
  --hover: rgb(40 20 80 / .045);
  --active: rgb(40 20 80 / .085);
  --accent-ink: color-mix(in oklab, var(--accent) 68%, #000);
  --focus: var(--accent-ink);
  /* Status colours dark enough to stand out on pale panels (3:1, like other UI parts). */
  --ok: #2e965f;
  --idle: #9f8132;
  --dnd: #e04b5d;
  --dim-rgb: 255 255 255;
  --scrim: rgb(30 20 50 / .35);
  --island-shadow: 0 1px 2px rgb(40 20 80 / .06), 0 10px 30px rgb(40 20 80 / .08);
  --pop-shadow: 0 18px 50px rgb(40 20 80 / .2);
  --name-darken: 28%;
  --offline: #888297;
  color-scheme: light;
}

/* --text is re-derived wherever --text-rgb changes (themes, previews, user-colored cards). */
:root, [data-theme], .pcard, .vr-tile { --text: rgb(var(--text-rgb)); }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: rgb(var(--bg)); color: var(--text);
  font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
/* Older Chromium (the desktop app before Electron 34, older Android WebViews) gives buttons align-items: flex-start,
   so empty children like preview swatches got no width and tiles looked blank. Match current browsers. */
button { align-items: normal; justify-items: normal; }
button:disabled { cursor: default; opacity: .55; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* Dialogs and popups take focus themselves so screen readers start at their title; the box needs no ring. */
.modal:focus, .popover:focus, #main:focus { outline: none; }
/* "Skip to conversation": off screen until a keyboard user tabs to it. */
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: var(--pop-shadow);
}
.skip-link:focus { top: 12px; }
::selection { background: rgb(var(--accent-rgb) / .35); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -.015em; }
kbd { font: 600 12px var(--mono); background: rgb(var(--s3)); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.ic { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ic svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ app background */
#app-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#app-bg .bg-layer {
  position: absolute; inset: calc(var(--img-blur) * -2);
  filter: blur(var(--img-blur)); background-size: cover; background-position: center;
}
/* The drift moves a bigger layer around (handled by the graphics card) instead of repainting the
   whole screen every frame. */
#app-bg .bg-layer.animate { inset: -35%; animation: bg-drift 60s ease-in-out infinite alternate; will-change: transform; }
@keyframes bg-drift { 0% { transform: translate(-12%, -6%) scale(1); } 50% { transform: translate(12%, 4%) scale(1.04); } 100% { transform: translate(-4%, 10%) scale(1); } }
html:not(.has-bg) #app-bg .bg-layer.animate { animation: none; }
#app-bg .bg-dim { position: absolute; inset: 0; background: rgb(var(--dim-rgb) / var(--dim)); }

/* ------------------------------------------------------------------ primitives */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background .15s, color .15s, transform .1s, box-shadow .15s, filter .15s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn.ghost { background: var(--active); color: var(--text); }
.btn.ghost:hover:not(:disabled) { background: var(--line-2); }
.btn.danger { background: var(--danger-fill); color: #fff; }
.btn.danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn.danger-ghost { color: var(--danger); background: transparent; margin-right: auto; }
.btn.danger-ghost:hover { background: rgb(239 84 102 / .12); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; height: 42px; }
.danger-text { color: var(--danger) !important; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: var(--text-2); flex: none;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--active); color: var(--text); }
.icon-btn.sm { width: 24px; height: 24px; border-radius: 6px; }
.icon-btn.sm .ic { width: 16px; height: 16px; }
.icon-btn.on { color: var(--text); background: var(--hover); }
.icon-btn.off { color: var(--danger); }
.icon-btn.danger-hover:hover { color: var(--danger); background: rgb(239 84 102 / .12); }
.link-btn { color: var(--accent-ink); font-weight: 600; }
.link-btn:hover { text-decoration: underline; }

.input {
  width: 100%; min-width: 0; height: 42px; padding: 0 13px;
  background: rgb(var(--field)); border: 1px solid var(--line-2); border-radius: 10px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; padding: 10px 13px; resize: vertical; line-height: 1.45; }
select.input {
  padding-right: 34px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat;
}
.input:focus { border-color: rgb(var(--accent-rgb) / .8); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .16); }
.input::placeholder { color: var(--muted); }
.input.mono { font-family: var(--mono); font-size: 13px; }
.emoji-input { width: 64px; flex: none; text-align: center; font-size: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field-hint { font-size: 12.5px; color: var(--muted); }
.form-error { color: var(--danger); font-size: 13.5px; margin: 0; }
.form-error:empty { display: none; }
.muted-p { color: var(--text-2); margin: 0; }
.muted-p.warn { color: color-mix(in oklab, var(--idle) 80%, var(--text)); }
.counter { font-weight: 500; color: var(--muted); font-size: 12px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.center { align-items: stretch; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; }
.row.gap > .field { flex: 1; }
.spacer { flex: 1; }
.bad { color: var(--danger); }

.spinner {
  width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex: none;
  border: 2px solid rgb(var(--accent-rgb) / .25); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.spinner.big { width: 34px; height: 34px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger-fill); color: #fff; font: 700 11px/18px var(--font); text-align: center;
}
.badge.inline { margin-left: auto; }

/* ------------------------------------------------------------------ auth */
#auth { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; padding: 24px; overflow: auto; }
.auth-glow {
  position: absolute; left: 50%; bottom: -140px; width: 620px; height: 300px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .35), transparent);
  filter: blur(40px); animation: flicker 4s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes flicker { 0% { opacity: .7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; } 100% { opacity: .85; transform: translateX(-50%) scale(1.06); } }
.auth-card {
  position: relative; width: min(420px, 100%); padding: 34px 32px 30px;
  background: rgb(var(--elev) / .86); border: 1px solid var(--line-2); border-radius: 24px;
  box-shadow: var(--pop-shadow); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-mark {
  width: 44px; height: 44px; padding: 8px; border-radius: 14px; color: var(--on-accent);
  background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 85%, #fff), var(--accent));
  box-shadow: 0 8px 24px rgb(var(--accent-rgb) / .45);
}
.auth-brand h1 { font-size: 26px; font-weight: 800; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card h2 { font-size: 23px; font-weight: 800; }
.auth-sub { margin: -8px 0 4px; color: var(--text-2); font-size: 14px; }
.auth-switch { margin: 2px 0 0; font-size: 14px; color: var(--text-2); text-align: center; }
.auth-warn { background: rgb(240 194 75 / .1); border: 1px solid rgb(240 194 75 / .35); color: color-mix(in oklab, var(--idle) 75%, var(--text)); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin: 0 0 16px; }
/* ------------------------------------------------------------------ app shell: rail + floating panels */
#app {
  position: relative; z-index: 1; height: var(--app-h, 100%);
  display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: var(--cols, var(--rail-w) var(--side-w) minmax(0, 1fr) auto);
  grid-template-rows: minmax(0, 1fr);
}
body:not(.panel-open) #app { grid-template-columns: var(--cols-np, var(--rail-w) var(--side-w) minmax(0, 1fr)); }
#rail { order: var(--o-rail, 0); }
#sidebar { order: var(--o-sidebar, 1); position: relative; }
#main { order: var(--o-main, 2); }
#members { order: var(--o-panel, 3); position: relative; }
[data-rail='side'][data-rail-side='left'] #app { padding-left: 0; }
[data-rail='side'][data-rail-side='right'] #app { padding-right: 0; }
#sidebar, #main, #members {
  border-radius: var(--island-r); border: 1px solid var(--line); box-shadow: var(--island-shadow);
  overflow: hidden; min-width: 0; min-height: 0;
}
#sidebar, #members { background: rgb(var(--s1) / var(--glass)); }
#main { background: rgb(var(--s2) / var(--glass)); display: flex; flex-direction: column; position: relative; }
html.has-bg #sidebar, html.has-bg #main, html.has-bg #members { backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
#members { width: var(--members-w); display: flex; flex-direction: column; animation: panel-in .18s var(--ease); }
#members[data-mode='thread'], #members[data-mode='chat'] { width: var(--thread-w); }
#members[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateX(8px); } }
.app-loader { display: none; }
#app.loading > :not(.app-loader) { visibility: hidden; }
#app.loading .app-loader { display: flex; position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-2); }
.nav-scrim { display: none; }
#conn-banner {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; box-shadow: var(--pop-shadow);
}

/* tooltips */
.tooltip {
  position: fixed; z-index: 90; pointer-events: none; max-width: 260px;
  padding: 5px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  background: rgb(var(--text-rgb)); color: rgb(var(--bg)); box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  animation: tip-in .12s var(--ease);
}
@keyframes tip-in { from { opacity: 0; transform: translateY(2px); } }
.icon-btn.active { color: var(--text); background: var(--active); }
.icon-btn.hang { color: #fff; background: var(--danger-fill); }
.icon-btn.hang:hover { background: var(--danger-fill); filter: brightness(1.1); color: #fff; }
.icon-btn .ic { width: 19px; height: 19px; }

/* ------------------------------------------------------------------ server rail: rounded tiles */
#rail {
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0 10px;
}
#rail::-webkit-scrollbar { display: none; }
.rail-item { position: relative; width: 100%; display: flex; justify-content: center; flex: none; }
.rail-item .pill { display: none; }
.rail-btn {
  position: relative; width: 44px; height: 44px; border-radius: 14px; flex: none;
  display: grid; place-items: center; color: var(--text-2);
  background: rgb(var(--s2) / var(--glass)); border: 1px solid var(--line);
  transition: background .15s, color .15s, transform .15s, box-shadow .15s, border-color .15s;
}
.rail-btn > img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.rail-btn:hover { color: var(--text); background: rgb(var(--s3) / var(--glass)); transform: translateY(-1px); }
.rail-btn:active { transform: translateY(0) scale(.97); }
/* Active: a soft accent "socket" around the tile — clear, and not a left-edge pill. */
.rail-btn.active { color: var(--text); border-color: transparent; box-shadow: 0 0 0 2px rgb(var(--accent-rgb)), 0 0 0 5px rgb(var(--accent-rgb) / .15); }
.rail-btn.home { color: var(--accent); }
.rail-btn.home .ic { width: 24px; height: 24px; }
.rail-btn.home.active { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .2); }
.rail-btn.nav .ic { width: 20px; height: 20px; }
.rail-btn.add { color: var(--ok); border-style: dashed; border-color: var(--line-2); background: transparent; }
.rail-btn.add:hover { background: rgb(63 207 131 / .12); }
/* Unread: a small dot at the tile's corner. Mentions: a count badge. */
.rail-item.unread .rail-btn::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); border: 2px solid rgb(var(--bg)); }
.rail-btn .badge { position: absolute; right: -6px; bottom: -6px; border: 2px solid rgb(var(--bg)); height: 20px; min-width: 20px; border-radius: 10px; line-height: 16px; font-size: 10.5px; }
.rail-btn .badge[hidden] { display: none; }
.rail-initials { font: 700 14px var(--font-display); letter-spacing: -.02em; color: var(--text); }
.rail-sep { width: 28px; height: 2px; border-radius: 2px; background: var(--line-2); flex: none; margin: 2px 0; }
.rail-sep.thin { width: 16px; height: 1px; }

/* ------------------------------------------------------------------ sidebar */
#sidebar { display: flex; flex-direction: column; }
#sidebar-head { height: var(--head-h); flex: none; display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--line); }
#sidebar-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.server-head {
  width: 100%; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px;
  font: 700 15px var(--font-display); text-align: left;
}
.server-head:hover, .server-head[aria-expanded='true'] { background: var(--hover); }
.server-head-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-head .ic { width: 16px; height: 16px; color: var(--muted); }
.find-btn {
  width: 100%; height: 34px; border-radius: 9px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: rgb(var(--field) / .85); border: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: left;
}
.find-btn .ic { width: 15px; height: 15px; }
.find-btn > span:not(.ic) { flex: 1; }
.find-btn kbd { font-size: 10.5px; padding: 1px 5px; }
.find-btn:hover { color: var(--text-2); border-color: var(--line-2); }
.group-label, .cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 14px 4px 3px 8px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .01em;
}
.cat-toggle { display: flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 700; font-size: 12px; flex: 1; min-width: 0; text-align: left; padding: 2px 0; }
.cat-toggle:hover { color: var(--text-2); }
.cat-toggle.unread { color: var(--text); }
.cat-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-chev { width: 13px !important; height: 13px !important; transition: transform .15s var(--ease); }
.cat-chev.closed { transform: rotate(-90deg); }
.group-label .icon-btn.sm, .cat-head .icon-btn.sm { color: var(--muted); opacity: .8; }
.group-label .icon-btn.sm:hover, .cat-head .icon-btn.sm:hover { color: var(--text); opacity: 1; }
.sidebar-empty { color: var(--muted); font-size: 13px; padding: 6px 10px; margin: 0; line-height: 1.5; }
.nav-row {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 9px;
  color: var(--text-2); font-weight: 600; text-align: left; flex: none; transition: background .12s, color .12s;
}
.nav-row .ic { width: 18px; height: 18px; }
.nav-row > span:not(.badge):not(.ic) { flex: 1; }
.nav-row:hover { background: var(--hover); color: var(--text); }
.nav-row.active { background: var(--active); color: var(--text); }
.dm-row {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px;
  color: var(--text-2); text-align: left; flex: none; transition: background .12s;
}
.dm-row:hover { background: var(--hover); color: var(--text); }
.dm-row.active { background: var(--active); color: var(--text); }
.dm-row .av { --dot-border: rgb(var(--s1)); }
.dm-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.dm-row-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dm-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.dm-row-time { font-size: 11px; color: var(--muted); flex: none; }
.dm-row-status { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.unread .dm-row-name { color: var(--text); font-weight: 700; }
.dm-row.unread .dm-row-status { color: var(--text-2); }
.dm-row.muted { opacity: .6; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); flex: none; }
.group-av { position: relative; width: var(--size); height: var(--size); flex: none; display: inline-block; }
.group-av > .av { position: absolute; }
.group-av > .av:first-child { left: 0; top: 0; }
.group-av > .av:nth-child(2) { right: 0; bottom: 0; box-shadow: 0 0 0 2px rgb(var(--s1)); border-radius: 50%; }
.group-av > .av:only-child { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.ch-row { display: flex; align-items: center; border-radius: 8px; color: var(--muted); flex: none; position: relative; transition: background .12s, color .12s; }
.ch-row:hover { background: var(--hover); color: var(--text-2); }
.ch-row.active { background: var(--active); color: var(--text); }
.ch-row.active::after { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--accent); }
.ch-row.unread { color: var(--text); }
.ch-row.unread .ch-name { font-weight: 700; }
.ch-row.unread:not(.active)::before { content: ''; position: absolute; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.ch-row.muted { opacity: .55; }
.ch-row.connected { color: var(--ok); }
.ch-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; text-align: left; font-weight: 500; font-size: 14.5px; }
.ch-ic { width: 17px !important; height: 17px !important; opacity: .7; }
.ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ch-muted { width: 14px !important; height: 14px !important; opacity: .7; }
.ch-main .badge { flex: none; }
.ch-gear { opacity: 0; margin-right: 4px; }
.ch-row:hover .ch-gear, .ch-row.active .ch-gear, .ch-gear:focus-visible { opacity: 1; }
.ch-row.unread:hover::before, .ch-row:has(.badge)::before { display: none; }
/* A category and its channels (dragged as one). Drop markers: a line where a channel or category will land, or the
   category's name lit up when a channel goes into it. Rows already use ::before and ::after, so the line is a shadow. */
.cat-group { display: flex; flex-direction: column; gap: 1px; flex: none; border-radius: 8px; }
.ch-row.dragging, .cat-group.dragging { opacity: .4; }
.ch-row.drop-before, .cat-group.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.ch-row.drop-after, .cat-group.drop-after { box-shadow: 0 2px 0 var(--accent); }
.cat-head.drop-into { background: rgb(var(--accent-rgb) / .14); border-radius: 8px; }
.cat-head.drop-into .cat-toggle { color: var(--text); }
.vc-users { display: flex; flex-direction: column; padding-left: 28px; flex: none; }
.vc-user { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); text-align: left; min-width: 0; }
.vc-user:hover { background: var(--hover); }
.vc-user .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.vc-flags { display: inline-flex; color: var(--danger); }
.ic.flag { width: 15px; height: 15px; color: var(--danger); }
/* server-muted by a moderator: the same icon, boxed so it reads differently from muting yourself */
.server-muted { display: inline-flex; padding: 1px; border-radius: 4px; background: color-mix(in oklab, var(--danger) 22%, transparent); }

/* compact call bar + profile */
#voice-panel {
  flex: none; margin: 0 8px 6px; padding: 8px 8px 8px 12px; border-radius: 12px;
  background: rgb(63 207 131 / .08); border: 1px solid rgb(63 207 131 / .22); display: flex; flex-direction: column; gap: 6px;
}
#voice-panel[hidden] { display: none; }
.vp-top { display: flex; align-items: center; gap: 8px; }
.vp-info { flex: 1; min-width: 0; }
.vp-status { font-size: 13px; font-weight: 700; color: var(--ok); display: flex; align-items: center; gap: 7px; }
.vp-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vp-status.q-connecting { color: var(--idle); }
.vp-status.q-failed { color: var(--danger); }
.vp-status.q-warn { color: var(--idle); }
.vp-detail { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.vp-detail span { flex: 1; min-width: 0; }
.vp-detail.bad { color: var(--danger); }
.vp-where { font-size: 12.5px; color: var(--muted); display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.vp-where:hover { color: var(--text-2); text-decoration: underline; }
.vp-region { display: inline-flex; align-items: center; gap: 5px; flex: none; max-width: 120px; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.vp-region span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-region .ic { width: 14px; height: 14px; flex: none; }
.vp-region:hover { background: var(--hover); color: var(--text); }
.vp-region.pinned { color: var(--accent); }
.vp-controls { display: flex; gap: 4px; }
.vp-controls .icon-btn { flex: 1; height: 32px; background: var(--hover); }
.vp-controls .icon-btn.off { color: var(--danger); background: rgb(239 84 102 / .12); }
#user-panel {
  flex: none; display: flex; align-items: center; gap: 2px; margin: 0 8px 8px; padding: 5px;
  border-radius: 12px; background: rgb(var(--s3) / .5); border: 1px solid var(--line); min-height: 52px;
}
.me-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 3px 6px; border-radius: 9px; text-align: left; }
.me-btn:hover { background: var(--hover); }
.me-btn .av { --dot-border: rgb(var(--s2)); }
.me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.me-text .uname, .me-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text .uname { font-size: 14px; }
.me-sub { font-size: 12px; color: var(--muted); }
.me-actions { display: flex; }
.me-actions .icon-btn { width: 32px; height: 32px; }
.me-actions .icon-btn.off { color: var(--danger); }

/* ------------------------------------------------------------------ header */
#main-head {
  height: var(--head-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--line); min-width: 0;
}
.head-title { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.head-title h1 { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 50%; }
.head-ic { color: var(--muted); width: 20px !important; height: 20px !important; }
.head-topic { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 10px; border-left: 1px solid var(--line-2); }
.head-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.head-tools .btn.sm { margin: 0 6px; }
.head-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.head-note .ic { width: 14px; height: 14px; }
.head-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; min-width: 28px; padding: 0 7px; margin-right: 4px;
  font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 8px; border: 1px solid var(--line);
}
.head-badge .ic { width: 15px; height: 15px; }
.head-badge.e2ee { color: color-mix(in oklab, var(--ok) 85%, var(--text)); border-color: transparent; }
.head-badge.e2ee:hover { background: rgb(63 207 131 / .1); }
.head-badge.warn { color: var(--danger); background: rgb(239 84 102 / .1); border-color: rgb(239 84 102 / .35); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; font-weight: 600; color: var(--text-2); font-size: 14px; flex: none; transition: background .12s; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.active { background: var(--active); color: var(--text); }
.tab.tab-add { color: var(--ok); }
.tab.tab-add.active { background: rgb(63 207 131 / .14); }
.nav-toggle { display: none !important; }
#main-head .av { --dot-border: rgb(var(--s2)); }

.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-2); padding: 40px 20px; text-align: center; }
.empty-state.small { flex: none; padding: 30px 20px; }
.empty-state h3 { font-size: 18px; color: var(--text); }
.empty-state p { margin: 0; max-width: 44ch; }
.list-label { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 14px 10px 6px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hover); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.seg-btn { padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; flex: none; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: rgb(var(--s2)); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-left: 4px; }
.chip-x:hover { background: var(--active); }
.chip-x .ic, .chip .ic { width: 13px; height: 13px; }
.chip { display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------------------ home */
.home-view { flex: 1; overflow-y: auto; padding: 28px clamp(16px, 4vw, 48px) 40px; display: flex; flex-direction: column; gap: 26px; }
.home-hero { display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.home-hero h2 { font-size: 26px; font-weight: 800; }
.home-sec { display: flex; flex-direction: column; gap: 10px; max-width: 920px; }
.home-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.home-sec-head h3 { font-size: 14px; font-weight: 700; color: var(--text-2); font-family: var(--font); }
.conv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.conv-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-align: left; min-width: 0;
  background: var(--hover); border: 1px solid var(--line); transition: background .12s, border-color .12s;
}
.conv-card:hover { background: var(--active); border-color: var(--line-2); }
.conv-card .av { --dot-border: rgb(var(--s2)); }
.conv-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.conv-card-text strong, .conv-card-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-card-text span { font-size: 13px; color: var(--muted); }
.conv-card.unread strong { color: var(--text); }
.conv-card.unread .conv-card-text span { color: var(--text-2); }
.conv-card-time { font-size: 11.5px; color: var(--muted); flex: none; align-self: flex-start; }
.friend-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.friend-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--hover); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.friend-chip:hover { background: var(--active); }
.friend-chip .av { --dot-border: rgb(var(--s2)); }
.server-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.server-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-align: left; background: var(--hover); border: 1px solid var(--line); }
.server-card:hover { background: var(--active); }
.server-card img, .server-card-initials { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-items: center; background: rgb(var(--s3)); font: 700 14px var(--font-display); }
.server-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.server-card-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-card-text span { font-size: 12.5px; color: var(--muted); }
.activity { display: flex; flex-direction: column; gap: 2px; }
.activity-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; text-align: left; }
.activity-row:hover { background: var(--hover); }
.activity-ic { color: var(--muted); }
.activity-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.activity-text span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-time { font-size: 12px; color: var(--muted); flex: none; }

/* friends + saved */
.friends, .saved { flex: 1; overflow-y: auto; padding: 8px 22px 22px; display: flex; flex-direction: column; gap: 2px; }
.friends-search { position: relative; display: flex; align-items: center; margin: 8px 0 4px; }
.friends-search > .ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-input { padding-left: 36px; height: 38px; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background .12s; }
.friend-row:hover { background: var(--hover); }
.friend-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.friend-row .av { --dot-border: rgb(var(--s2)); }
.friend-text { display: flex; flex-direction: column; min-width: 0; }
.friend-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.friend-name .uname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-handle { color: var(--muted); font-size: 13px; }
.friend-sub { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-actions { display: flex; gap: 4px; flex: none; }
.friend-actions .icon-btn { background: var(--hover); border-radius: 50%; }
.add-friend { padding: 22px 6px; display: flex; flex-direction: column; gap: 8px; }
.add-friend h2 { font-size: 20px; font-weight: 800; }
.add-row { display: flex; gap: 10px; background: rgb(var(--field)); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; max-width: 640px; transition: border-color .15s, box-shadow .15s; }
.add-row .input { border: 0; background: transparent; box-shadow: none; }
.add-row:focus-within { border-color: rgb(var(--accent-rgb) / .8); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14); }
.add-msg { margin: 0; font-size: 13.5px; min-height: 1em; }
.add-msg.ok { color: var(--ok); }
.add-msg.bad { color: var(--danger); }
.saved-row { display: flex; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); margin-top: 8px; }
.saved-body { flex: 1; min-width: 0; }
.saved-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); }
.saved-text { color: var(--msg-text); overflow-wrap: anywhere; margin-top: 2px; }
.saved-actions { display: flex; flex-direction: column; gap: 2px; }
.saved-row.unavailable { opacity: .75; }
.saved-av-empty { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--active); color: var(--muted); flex: none; }
.saved-av-empty .ic { width: 18px; height: 18px; }
.saved-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--active); color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.saved-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.saved-more { display: flex; justify-content: center; margin: 12px 0; }
.pin-history { margin: 12px; font-size: 13px; color: var(--text-2); }
.pin-history summary { cursor: pointer; font-weight: 600; }
.pin-history ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.export-progress { height: 6px; background: var(--active); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.export-progress[hidden] { display: none; }
.export-progress .bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.quick-list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.quick-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-align: left; }
.quick-row:hover { background: var(--hover); }
.quick-row.picked { background: rgb(var(--accent-rgb) / .1); }
.quick-row .av { --dot-border: rgb(var(--elev)); }
.quick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.quick-text span { font-size: 12.5px; color: var(--muted); }
.pick-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; }
.quick-row.picked .pick-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pick-box .ic { width: 14px; height: 14px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chips:empty { display: none; }
.dest-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--active); display: grid; place-items: center; flex: none; }
.dest-ic .ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ conversation */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.chat.dropping::after {
  content: 'Drop to attach — files are encrypted before upload'; position: absolute; inset: 12px; border-radius: 16px; z-index: 5;
  display: grid; place-items: center; font: 700 18px var(--font-display);
  background: rgb(var(--accent-rgb) / .1); border: 2px dashed var(--accent); color: var(--accent-ink); pointer-events: none;
}
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 0 8px; outline: none; overflow-anchor: none; }
.msg-skeleton { padding: 20px; display: flex; flex-direction: column; gap: 22px; }
.sk-row { display: flex; gap: 14px; }
.sk-av { width: 40px; height: 40px; border-radius: 50%; background: var(--active); flex: none; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.sk-lines i { height: 10px; border-radius: 5px; background: var(--active); width: 30%; }
.sk-lines i + i { width: 70%; }
.msg-skeleton .sk-row { animation: sk 1.2s ease-in-out infinite alternate; }
@keyframes sk { to { opacity: .45; } }
.welcome { padding: 28px 20px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.welcome h2 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; }
.welcome p { margin: 0; color: var(--text-2); max-width: 60ch; }
.welcome .welcome-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 4px 10px 4px 8px; border-radius: 8px; background: var(--hover); }
.welcome-note .ic { width: 14px; height: 14px; color: var(--ok); }
.welcome-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: var(--text-2); background: var(--active); }
.welcome-ic .ic { width: 32px; height: 32px; }
.day-div { display: flex; align-items: center; gap: 10px; margin: 16px 20px 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.day-div::before, .day-div::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.new-div { display: flex; align-items: center; margin: 10px 20px 2px; height: 1px; background: var(--danger); position: relative; }
/* Disappearing messages: "Alice turned on disappearing messages: 1 week", between the messages. */
.sys-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 20px; color: var(--muted); font-size: 12.5px; text-align: center; }
.sys-line .ic { width: 14px; height: 14px; flex: none; }
.sys-line time { font-size: 11.5px; }
/* Someone else's name stands apart from the built-in "You" (your own change), so a name can't pass for it. */
.sys-line .sys-who { color: var(--text-2); font-weight: 600; unicode-bidi: isolate; }
.sys-line .sys-handle { color: var(--text-2); }
.sys-line time::before { content: '\00b7'; margin-right: 6px; }
.new-div span { position: absolute; right: 0; top: -9px; padding: 1px 7px; border-radius: 5px; background: var(--danger-fill); color: #fff; font-size: 11px; font-weight: 700; }
.jump-latest {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); font-size: 13px; font-weight: 600;
  animation: rise .2s var(--ease);
}
.jump-latest[hidden] { display: none; }
.jump-latest .ic { width: 15px; height: 15px; }
.unread-bar {
  position: absolute; top: 8px; left: 16px; right: 16px; z-index: 4; display: flex; align-items: stretch; border-radius: 10px; overflow: hidden;
  background: var(--accent); color: var(--on-accent); font-size: 13px; box-shadow: var(--pop-shadow); animation: rise .2s var(--ease);
}
.unread-bar[hidden] { display: none; }
.unread-bar button { color: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.unread-bar button:hover { background: rgb(0 0 0 / .12); }
.unread-bar .ic { width: 14px; height: 14px; }
.unread-jump { flex: 1; min-width: 0; text-align: left; }
.unread-jump span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-jump strong { margin-left: auto; white-space: nowrap; }
.unread-mark { border-left: 1px solid rgb(0 0 0 / .15); white-space: nowrap; font-weight: 600; }
@media (max-width: 520px) { .unread-jump span { display: none; } .unread-bar { left: 8px; right: 8px; } }

/* messages: comfortable (default) */
.msg {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: 'reply reply' 'gutter body';
  padding: 2px 20px 2px 12px; margin-top: 16px; transition: background .08s;
}
.msg.grouped { margin-top: 0; }
.msg:hover, .msg:focus-within { background: var(--hover); }
.msg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
.msg.mentioned { background: rgb(var(--accent-rgb) / .08); box-shadow: inset 2px 0 0 var(--accent); }
.msg.replying { background: rgb(var(--accent-rgb) / .1); box-shadow: inset 2px 0 0 var(--accent); }
.msg.flash { animation: flash 2s ease; }
@keyframes flash { 0%, 50% { background: rgb(var(--accent-rgb) / .2); } 100% { background: transparent; } }
.msg-gutter { grid-area: gutter; display: flex; justify-content: center; padding-top: 2px; }
/* bulk delete: a checkbox on each message while picking */
.messages.selecting .msg { padding-left: 40px; }
.msg-select { position: absolute; left: 14px; top: 6px; width: 17px; height: 17px; margin: 0; accent-color: var(--danger); cursor: pointer; }
.msg-select:disabled { cursor: not-allowed; opacity: .45; }
.msg.selected { background: color-mix(in oklab, var(--danger) 10%, transparent); box-shadow: inset 2px 0 0 var(--danger); }
.select-bar { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; padding: 8px 10px 8px 14px; border-radius: 10px; background: rgb(var(--elev)); border: 1px solid var(--line-2); font-size: 13.5px; }
.select-bar[hidden] { display: none; }
.select-bar .sel-count { flex: 1; min-width: 0; font-weight: 600; }
.select-bar .sel-hint { font-weight: 400; color: var(--muted); }
@media (max-width: 520px) { .select-bar .sel-hint { display: none; } }
.msg-av { height: 40px; border-radius: 50%; }
.msg-hover-time { font-size: 10.5px; color: var(--muted); opacity: 0; line-height: 22px; white-space: nowrap; }
.msg:hover .msg-hover-time { opacity: 1; }
.msg-body { grid-area: body; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; line-height: 1.35; flex-wrap: wrap; }
.msg-name { font-size: 15px; text-align: left; }
.msg-name:hover .uname { text-decoration: underline; }
.msg-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.msg-pin { display: inline-flex; color: var(--accent-ink); }
.msg-pin .ic { width: 13px; height: 13px; }
.msg-exp { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--muted); }
.msg-head .msg-exp { margin-left: 0; }
.msg-exp .ic { width: 13px; height: 13px; }
.role-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--text-2); background: var(--active); }
.role-tag.role-owner { color: color-mix(in oklab, var(--idle) 85%, var(--text)); background: rgb(240 194 75 / .14); }
.role-tag.role-admin { color: var(--accent-ink); background: rgb(var(--accent-rgb) / .14); }
.msg-text { overflow-wrap: anywhere; color: var(--msg-text); line-height: 1.5; }
.msg-text.jumbo { font-size: 42px; line-height: 1.15; }
.msg-text.undecryptable { display: flex; align-items: center; gap: 6px; color: var(--muted); font-style: italic; }
.msg-text.undecryptable .ic { width: 15px; height: 15px; }
.edited { font-size: 11px; color: var(--muted); margin-left: 4px; }
.msg-reply { grid-area: reply; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); padding-left: 64px; position: relative; min-width: 0; text-align: left; margin-bottom: 2px; }
.msg-reply.gone { font-style: italic; color: var(--muted); }
.reply-spine { position: absolute; left: 31px; top: 9px; width: 29px; height: 10px; border-left: 2px solid var(--line-2); border-top: 2px solid var(--line-2); border-top-left-radius: 8px; }
.reply-name { font-weight: 600; flex: none; }
.reply-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--muted); }
.msg-reply:hover .reply-text { color: var(--text); }
.msg.blocked .blocked-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-style: italic; }
.blocked-note .ic { width: 14px; height: 14px; }
.thread-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 8px 5px 10px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--hover); font-size: 13px; color: var(--text-2); max-width: 100%;
}
.thread-chip strong { color: var(--accent-ink); }
.thread-chip span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-chip .ic { width: 15px; height: 15px; flex: none; }
.thread-chip:hover { background: var(--active); color: var(--text); }
.thread-chip.unread { border-color: rgb(var(--accent-rgb) / .5); }
/* "2 new" on a thread (red with @ when one of them pings you) */
.thread-chip .thread-new, .thread-card .thread-new {
  flex: none; padding: 0 7px; border-radius: 8px; background: var(--accent); color: var(--on-accent);
  font-size: 11.5px; font-weight: 700; line-height: 18px; white-space: nowrap;
}
.thread-chip .thread-new.ping, .thread-card .thread-new.ping { background: var(--danger-fill); color: #fff; }

/* compact: small inline avatars, tighter rhythm */
[data-density='compact'] .msg { margin-top: 6px; grid-template-columns: 40px minmax(0, 1fr); padding-top: 1px; padding-bottom: 1px; }
[data-density='compact'] .msg.grouped { margin-top: 0; }
[data-density='compact'] .msg-av .av { --size: 24px !important; }
[data-density='compact'] .msg-av { height: 24px; }
[data-density='compact'] .msg-reply { padding-left: 46px; }
[data-density='compact'] .reply-spine { left: 20px; width: 22px; }
[data-density='compact'] .msg-text { line-height: 1.4; }
/* minimal: no avatars, name + text on one line */
[data-density='minimal'] .msg { margin-top: 0; grid-template-columns: 56px minmax(0, 1fr); padding-top: 1px; padding-bottom: 1px; }
[data-density='minimal'] .msg-gutter .msg-av { display: none; }
[data-density='minimal'] .msg:not(.grouped) .msg-gutter::before { content: attr(data-time); font-size: 10.5px; color: var(--muted); line-height: 22px; white-space: nowrap; }
[data-density='minimal'] .msg-body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
[data-density='minimal'] .msg-head { display: contents; }
[data-density='minimal'] .msg-head .msg-time { order: -1; display: none; }
[data-density='minimal'] .msg-text { flex: 1 1 60%; line-height: 1.4; }
[data-density='minimal'] .msg-files, [data-density='minimal'] .msg-embeds, [data-density='minimal'] .reactions, [data-density='minimal'] .thread-chip, [data-density='minimal'] .msg-flag { flex-basis: 100%; }
[data-density='minimal'] .msg-hover-time { opacity: .7; }
[data-density='minimal'] .msg-reply { padding-left: 56px; }
[data-density='minimal'] .reply-spine { display: none; }
[data-density='minimal'] .welcome .av { display: none; }

.mention { background: rgb(var(--accent-rgb) / .16); color: var(--accent-ink); padding: 0 4px; border-radius: 5px; font-weight: 600; }
.mention-me { background: rgb(var(--accent-rgb) / .28); color: var(--text); }
.md-code { font: 0.87em var(--mono); background: rgb(var(--field)); border: 1px solid var(--line); padding: 1px 5px; border-radius: 6px; }
.md-pre { background: rgb(var(--field)); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0; overflow-x: auto; font: 13px/1.5 var(--mono); white-space: pre; max-width: 100%; }
.md-quote { display: block; border-left: 3px solid var(--line-2); padding-left: 10px; color: var(--text-2); }
.md-spoiler { background: rgb(var(--text-rgb) / .85); color: transparent; border-radius: 5px; cursor: pointer; padding: 0 3px; transition: color .15s, background .15s; }
.md-spoiler .mention { visibility: hidden; }
.md-spoiler.revealed { color: inherit; background: var(--active); cursor: auto; }
.md-spoiler.revealed .mention { visibility: visible; }
mark { background: rgb(var(--accent-rgb) / .35); color: inherit; border-radius: 3px; padding: 0 1px; }

/* attachments */
.msg-embeds, .msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.embed-img { max-width: min(420px, 100%); max-height: 320px; border-radius: 12px; cursor: zoom-in; object-fit: contain; background: var(--hover); }
/* an image link to another site, waiting for a click (or not loaded at all: Never load) */
.embed-ask {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 12px;
  background: rgb(var(--s3) / .55); border: 1px dashed var(--line-2); width: min(420px, 100%); min-width: 0;
}
.embed-ask > .ic { flex: none; color: var(--text-2); }
.embed-ask-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.embed-ask-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.embed-ask-sub { color: var(--muted); font-size: 12.5px; }
.embed-ask .btn { flex: none; }
.att-media { position: relative; border-radius: 12px; overflow: hidden; max-width: min(440px, 100%); background: var(--hover); border: 1px solid var(--line); }
.att-media.locked { min-width: 220px; min-height: 150px; }
.att-media.locked::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(var(--text-rgb) / .06) 50%, transparent 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.att-img { max-width: 100%; max-height: 340px; cursor: zoom-in; object-fit: contain; display: block; }
.att-video { max-width: 100%; max-height: 360px; display: block; background: #000; }
.att-audio { width: 340px; max-width: 100%; display: block; }
.att-audio-name { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0; font-size: 13px; font-weight: 600; }
.att-file {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 12px;
  background: rgb(var(--s3) / .55); border: 1px solid var(--line); width: min(420px, 100%); min-width: 0;
}
.att-file.bad { color: var(--muted); font-style: italic; }
.att-file:not(.bad) { cursor: pointer; }
.att-file:not(.bad):hover { border-color: rgb(var(--accent-rgb) / .45); }
.att-file .btn.busy, .att-dl.busy { opacity: .6; cursor: progress; }
.att-dl { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgb(0 0 0 / .55); color: #fff; opacity: 0; transition: opacity .15s; }
.att-dl .ic, .att-dl svg { width: 17px; height: 17px; }
.att-media:hover .att-dl, .att-media:focus-within .att-dl, .att-dl.busy { opacity: 1; }
@media (hover: none) { .att-dl { opacity: .9; } }
.att-file-badge { position: relative; width: 38px; height: 44px; border-radius: 8px; background: rgb(var(--accent-rgb) / .14); color: var(--accent-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.att-file-badge .ic { width: 18px; height: 18px; }
.att-file-badge span { font-size: 8.5px; font-weight: 800; letter-spacing: .03em; }
.att-file-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.att-enc { display: inline-flex; align-items: center; gap: 3px; color: color-mix(in oklab, var(--ok) 80%, var(--text)); }
.att-enc .ic { width: 11px; height: 11px; }
.att-file-ic { width: 26px; height: 26px; }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reaction {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px;
  background: var(--hover); border: 1px solid var(--line); font-size: 13.5px; transition: border-color .12s, transform .1s;
}
.reaction:hover { border-color: var(--line-2); }
.reaction:active { transform: scale(.95); }
.reaction.mine { background: rgb(var(--accent-rgb) / .14); border-color: rgb(var(--accent-rgb) / .55); }
.r-count { font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.reaction.mine .r-count { color: var(--accent-ink); }
.reaction.add-r { opacity: 0; color: var(--muted); }
.reaction.add-r .ic { width: 15px; height: 15px; }
.msg:hover .reaction.add-r, .reaction.add-r:focus-visible { opacity: 1; }
.msg-flag { display: inline-flex; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.msg-flag.bad { color: var(--danger); border-color: rgb(239 84 102 / .4); background: rgb(239 84 102 / .08); }

/* hover toolbar */
.msg-tools {
  position: absolute; right: 16px; top: -16px; z-index: 3;
  display: flex; align-items: center; padding: 2px; border-radius: 10px; gap: 1px;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgb(0 0 0 / .18);
  opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .1s, transform .1s;
}
.msg:hover .msg-tools, .msg:focus-within .msg-tools, .msg-tools:has([aria-expanded='true']) { opacity: 1; transform: none; pointer-events: auto; }
.tool { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--text-2); font-size: 15px; }
.tool:hover { background: var(--active); color: var(--text); }
.tool .ic { width: 17px; height: 17px; }
.edit-wrap { margin-top: 4px; }
.edit-input { width: 100%; background: rgb(var(--field)); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; outline: none; resize: none; line-height: 1.45; }
.edit-input:focus { border-color: rgb(var(--accent-rgb) / .8); }
.edit-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------------ composer */
.composer-wrap { flex: none; padding: 0 16px 4px; position: relative; }
.cw-thread { padding: 0 12px 4px; }
.composer-extras { display: flex; flex-direction: column; gap: 6px; }
.composer-extras:not(:empty) { margin-bottom: 6px; }
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; font-size: 13px; color: var(--text-2);
  background: var(--hover); border: 1px solid var(--line-2); border-radius: 10px; animation: rise .15s var(--ease);
}
.reply-bar > .ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.reply-bar-text { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: baseline; overflow: hidden; white-space: nowrap; }
.reply-bar-quote { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pending-files { display: flex; gap: 10px; padding: 10px; overflow-x: auto; background: var(--hover); border: 1px solid var(--line-2); border-radius: 12px; }
.pending { position: relative; width: 132px; flex: none; background: rgb(var(--field)); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.pending img { width: 100%; height: 84px; object-fit: cover; border-radius: 7px; }
.pending-ic { height: 84px; display: grid; place-items: center; color: var(--accent); }
.pending-ic .ic { width: 34px; height: 34px; }
.pending-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.pending-size { font-size: 11px; color: var(--muted); }
.pending-x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: rgb(var(--elev)); border: 1px solid var(--line-2); color: var(--text-2); display: grid; place-items: center; }
.pending-x:hover { background: var(--danger-fill); color: #fff; }
.pending-x .ic { width: 13px; height: 13px; }
.upload-progress { height: 4px; background: var(--active); border-radius: 2px; overflow: hidden; }
.upload-progress[hidden] { display: none; }
.upload-progress .bar { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.upload-status { display: flex; flex-direction: column; gap: 4px; }
.upload-status[hidden] { display: none; }
.upload-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.upload-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-status.retrying .bar { background: var(--idle); }
.upload-status.retrying .upload-text { color: var(--text); }
.composer {
  display: flex; align-items: flex-end; gap: 2px; padding: 5px; border-radius: 14px;
  background: rgb(var(--s3) / .65); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: rgb(var(--accent-rgb) / .55); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .1); }
.composer textarea {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none; resize: none;
  padding: 7px 6px; line-height: 1.45; max-height: 260px; min-height: 34px;
}
.composer textarea::placeholder { color: var(--muted); }
.composer textarea:disabled { opacity: .5; }
.composer .attach { border-radius: 10px; width: 34px; height: 34px; color: var(--text-2); }
.composer-tools { display: flex; align-items: center; gap: 1px; }
.composer-tools .icon-btn .ic { width: 20px; height: 20px; }
.send-btn {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; margin-left: 2px;
  background: var(--accent); color: var(--on-accent); transition: opacity .15s, filter .15s, background .15s;
}
.send-btn .ic { width: 17px; height: 17px; }
.send-btn:hover { filter: brightness(1.08); }
.send-btn:disabled { background: transparent; color: var(--muted); opacity: .6; }
.typing { height: 20px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); padding-left: 6px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
/* @mention suggestions */
.suggest {
  position: absolute; left: 16px; right: 16px; bottom: calc(100% - 4px); z-index: 6; max-height: 300px; overflow-y: auto;
  padding: 6px; border-radius: 12px; background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow);
  animation: rise .12s var(--ease);
}
.suggest[hidden] { display: none; }
.suggest-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; text-align: left; }
.suggest-item.active { background: var(--active); }
.suggest-name { font-weight: 600; }
.suggest-hint { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.suggest-at { width: 24px; height: 24px; border-radius: 50%; background: var(--active); display: grid; place-items: center; }
.suggest-at .ic { width: 14px; height: 14px; }
.key-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 10px;
  font-size: 13px; color: var(--text-2); background: var(--hover); border: 1px solid var(--line-2);
}
.key-bar > span:not(.spinner):not(.ic) { flex: 1; }
.key-bar .ic { width: 17px; height: 17px; flex: none; }
.key-bar.bad { color: color-mix(in oklab, var(--danger) 75%, var(--text)); background: rgb(239 84 102 / .1); border-color: rgb(239 84 102 / .35); }
.modal .key-bar { margin: 0; }

/* ------------------------------------------------------------------ right panel */
.panel-head { height: var(--head-h); flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.panel-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.panel-title h2 { font-size: 15px; font-weight: 700; font-family: var(--font); }
.panel-title span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-search { position: relative; display: flex; align-items: center; padding: 8px 8px 2px; }
.panel-search > .ic { position: absolute; left: 20px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.panel-search .input { height: 34px; padding-left: 34px; font-size: 13.5px; }
.panel-loading { display: grid; place-items: center; padding: 40px; }
.panel-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.panel-empty .ic { width: 28px; height: 28px; }
.member-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.member { width: 100%; display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; text-align: left; transition: background .12s, opacity .12s; }
/* Big servers: rows out of view skip layout and painting until scrolled to. They stay in the page, so screen
   readers, Tab and find-in-page still reach every member. */
.member-list > .member { content-visibility: auto; contain-intrinsic-size: auto 44px; }
.member:hover { background: var(--hover); }
.member .av { --dot-border: rgb(var(--s1)); }
.member.dim { opacity: .5; }
.member.dim:hover { opacity: 1; }
.member-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.member-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.member-name .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.member-status .role-tag { height: 16px; font-size: 10.5px; }
.key-warn { color: var(--danger); display: inline-flex; }
.key-warn .ic { width: 13px; height: 13px; }
.dm-profile { padding: 10px; overflow-y: auto; }
.dm-profile .pcard { width: 100%; }
.pc-mutuals { display: flex; flex-direction: column; gap: 2px; }
.pc-mutual { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 8px; font-size: 13.5px; text-align: left; }
.pc-mutual:hover { background: rgb(255 255 255 / .07); }
.pc-mutual img, .pc-mutual > span { width: 24px; height: 24px; border-radius: 8px; object-fit: cover; background: rgb(255 255 255 / .12); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.pc-blocked { position: absolute; z-index: 5; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: rgb(0 0 0 / .6); color: #fff; font-size: 12px; font-weight: 700; }
.pc-blocked .ic { width: 13px; height: 13px; }
.pin-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pin-card { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); display: flex; flex-direction: column; gap: 6px; }
.pin-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pin-meta .uname { font-size: 13px; }
.pin-text { font-size: 14px; color: var(--msg-text); overflow-wrap: anywhere; max-height: 160px; overflow: hidden; }
.pin-actions { display: flex; justify-content: space-between; align-items: center; }
.thread-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.thread-list .msg { padding-right: 12px; }
.thread-list .msg-tools { right: 8px; }
.thread-divider { display: flex; align-items: center; gap: 10px; margin: 8px 16px; font-size: 12px; font-weight: 600; color: var(--muted); }
.thread-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.thread-list > .btn { margin: 0 16px 8px; }
/* the Threads panel: a channel's threads, latest reply first */
.threads-list { flex: 1; overflow-y: auto; margin: 0; padding: 10px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.thread-card {
  width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--hover); text-align: left; color: var(--text-2);
}
.thread-card:hover { background: var(--active); }
.thread-card.unread { border-color: rgb(var(--accent-rgb) / .5); }
.thread-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.thread-card-head .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-card-head .thread-new { margin-left: auto; }
.thread-card-text {
  font-size: 14px; color: var(--msg-text); overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
}
.thread-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.thread-card-text .link-text { color: var(--accent-ink); }
.thread-card .msg-flag { align-self: flex-start; margin-top: 0; }
/* a thread started by someone you blocked, folded away until "Show" */
.thread-card.blocked { flex-direction: row; }
.thread-card.blocked:hover { background: var(--hover); }
.thread-card.blocked .blocked-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 13px; font-style: italic; }
.thread-card-foot strong { color: var(--accent-ink); }
.thread-card-people { display: inline-flex; gap: 2px; }
.threads-list > li > .btn { width: 100%; }
/* a count or dot on a header button (Threads) */
.icon-btn.with-badge { position: relative; }
.icon-btn.with-badge .badge { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; pointer-events: none; }
.icon-btn.with-badge .unread-dot { position: absolute; top: 5px; right: 5px; background: var(--accent); pointer-events: none; }

/* ------------------------------------------------------------------ popovers, menus, pickers */
#layer > * { z-index: 40; }
.popover { position: fixed; z-index: 50; animation: pop .14s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.menu, .emoji-picker, .gif-picker, .inbox {
  background: rgb(var(--elev) / .97); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.menu { min-width: 220px; max-width: 300px; padding: 5px; border-radius: 12px; display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-2);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--active); color: var(--text); outline: none; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: var(--danger-fill); color: #fff; }
.menu-item.current { color: var(--text); background: var(--hover); }
.menu-item.checked { color: var(--text); }
.menu-ic { width: 16px !important; height: 16px !important; opacity: .85; }
.menu-label { flex: 1; }
.menu-check { width: 16px !important; height: 16px !important; color: var(--accent); }
.menu-hint { margin-left: auto; font-size: 12px; opacity: .6; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.menu-header { padding: 8px 9px 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.menu-col { display: flex; flex-direction: column; }
.menu-desc { font-size: 12px; opacity: .7; }
.status-menu { width: 260px; }
.inbox { width: 380px; max-width: calc(100vw - 16px); max-height: min(560px, calc(100vh - 32px)); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.inbox-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 8px 16px; }
.inbox-head h3 { flex: 1; font-size: 16px; }
.inbox .seg { margin: 0 12px 6px; }
.inbox-list { overflow-y: auto; padding: 0 6px 8px; }
.inbox-day { padding: 10px 10px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.inbox-item { width: 100%; display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; text-align: left; position: relative; }
.inbox-item:hover { background: var(--hover); }
.inbox-item.unread::after { content: ''; position: absolute; right: 10px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.inbox-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--active); display: grid; place-items: center; flex: none; }
.inbox-ic .ic { width: 16px; height: 16px; }
.inbox-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; padding-right: 14px; }
.inbox-text strong { font-size: 13.5px; font-weight: 600; }
.inbox-snippet { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inbox-time { font-size: 11.5px; color: var(--muted); }

.emoji-picker { width: 352px; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.emoji-top { padding: 10px 10px 6px; }
.emoji-search { height: 36px; }
.emoji-tabs { display: flex; gap: 2px; padding: 0 8px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.emoji-tab { width: 34px; height: 30px; border-radius: 8px; font-size: 17px; flex: none; display: grid; place-items: center; filter: grayscale(.6); opacity: .75; }
.emoji-tab .ic { width: 16px; height: 16px; }
.emoji-tab:hover { background: var(--active); filter: none; opacity: 1; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px 8px; height: 270px; overflow-y: auto; align-content: start; }
.emoji-cat { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 4px 4px; position: sticky; top: -6px; background: rgb(var(--elev)); z-index: 1; }
.emoji-grid .muted-p { grid-column: 1 / -1; font-size: 13px; padding: 8px; }
.emoji-btn { aspect-ratio: 1; font-size: 23px; border-radius: 8px; display: grid; place-items: center; transition: transform .08s; }
.emoji-btn:hover, .emoji-btn:focus-visible { background: var(--active); transform: scale(1.1); }
.emoji-preview { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); }
.ep-big { font-size: 22px; }
.gif-picker { width: 380px; height: 440px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.gif-grid { flex: 1; overflow-y: auto; columns: 2; column-gap: 6px; }
.gif-grid .muted-p, .gif-grid .panel-loading { column-span: all; }
.gif-btn { width: 100%; margin-bottom: 6px; border-radius: 10px; overflow: hidden; break-inside: avoid; background: var(--hover); }
.gif-btn img { width: 100%; height: auto; }
.gif-btn:hover { outline: 2px solid var(--accent); }
.gif-credit { font-size: 11px; color: var(--muted); text-align: right; }

/* ------------------------------------------------------------------ modals */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px;
  background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .15s ease;
}
.modal-backdrop.closing { animation: fadeout .14s ease forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.modal {
  width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--pop-shadow);
  animation: rise .18s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-sm { max-width: 440px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 860px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px 4px 22px; }
.modal-head h2 { font-size: 19px; font-weight: 800; }
.modal-body { padding: 12px 22px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; background: var(--hover); border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; }
.modal-lightbox { max-width: none; width: auto; background: none; border: 0; box-shadow: none; }
.choice { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--hover); transition: border-color .15s, background .15s; }
.choice > span { display: flex; flex-direction: column; gap: 2px; }
.choice:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / .06); }
.choice strong { font-size: 15px; }
.choice span span { color: var(--text-2); font-size: 13.5px; }
.choice-ic { width: 38px !important; height: 38px !important; padding: 9px; border-radius: 11px; background: var(--active); flex: none; }
.icon-upload { display: flex; flex-direction: column; align-items: center; gap: 8px; align-self: center; color: var(--text-2); font-size: 13px; }
.icon-preview { width: 80px; height: 80px; border-radius: 22px; border: 2px dashed var(--line-2); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.icon-upload:hover .icon-preview { border-color: var(--accent); }
.invite-preview { display: flex; align-items: center; gap: 12px; }
.invite-preview:empty { display: none; }
.invite-preview img, .ip-initial { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; background: var(--active); display: grid; place-items: center; font: 700 20px var(--font-display); flex: none; }
.invite-preview div { display: flex; flex-direction: column; }
.invite-preview div span { color: var(--text-2); font-size: 13px; }
.radio-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--hover); border: 1px solid var(--line-2); cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--accent); background: rgb(var(--accent-rgb) / .07); }
.radio-card input { accent-color: var(--accent); }
.radio-card > span:last-child { display: flex; flex-direction: column; }
.radio-card > span:last-child span { color: var(--text-2); font-size: 13px; }
.danger-zone { border: 1px solid rgb(239 84 102 / .35); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.safety { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; padding: 14px; background: rgb(var(--field)); border-radius: 12px; font: 600 17px var(--mono); text-align: center; letter-spacing: .04em; }
.input.sm { height: 34px; width: auto; min-width: 120px; }
.profile-modal .modal-body { padding: 0; }
.profile-full { display: flex; flex-direction: column; }
.profile-full .pcard { width: 100%; max-width: none; border-radius: 18px 18px 0 0; border: 0; }
.pf-common { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.pf-common h3 { font-size: 13px; color: var(--text-2); font-family: var(--font); }
/* server settings */
.server-settings .modal-body { padding: 0; }
.ss { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 420px; }
.ss-nav { padding: 12px 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ss-tab { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 14px; text-align: left; }
.ss-tab .ic { width: 16px; height: 16px; }
.ss-tab:hover { background: var(--hover); color: var(--text); }
.ss-tab.active { background: var(--active); color: var(--text); }
.ss-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 70vh; }
.ss-body h3 { font-size: 17px; }
.ss-icon-row { display: flex; align-items: center; gap: 14px; }
.ss-icon { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; background: var(--active); display: grid; place-items: center; font: 700 22px var(--font-display); }
.ss-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.ss-row:hover { background: var(--hover); }
.ss-row-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.ss-row-name span { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.role-legend { display: flex; gap: 6px; }
/* search */
.modal-search { max-width: 680px; align-self: start; margin-top: 8vh; }
.modal-backdrop:has(.modal-search) { place-items: start center; }
.search-modal .modal-body { padding: 0; }
.search { display: flex; flex-direction: column; max-height: 72vh; }
.search-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-bar > .ic { color: var(--muted); }
.search-main { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 17px; }
.search-main::placeholder { color: var(--muted); }
.search-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 0; }
.search-chips:empty { display: none; }
.chip.search-chip { height: 28px; padding: 0 10px; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.active.search-chip { padding-right: 4px; }
.chip.search-chip.bad { border-color: rgb(239 84 102 / .6); background: rgb(239 84 102 / .1); }
.search-clear { font-size: 12.5px; padding: 4px 6px; }
.search-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 14px 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--hover); color: var(--text-2); }
.search-note:empty { display: none; }
.search-note .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.search-note.bad { color: color-mix(in oklab, var(--danger) 80%, var(--text)); background: rgb(239 84 102 / .1); border: 1px solid rgb(239 84 102 / .35); }
.search .seg { margin: 10px 14px 4px; border: 0; background: none; padding: 0; }
.search-results { overflow-y: auto; padding: 4px 8px 10px; min-height: 120px; }
.search-sec { padding: 10px 8px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.search-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; text-align: left; }
.search-item.active { background: var(--active); }
.search-item.gone { cursor: default; }
.search-msg { align-items: flex-start; }
.search-msg .search-item-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.search-msg .search-item-meta { padding-top: 2px; }
.search-gone { color: color-mix(in oklab, var(--danger) 80%, var(--text)); }
.search-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.search-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.search-badge .ic { width: 12px; height: 12px; }
.search-item .av { --dot-border: rgb(var(--elev)); }
.search-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.search-item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-where { color: var(--muted); font-weight: 400; font-size: 13px; }
.search-item-sub { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item-meta { font-size: 12px; color: var(--muted); flex: none; }
.search-ic, .search-img { width: 30px; height: 30px; border-radius: 9px; background: var(--active); display: grid; place-items: center; flex: none; object-fit: cover; font-weight: 700; font-size: 12px; }
.search-ic .ic { width: 16px; height: 16px; }
.search-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.search-status { display: flex; align-items: center; gap: 10px; margin: 8px; padding: 10px 12px; border-radius: 10px; background: var(--hover); font-size: 13px; color: var(--text-2); }
.search-status > span:not(.spinner) { flex: 1; }
.search-status .btn { flex: none; }
.search-status.bad { color: color-mix(in oklab, var(--danger) 80%, var(--text)); background: rgb(239 84 102 / .1); }
.search-suggest { padding: 0 0 4px; }
.search-suggest-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 6px; }
.search-hist-actions { display: flex; justify-content: flex-end; padding: 2px 10px 6px; font-size: 13px; }
.search-privacy { display: flex; gap: 12px; margin: 8px; padding: 12px 14px; border-radius: 12px; background: var(--hover); font-size: 13px; color: var(--text-2); }
.search-privacy > .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted); }
.search-privacy p { margin: 0; }
.icon-btn.search-close { display: none; }
.search-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.search-foot span { display: inline-flex; align-items: center; gap: 4px; }
.search-foot .ic { width: 12px; height: 12px; }
.search-foot kbd { font-size: 10.5px; padding: 0 5px; }
/* phones: search takes the whole screen, with a close button instead of the Esc hint */
@media (max-width: 760px) {
  .modal-backdrop:has(.modal-search) { padding: 0; grid-template-columns: minmax(0, 1fr); }
  .modal.modal-search { max-width: none; min-width: 0; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; border: 0; }
  .search-modal .modal-body { flex: 1; min-height: 0; }
  .search { max-height: none; height: 100%; }
  .search-results { flex: 1; }
  .search-bar { padding: 10px 8px 10px 14px; }
  .search-bar kbd, .search-keys { display: none !important; }
  .icon-btn.search-close { display: inline-flex; }
  .search-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip.search-chip { flex: none; }
  .search-item { gap: 10px; }
  .search-item-meta { font-size: 11px; max-width: 30%; text-align: right; }
}

/* ------------------------------------------------------------------ image viewer */
.viewer { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: rgb(8 7 11 / .94); color: #f2eff7; animation: fade .16s ease; }
.viewer.closing { animation: fadeout .14s ease forwards; }
.viewer-bar { display: flex; align-items: center; gap: 4px; padding: 10px 14px; position: relative; z-index: 2; }
.viewer-bar .icon-btn { color: #d8d3e2; }
.viewer-bar .icon-btn:hover { background: rgb(255 255 255 / .1); color: #fff; }
.viewer-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.viewer-count { font-size: 13px; color: #a39bb4; margin-left: 10px; }
.viewer-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0 64px 32px; }
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; transition: transform .12s ease; animation: viewer-in .2s var(--ease); cursor: zoom-in; user-select: none; }
.viewer-stage.zoomed .viewer-img { cursor: grab; transition: none; }
@keyframes viewer-in { from { opacity: 0; transform: scale(.96); } }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .1); color: #fff; z-index: 2; }
.viewer-nav:hover { background: rgb(255 255 255 / .18); }
.viewer-nav.prev { left: 14px; }
.viewer-nav.next { right: 14px; }

/* toasts */
#toasts { position: fixed; top: 70px; right: 22px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: min(420px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 12px;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow);
  font-size: 14px; font-weight: 500; animation: rise .18s var(--ease); transition: opacity .3s, transform .3s;
}
.toast-error { border-color: rgb(239 84 102 / .6); box-shadow: var(--pop-shadow), inset 3px 0 0 var(--danger); }
.toast.out { opacity: 0; transform: translateY(-6px); }

/* ------------------------------------------------------------------ voice room */
.voice-room { flex: 1; display: flex; flex-direction: column; min-height: 0; background: rgb(var(--bg) / .35); }
.vr-grid { flex: 1; overflow-y: auto; padding: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-content: center; }
.vr-grid > .empty-state { grid-column: 1 / -1; }
.vr-tile {
  --text-rgb: 245 242 250; --name-darken: 0%; color: rgb(var(--text-rgb));
  position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--c1, #2a2438), var(--c2, #1b1824));
  box-shadow: 0 10px 30px rgb(0 0 0 / .25), inset 0 0 0 1px rgb(255 255 255 / .06);
  outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .12s, box-shadow .2s;
}
.vr-tile.speaking { transition: outline-color .15s, box-shadow .15s; outline-color: var(--ok); box-shadow: 0 0 0 4px rgb(63 207 131 / .2), 0 10px 30px rgb(0 0 0 / .25); }
.vr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; filter: blur(2px) saturate(1.2); transform: scale(1.06); }
.vr-tile .av { position: relative; --dot-border: transparent; filter: drop-shadow(0 8px 20px rgb(0 0 0 / .35)); }
.vr-name { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 9px; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); font-size: 14px; }
.vr-name .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-vol { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 9px; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); opacity: 0; transition: opacity .15s; }
.vr-vol .ic { width: 16px; height: 16px; }
.vr-vol input { width: 90px; accent-color: var(--accent); }
.vr-tile:hover .vr-vol, .vr-vol:focus-within { opacity: 1; }
.vr-controls { flex: none; display: flex; justify-content: center; gap: 14px; padding: 18px; }
.round-btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--s3)); border: 1px solid var(--line-2); color: var(--text); box-shadow: var(--island-shadow); transition: transform .12s, background .12s; }
.round-btn:hover { background: var(--line-2); transform: translateY(-1px); }
.round-btn .ic { width: 24px; height: 24px; }
.round-btn.off { background: rgb(239 84 102 / .18); color: var(--danger); }
.round-btn.hang { background: var(--danger-fill); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgb(239 84 102 / .4); }
.round-btn.hang:hover { filter: brightness(1.1); }

/* ------------------------------------------------------------------ avatars */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.av {
  --size: 40px; --rt: max(2px, calc(var(--size) * .06)); --dot-border: rgb(var(--s2));
  position: relative; display: inline-block; width: var(--size); height: var(--size); flex: none;
  border-radius: 50%; vertical-align: middle;
}
.av.shape-rounded { border-radius: 30%; }
.av.shape-square { border-radius: 12%; }
.av.shape-hexagon { border-radius: 0; }
.av-inner { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: grid; place-items: center; z-index: 1; }
.av-inner img { width: 100%; height: 100%; object-fit: cover; }
.av-initials { font-family: var(--font-display); font-weight: 700; color: #fff; letter-spacing: -.02em; user-select: none; }
.av.shape-hexagon .av-inner, .av.shape-hexagon::before { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.av:not(.ring-none) .av-inner { inset: var(--rt); }
.av::before { content: ''; position: absolute; inset: 0; border-radius: inherit; display: none; }
.av:not(.ring-none)::before { display: block; }
.av.ring-solid::before { background: var(--ring); }
.av.ring-gradient::before { background: linear-gradient(135deg, var(--ring), var(--ring2)); }
.av.ring-rainbow::before { background: conic-gradient(from var(--spin), #ff5f6d, #ffc371, #f9f871, #4fd18b, #38c6d9, #5c8dff, #b07cff, #ff5f6d); animation: ring-spin 3.5s linear infinite; }
.av.ring-glow::before { background: linear-gradient(135deg, var(--ring), var(--ring2)); box-shadow: 0 0 calc(var(--size) * .2) var(--ring); }
.av.ring-pulse::before { background: var(--ring); animation: ring-pulse 2s ease-out infinite; }
@keyframes ring-spin { to { --spin: 360deg; } }
/* Build-your-own rings */
.av.ring-spin::before { background: conic-gradient(from var(--spin), var(--ring), var(--ring2), var(--ring3), var(--ring)); animation: ring-spin var(--ring-dur, 6s) linear infinite; }
.av.ring-double::before { background: radial-gradient(closest-side, transparent 86%, var(--ring2) 87% 92%, transparent 93%), var(--ring); }
.av.ring-dashed::before { background: repeating-conic-gradient(from var(--spin), var(--ring) 0 18deg, transparent 18deg 30deg); animation: ring-spin var(--ring-dur, 6s) linear infinite; }
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 var(--ring); } 80%, 100% { box-shadow: 0 0 0 calc(var(--size) * .14) transparent; } }
.av.speaking::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: 2; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ok), 0 0 14px rgb(63 207 131 / .55);
}
/* Shaped avatars (hexagon etc.): the glow follows the real outline instead of drawing a box. */
.av:not(.shape-circle).speaking::after { display: none; }
.av:not(.shape-circle).speaking { filter: drop-shadow(0 0 1px var(--ok)) drop-shadow(0 0 1.5px var(--ok)) drop-shadow(0 0 6px rgb(63 207 131 / .7)); }

.status-dot {
  position: absolute; right: -2px; bottom: -2px; z-index: 3;
  width: max(10px, calc(var(--size) * .32)); height: max(10px, calc(var(--size) * .32)); border-radius: 50%;
  border: max(2px, calc(var(--size) * .075)) solid var(--dot-border); background-color: var(--offline);
}
.status-dot.st-online { background: var(--ok); }
.status-dot.st-idle { background: radial-gradient(circle at 28% 28%, var(--dot-border) 38%, var(--idle) 40%); }
.status-dot.st-dnd { background: linear-gradient(var(--dot-border), var(--dot-border)) center / 60% 24% no-repeat, var(--dnd); }
.status-dot.st-offline, .status-dot.st-invisible { background: radial-gradient(circle, var(--dot-border) 34%, var(--offline) 37%); }
.status-dot.inline { position: static; display: inline-block; width: 12px; height: 12px; border: 0; flex: none; --dot-border: rgb(var(--elev)); }
.menu-item:hover .status-dot.inline { --dot-border: var(--accent); }

/* ------------------------------------------------------------------ styled names */
.uname {
  --n1x: color-mix(in oklab, var(--n1, var(--text)), #000 var(--name-darken));
  --n2x: color-mix(in oklab, var(--n2, var(--text)), #000 var(--name-darken));
  color: var(--n1x); font-weight: 600;
}
.uname.grad, .uname.fx-shimmer, .uname.fx-rainbow {
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.uname.grad { background-image: linear-gradient(90deg, var(--n1x), var(--n2x)); }
.uname.fx-glow { text-shadow: 0 0 10px var(--n1x), 0 0 2px var(--n1x); }
.uname.grad.fx-glow { text-shadow: none; filter: drop-shadow(0 0 5px var(--n1x)); }
.uname.fx-shimmer {
  background-image: linear-gradient(100deg, var(--n1x) 0 38%, rgb(var(--text-rgb)) 50%, var(--n2x) 62% 100%);
  background-size: 260% 100%; animation: name-shimmer 3.2s linear infinite;
}
.uname.fx-rainbow {
  background-image: linear-gradient(90deg, #ff5f6d, #f59e0b, #e8d43a, #3fcf83, #38c6d9, #b07cff, #ff5f6d);
  background-size: 200% 100%; animation: name-rainbow 4s linear infinite;
}
@keyframes name-shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes name-rainbow { to { background-position: -200% 0; } }
/* More name styles: up to four colors, and effects people can combine with them */
.uname.grad-multi { background-image: linear-gradient(90deg, var(--n1x), var(--n2x), var(--n3, var(--n2x)), var(--n4, var(--n2x))); }
.uname.fx-flow { background-image: linear-gradient(90deg, var(--n1x), var(--n2x), var(--n3, var(--n2x)), var(--n4, var(--n1x)), var(--n1x)); background-size: 300% 100%; animation: name-rainbow 5s linear infinite; }
.uname.fx-pulse { animation: name-pulse 2.2s ease-in-out infinite; display: inline-block; }
.uname.fx-wave { display: inline-block; animation: name-wave 2.4s ease-in-out infinite; }
.uname.fx-neon { color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 0 4px var(--nglow), 0 0 10px var(--nglow), 0 0 20px var(--nglow); background: none; }
.uname.fx-outline { -webkit-text-stroke: 1px var(--nglow); }
.uname.fx-shadow { text-shadow: 2px 2px 0 var(--nglow); }
.uname.grad.fx-shadow, .uname.grad-multi.fx-shadow { text-shadow: none; filter: drop-shadow(2px 2px 0 var(--nglow)); }
.uname.fx-glow:not(.grad) { text-shadow: 0 0 10px var(--nglow), 0 0 2px var(--nglow); }
.uname.fx-glitch { position: relative; display: inline-block; animation: name-glitch 3s steps(1) infinite; }
@keyframes name-pulse { 50% { transform: scale(1.06); filter: brightness(1.25); } }
@keyframes name-wave { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-1px) rotate(-1.5deg); } 75% { transform: translateY(1px) rotate(1.5deg); } }
@keyframes name-glitch { 0%, 92%, 100% { text-shadow: none; transform: none; } 93% { text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8; transform: translateX(1px); } 96% { text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; transform: translateX(-1px); } }
html.reduce-motion .uname { animation: none !important; }
.uname.font-tiny { font-size: .68em; line-height: 1.7; }
.uname.font-wide { letter-spacing: .02em; }
.msg-name:hover .uname { text-decoration: underline; text-decoration-color: var(--n1x); }

/* ------------------------------------------------------------------ profile card (always uses the owner's colors) */
.pop-profile { filter: drop-shadow(0 22px 44px rgb(0 0 0 / .45)); }
.pcard {
  --text-rgb: 244 240 251; --text-2: #cbc4da; --muted: #a39bb4; --name-darken: 0%;
  --line: rgb(255 255 255 / .08); --hover: rgb(255 255 255 / .06); --active: rgb(255 255 255 / .1); --accent-ink: var(--acc);
  --c1: #2a2438; --c2: #1b1824; --acc: var(--accent);
  position: relative; isolation: isolate; width: 340px; max-width: calc(100vw - 16px);
  border-radius: 20px; overflow: hidden; color: rgb(var(--text-rgb));
  background: var(--c1); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
.pcard.pc-gradient { background: linear-gradient(180deg, var(--c1), var(--c2)); }
.pcard.pc-solid { background: var(--c1); }
.pcard.pc-glass {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 70%, transparent), color-mix(in srgb, var(--c2) 80%, transparent));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.pc-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.pc-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--c2) 60%, transparent) 75%); }
.pcard.pc-glass .pc-bg { filter: blur(3px); transform: scale(1.04); }
.pc-banner { position: relative; width: 100%; overflow: hidden; }
.pc-banner img { width: 100%; height: 100%; object-fit: cover; }
.pc-body { position: relative; padding: 0 14px 14px; }
.pc-av { position: relative; display: inline-flex; margin-top: -48px; padding: 5px; border-radius: 50%; background: var(--c1); z-index: 2; }
.pc-av:has(.shape-rounded) { border-radius: 32%; }
.pc-av:has(.shape-square) { border-radius: 16%; }
.pc-av:has(.shape-hexagon) { background: none; }
.pc-av .av { --dot-border: var(--c1); }
.pc-bubble {
  position: absolute; left: 112px; top: 8px; max-width: calc(100% - 126px); z-index: 2;
  padding: 6px 11px; border-radius: 14px; background: rgb(10 8 14 / .7); backdrop-filter: blur(6px);
  font-size: 13px; line-height: 1.35; overflow-wrap: anywhere;
}
.pc-bubble::before { content: ''; position: absolute; left: -8px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: rgb(10 8 14 / .7); }
.pc-bubble-emoji { margin-right: 5px; }
.pc-inner {
  position: relative; z-index: 2; margin-top: 10px; padding: 12px; border-radius: 14px;
  background: rgb(8 6 12 / .38); border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  display: flex; flex-direction: column; gap: 10px;
}
.pc-name { font-size: 21px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pc-handle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-2); font-size: 13.5px; margin-top: -6px; }
.pc-pronouns { font-size: 12px; padding: 1px 7px; border-radius: 6px; background: rgb(255 255 255 / .08); }
.pc-section { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid rgb(255 255 255 / .08); padding-top: 10px; }
.pc-label { font-size: 12px; font-weight: 700; color: var(--acc); }
.pc-bio { font-size: 14px; max-height: 220px; overflow-y: auto; overflow-wrap: anywhere; color: #e2deeb; }
.pc-since { font-size: 13.5px; color: var(--text-2); }
/* Their nickname in the server the card was opened from (the big name stays their display name). */
.pc-nick-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pc-nick-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; color: #e2deeb; }
.pc-nick-row .link-btn { color: var(--acc); font-size: 13px; }
.pc-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-link { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .08); color: rgb(var(--text-rgb)); }
.pc-link:hover { background: color-mix(in srgb, var(--acc) 30%, transparent); text-decoration: none; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-actions .btn.primary { background: var(--acc); color: #120f18; box-shadow: none; }
.pc-actions .btn.ghost { background: rgb(255 255 255 / .1); color: #fff; }
.pc-actions .btn.ghost:hover { background: rgb(255 255 255 / .16); }
.pcard.pc-compact { width: 320px; }

.pfx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.pfx span { position: absolute; top: -24px; font-size: calc(11px * var(--s)); line-height: 1; animation: pfx-fall calc(8s / var(--s)) linear infinite; opacity: .85; }
.pfx-snow span { color: #fff; text-shadow: 0 0 4px rgb(255 255 255 / .6); }
.pfx-hearts span { color: #ff7ab6; animation-name: pfx-fall-sway; }
.pfx-stars span { color: #ffe27a; text-shadow: 0 0 6px #ffcf4a; }
.pfx-sparkles span { color: #fff4c4; text-shadow: 0 0 8px #ffe27a; animation: pfx-fall 12s linear infinite, pfx-twinkle 1.4s ease-in-out infinite; }
.pfx-bubbles span, .pfx-embers span { top: auto; bottom: -24px; animation-name: pfx-rise; }
.pfx-bubbles span { width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .5); background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / .35), transparent 60%); }
.pfx-embers span { width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px #ff7a18; animation-duration: calc(5s / var(--s)); }
@keyframes pfx-fall { to { transform: translate(18px, 640px) rotate(220deg); } }
@keyframes pfx-fall-sway { 25% { transform: translate(14px, 160px); } 50% { transform: translate(-6px, 320px); } 75% { transform: translate(12px, 480px); } 100% { transform: translate(0, 640px); } }
@keyframes pfx-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(12px, -320px); } 100% { transform: translate(-8px, -640px); opacity: 0; } }
@keyframes pfx-twinkle { 50% { opacity: .2; } }
/* Build-your-own effect */
.pfx-custom span { font-size: calc(var(--fx-size) * var(--s)); color: var(--fx-color); opacity: .9; animation-duration: calc(var(--fx-dur) / var(--s)); top: -10%; }
.pfx-custom.glow span { text-shadow: 0 0 8px var(--fx-color), 0 0 2px var(--fx-color); }
.pfx-custom.m-fall span { animation-name: pfx-fall-sway; }
.pfx-custom.m-rise span { top: auto; bottom: -10%; animation-name: pfx-rise; }
.pfx-custom.m-float span { top: auto; bottom: -10%; animation-name: pfx-float; }
.pfx-custom.m-drift span { top: var(--top, 50%); left: -10% !important; animation-name: pfx-drift; }
.pfx-custom.m-drift span:nth-child(odd) { top: 20%; } .pfx-custom.m-drift span:nth-child(3n) { top: 70%; } .pfx-custom.m-drift span:nth-child(5n) { top: 45%; }
.pfx-custom.m-twinkle span, .pfx-custom.m-spin span, .pfx-custom.m-zoom span, .pfx-custom.m-bounce span { top: auto; }
.pfx-custom.m-twinkle span { animation: pfx-twinkle2 calc(var(--fx-dur) / 4) ease-in-out infinite; }
.pfx-custom.m-spin span { animation: pfx-spin calc(var(--fx-dur) / 2) linear infinite; }
.pfx-custom.m-zoom span { animation: pfx-zoom calc(var(--fx-dur) / 3) ease-in-out infinite; }
.pfx-custom.m-bounce span { animation: pfx-bounce calc(var(--fx-dur) / 5) ease-in-out infinite alternate; }
.pfx-custom.m-twinkle span, .pfx-custom.m-spin span, .pfx-custom.m-zoom span, .pfx-custom.m-bounce span { position: absolute; }
@keyframes pfx-drift { from { transform: translateX(0); } to { transform: translateX(120vw); } }
@keyframes pfx-twinkle2 { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes pfx-spin { to { transform: rotate(360deg); } }
@keyframes pfx-zoom { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.3); opacity: 1; } }
@keyframes pfx-bounce { from { transform: translateY(0); } to { transform: translateY(-28px); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------ settings (floats over your real background as a live preview) */
.modal-backdrop:has(.modal-full) { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body:has(.modal-full) #app { visibility: hidden; }
.modal-full { max-width: none; width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0; background: transparent; box-shadow: none; }
.modal-full .modal-body { padding: 0; flex: 1; overflow: hidden; }
.settings { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 3.4fr); gap: var(--gap); padding: var(--gap); height: 100%; }
.set-nav, .set-main { border-radius: var(--island-r); border: 1px solid var(--line); box-shadow: var(--island-shadow); }
.set-nav { background: rgb(var(--s1) / var(--glass)); padding: 40px 12px 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; overflow-y: auto; }
.set-main { position: relative; background: rgb(var(--s2) / var(--glass)); min-height: 0; display: flex; overflow: hidden; }
html.has-bg .set-nav, html.has-bg .set-main { backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); }
.set-nav-label { width: 210px; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 0 12px 6px; }
.set-nav-btn { width: 210px; text-align: left; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; transition: background .12s; }
.set-nav-btn:hover { background: var(--hover); color: var(--text); }
.set-nav-btn.active { background: var(--active); color: var(--text); font-weight: 600; }
.set-nav-btn.danger { color: var(--danger); }
.set-nav-sep { width: 210px; height: 1px; background: var(--line); margin: 8px 0; }
.set-content { flex: 1; overflow-y: auto; padding: 44px 48px 140px; }
.set-close { position: absolute; top: 20px; right: 22px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--hover); }
.set-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.set-subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 56px 22px 0; padding: 4px; width: fit-content; max-width: 100%; border-radius: 12px; background: var(--hover); }
.set-subtab { padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.set-subtab:hover { color: var(--text); }
.set-subtab.active { background: var(--active); color: var(--text); }
.set-form { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.set-form.narrow { max-width: 680px; }
.set-section { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.set-h { font-size: 16px; font-weight: 700; }
.set-fold { gap: 0; }
.set-fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 2px 0; }
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold > summary .set-fold-hint { flex: 1; color: var(--muted); font-size: 13px; }
.set-fold > summary .ic { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: transform .15s; }
.set-fold[open] > summary .ic { transform: rotate(90deg); }
.set-fold > summary:hover .set-h { color: var(--accent); }
.set-fold-body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.set-sub { font-size: 13px; color: var(--muted); margin: -8px 0 0; }
.set-profile { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; max-width: 1120px; align-items: start; }
.set-preview { position: sticky; top: 0; }
.set-preview-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.set-preview-card .pcard { width: 100%; }
.save-bar {
  position: absolute; left: 48px; right: 48px; bottom: 20px; max-width: 760px; z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 14px;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); animation: rise .2s var(--ease);
}
.save-bar > span { flex: 1; font-weight: 600; font-size: 14px; }
.media-list { display: flex; flex-direction: column; gap: 10px; }
.media-row { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--hover); border: 1px solid var(--line); border-radius: 14px; flex-wrap: wrap; }
.media-thumb { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--active); display: grid; place-items: center; color: var(--muted); font-size: 12px; flex: none; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb.mt-banner, .media-thumb.mt-background { width: 116px; border-radius: 10px; }
.media-text { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 3px; }
.media-actions { display: flex; gap: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.color-row { display: flex; gap: 8px; align-items: center; }
.color-in { width: 44px; height: 42px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: rgb(var(--field)); cursor: pointer; flex: none; }
.color-in::-webkit-color-swatch-wrapper { padding: 4px; }
.color-in::-webkit-color-swatch { border: 0; border-radius: 6px; }
.color-in::-moz-color-swatch { border: 0; border-radius: 6px; }
.hex-in { width: 112px; font-family: var(--mono); font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--hover); border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; color: var(--text-2); transition: background .12s, border-color .12s; }
.chip:hover { background: var(--active); color: var(--text); }
.chip.active { border-color: var(--accent); color: var(--text); background: rgb(var(--accent-rgb) / .14); }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.preset { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; background: var(--hover); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.preset:hover { border-color: var(--accent); color: var(--text); }
.preset-sw { height: 40px; border-radius: 8px; background: linear-gradient(180deg, var(--p1) 0 36%, var(--p2) 36%, var(--p3)); }
.links-edit { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.link-edit-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 2px 0; }
.toggle-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-weight: 600; }
.switch { position: relative; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch-track { display: block; width: 44px; height: 26px; border-radius: 13px; background: var(--line-2); transition: background .15s; position: relative; }
.switch-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .18s var(--ease); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .4; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; background: var(--hover); border: 1px solid var(--line); border-radius: 12px; color: var(--text-2); }
.kv strong { color: var(--text); }
.fingerprint { font: 14px var(--mono); background: rgb(var(--field)); padding: 10px 12px; border-radius: 10px; letter-spacing: .04em; word-break: break-all; }
.meter { height: 10px; border-radius: 5px; background: rgb(var(--field)); overflow: hidden; border: 1px solid var(--line); }
.meter-bar { height: 100%; width: 0; background: var(--muted); transition: width .06s linear; }
.meter-bar.hot { background: var(--accent); }
.inline-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--text-2); cursor: pointer; }
.inline-check input, .range { accent-color: var(--accent); }
.range { width: 100%; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); transition: transform .12s; }
.swatch:hover { transform: scale(1.08); }
.swatch.active { box-shadow: 0 0 0 3px rgb(var(--s2)), 0 0 0 5px var(--text); }
.slider-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.slider-row > span:first-child { font-weight: 600; font-size: 14px; }
.slider-row .counter { text-align: right; }

/* theme cards: each card carries data-theme so its mini preview uses that theme's tokens */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 12px; }
.theme-card {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; text-align: left;
  background: rgb(var(--s1)); color: var(--text); border: 2px solid var(--line); transition: border-color .15s, transform .15s;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .2); }
.tp { display: grid; grid-template-columns: 14px 34px 1fr; gap: 4px; height: 76px; padding: 5px; border-radius: 10px; background: rgb(var(--bg)); }
.tp-rail { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.tp-rail i { width: 10px; height: 10px; border-radius: 4px; background: rgb(var(--s3)); }
.tp-rail i:first-child { background: var(--accent); }
.tp-side, .tp-main { border-radius: 6px; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.tp-side { background: rgb(var(--s1)); }
.tp-main { background: rgb(var(--s2)); }
.tp-side i, .tp-main i { height: 4px; border-radius: 2px; background: rgb(var(--text-rgb) / .22); }
.tp-main i:nth-child(2) { width: 70%; }
.tp-main i:nth-child(3) { width: 45%; background: rgb(var(--accent-rgb) / .7); }
.tp-main b { margin-top: auto; height: 9px; border-radius: 4px; background: rgb(var(--s3)); }
.theme-name { display: flex; flex-direction: column; padding: 0 4px 2px; }
.theme-name strong { font-size: 14px; }
.theme-name span { font-size: 12px; color: var(--muted); line-height: 1.3; }

/* background gallery */
.bg-group-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.bg-tile { display: flex; flex-direction: column; gap: 6px; padding: 5px; border-radius: 14px; border: 2px solid transparent; text-align: left; transition: border-color .15s, transform .15s; }
.bg-tile:hover { transform: translateY(-2px); }
.bg-tile.active { border-color: var(--accent); }
.bg-sw { height: 64px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; overflow: hidden; }
.bg-sw::after { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 40%; border-radius: 6px; background: rgb(var(--s1) / .8); }
.bg-tile-name { font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 0 3px; }
.bg-tile.active .bg-tile-name { color: var(--text); }
.bg-tile.add .bg-sw { display: grid; place-items: center; background: var(--hover); border: 1px dashed var(--line-2); box-shadow: none; color: var(--text-2); }
.bg-tile.add .bg-sw::after { display: none; }
.bg-tile.add .ic { width: 22px; height: 22px; }
.grad-builder { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: var(--hover); border: 1px solid var(--line); }
.grad-colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grad-preview { height: 90px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
/* ------------------------------------------------------------------ responsive */
/* Laptops: the right panel floats over the conversation instead of squeezing it. */
@media (max-width: 1240px) {
  #members { position: absolute; right: var(--gap); top: var(--gap); bottom: var(--gap); z-index: 20; box-shadow: var(--pop-shadow); background: rgb(var(--s1)); }
  [data-panel-side='left'] #members { right: auto; left: var(--gap); }
  body #app, body:not(.panel-open) #app { grid-template-columns: var(--cols-np, var(--rail-w) var(--side-w) minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --gap: 0px; --island-r: 0px; }
  body #app, body:not(.panel-open) #app { grid-template-columns: minmax(0, 1fr); padding: 0; }
  #rail, #sidebar, #main { order: 0; }
  .resize-handle { display: none; }
  #main { border: 0; }
  #rail, #sidebar { position: fixed; top: 0; bottom: 0; z-index: 30; transform: translateX(-110%); transition: transform .2s var(--ease); }
  #rail { left: 0; width: var(--rail-w); background: rgb(var(--bg)); padding-top: 10px; }
  #sidebar { left: var(--rail-w); width: min(var(--side-w), calc(100vw - var(--rail-w) - 36px)); transform: translateX(calc(-100% - var(--rail-w) - 16px)); background: rgb(var(--s1)); border: 0; border-radius: 0 16px 16px 0; }
  body.nav-open #rail, body.nav-open #sidebar { transform: none; }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: var(--scrim); }
  .nav-toggle { display: inline-flex !important; margin-left: -6px; }
  #members { position: fixed; inset: 0; width: 100% !important; border-radius: 0; z-index: 35; }
  .head-topic, .call-note { display: none; }
  #main-head { gap: 4px; padding: 0 6px 0 10px; }
  .head-tools .icon-btn { width: 32px; }
  .head-badge { display: none; }
  .msg { padding-right: 8px; }
  .msg-tools { right: 6px; }
  .composer-wrap { padding: 0 8px 4px; }
  .friends, .saved { padding: 4px 10px 20px; }
  .home-view { padding: 18px 14px 30px; }
  .ss { grid-template-columns: 1fr; }
  .ss-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 0; gap: 0; }
  .set-nav { flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 56px 10px 10px; border-radius: 0; }
  .set-main { border-radius: 0; }
  .set-nav-btn { width: auto; white-space: nowrap; flex: none; }
  .set-nav-label, .set-nav-sep { display: none; }
  .set-content { padding: 20px 16px 140px; }
  .set-close { top: 8px; right: 8px; position: fixed; background: rgb(var(--elev)); box-shadow: -14px 0 14px rgb(var(--s1)); }
  .set-profile { grid-template-columns: 1fr; }
  .set-preview { position: static; }
  .grid-2 { grid-template-columns: 1fr; }
  .slider-row { grid-template-columns: 1fr 48px; }
  .slider-row > span:first-child { grid-column: 1 / -1; }
  .link-edit-row { grid-template-columns: 1fr auto; }
  .link-edit-row .input:first-child { grid-column: 1 / -1; }
  .save-bar { left: 12px; right: 12px; flex-wrap: wrap; }
  .vr-grid { grid-template-columns: 1fr 1fr; padding: 10px; gap: 8px; }
  .vr-tile .av { --size: 64px !important; }
  .emoji-picker, .gif-picker { width: calc(100vw - 16px); }
  .safety { grid-template-columns: repeat(3, 1fr); font-size: 15px; }
  #toasts { top: 62px; left: 12px; right: 12px; align-items: center; }
  .viewer-stage { padding: 0 8px 20px; }
  .viewer-nav { display: none; }
  .modal-search { margin-top: 0; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *:not(.spinner), *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .pfx { display: none; }
}
html.reduce-motion *:not(.spinner), html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.reduce-motion .pfx { display: none; }

/* ------------------------------------------------------------------ encryption states */
.key-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 0 8px; border-radius: 12px;
  font-size: 13.5px; color: var(--text-2); background: var(--hover); border: 1px solid var(--line-2);
}
.key-bar > span:not(.spinner):not(.ic) { flex: 1; }
.key-bar .ic { width: 18px; height: 18px; flex: none; }
.key-bar.bad { color: color-mix(in oklab, var(--danger) 75%, var(--text)); background: rgb(239 84 102 / .1); border-color: rgb(239 84 102 / .35); }
.modal .key-bar { margin: 0; }
.head-badge.warn { color: color-mix(in oklab, var(--danger) 80%, var(--text)); background: rgb(239 84 102 / .12); border-color: rgb(239 84 102 / .35); }
.msg-flag { display: inline-flex; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.msg-flag.bad { color: var(--danger); border-color: rgb(239 84 102 / .4); background: rgb(239 84 102 / .08); }
/* The server may have moved, repeated or rolled back a message (binding.js): yellow, a button that explains why. The
   text is mixed toward the theme's text colour so it stays readable on light and dark panels alike. */
.msg-flag.warn { color: color-mix(in oklab, var(--idle) 62%, var(--text)); border-color: color-mix(in srgb, var(--idle) 55%, transparent); background: color-mix(in srgb, var(--idle) 12%, transparent); font-family: inherit; line-height: inherit; cursor: pointer; text-align: left; }
.msg-flag.warn:hover { background: color-mix(in srgb, var(--idle) 20%, transparent); }
.bind-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* settings nav icons + sessions */
.set-nav-btn { display: flex; align-items: center; gap: 10px; }
.set-nav-btn .ic { width: 17px; height: 17px; opacity: .8; }
.set-nav-label:not(:first-child) { margin-top: 14px; }
.session-text { display: flex; flex-direction: column; }
.session-text span { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ picture crop (position + zoom) */
img.cropped { width: 100%; height: 100%; object-fit: cover; transform: translate(var(--tx, 0%), var(--ty, 0%)) scale(var(--z, 1)); }
.pc-bg { overflow: hidden; }
.pc-bg-img { position: absolute; inset: 0; }
.vr-bg { position: absolute; inset: 0; overflow: hidden; opacity: .4; filter: blur(2px) saturate(1.2); transform: none; width: auto; height: auto; }
.vr-bg img { transform: translate(var(--tx, 0%), var(--ty, 0%)) scale(calc(var(--z, 1) * 1.06)); }
.crop { display: flex; flex-direction: column; gap: 14px; }
.crop-main { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.crop-stage {
  position: relative; overflow: hidden; border-radius: 14px; cursor: grab; touch-action: none; flex: none;
  background: repeating-conic-gradient(rgb(var(--text-rgb) / .06) 0 25%, transparent 0 50%) 0 0 / 16px 16px, rgb(var(--field));
}
.crop-stage.dragging { cursor: grabbing; }
.crop-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.crop-img { position: absolute; inset: 0; user-select: none; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; }
.crop-avatar.mask-circle .crop-mask { border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .55), inset 0 0 0 2px rgb(255 255 255 / .85); }
.crop-avatar.mask-rounded .crop-mask { border-radius: 30%; box-shadow: 0 0 0 999px rgb(0 0 0 / .55), inset 0 0 0 2px rgb(255 255 255 / .85); }
.crop-avatar.mask-square .crop-mask { border-radius: 12%; box-shadow: 0 0 0 999px rgb(0 0 0 / .55), inset 0 0 0 2px rgb(255 255 255 / .85); }
.crop-avatar.mask-hexagon .crop-mask { background: rgb(0 0 0 / .55); clip-path: path(evenodd, 'M0 0H280V280H0Z M70 11.2 L210 11.2 L280 140 L210 268.8 L70 268.8 L0 140 Z'); }
.crop-banner .crop-mask, .crop-background .crop-mask { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .7); border-radius: 14px; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(rgb(255 255 255 / .35) 1px, transparent 1px) 0 0 / 100% 33.333%, linear-gradient(90deg, rgb(255 255 255 / .35) 1px, transparent 1px) 0 0 / 33.333% 100%; }
.crop-stage.dragging .crop-grid { opacity: 1; }
.crop-side { display: flex; flex-direction: column; gap: 10px; }
.crop-previews { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.crop-pv { position: relative; overflow: hidden; background: rgb(var(--field)); flex: none; }
.crop-pv img { position: absolute; inset: 0; }
.crop-pv.mask-circle { border-radius: 50%; }
.crop-pv.mask-rounded { border-radius: 30%; }
.crop-pv.mask-square { border-radius: 12%; }
.crop-pv.mask-hexagon { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.crop-pv.rounded { border-radius: 10px; }
.crop-zoom { display: flex; align-items: center; gap: 8px; }
.crop-zoom .range { flex: 1; }
.media-thumb { position: relative; padding: 0; }
.media-thumb img { position: absolute; inset: 0; }
.media-thumb.mask-rounded { border-radius: 30%; }
.media-thumb.mask-square { border-radius: 12%; }
.media-thumb.mask-hexagon { border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
button.media-thumb:hover { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .crop-stage.crop-avatar { width: 240px !important; height: 240px !important; } .crop-stage.crop-banner { width: 300px !important; height: 106px !important; } }

/* ------------------------------------------------------------------ custom layouts (wider than phones) */
@media (min-width: 761px) {
  [data-rail='top'] #app { grid-template-rows: auto minmax(0, 1fr); padding-top: 0; }
  [data-rail='top'] #rail { grid-column: 1 / -1; grid-row: 1; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px 2px; }
  [data-rail='top'] .rail-item { width: auto; }
  [data-rail='top'] .rail-sep { width: 2px; height: 28px; margin: 0 4px; }
  [data-rail='top'] .rail-sep.thin { width: 1px; height: 16px; }
  [data-rail-size='compact'] { --rail-w: 58px; }
  [data-rail-size='compact'] .rail-btn { width: 38px; height: 38px; border-radius: 12px; }
  [data-rail-size='compact'] .rail-btn > img { border-radius: 11px; }
  [data-layout-style='spacious'] { --gap: 12px; --island-r: 20px; }
  [data-layout-style='attached'] { --gap: 0px; --island-r: 0px; }
  /* Corner style (Settings → Appearance). The attached layout keeps square edges. */
  :root[data-corners='sharp']:not([data-layout-style='attached']) { --island-r: 6px; }
  :root[data-corners='round']:not([data-layout-style='attached']) { --island-r: 24px; }
  :root[data-corners='sharp'] .btn, :root[data-corners='sharp'] .input { border-radius: 4px; }
  :root[data-corners='round'] .btn, :root[data-corners='round'] .input { border-radius: 999px; }
  :root[data-corners='round'] textarea.input { border-radius: 16px; }
  [data-layout-style='attached'] #sidebar, [data-layout-style='attached'] #main, [data-layout-style='attached'] #members { border-width: 0; box-shadow: none; }
  [data-layout-style='attached'][data-sidebar-side='left'] #sidebar { border-right: 1px solid var(--line); }
  [data-layout-style='attached'][data-sidebar-side='right'] #sidebar { border-left: 1px solid var(--line); }
  [data-layout-style='attached'][data-panel-side='right'] #members { border-left: 1px solid var(--line); }
  [data-layout-style='attached'][data-panel-side='left'] #members { border-right: 1px solid var(--line); }
  [data-layout-style='attached'] #rail { background: rgb(var(--bg)); }
}
/* Drag the inner edge of the sidebar or side panel to resize it. */
.resize-handle { position: absolute; top: 0; bottom: 0; width: 8px; z-index: 6; cursor: col-resize; touch-action: none; }
.resize-handle::after { content: ''; position: absolute; top: 12px; bottom: 12px; left: 3px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.resize-handle:hover::after, .resize-handle.active::after, .resize-handle:focus-visible::after { background: var(--accent); }
.resize-handle:focus-visible { outline: none; }
#sidebar > .resize-handle { right: 0; }
[data-sidebar-side='right'] #sidebar > .resize-handle { right: auto; left: 0; }
#members > .resize-handle { left: 0; }
[data-panel-side='left'] #members > .resize-handle { left: auto; right: 0; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }

/* layout settings */
.layout-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.layout-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--hover); text-align: left; transition: border-color .15s, transform .15s; }
.layout-card:hover { transform: translateY(-2px); }
.layout-card.active { border-color: var(--accent); }
.layout-card strong { font-size: 14px; }
.layout-card span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.lp { display: grid; gap: 3px; height: 70px; padding: 4px; border-radius: 9px; background: rgb(var(--bg)); }
.lp i { border-radius: 4px; background: rgb(var(--s1)); display: block; }
.lp i.lp-rail { background: rgb(var(--s3)); }
.lp i.lp-main { background: rgb(var(--s2)); box-shadow: inset 0 -8px 0 rgb(var(--s3)); }
.lp i.lp-panel { background: rgb(var(--accent-rgb) / .25); }
.lp.big { height: 150px; gap: 6px; padding: 8px; border-radius: 14px; }
.lp.big i { display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); font-style: normal; }
.arrange { display: flex; gap: 8px; flex-wrap: wrap; }
.arrange-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; cursor: grab;
  background: var(--hover); border: 1px solid var(--line-2); font-weight: 600; font-size: 14px; user-select: none;
}
.arrange-item.dragging { opacity: .4; }
.arrange-item.over { border-color: var(--accent); background: rgb(var(--accent-rgb) / .1); }
.arrange-item .icon-btn { width: 26px; height: 26px; }
.arrange-item .ic.grip { width: 16px; height: 16px; color: var(--muted); }

/* update ready (and the Android app's one-time offer of notifications when it's closed) */
.update-bar, .push-offer {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 75;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); font-weight: 600; font-size: 14px;
  animation: rise .2s var(--ease);
}
.update-bar > .ic, .push-offer > .ic { width: 16px; height: 16px; color: var(--accent); }

/* ------------------------------------------------------------------ roles, server customization, custom emoji */
#sidebar-head.has-banner { height: auto; flex-direction: column; align-items: stretch; padding: 0; border-bottom: 0; position: relative; }
.server-banner { height: 120px; overflow: hidden; position: relative; }
.server-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(var(--s1) / .9)); }
#sidebar-head.has-banner .server-head { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 1; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .6); background: rgb(0 0 0 / .18); backdrop-filter: blur(6px); }
#sidebar-head.has-banner .server-head .ic { color: #fff; }
.rail-btn.shape-circle, .rail-btn.shape-circle > img { border-radius: 50%; }
.rail-btn.shape-square, .rail-btn.shape-square > img { border-radius: 8px; }
.role-icon { font-size: 13px; line-height: 1; cursor: default; }
.role-mention { background: color-mix(in srgb, var(--rc, var(--accent)) 18%, transparent); color: var(--rc, var(--accent-ink)); }
img.cemoji { display: inline-block; width: 1.4em; height: 1.4em; object-fit: contain; vertical-align: -0.35em; margin: 0 1px; }
.msg-text.jumbo img.cemoji { width: 48px; height: 48px; }
.reaction img.cemoji { width: 17px; height: 17px; vertical-align: middle; }
.emoji-btn img.cemoji { width: 26px; height: 26px; }
img.cemoji.big { width: 40px; height: 40px; }
.emoji-tab-img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.emoji-tab-txt { font-size: 10px; font-weight: 800; }
.ep-big img.cemoji { width: 24px; height: 24px; }
.ep-src { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; }
.suggest-emoji { width: 24px; height: 24px; display: grid; place-items: center; font-size: 18px; }
.suggest-emoji img.cemoji { width: 22px; height: 22px; }
.suggest-at.role { font-size: 14px; }
.slow-note { font-size: 12px; color: var(--muted); padding: 4px 6px 0; }
.slow-note[hidden] { display: none; }
.dis-note { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 4px 6px 0; }
.dis-note .ic { width: 13px; height: 13px; flex: none; }
.dis-note[hidden] { display: none; }
.dis-hint .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* ------------------------------------------------------------------ scheduled messages (Send later) */
.composer-tools .send-later[hidden] { display: none; }
.composer-tools .send-later:disabled { opacity: .45; }
.sched-bar { margin-bottom: 6px; }
.sched-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: min(60vh, 560px); overflow-y: auto; }
.sched-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--hover); border: 1px solid var(--line-2); }
.sched-item.failed { border-color: rgb(239 84 102 / .35); }
.sched-item.held { border-color: color-mix(in oklab, var(--idle) 45%, transparent); }
.sched-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.sched-head .ic { width: 15px; height: 15px; flex: none; }
.sched-item.failed .sched-head { color: color-mix(in oklab, var(--danger) 75%, var(--text)); }
.sched-when { font-weight: 600; }
.sched-tag, .sched-files { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.sched-files .ic { width: 12px; height: 12px; }
.sched-where { align-self: flex-start; font-size: 12.5px; }
.sched-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow-y: auto; line-height: 1.45; }
.sched-text.muted { color: var(--muted); font-style: italic; }
.sched-note { margin: 0; font-size: 12.5px; color: var(--text-2); }
.sched-note.bad { color: color-mix(in oklab, var(--danger) 75%, var(--text)); }
.sched-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-edit { min-height: 64px; }
.server-welcome { margin-top: 6px; padding: 10px 14px; border-radius: 12px; background: rgb(var(--accent-rgb) / .08); border: 1px solid rgb(var(--accent-rgb) / .25); color: var(--msg-text); max-width: 70ch; }
.modal-xl { max-width: 1080px; }
.server-settings .modal-body { padding: 0; }
.server-settings .ss { min-height: 560px; }
.ss-body { max-height: 74vh; }
.stack.tight { gap: 6px; }
.ss-icon.shape-circle { border-radius: 50%; }
.ss-icon.shape-square { border-radius: 10px; }
.ss-banner { height: 130px; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--line); }
.roles-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.role-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.role-list .btn.block { margin-bottom: 8px; height: 36px; }
.role-row { display: flex; align-items: center; border-radius: 9px; }
.role-row:hover { background: var(--hover); }
.role-row.active { background: var(--active); }
.role-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; text-align: left; font-weight: 600; font-size: 14px; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.role-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-count { font-size: 12px; color: var(--muted); font-weight: 500; }
.role-move { display: flex; opacity: 0; }
.role-row:hover .role-move, .role-row.active .role-move { opacity: 1; }
.role-editor { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.role-editor-head { display: flex; align-items: center; gap: 10px; }
.role-editor h3 { font-size: 15px; }
.perm-groups { display: flex; flex-direction: column; gap: 14px; }
.perm-group { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--hover); border: 1px solid var(--line); }
.perm-group-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.role-members { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.role-members .chip { height: 30px; padding: 0 6px 0 4px; gap: 6px; }
.role-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); position: sticky; bottom: -18px; background: rgb(var(--elev)); padding-bottom: 6px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 2; min-width: 0; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: var(--rc, var(--text-2)); background: color-mix(in srgb, var(--rc, var(--text-2)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rc, var(--text-2)) 30%, transparent); }
.swatch.none { display: grid; place-items: center; background: var(--hover); color: var(--muted); }
.swatch.none .ic { width: 16px; height: 16px; }
.emoji-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: var(--hover); border: 1px dashed var(--line-2); }
.emoji-upload .input { flex: 1; min-width: 160px; }
.emoji-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.emoji-admin { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--hover); border: 1px solid var(--line); }
.emoji-admin .input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
.channel-settings .seg { align-self: flex-start; }
.ov-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.ov-list { display: flex; flex-direction: column; gap: 2px; }
.ov-list select { margin-top: 8px; width: 100%; }
.ov-perms { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.tri { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; flex: none; }
.tri-btn { width: 34px; height: 30px; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.tri-btn + .tri-btn { border-left: 1px solid var(--line-2); }
.tri-btn .ic { width: 15px; height: 15px; }
.tri-btn.on { background: var(--active); color: var(--text); }
.tri-btn.deny.on { background: rgb(239 84 102 / .9); color: #fff; }
.tri-btn.allow.on { background: rgb(63 207 131 / .9); color: #0b1f14; }
@media (max-width: 760px) { .roles-layout, .ov-layout { grid-template-columns: 1fr; } .role-list { position: static; } }

/* ------------------------------------------------------------------ GIFs */
.gif-picker { width: 420px; max-width: calc(100vw - 16px); }
.gif-picker .seg { align-self: flex-start; }
.gif-grid { position: relative; }
.gif-grid.cats { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.gif-btn { position: relative; cursor: pointer; display: block; }
.gif-btn:focus-visible { outline: 2px solid var(--focus); }
.gif-fav { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgb(0 0 0 / .55); color: #fff; opacity: 0; transition: opacity .12s; }
.gif-fav .ic { width: 15px; height: 15px; }
.gif-fav.on { opacity: 1; color: #ffd75e; }
.gif-fav.on .ic svg { fill: currentColor; }
.gif-btn:hover .gif-fav, .gif-btn:focus-within .gif-fav { opacity: 1; }
.gif-cat { position: relative; height: 84px; border-radius: 10px; overflow: hidden; background: var(--active); display: grid; place-items: center; }
.gif-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); transition: filter .15s, transform .2s; }
.gif-cat:hover img { filter: brightness(.8); transform: scale(1.04); }
.gif-cat span { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 14px; text-transform: capitalize; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.gif-cat.trending { background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #ef5466)); color: var(--on-accent); gap: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.gif-cat.trending span { color: inherit; text-shadow: none; }
.gif-empty { column-span: all; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.gif-empty p { margin: 0; }
.gif-status:empty { display: none; }
.embed-wrap { position: relative; display: inline-block; max-width: min(420px, 100%); }
.embed-wrap .embed-img { display: block; }
.giphy-tag { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: 5px; background: rgb(0 0 0 / .6); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; opacity: 0; transition: opacity .15s; pointer-events: none; }
.embed-wrap:hover .giphy-tag { opacity: 1; }
.gif-badge { font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 5px; background: rgb(var(--accent-rgb) / .18); color: var(--accent-ink); letter-spacing: .04em; }
.emoji-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.emoji-queue:empty { display: none; }
.emoji-queue > .row { grid-column: 1 / -1; }
.pending-emoji { border-style: dashed; border-color: rgb(var(--accent-rgb) / .5); }
.giphy-emoji .gif-picker { width: 100%; border: 0; box-shadow: none; background: transparent; padding: 0; backdrop-filter: none; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); font-size: 14px; }
.giphy-test { display: flex; align-items: center; gap: 10px; min-height: 0; font-size: 13.5px; }
.giphy-test:empty { display: none; }
.giphy-test img { height: 48px; border-radius: 6px; }
.ok-text { color: var(--ok); font-weight: 600; }
.sound-list { display: flex; flex-direction: column; gap: 2px; }
.sound-list.off { opacity: .45; pointer-events: none; }
.sound-row { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.sound-row .toggle-text { flex: 1; }
.sound-play { font-size: 11px; color: var(--accent-ink); background: rgb(var(--accent-rgb) / .12); border-radius: 50%; width: 30px; height: 30px; }
.sound-pick { width: 190px; min-width: 0; }
.sound-group { margin: 12px 0 2px; }
.sound-file:empty { display: none; }
.sound-file { color: var(--accent-ink); }
.doc-page { overflow: auto; background: rgb(var(--bg)); }
.doc { max-width: 760px; margin: 0 auto; padding: 48px 22px 64px; line-height: 1.6; color: var(--msg-text); }
.doc h1, .tos-text h1 { font-size: 28px; margin-bottom: 8px; }
.doc h2, .tos-text h2 { font-size: 18px; margin: 22px 0 6px; }
.tos-text { max-height: 50vh; overflow-y: auto; padding: 4px 14px 12px; border-radius: 12px; background: rgb(var(--field)); border: 1px solid var(--line); line-height: 1.55; }
/* Banner turned off: the background fills the card; leave room for the avatar at the top. */
.pc-banner-space { height: 36px; }
.pcard.pc-no-banner .pc-av { margin-top: 0; }
.tos-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-2); margin: 4px 0 2px; cursor: pointer; }
.tos-check input { margin-top: 3px; accent-color: var(--accent); }

/* ------------------------------------------------------------------ admin */
.admin { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.admin-tabs { display: flex; gap: 2px; padding: 8px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: none; }
.admin-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.admin-tab .ic { width: 16px; height: 16px; }
.admin-tab:hover { background: var(--hover); color: var(--text); }
.admin-tab.active { background: var(--active); color: var(--text); }
.admin-body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 12px; }
/* Long tabs scroll instead of squashing their tables to nothing. */
.admin-body > * { flex-shrink: 0; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.admin-head h3 { font-size: 17px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: var(--hover); border: 1px solid var(--line); }
.stat strong { font: 800 26px var(--font-display); }
.stat.warn { border-color: rgb(239 84 102 / .5); background: rgb(239 84 102 / .08); }
.stat.degraded { border-color: rgb(245 176 65 / .5); background: rgb(245 176 65 / .08); }
.stat-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.stat-sub { font-size: 12.5px; color: var(--muted); display: block; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.chart { padding: 14px; border-radius: 14px; background: var(--hover); border: 1px solid var(--line); }
.chart-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 10px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar-col span { font-size: 10px; color: var(--muted); }
.bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); min-height: 2px; }
.bar.alt { background: var(--ok); } .bar.alt2 { background: #5c8dff; }
.adm-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.adm-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 1.3fr 1fr 1.3fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.adm-row:first-child { border-top: 0; }
.adm-row.head { background: var(--hover); font-size: 12px; font-weight: 700; color: var(--muted); }
.adm-row.three { grid-template-columns: 1fr 1fr 1fr; }
.adm-row.log { grid-template-columns: 140px minmax(160px, 1fr) 160px 2fr auto; }
.adm-user { display: flex; align-items: center; gap: 8px; text-align: left; min-width: 0; }
.adm-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.adm-user-text span { font-size: 12px; color: var(--muted); }
.ip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ip-chip { font: 12px var(--mono); padding: 2px 7px; border-radius: 6px; background: rgb(var(--field)); border: 1px solid var(--line-2); color: var(--text-2); }
.ip-chip:hover { border-color: var(--accent); color: var(--text); }
.badge-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: var(--active); color: var(--text-2); white-space: nowrap; }
.badge-tag.bad { background: rgb(239 84 102 / .16); color: var(--danger); }
.badge-tag.ok { background: rgb(63 207 131 / .16); color: var(--ok); }
.badge-tag.warn { background: rgb(245 176 65 / .18); color: #f5b041; }
.badge-tag.role-owner { background: rgb(var(--accent-rgb) / .2); color: var(--accent-ink); }
.badge-tag.role-admin { background: rgb(92 141 255 / .18); color: #8fb0ff; }
.badge-tag.role-moderator { background: rgb(63 207 131 / .16); color: var(--ok); }
[data-theme='light'] .badge-tag.role-admin { color: #3157c9; }
.adm-user .badge-tag { margin-left: 6px; }
.role-guide { display: grid; gap: 8px; margin: 4px 0 14px; }
.role-guide > div { display: flex; align-items: center; gap: 10px; }
.role-guide .badge-tag { min-width: 82px; justify-content: center; }
.adm-row.note { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.note-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.badge-tag.cat-child_safety, .badge-tag.cat-threats, .badge-tag.cat-self_harm { background: var(--danger-fill); color: #fff; }
.online-dot { color: var(--ok); font-weight: 700; }
.report-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--hover); display: flex; flex-direction: column; gap: 10px; }
.report-card.st-open { border-left: 3px solid var(--danger); }
.report-card.st-reviewing { border-left: 3px solid var(--idle); }
.report-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-who > div { display: flex; flex-direction: column; gap: 6px; }
.report-details { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line-2); color: var(--text-2); white-space: pre-wrap; }
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-card.st-done { border-left: 3px solid var(--line-2); }
/* Server settings → Audit log (public/js/serveraudit.js) */
.audit-filters .field { min-width: 200px; flex: 1; }
.audit-list { display: flex; flex-direction: column; }
.audit-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 4px; border-top: 1px solid var(--line); }
.audit-row:first-child { border-top: 0; }
.audit-text { font-size: 14px; overflow-wrap: anywhere; }
.audit-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.audit-time { font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.audit-sys { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--muted); }
.audit-sys .ic { width: 16px; height: 16px; }
@media (max-width: 600px) { .audit-row { grid-template-columns: 30px minmax(0, 1fr); } .audit-time { grid-column: 2; padding-top: 0; } }
.evidence { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: rgb(var(--field)); border: 1px solid var(--line); }
.ev { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 8px; }
.ev.reported { background: rgb(239 84 102 / .1); outline: 1px solid rgb(239 84 102 / .35); }
.ev-body { flex: 1; min-width: 0; }
.ev-meta { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.ev-meta strong { color: var(--text); }
.ev-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.report-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.radio-card.sm { padding: 8px 10px; font-size: 13.5px; }
.terms-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.terms-edit textarea { min-height: 380px; font-size: 13px; }
.terms-edit .tos-text { max-height: 420px; }
.row.wrap { flex-wrap: wrap; }
@media (max-width: 900px) { .adm-row, .adm-row.log { grid-template-columns: 1fr 1fr; } .adm-row.head { display: none; } .terms-edit, .report-who, .report-cats { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ captcha */
.captcha { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; height: 58px; padding: 0 14px; margin: 4px 0 2px;
  border-radius: 12px; border: 1px solid var(--line-2); background: rgb(var(--field)); text-align: left; transition: border-color .15s; }
.captcha:hover { border-color: rgb(var(--accent-rgb) / .6); }
.captcha:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.captcha[hidden] { display: none; }
.cap-box { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--line-2); background: rgb(var(--bg)); flex: none; display: grid; place-items: center; transition: all .2s; }
.captcha[data-state='working'] .cap-box { border-color: var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.captcha[data-state='done'] .cap-box { background: var(--ok); border-color: var(--ok); }
.captcha[data-state='done'] .cap-box::after { content: ''; width: 7px; height: 13px; border: solid #0b1f14; border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.captcha[data-state='error'] .cap-box { border-color: var(--danger); }
.cap-label { flex: 1; font-weight: 600; font-size: 14px; }
.captcha[data-state='error'] .cap-label { color: var(--danger); font-size: 12.5px; }
.cap-brand { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 9.5px; color: var(--muted); }
.cap-brand .ic { width: 18px; height: 18px; color: var(--accent); }
.cap-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); transition: width .3s; }
.captcha[data-state='done'] .cap-bar { background: var(--ok); }

/* ------------------------------------------------------------------ calls: video + screen sharing */
.voice-room { flex: 1; display: flex; min-height: 0; padding: 12px; }
.voice-room .call-stage { flex: 1; }
.call-stage { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 10px; border-radius: 16px; background: rgb(var(--bg) / .55); border: 1px solid var(--line); }
.chat > .call-stage { flex: none; height: 300px; margin: 8px 12px 0; transition: height .2s var(--ease); }
.chat > .call-stage.tall { height: min(62vh, 640px); }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.cs-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.cs-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
.cs-grid { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
.cs-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.cs-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-spot { flex: 1; min-height: 0; display: flex; gap: 8px; }
.cs-spot > .cs-tile.big { flex: 1; min-width: 0; }
.cs-strip { width: 190px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.cs-strip .cs-tile { flex: none; aspect-ratio: 16 / 10; }
.cs-tile { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 90px; border-radius: 14px; background: rgb(var(--s2)); outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; transition: outline-color .15s, box-shadow .15s; }
.cs-tile.speaking { outline-color: var(--ok); box-shadow: 0 0 0 3px rgb(63 207 131 / .22); }
.cs-tile:focus-visible { outline-color: var(--focus); }
.cs-tile .vr-bg { opacity: .35; }
.cs-tile > .av { position: relative; z-index: 1; }
.cs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cs-tile.kind-screen .cs-video { object-fit: contain; }
.cs-video.mirror { transform: scaleX(-1); }
.cs-tile:fullscreen { border-radius: 0; }
.cs-tile:fullscreen .cs-video { object-fit: contain; }
.cs-name { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 8px; background: rgb(0 0 0 / .55); color: #fff; font-size: 12.5px; font-weight: 600; }
.cs-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-name .ic { width: 14px; height: 14px; }
.cs-tools { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.cs-tile:hover .cs-tools, .cs-tile:focus-within .cs-tools { opacity: 1; }
.cs-tools .icon-btn { background: rgb(0 0 0 / .55); color: #fff; }
.cs-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.round-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--s3)); color: var(--text); border: 1px solid var(--line-2); transition: background .15s, transform .1s; }
.round-btn:hover { background: var(--active); }
.round-btn:active { transform: scale(.94); }
.round-btn .ic { width: 20px; height: 20px; }
.round-btn.off { background: rgb(239 84 102 / .16); color: var(--danger); border-color: rgb(239 84 102 / .4); }
.round-btn.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.round-btn.hang { background: var(--danger-fill); color: #fff; border-color: transparent; }
.round-btn.accept { background: var(--ok); color: #0b1f14; border-color: transparent; }
.vp-controls .icon-btn.on { color: var(--on-accent); background: var(--accent); }
.vol-pop { padding: 10px 12px; min-width: 220px; }
.vol-pop .range { width: 100%; }
/* incoming call */
.ring-card { position: fixed; right: 20px; bottom: 20px; z-index: 76; width: min(360px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: 18px; background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); animation: ring-in .25s var(--ease); }
@keyframes ring-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.ring-av { position: relative; flex: none; }
.ring-av::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); animation: ring-pulse2 1.4s ease-out infinite; }
@keyframes ring-pulse2 { from { transform: scale(.95); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.ring-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ring-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring-text span { font-size: 13px; color: var(--muted); }
.ring-actions { display: flex; gap: 8px; }
.ring-actions .round-btn { width: 40px; height: 40px; }
.cam-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cam-row .stack { flex: 1; min-width: 200px; }
.cam-preview { width: 240px; aspect-ratio: 16 / 9; border-radius: 12px; background: rgb(var(--field)); object-fit: cover; transform: scaleX(-1); border: 1px solid var(--line); }
@media (max-width: 760px) {
  .cs-spot { flex-direction: column; } .cs-strip { width: auto; flex-direction: row; overflow-x: auto; } .cs-strip .cs-tile { width: 140px; }
  .chat > .call-stage { height: 240px; margin: 6px 6px 0; }
  .ring-card { right: 12px; bottom: 12px; }
}
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pick-src { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--hover); text-align: left; }
.pick-src:hover, .pick-src:focus-visible { border-color: var(--accent); }
.pick-src img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 8px; }
.pick-src span { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ "Updating…" */
.update-overlay { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgb(var(--bg) / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .2s ease; }
.update-overlay.done { animation: fadeout .25s ease forwards; }
.uo-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 34px; border-radius: 20px; background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); text-align: center; max-width: min(380px, calc(100vw - 32px)); }
.uo-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgb(var(--accent-rgb) / .2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.uo-title { font-size: 17px; }
.uo-sub { font-size: 13.5px; color: var(--text-2); }
.cs-conn { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgb(0 0 0 / .6); color: #fff; font-size: 12px; font-weight: 600; }
.cs-conn .spinner { width: 12px; height: 12px; border-width: 2px; }
.cs-conn.bad { background: rgb(239 84 102 / .9); }
.cs-conn.warn { background: rgb(240 178 50 / .9); color: #111; }
.cs-conn .link-btn { color: inherit; text-decoration: underline; font-weight: 700; }
.cs-live.st-warn, .cs-live.st-wait { color: var(--idle); }
.cs-live.st-bad { color: var(--danger); }
.cs-live.st-warn::before, .cs-live.st-wait::before { background: var(--idle); }
.cs-live.st-bad::before { background: var(--danger); animation: none; }
.cs-head-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.cs-hidden-peers { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgb(239 84 102 / .14); color: var(--danger); font-size: 12.5px; font-weight: 600; }
.diag { display: flex; flex-direction: column; gap: 14px; }
.diag-peer { border: 1px solid var(--border, rgb(127 127 127 / .25)); border-radius: 10px; padding: 10px 12px; }
.diag-peer h3 { margin: 0 0 6px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.diag-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.diag-table td { padding: 3px 6px 3px 0; vertical-align: top; }
.diag-table td:first-child { white-space: nowrap; font-weight: 600; }
.diag-table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.diag-table td:last-child { color: var(--muted); }
.diag-na { color: var(--muted); font-style: italic; }
.diag-log { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--muted); max-height: 140px; overflow: auto; }
.diag-warn { color: var(--danger); font-weight: 600; }
.cs-conn .ic { width: 13px; height: 13px; }
.att-media.loading::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid rgb(var(--text-rgb) / .2); border-top-color: var(--accent); animation: spin .8s linear infinite; z-index: 1; }
.att-media.failed { min-width: 220px; min-height: 90px; display: grid; place-items: center; }
.att-retry { position: absolute; inset: auto 0 0 0; margin: auto; top: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.att-retry .ic { width: 15px; height: 15px; }
.att-media.sized .att-img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
/* Download progress for big files, a "no longer available" state, and click-to-load for big videos and songs. */
.att-meter { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 4px; border-radius: 2px; background: rgb(0 0 0 / .35); overflow: hidden; z-index: 2; }
.att-meter[hidden] { display: none; }
.att-meter i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.att-media.gone { min-width: 220px; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.att-media.gone .att-audio-name { padding-bottom: 0; }
.att-gone { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 13px; color: var(--muted); font-style: italic; }
.att-gone .ic { width: 15px; height: 15px; }
.att-file.gone { cursor: default; }
.att-file.gone .att-gone { padding: 2px 0 0; font-size: 12px; }
.att-file.gone .att-file-badge { opacity: .5; }
.att-media.click-to-load { min-width: 240px; padding-bottom: 6px; }
.att-play { display: inline-flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 8px 12px; border-radius: 10px; background: rgb(var(--accent-rgb) / .14); color: var(--accent-ink); font-weight: 600; font-size: 13px; }
.att-play:hover { background: rgb(var(--accent-rgb) / .22); }
.att-play .ic, .att-play svg { width: 16px; height: 16px; }
.att-kind::before { content: '\00b7'; margin-right: 8px; }
.viewer-stage.loading-full::after { content: 'Loading full size\2026'; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: rgb(0 0 0 / .55); color: #fff; font-size: 12px; }
.viewer-stage { position: relative; }
.adm-srv-ic { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; background: var(--active); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.ip-chip.static { cursor: default; }
.row.gap.tight { gap: 4px; align-items: center; }
.announce { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; max-width: min(720px, calc(100vw - 24px));
  padding: 8px 8px 8px 14px; border-radius: 12px; background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); font-size: 14px; animation: rise .25s var(--ease); }
.announce > .ic { width: 17px; height: 17px; color: var(--accent); flex: none; }
.announce.lvl-warning { border-color: rgb(240 194 75 / .6); background: color-mix(in srgb, rgb(var(--elev)) 85%, #f0c24b); }
.announce.lvl-warning > .ic { color: #c99512; }
.announce.lvl-success > .ic { color: var(--ok); }
.announce-text { flex: 1; min-width: 0; }
/* new profile effects */
.pfx-sakura span { color: #ffb7d5; animation-name: pfx-fall-sway; }
.pfx-confetti span { color: hsl(calc(var(--s) * 360) 85% 60%); animation-name: pfx-fall-sway; font-size: calc(7px * var(--s)); }
.pfx-rain span { color: rgb(160 200 255 / .7); animation-duration: calc(1.6s / var(--s)); font-size: calc(14px * var(--s)); }
.pfx-fireflies span { top: auto; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 8px 2px rgb(255 240 120 / .8); animation: pfx-float calc(9s / var(--s)) ease-in-out infinite; }
@keyframes pfx-float { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(18px, -180px); } 85% { opacity: .9; } 100% { transform: translate(-12px, -360px); opacity: 0; } }
/* profile song, interests, about me, top friends */
.pc-song { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 12px; background: rgb(0 0 0 / .25); color: inherit; text-align: left; }
.pc-song:hover { background: rgb(0 0 0 / .35); }
.pc-song-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c1, var(--accent)); color: #111; font-size: 11px; flex: none; }
.pc-song-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; }
.pc-song-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; opacity: 0; }
.pc-song-bars i { width: 3px; background: currentColor; border-radius: 1px; height: 4px; }
.pc-song.playing .pc-song-bars { opacity: .8; }
.pc-song.playing .pc-song-bars i { animation: eq .8s ease-in-out infinite alternate; }
.pc-song.playing .pc-song-bars i:nth-child(2) { animation-delay: .2s; } .pc-song.playing .pc-song-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { to { height: 14px; } }
.pc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pc-tag { padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / .1); font-size: 12.5px; font-weight: 600; }
.pc-about { font-size: 14px; line-height: 1.55; max-height: 340px; overflow-y: auto; }
.pc-about h1 { font-size: 18px; } .pc-about h2 { font-size: 15px; } .pc-about ul { padding-left: 18px; margin: 4px 0; }
.pc-friends { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pc-friend { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; text-align: center; padding: 6px 2px; border-radius: 10px; min-width: 0; }
.pc-friend:hover { background: rgb(255 255 255 / .08); }
.pc-friend span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-thumb { display: grid; place-items: center; font-size: 22px; background: var(--active); }
.tf-pick { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ MySpace-style profile pages
   Everything is driven by --pg-* variables set from the person's page settings. Their own CSS is
   scoped to .mys-page[data-page="<id>"], so it can restyle the page (even its own containment) but never
   its parent: .mys-shell's contain + isolation keep everything on the page inside the page's box. */
.mys-modal.modal { width: min(1180px, calc(100vw - 32px)); max-width: none; height: calc(100vh - 48px); max-height: none; padding: 0; overflow: hidden; }
.mys-modal .modal-body { padding: 0; height: 100%; overflow: hidden; }
.mys-modal .mys-close { position: absolute; top: 10px; right: 12px; z-index: 30; background: rgb(0 0 0 / .55); color: #fff; }
.mys-page {
  position: relative; isolation: isolate; contain: layout paint; overflow: auto; height: 100%;
  background: var(--pg-bg); background-attachment: var(--pg-attach);
  color: var(--pg-text); font-family: var(--pg-font); font-size: var(--pg-size); line-height: 1.5;
}
.mys-page a { color: var(--pg-link); }
.mys-page h1, .mys-page h4 { color: var(--pg-heading); font-family: inherit; }
.mys-page .md h1, .mys-page .md h2, .mys-page .md h3 { color: var(--pg-heading); font-family: inherit; }
.mys-wrap { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 22px 18px 60px; }
.mys-grid { display: grid; gap: 16px; grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.mys-page.lay-mirrored .mys-left { order: 2; }
.mys-page.lay-mirrored .mys-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.mys-page.lay-wide .mys-grid { grid-template-columns: 1fr 1fr; }
.mys-page.lay-single .mys-grid { grid-template-columns: minmax(0, 720px); justify-content: center; }
.mys-left, .mys-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mys-box { background: var(--pg-box); border: var(--pg-border); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow); overflow: hidden; }
.mys-box-h { margin: 0; padding: 6px 12px; background: var(--pg-head-bg); color: var(--pg-head-text); font-family: inherit; font-size: 1em; font-weight: 700; letter-spacing: 0; }
.mys-box-b { padding: 12px 14px; overflow-wrap: anywhere; }
.mys-box-b > * + * { margin-top: 8px; }
.mys-box p { margin: 0; }
.mys-name { font-size: 1.9em; margin: 0 0 10px; line-height: 1.15; overflow-wrap: anywhere; }
.mys-name.glitter { background-image: linear-gradient(110deg, var(--pg-heading) 0 35%, #fff 45%, #ffe27a 50%, #fff 55%, var(--pg-heading) 65%), radial-gradient(#fff 1px, transparent 1.5px);
  background-size: 250% 100%, 7px 7px; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: mys-glitter 2.6s linear infinite; text-shadow: none; filter: drop-shadow(0 0 4px rgb(255 255 255 / .35)); }
@keyframes mys-glitter { to { background-position: -150% 0, 7px 7px; } }
.mys-id-row { display: flex; gap: 14px; align-items: flex-start; }
.mys-photo { flex: none; }
.mys-id-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .92em; }
.mys-headline { font-style: italic; }
.mys-online { opacity: .8; }
.mys-online.on { color: #3fcf83; font-weight: 700; opacity: 1; }
.mys-counter { font-family: var(--mono); background: #000; color: #3fcf83; padding: 1px 6px; border-radius: 3px; letter-spacing: .12em; }
.mys-contact-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mys-links ul { margin: 0; padding-left: 18px; }
.mys-page table { width: 100%; border-collapse: collapse; }
.mys-page th { text-align: left; vertical-align: top; width: 34%; padding: 5px 8px; color: var(--pg-heading); background: rgb(0 0 0 / .12); font-weight: 700; }
.mys-page td { padding: 5px 8px; }
.mys-page tr + tr th, .mys-page tr + tr td { border-top: 1px solid rgb(127 127 127 / .2); }
.mys-blurbs h4 { margin: 0 0 4px; }
.mys-friend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.mys-friend { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--pg-link); text-align: center; font-size: .85em; min-width: 0; }
.mys-friend span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mys-friend:hover span:last-child { text-decoration: underline; }
.mys-muted { opacity: .75; font-size: .9em; }
.mys-comment { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgb(127 127 127 / .25); }
.mys-comment-who { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--pg-link); font-size: .85em; text-align: center; overflow-wrap: anywhere; }
.mys-comment-meta { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: .85em; opacity: .85; margin-bottom: 4px; }
.mys-del { color: var(--danger); font-size: .9em; font-weight: 600; }
.mys-comment-text { overflow-wrap: anywhere; }
.mys-marquee { overflow: hidden; white-space: nowrap; margin-bottom: 14px; padding: 6px 0; background: var(--pg-box); border: var(--pg-border); border-radius: var(--pg-radius); color: var(--pg-heading); font-weight: 700; display: flex; }
.mys-marquee span { flex: none; padding-right: 60%; animation: mys-marquee 16s linear infinite; }
@keyframes mys-marquee { from { transform: translateX(60%); } to { transform: translateX(-100%); } }
.mys-shell { position: relative; height: 100%; overflow: hidden; contain: layout paint; isolation: isolate; }
.mys-fx { z-index: 5; }
.mys-trail { position: absolute; z-index: 20; pointer-events: none; transform: translate(-50%, -50%); animation: mys-trail .9s ease-out forwards; font-size: 18px; }
@keyframes mys-trail { to { opacity: 0; transform: translate(-50%, 30px) scale(.4) rotate(90deg); } }
html.reduce-motion .mys-page *, html.reduce-motion .mys-name.glitter { animation: none !important; }
@media (max-width: 860px) {
  .mys-grid, .mys-page.lay-mirrored .mys-grid, .mys-page.lay-wide .mys-grid { grid-template-columns: minmax(0, 1fr); }
  .mys-page.lay-mirrored .mys-left { order: 0; }
  .mys-friend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mys-modal.modal { width: 100vw; height: 100vh; border-radius: 0; }
}

/* Page editor */
.pg-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); max-width: 1400px; }
.pg-preview { height: calc(100vh - 170px); border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); }
.pg-preview .mys-page { zoom: .62; height: calc((100vh - 170px) / .62); }
.pg-colors { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.pg-color { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.pg-css { min-height: 220px; font-size: 12.5px; }
.pg-help summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.pg-help .pc-tags { margin-top: 8px; }
@media (max-width: 1100px) { .pg-preview { height: 520px; } .pg-preview .mys-page { height: calc(520px / .62); } }

/* Build-your-own effect editor + storage */
.fx-builder { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgb(var(--field)); }
.fx-demo { position: relative; height: 120px; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, var(--c1, #2a2438), var(--c2, #1b1824)); }
.fx-demo .pfx { position: absolute; }
.storage-bar { height: 10px; border-radius: 99px; background: var(--active); overflow: hidden; }
.storage-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.storage-bar.warn > i { background: var(--danger); }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-row > .ic { width: 18px; height: 18px; flex: none; color: var(--muted); display: inline-flex; }
.file-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mys-modal .modal-head { display: none; }
.mys-host { position: relative; height: 100%; }

/* Your own message while it's on its way */
.msg.sending { opacity: .55; }
.msg.sending .msg-actions, .msg.sending .msg-hover { display: none; }
.sending-note { font-size: 12px; color: var(--muted); padding-left: 72px; }

/* ------------------------------------------------------------------ performance mode
   For slower computers and phones (Settings → Appearance → Performance): no frosted-glass blur,
   no moving backgrounds, and decorative animations (rings, name effects, profile effects) stand still. */
html.lite *, html.lite *::before, html.lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lite #app-bg .bg-layer { animation: none !important; filter: none !important; inset: 0; }
html.lite .av::before, html.lite .uname, html.lite .mys-name.glitter, html.lite .mys-marquee span { animation: none !important; }
html.lite .pfx { display: none; }
html.lite .modal-backdrop { background: rgb(6 4 10 / .78); }
html.lite { --island-shadow: 0 1px 0 rgb(255 255 255 / .03) inset; }

/* GIF library */
.gif-notice { font-size: 12px; color: var(--text-2); background: rgb(var(--accent-rgb) / .12); border-radius: 8px; padding: 6px 10px; }
.gif-credit { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gif-del { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .6); color: #fff; opacity: 0; transition: opacity .12s; }
.gif-del .ic { width: 12px; height: 12px; }
.gif-btn:hover .gif-del { opacity: 1; }

/* ------------------------------------------------------------------ watch together */
.cs-watch-host { min-height: 0; }
/* The watch-together player's own layer: laid over .cs-watch-host in the call, a mini player elsewhere. */
.wt-dock { position: fixed; z-index: 15; }
.wt-dock[hidden] { display: none; }
.wt-dock-head { display: none; }
.wt-dock.mini { z-index: 24; right: 18px; bottom: 96px; width: min(360px, calc(100vw - 24px)); border-radius: 14px; overflow: hidden; background: rgb(var(--s1)); border: 1px solid var(--line); box-shadow: var(--pop-shadow); }
.wt-dock.mini .wt-dock-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; cursor: grab; user-select: none; touch-action: none; font-size: 13px; font-weight: 600; }
.wt-dock.mini .wt-dock-head > .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
.wt-dock-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-dock.mini .wt { gap: 0; }
.wt-dock.mini .wt-stage { border-radius: 0; min-height: 0; max-height: none; }
.wt-dock.mini .wt-bar, .wt-dock.mini .wt-queue { display: none; }
@media (max-width: 760px) { .wt-dock.mini { width: min(62vw, 280px); right: 10px; bottom: 84px; } }
.wt { display: flex; flex-direction: column; gap: 8px; }
.wt-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(62vh, calc(100vh - 380px)); min-height: 200px; background: #000; border-radius: 12px; overflow: hidden; }
.wt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* a video file from another site: one line saying so, and a button, before it loads */
.wt-outside { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 10px 14px; padding: 16px; color: #ede9f5; text-align: center; font-size: 14px; }
.wt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wt-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wt-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.wt-sub { font-size: 12px; color: var(--muted); }
.wt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.wt-actions .btn.active { background: rgb(var(--accent-rgb) / .18); }
.wt-controls { display: flex; align-items: center; gap: 4px; width: 100%; padding: 4px 6px; border-radius: 12px; background: rgb(var(--s3) / .5); }
.wt-controls .wt-ctl { width: 34px; height: 34px; }
.wt-controls .wt-ctl[disabled] { opacity: .4; cursor: not-allowed; }
.wt-skip { font-size: 11.5px; font-weight: 800; letter-spacing: -.02em; }
.wt-time { margin: 0 auto 0 8px; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--text-2); }
.wt-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.field-hint.ok { color: var(--ok); }
.watch-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.watch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgb(var(--accent-rgb) / .12); color: var(--text); border: 1px solid rgb(var(--accent-rgb) / .3); }
.watch-chip:hover { background: rgb(var(--accent-rgb) / .22); }
.watch-chip .ic { width: 14px; height: 14px; }
.wt-queue:empty { display: none; }
/* Watch together, full screen: the video fills the screen and the shared controls fade away when the mouse is
   still. .wt-full is the fallback where the browser can't do real full screen. */
.wt.wt-full { position: fixed; inset: 0; z-index: 1000; }
.wt.wt-is-full { background: #000; gap: 0; height: 100%; width: 100%; color: #fff; }
.wt.wt-is-full .wt-stage { flex: 1; max-height: none; min-height: 0; aspect-ratio: auto; border-radius: 0; }
/* The shared controls sit just under the video, so they never cover the player's own controls bar. */
.wt.wt-is-full .wt-bar { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: #000; transition: opacity .25s; }
.wt.wt-is-full .wt-controls { background: rgb(255 255 255 / .07); }
.wt.wt-is-full .wt-title, .wt.wt-is-full .wt-actions > :not(.btn.primary), .wt.wt-is-full .wt-queue { display: none; }
.wt.wt-is-full.wt-idle { cursor: none; }
.wt.wt-is-full.wt-idle .wt-bar { opacity: 0; pointer-events: none; }
.wt-queue { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--hover); }
.wt-qh { font-size: 12px; font-weight: 700; color: var(--text-2); }
.wt-qi { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 13px; }
.wt-qn { color: var(--muted); text-align: right; }
.wt-qt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-stage.watching .cs-grid, .call-stage.watching .cs-spot { max-height: 180px; }
.call-stage.watching .cs-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); flex: none; grid-auto-rows: 100px; }
.call-stage.watching .cs-spot { flex: none; height: 180px; }
.call-stage.watching .cs-controls { position: sticky; bottom: -10px; z-index: 2; margin: 0 -10px -10px; padding: 8px 10px 10px; background: linear-gradient(transparent, rgb(var(--bg) / .92) 35%); }
.call-stage.watching { overflow-y: auto; }
/* nothing squeezes while watching (tiles used to slide under the call buttons); the area scrolls instead */
.call-stage.watching > * { flex-shrink: 0; }

/* Funding + supporters */
.auth-tagline { margin: -6px 0 10px; color: var(--text-2); text-align: center; }
.fund-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgb(var(--accent-rgb) / .35); background: linear-gradient(135deg, rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / .04)); }
.fund-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.fund-text strong { color: var(--text); font-size: 15px; }
.fund-bar { height: 8px; border-radius: 99px; background: var(--active); overflow: hidden; margin-top: 4px; }
.fund-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.fund-meta { font-size: 12px; color: var(--muted); }
.fund-actions { display: flex; flex-direction: column; gap: 6px; }
.supporter-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: rgb(176 124 255 / .18); color: #c9a6ff; }
@media (max-width: 600px) { .fund-card { flex-direction: column; align-items: stretch; } .fund-actions { flex-direction: row; } }
.mono-sm { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* Profile page header */
.mys-hero { margin-bottom: 16px; padding: 0; }
.mys-banner .pc-banner { height: 200px !important; border-radius: 0; }
.mys-hero-row { display: flex; align-items: flex-end; gap: 18px; padding: 0 22px 18px; margin-top: -66px; position: relative; flex-wrap: wrap; }
.mys-hero .mys-photo .av { box-shadow: 0 0 0 5px var(--pg-box), 0 8px 24px rgb(0 0 0 / .35); }
.mys-hero-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; padding-top: 70px; }
.mys-hero .mys-name { font-size: 2.1em; margin: 0; }
.mys-handle { opacity: .8; font-size: .95em; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mys-hero .mys-headline { font-style: italic; font-size: 1.05em; margin: 2px 0 0; }
.mys-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mys-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgb(127 127 127 / .18); font-size: .82em; }
.mys-chip.mys-online.on { color: #3fcf83; background: rgb(63 207 131 / .15); font-weight: 700; }
.mys-friend-tag { color: var(--pg-link); }
.mys-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 4px; }
.mys-self-note { opacity: .7; font-size: .9em; margin: 0; }
@media (max-width: 860px) { .mys-hero-row { margin-top: -50px; } .mys-hero-text { padding-top: 0; min-width: 0; } .mys-banner .pc-banner { height: 140px !important; } }

/* People directory */
.people-view { flex: 1; overflow-y: auto; padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.people-me { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgb(var(--accent-rgb) / .35); background: linear-gradient(135deg, rgb(var(--accent-rgb) / .14), transparent); }
.people-me-text { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; color: var(--text-2); }
.people-me-text strong { color: var(--text); font-size: 15px; }
.people-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.people-tools .friends-search { flex: 1; min-width: 220px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.person-card { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, var(--c1, rgb(var(--s2))), var(--c2, rgb(var(--s1)))); transition: transform .12s var(--ease), box-shadow .12s; color: #fff; }
.person-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(0 0 0 / .35); }
.person-banner { position: relative; height: 70px; overflow: hidden; }
.person-banner img { width: 100%; height: 100%; object-fit: cover; }
.person-av { margin: -32px 0 0 14px; position: relative; }
.person-av .av { box-shadow: 0 0 0 4px var(--c1, rgb(var(--s2))); border-radius: 50%; }
.person-body { display: flex; flex-direction: column; gap: 3px; padding: 6px 14px 14px; min-width: 0; }
.person-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-handle, .person-meta { font-size: 12px; color: rgb(255 255 255 / .7); }
.person-headline { font-size: 13px; font-style: italic; color: rgb(255 255 255 / .9); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.person-card .pc-tags { margin-top: 4px; }
.pc-open-page { width: 100%; justify-content: center; margin-bottom: 10px; }

/* Polls */
.poll { margin-top: 6px; max-width: 460px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgb(var(--s2) / .6); display: flex; flex-direction: column; gap: 6px; }
.poll-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.poll-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); }
.poll-tag .ic { width: 12px; height: 12px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--hover); text-align: left; overflow: hidden; }
.poll-opt:hover:not(:disabled) { border-color: rgb(var(--accent-rgb) / .6); }
.poll-opt.mine { border-color: var(--accent); }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgb(var(--accent-rgb) / .16); transition: width .3s var(--ease); }
.poll-opt.lead .poll-bar { background: rgb(var(--accent-rgb) / .28); }
.poll-check { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 11px; color: var(--on-accent); flex: none; }
.poll-opt.mine .poll-check { background: var(--accent); border-color: var(--accent); }
.poll-label { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.poll-count { position: relative; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.poll-foot { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
/* Voice messages */
.vm { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 99px; background: rgb(var(--s2)); border: 1px solid var(--line-2); min-width: 240px; max-width: 360px; }
.vm-play { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 12px; flex: none; }
.vm-ic .ic { width: 14px; height: 14px; color: var(--muted); }
.vm-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--active); cursor: pointer; overflow: hidden; }
.vm-bar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.vm-time { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 34px; }
.vm-speed { font-size: 11px; font-weight: 700; color: var(--text-2); padding: 2px 6px; border-radius: 6px; background: var(--hover); }
.composer.recording > :not(.rec-bar) { visibility: hidden; }
.composer { position: relative; }
.rec-bar { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: inherit; background: rgb(var(--field)); z-index: 2; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: rec-blink 1s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .3; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-level { flex: 1; height: 6px; border-radius: 99px; background: var(--active); overflow: hidden; }
.rec-level > i { display: block; height: 100%; background: var(--ok); transform-origin: left; transform: scaleX(0); transition: transform .08s; }
/* Events */
.ev-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 8px 8px 4px; padding: 8px 10px; border-radius: 10px; color: var(--text-2); background: var(--hover); text-align: left; }
.ev-row:hover { background: var(--active); color: var(--text); }
.ev-row.has { background: rgb(var(--accent-rgb) / .12); color: var(--text); }
.ev-row-text { flex: 1; min-width: 0; }
.ev-row-text > span { display: flex; flex-direction: column; }
.ev-row-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ev-row-text small { font-size: 11.5px; color: var(--muted); }
.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev-card { display: flex; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgb(var(--s2) / .5); }
.ev-date { flex: none; width: 52px; height: 56px; border-radius: 10px; background: rgb(var(--accent-rgb) / .16); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ev-date span { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--accent-ink); }
.ev-date strong { font-size: 22px; line-height: 1; }
.ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-when { font-size: 12.5px; color: var(--text-2); display: flex; gap: 8px; flex-wrap: wrap; }
.ev-rel { color: var(--accent-ink); font-weight: 700; }
.ev-repeat { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.ev-repeat .ic, .ev-repeat svg { width: 13px; height: 13px; flex: none; }
.ev-title { font-size: 16px; }
.ev-where { font-size: 13px; color: var(--text-2); }
.ev-desc { margin: 2px 0; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ev-people { display: flex; }
.ev-people .av { margin-right: -6px; box-shadow: 0 0 0 2px rgb(var(--s2)); border-radius: 50%; }
.ev-count { font-size: 12px; color: var(--muted); margin-left: 6px; flex: 1; }
.ev-home { display: flex; flex-direction: column; gap: 4px; }
.ev-home-server { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ev-toast { bottom: 84px; }

/* ---------------------------------------------------------------- games & music (activity) */
.act-line { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-2); }
.act-line .ic, .act-line svg { width: 13px; height: 13px; flex: none; color: var(--accent); }
.act-line.music svg { color: #1ed760; }
.act-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-line b { font-weight: 600; color: var(--text); }
.act-cards { display: flex; flex-direction: column; gap: 8px; }
.act-card { border-radius: 12px; padding: 10px 12px; background: rgb(0 0 0 / .22); border: 1px solid rgb(255 255 255 / .06); }
.act-kind { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.act-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.act-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.act-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-sub { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-sub.dim { color: var(--muted); }
.act-open { flex: none; }
.act-pic { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, rgb(242 165 65 / .35), rgb(120 80 220 / .35)); }
.act-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-pic-ph { font-weight: 800; font-size: 20px; color: rgb(255 255 255 / .8); }
.act-pic.cover { width: 48px; height: 64px; }
.act-pic.art { width: 60px; height: 60px; border-radius: 6px; }
.act-pic.wide { width: 92px; height: 43px; border-radius: 6px; }
.act-cards.compact .act-pic.cover { width: 42px; height: 56px; }
.act-cards.compact .act-pic.art { width: 52px; height: 52px; }
.act-card.music .act-kind { color: #1ed760; }
.fav-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.fav-game { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fav-game .act-pic.cover { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; box-shadow: 0 4px 14px rgb(0 0 0 / .35); }
.fav-game-name { font-size: 11.5px; line-height: 1.25; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.recent-games { display: flex; flex-direction: column; gap: 8px; }
.recent-game { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mys-page .fav-games { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.mys-page .act-card { background: rgb(0 0 0 / .12); }
.game-results { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; min-height: 60px; }
.game-result { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
.game-result:hover, .game-result:focus-visible { background: var(--hover); }
.fav-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.fav-edit-item { position: relative; display: flex; flex-direction: column; gap: 4px; }
.fav-edit-item img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: var(--hover); }
.fav-edit-btns { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.fav-edit-btns .icon-btn { background: rgb(0 0 0 / .6); color: #fff; }
.fav-edit-add { aspect-ratio: 2 / 3; border: 2px dashed var(--line); border-radius: 8px; background: none; color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: inherit; font-size: 13px; }
.fav-edit-add:hover { border-color: var(--accent); color: var(--text); }

/* ---------------------------------------------------------------- regions and money (admin) */
.cmd-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgb(0 0 0 / .35); border: 1px solid var(--line); }
.cmd-box code { flex: 1; min-width: 0; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; user-select: all; }
.rpill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; width: max-content; }
.rpill.ok { background: rgb(63 207 131 / .16); color: var(--ok); }
.rpill.warn { background: rgb(242 165 65 / .16); color: var(--accent); }
.rpill.bad { background: rgb(239 84 102 / .16); color: var(--danger); }
.adm-row.region-row { grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) auto minmax(180px, 2fr) auto; }
.adm-row.pay-row { grid-template-columns: 90px 90px minmax(120px, 1fr) minmax(150px, 1.2fr) minmax(0, 1.5fr); }
.price-table .adm-row.three { grid-template-columns: minmax(150px, 1fr) 100px 3fr; }
.warn-box { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgb(242 165 65 / .12); border: 1px solid rgb(242 165 65 / .3); font-size: 13.5px; }
.support-now { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgb(168 85 247 / .14); font-weight: 600; }
.perk-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; color: var(--text-2); }
.stack.tight { gap: 6px; }
@media (max-width: 700px) {
  .adm-row.region-row, .adm-row.pay-row, .price-table .adm-row.three { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- GIF picker, Discord-style */
.gif-picker.xp { width: 440px; padding: 0; gap: 0; overflow: hidden; display: flex; flex-direction: column; }
.xp-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.xp-tab { padding: 5px 12px; border-radius: 6px; font-weight: 600; font-size: 14px; color: var(--text-2); }
.xp-tab:hover { background: var(--hover); color: var(--text); }
.xp-tab.active { background: var(--active); color: var(--text); }
.xp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; }
.xp-bar { display: flex; align-items: center; gap: 4px; height: 38px; flex: none; padding: 0 8px 0 4px; border-radius: 8px; background: rgb(0 0 0 / .28); border: 1px solid var(--line); }
.xp-bar:focus-within { border-color: rgb(var(--accent-rgb) / .6); }
.xp-back, .xp-clear { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--text-2); }
.xp-back:hover, .xp-clear:hover { background: var(--hover); color: var(--text); }
.xp-back .ic, .xp-clear .ic { width: 18px; height: 18px; }
.xp-title { flex: 1; padding-left: 4px; font-weight: 700; font-size: 15px; }
.xp-input { flex: 1; min-width: 0; height: 100%; padding: 0 8px; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 14.5px; }
.xp-input::placeholder { color: var(--muted); }
.xp-search-ic { display: grid; place-items: center; color: var(--muted); padding-right: 2px; }
.xp-search-ic .ic { width: 18px; height: 18px; }
.xp-bar:has(.xp-clear:not([hidden])) .xp-search-ic, .xp-bar:has(.xp-title:not([hidden])) .xp-search-ic { display: none; }
.xp-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-right: -6px; padding-right: 6px; overscroll-behavior: contain; }
.gif-home { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gif-home .gif-cat { height: 104px; border-radius: 8px; background: var(--active); }
.gif-home .gif-cat img { filter: none; }
.gif-home .gif-cat::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .48); transition: background .15s; }
.gif-home .gif-cat:hover::after { background: rgb(0 0 0 / .28); }
.gif-home .gif-cat:hover img { transform: scale(1.04); }
.gif-home .gif-cat .gif-cat-label { z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; padding: 0 8px; text-align: center; }
.gif-home .gif-cat .gif-cat-label b { font-weight: 800; }
.gif-home .gif-cat .gif-cat-label .ic { position: static; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; text-shadow: none; }
.gif-home .gif-cat .gif-cat-label .ic svg { width: 18px; height: 18px; }
.gif-home .fav-tile { background: linear-gradient(135deg, #f2a541, #e0558b); }
.gif-home .trend-tile { background: linear-gradient(135deg, #5865f2, #a855f7); }
.gif-home .lib-tile { background: linear-gradient(135deg, #1f9d6b, #2b7bd6); }
.gif-home .fav-tile .ic svg { fill: currentColor; }
.gif-masonry { display: flex; gap: 8px; align-items: flex-start; }
.gif-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gif-masonry .gif-btn { margin: 0; border-radius: 8px; break-inside: auto; }
.gif-masonry .gif-btn img { display: block; width: 100%; height: auto; }
.gif-masonry.stickers .gif-btn { aspect-ratio: 1; background: rgb(255 255 255 / .03); }
.gif-masonry.stickers .gif-btn img { height: 100%; object-fit: contain; padding: 6px; }
.gif-picker.xp .gif-empty { padding: 40px 16px; }
.gif-picker.xp .gif-credit { flex: none; }
/* Emoji tab: the emoji picker fills the same window */
.gif-picker.xp.emoji-mode .xp-body { padding: 0; }
.gif-picker.xp .emoji-picker { width: 100%; flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gif-picker.xp .emoji-grid { flex: 1; min-height: 0; height: auto; max-height: none; }
@media (max-width: 700px) { .gif-picker.xp { width: calc(100vw - 16px); } .gif-home .gif-cat { height: 88px; } }

/* ---------------------------------------------------------------- keybinds */
.kb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-key { min-width: 110px; text-align: center; padding: 6px 10px; border-radius: 8px; background: rgb(0 0 0 / .3); border: 1px solid var(--line-2); font: 600 13px var(--font); }
.kb-key.recording { border-color: var(--accent); color: var(--accent); animation: kbpulse 1s ease-in-out infinite; }
@keyframes kbpulse { 50% { box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .2); } }
.ptt-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 2px 2px 0; }
.ptt-hint.on { color: var(--ok); font-weight: 700; }
@media (max-width: 600px) { .kb-row { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- account safety */
.secret-box code { font-size: 15px; letter-spacing: .04em; white-space: pre-wrap; }
.tfa-setup { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.qr-box { background: #fff; border-radius: 10px; padding: 6px; width: 180px; height: 180px; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.check-list li.ok { color: var(--text-2); }
.check-list li.ok::first-letter { color: var(--ok); }
.check-list li.bad { color: var(--danger); font-weight: 600; }
@media (max-width: 600px) { .tfa-setup { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- news bot */
.bot-tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; align-self: center; }
.news-card { display: flex; gap: 14px; max-width: 520px; margin-top: 6px; padding: 12px 14px; border-radius: 10px; background: rgb(0 0 0 / .22); border: 1px solid var(--line); border-left: 4px solid #5865f2; color: inherit; text-decoration: none; }
.news-card:hover { background: rgb(0 0 0 / .3); }
.news-card.kind-youtube { border-left-color: #ff3b3b; }
.news-card.kind-reddit { border-left-color: #ff6a2b; }
.news-card.kind-steam { border-left-color: #66c0f4; }
.news-card.kind-github { border-left-color: #8b949e; }
.news-card.kind-topic { border-left-color: var(--accent); }
.news-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.news-source { font-size: 12px; font-weight: 700; color: var(--text-2); }
.news-title { font-weight: 700; color: #6aa7ff; line-height: 1.3; }
.news-card:hover .news-title { text-decoration: underline; }
.news-summary { font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.news-meta { font-size: 11.5px; color: var(--muted); }
.news-img { width: 110px; height: 80px; object-fit: cover; border-radius: 8px; flex: none; align-self: flex-start; }
.adm-row.feed-row { grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) auto auto; }
.feed-prev { display: flex; align-items: center; gap: 10px; }
.feed-prev img, .feed-prev-ph { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; background: var(--hover); display: grid; place-items: center; }
@media (max-width: 600px) { .news-img { display: none; } .adm-row.feed-row { grid-template-columns: 1fr; } }
/* Link previews: the sender's card inside a message (app.js linkCardEl) and the chip above the composer.
   Titles from other sites are isolated, so right-to-left text can't reorder the words around it. */
.news-title, .news-summary, .news-source { unicode-bidi: isolate; overflow-wrap: anywhere; }
.msg-links { display: flex; flex-direction: column; gap: 6px; }
.link-card.kind-video { border-left-color: #ff3b3b; }
.link-card.kind-repo { border-left-color: #8b949e; }
.link-card.kind-post { border-left-color: var(--muted); }
.link-card.big { flex-direction: column; max-width: 432px; }
.link-card.big .link-img { width: 100%; max-width: 400px; height: auto; max-height: 260px; }
@media (max-width: 600px) { .link-card.big .link-img { display: block; } }
.link-chip-wrap[hidden] { display: none; }
.link-chip {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; font-size: 13px; color: var(--text-2);
  background: var(--hover); border: 1px solid var(--line-2); border-radius: 10px; animation: rise .15s var(--ease);
}
.link-chip > .ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.link-chip.muted { color: var(--muted); }
.link-chip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.link-chip-hint { font-size: 12px; color: var(--muted); }
.link-chip-title { color: var(--text); unicode-bidi: isolate; }
.link-chip.ready .link-chip-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-chip-img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.spinner.sm { width: 14px; height: 14px; }

/* Settings → Active sessions */
.session-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2, rgb(0 0 0 / .15)); border: 1px solid var(--line); }
.session-row.ended { opacity: .7; }
.session-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .2); flex: none; }
.session-row .session-text { flex: 1; min-width: 0; gap: 2px; }
.session-row .session-text strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.session-row .session-text > span { overflow-wrap: anywhere; }
.sub-title { margin: 6px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Admin → Audit log */
.chain-ok, .chain-bad { padding: 8px 12px; border-radius: 8px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.chain-ok { background: rgb(35 165 90 / .14); color: #3ba55d; }
.chain-bad { background: rgb(237 66 69 / .16); color: #ed4245; font-weight: 600; }

/* group chats */
.group-av.icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.friends-top { display: flex; align-items: center; gap: 10px; }
.friends-top .friends-search { flex: 1; }
.nav-more-btn { color: var(--muted); }
.nav-more-btn .ic { transition: transform .15s; }
.nav-more-btn.open .ic { transform: rotate(90deg); }
.nav-more { display: flex; flex-direction: column; padding-left: 12px; }
.nav-more[hidden] { display: none; }
.quick-row.static { cursor: default; }
.quick-row.static:hover { background: none; }

/* server folders (folders.js) */
.rail-folder { overflow: hidden; background: color-mix(in srgb, var(--fc) 22%, rgb(var(--s2))); border-color: color-mix(in srgb, var(--fc) 40%, transparent); }
.rail-folder.open { background: color-mix(in srgb, var(--fc) 30%, rgb(var(--s2))); color: var(--fc); }
.rail-folder .ic { width: 22px; height: 22px; }
.folder-emoji { font-size: 20px; line-height: 1; }
.folder-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 34px; height: 34px; }
.folder-mini-icon { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 5px; overflow: hidden; background: rgb(var(--s3)); }
.folder-mini-icon img { width: 100%; height: 100%; object-fit: cover; }
.folder-mini-icon .rail-initials { font-size: 7px; }
.rail-folder-group { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 6px; width: 54px; border-radius: 18px; flex: none;
  background: color-mix(in srgb, var(--fc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent); }
[data-rail='top'] .rail-folder-group { flex-direction: row; width: auto; height: 54px; padding: 0 6px 0 4px; }
.rail-focus { background: color-mix(in srgb, var(--fc) 35%, rgb(var(--s2))); border: 2px solid var(--fc); color: var(--text); }
.rail-item.dragging { opacity: .4; }
.rail-item.drop-before::before, .rail-item.drop-after::after { content: ''; position: absolute; left: 10%; right: 10%; height: 3px; border-radius: 2px; background: var(--accent); z-index: 2; }
.rail-item.drop-before::before { top: -5px; }
.rail-item.drop-after::after { bottom: -5px; }
[data-rail='top'] .rail-item.drop-before::before, [data-rail='top'] .rail-item.drop-after::after { top: 10%; bottom: 10%; left: auto; right: auto; width: 3px; height: auto; }
[data-rail='top'] .rail-item.drop-before::before { left: -5px; }
[data-rail='top'] .rail-item.drop-after::after { right: -5px; }
.rail-item.drop-into .rail-btn { box-shadow: 0 0 0 3px var(--accent); }
.folder-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; font-size: 16px; color: #fff; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; }
.color-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px rgb(var(--bg)) inset; }
.emoji-input { max-width: 120px; }
.organize { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.org-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--hover); }
.org-row.head { background: transparent; padding-left: 2px; }
.org-icon { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: rgb(var(--s3)); flex: none; }
.org-icon img { width: 100%; height: 100%; object-fit: cover; }
.org-icon .rail-initials { font-size: 11px; }
.org-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-row select.input.sm { width: auto; max-width: 150px; padding: 4px 8px; }
.org-folder { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); background: color-mix(in srgb, var(--fc) 8%, transparent); }

/* Updates (updates.js) */
.updates { max-width: 860px; margin: 0 auto; padding: 24px 28px 60px; display: flex; flex-direction: column; gap: 14px; }
.updates-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.updates-head h2 { margin: 0 0 4px; }
.tracker-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.tracker { display: inline-flex; align-items: center; padding: 0; overflow: hidden; }
.chip.tracker .chip-main { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px 6px 12px; }
.chip.tracker .chip-more { padding: 6px 8px 6px 4px; opacity: .7; }
.chip.tracker .chip-more:hover { opacity: 1; }
.chip.tracker.paused { opacity: .6; }
.chip .ic { width: 14px; height: 14px; }
.update-list { display: flex; flex-direction: column; gap: 10px; }
.update-card { display: flex; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgb(var(--s2) / var(--glass)); border: 1px solid var(--line); }
.update-card.unread { border-left: 3px solid var(--accent); }
.update-img { width: 132px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; background: rgb(var(--s3)); }
.update-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.update-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.update-tracker { color: var(--accent); font-weight: 600; }
.update-title { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; line-height: 1.3; }
.update-title:hover { text-decoration: underline; }
.update-summary { margin: 0; font-size: 13.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .update-img { width: 88px; height: 64px; } .updates { padding: 16px 14px 40px; } }

/* Study tools: Recall in a sandboxed frame (recall-host.js), laid over the Study page's space */
.recall-slot { flex: 1; min-height: 0; }
.recall-layer { position: fixed; z-index: 3; overflow: hidden; }
.recall-layer[hidden] { display: none; }
.recall-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
/* small bar charts (admin overview) */
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 160px; align-items: end; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 46px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.bar-label { font-size: 11.5px; color: var(--muted); }

/* screen sharing: private conversations covered */
.share-cover { flex: 1; display: grid; place-items: center; padding: 24px; background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(var(--s3) / .25) 14px 28px); }
.share-cover-card { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 24px; border-radius: 18px; background: rgb(var(--s2)); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); }
.share-cover-card h2 { font-size: 19px; font-weight: 800; }
.share-cover-card p { margin: 0; color: var(--text-2); }
.share-cover-ic { width: 34px; height: 34px; color: var(--accent); }

/* ---- creator memberships ---- */
.mb-tier { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: rgb(var(--s3) / .45); display: grid; gap: 8px; }
.mb-tier.mine { border-color: rgb(var(--accent-rgb) / .55); background: rgb(var(--accent-rgb) / .07); }
.mb-tier-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mb-tier-head h3 { font-size: 17px; margin: 0 0 4px; }
.mb-price { text-align: right; white-space: nowrap; }
.mb-price strong { font-size: 20px; font-family: var(--font-display); }
.mb-price span { color: var(--muted); font-size: 13px; margin-left: 2px; }
.mb-desc { margin: 0; color: var(--text-2); font-size: 14px; white-space: pre-line; }
.mb-role { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--rc, var(--accent)); background: color-mix(in srgb, var(--rc, var(--accent)) 16%, transparent); }
.mb-mine { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.mb-status.active .ic { color: var(--good, #4fd18b); }
.mb-status.past_due { color: var(--danger, #f0596b); }
.mb-status .ic { width: 15px; height: 15px; }
.mb-fine { display: flex; align-items: center; gap: 6px; }
.mb-fine .ic { width: 14px; height: 14px; }
.mb-note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgb(var(--s3) / .55); color: var(--text-2); }
.mb-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.mb-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--accent-rgb) / .16); color: var(--accent-ink, var(--accent)); font-weight: 800; font-size: 14px; }
.mb-step-body { display: grid; gap: 10px; min-width: 0; }
.mb-step-body h4 { margin: 2px 0 0; font-size: 15px; }
.mb-row .ic { color: var(--accent); }
.admin-subtabs .set-subtab { display: inline-flex; align-items: center; gap: 6px; }
.admin-subtabs .set-subtab .ic { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ bots (bots.js) */
.adm-row.bot-row { grid-template-columns: minmax(0, 2fr) minmax(90px, auto) auto auto; }
.bot-row .bot-tag { margin-left: 6px; }
.bot-scopes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.bot-scope { font: 600 11.5px/1.6 var(--mono, monospace); padding: 0 7px; border-radius: 6px; background: var(--hover); border: 1px solid var(--line); }
.bot-scope.fresh { border-color: var(--accent); }
.bot-perm { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.bot-perm input { margin-top: 3px; }
.bot-perm .toggle-label { font-family: var(--mono, monospace); display: inline-flex; gap: 8px; align-items: center; }
.bot-channels { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-left: 26px; max-height: 180px; overflow-y: auto; }
.bot-mine { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.bot-mine > summary { cursor: pointer; padding: 2px 0; }
.bot-mine > .stack { margin-top: 10px; }
.cmd-bar { padding: 0 16px 6px; }
.cmd-bar[hidden] { display: none; }
.cmd-hint { display: grid; gap: 4px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--hover); border: 1px solid var(--line-2); }
.cmd-hint .bot-tag { margin-left: 6px; }
.cmd-warn { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.cmd-warn .ic { width: 15px; height: 15px; flex: none; }
.eph-list { display: grid; gap: 6px; padding: 0 16px; }
.eph-list:empty { display: none; }
.eph-msg { padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--hover); }
.eph-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.eph-head .ic { width: 16px; height: 16px; }
.eph-head .field-hint { flex: 1; }
@media (max-width: 600px) { .adm-row.bot-row { grid-template-columns: 1fr; } }
/* channel webhooks (webhooks.js) */
.adm-row.hook-row { grid-template-columns: minmax(0, 1fr) auto; }
.hook-row .bot-tag { margin-left: 6px; }
.hook-pings { margin-top: 4px; font-size: 13px; }
@media (max-width: 600px) { .adm-row.hook-row { grid-template-columns: 1fr; } }
/* where alerts go (Admin → Health) */
.adm-row.chan-row { grid-template-columns: minmax(140px, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr) auto; }
.chan-row .badge-tag { margin-left: 4px; }
.chan-row.off > :not(.chan-actions) { opacity: .65; }
.chan-where { overflow-wrap: anywhere; }
.chan-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .adm-row.chan-row { grid-template-columns: 1fr; } .chan-actions { justify-content: flex-start; } }
.bots-panel { flex: none; gap: 12px; }
.bot-scopes { min-width: 0; max-width: 100%; }
/* Pick your roles (public/js/selfroles.js) */
.pick-roles-list { display: flex; flex-direction: column; gap: 4px; }
.pick-role { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--hover); }
.pick-role.mine { border-color: rgb(var(--accent-rgb) / .45); }
.pick-role-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.pick-roles .muted-p.warn { display: flex; align-items: center; gap: 6px; }
.pick-roles .muted-p.warn .ic { width: 15px; height: 15px; flex: none; }
.field-hint.warn { color: color-mix(in oklab, var(--idle) 80%, var(--text)); }
.welcome .welcome-roles { margin-top: 2px; }
.welcome-roles-slot:empty { display: none; }
/* Import from Discord (public/js/discord-import.js) */
.di-json { min-height: 120px; max-height: 260px; }
.di-section { display: flex; flex-direction: column; gap: 6px; }
.di-section .set-h { margin: 0; }
.di-list { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.di-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; min-width: 0; }
.di-row:hover { background: var(--hover); }
.di-row > input, .di-row > .role-dot, .di-gap { flex: none; margin-top: 3px; }
.di-gap { width: 13px; }
.di-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.di-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; overflow-wrap: anywhere; }
.di-name .ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.di-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.di-row.off .di-name { opacity: .55; text-decoration: line-through; }
.di-row.di-cat { padding-top: 10px; }
.di-row.di-cat .di-name { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.di-row.di-chan { padding-left: 22px; }
.di-lock { display: inline-flex; }
.di-groups { display: flex; flex-direction: column; gap: 10px; }
.di-groups h4 { margin: 0 0 3px; font-size: 13.5px; }
.warn-box.bad { background: rgb(239 84 102 / .1); border-color: rgb(239 84 102 / .35); }
/* Word filter (public/js/wordfilter-app.js): a hidden message's row, a blurred one, and the settings */
.msg.filtered .filtered-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 13px; font-style: italic; }
.filtered-note .ic { width: 14px; height: 14px; }
.filtered-note .link-btn { font-style: normal; }
.filtered-note .filtered-who { font-style: normal; font-weight: 600; color: var(--text-2); }
.wf-blur { position: relative; min-height: 2.2em; border-radius: 8px; overflow: hidden; cursor: pointer; }
.wf-blur-inner { filter: blur(7px); user-select: none; pointer-events: none; }
.wf-blur-show {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: calc(100% - 8px);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgb(var(--text-rgb) / .88); color: rgb(var(--bg)); font-size: 12.5px; font-weight: 600;
}
.wf-blur-show:hover, .wf-blur-show:focus-visible { background: rgb(var(--text-rgb)); }
.wf-blur-show .ic { width: 14px; height: 14px; flex: none; }
.wf-hidden-text { color: var(--muted); }
.wf-list { min-height: 120px; font-family: var(--mono); font-size: 13px; }
.wf-errors { margin: 0; padding-left: 18px; color: var(--danger); font-size: 12.5px; }
.wf-errors:empty { display: none; }
.wf-count { display: block; }
.wf-try-out { margin: 0; font-size: 13px; color: var(--text-2); }
.wf-try-out:empty { display: none; }
.wf-try-out.hit { color: var(--text); font-weight: 600; }
.wf-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgb(var(--accent-rgb) / .08); border: 1px solid rgb(var(--accent-rgb) / .25); font-size: 13.5px; }
.wf-note .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.wf-note.bad { background: rgb(239 84 102 / .1); border-color: rgb(239 84 102 / .35); }
.wf-servers { display: flex; flex-direction: column; gap: 10px; }
.wf-servers .set-h { font-size: 14px; margin: 6px 0 0; }
.wf-server { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.wf-words > summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; font-weight: 600; width: fit-content; }
.wf-word-list { margin: 6px 0 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }