/* =====================================================================
   Cindrly — 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;
  --board: #b07cff;        /* a soundboard sound playing in a call */
  --board-rgb: 176 124 255;
  --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: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Shared scales: corners, motion and the soft halo that sits outside a focused field. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --dur-1: .12s;
  --dur-2: .18s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ring: 0 0 0 3px rgb(var(--accent-rgb) / .22);
  --glass: 1;
  --img-blur: 0px;
  --dim: 0;
}

/* ------------------------------------------------------------------ themes */
:root, [data-theme='dark'] {
  --bg: 13 12 19;
  --s1: 22 20 30;
  --s2: 27 25 37;
  --s3: 39 36 52;
  --field: 17 16 25;
  --elev: 30 28 41;
  --text-rgb: 238 235 246;
  --text: rgb(var(--text-rgb));
  --text-2: #b9b2c9;
  --muted: #918aa3;
  --msg-text: #dedae9;
  --line: rgb(255 255 255 / .07);
  --line-2: rgb(255 255 255 / .12);
  --hover: rgb(255 255 255 / .05);
  --active: rgb(255 255 255 / .09);
  --accent-ink: var(--accent);
  --dim-rgb: 0 0 0;
  --scrim: rgb(6 4 10 / .55);
  /* Elevation: a hairline of light along the top edge, then a soft shadow that fades out wide. */
  --hl: inset 0 1px 0 rgb(255 255 255 / .045);
  --sheen: linear-gradient(180deg, rgb(255 255 255 / .022), transparent 160px);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .28);
  --island-shadow: var(--hl), 0 1px 2px rgb(0 0 0 / .25), 0 14px 34px -14px rgb(0 0 0 / .55);
  --pop-shadow: var(--hl), 0 0 0 1px rgb(0 0 0 / .18), 0 10px 20px -6px rgb(0 0 0 / .4), 0 28px 60px -16px rgb(0 0 0 / .6);
  --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 / .55);
  --hl: inset 0 1px 0 rgb(255 255 255 / .045);
  --sheen: linear-gradient(180deg, rgb(255 255 255 / .022), transparent 160px);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .28);
  --island-shadow: var(--hl), 0 1px 2px rgb(0 0 0 / .25), 0 14px 34px -14px rgb(0 0 0 / .55);
  --pop-shadow: var(--hl), 0 0 0 1px rgb(0 0 0 / .18), 0 10px 20px -6px rgb(0 0 0 / .4), 0 28px 60px -16px rgb(0 0 0 / .6);
  --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: var(--hl);
  --sheen: none;
  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: var(--hl), 0 1px 2px rgb(0 0 0 / .18), 0 14px 34px -14px rgb(0 0 0 / .4);
  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: 232 230 240;
  --s1: 246 245 251;
  --s2: 255 255 255;
  --s3: 237 235 244;
  --field: 244 243 249;
  --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 / .3);
  --hl: inset 0 1px 0 rgb(255 255 255 / .8);
  --sheen: none;
  --shadow-sm: 0 1px 2px rgb(40 20 80 / .1);
  --island-shadow: 0 1px 2px rgb(40 20 80 / .05), 0 12px 32px -14px rgb(40 20 80 / .16);
  --pop-shadow: 0 0 0 1px rgb(40 20 80 / .04), 0 8px 18px -6px rgb(40 20 80 / .14), 0 28px 60px -18px rgb(40 20 80 / .28);
  --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 calc(15 / 16 * 1rem)/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 calc(12 / 16 * 1rem) 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-thumb:hover { background-color: rgb(var(--text-rgb) / .28); }
::-webkit-scrollbar-corner { background: transparent; }
::-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: calc(14 / 16 * 1rem); white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), filter var(--dur-1);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.primary {
  background: var(--accent) linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0)); color: var(--on-accent);
  box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 1px 2px rgb(0 0 0 / .18);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 6px 16px -6px rgb(var(--accent-rgb) / .7); }
.btn.ghost { background: var(--active); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover:not(:disabled) { background: var(--line-2); }
.btn.danger { background: var(--danger-fill); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .16) inset, 0 1px 2px rgb(0 0 0 / .18); }
.btn.danger:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 1px 0 rgb(255 255 255 / .16) inset, 0 6px 16px -6px rgb(208 52 73 / .7); }
.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: calc(13 / 16 * 1rem); 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: var(--r-md); color: var(--text-2); flex: none;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.icon-btn:hover { background: var(--active); color: var(--text); }
.icon-btn:active:not(:disabled) { transform: scale(.93); }
.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 var(--dur-1), box-shadow var(--dur-2), background var(--dur-1);
}
.input:hover:not(:focus):not(:disabled) { border-color: rgb(var(--text-rgb) / .2); }
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) / .85); box-shadow: var(--ring); }
.input::placeholder { color: var(--muted); }
.input.mono { font-family: var(--mono); font-size: calc(13 / 16 * 1rem); }
.emoji-input { width: 64px; flex: none; text-align: center; font-size: calc(18 / 16 * 1rem); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: calc(13 / 16 * 1rem); font-weight: 600; color: var(--text-2); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field-hint { font-size: calc(12.5 / 16 * 1rem); color: var(--muted); }
.form-error { color: var(--danger); font-size: calc(13.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); }
.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 calc(11 / 16 * 1rem)/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: calc(26 / 16 * 1rem); font-weight: 800; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card h2 { font-size: calc(23 / 16 * 1rem); font-weight: 800; }
.auth-sub { margin: -8px 0 4px; color: var(--text-2); font-size: calc(14 / 16 * 1rem); }
.auth-switch { margin: 2px 0 0; font-size: calc(14 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); 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; }
#sidebar, #main, #members { background-image: var(--sheen); }
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: calc(13.5 / 16 * 1rem); font-weight: 600; box-shadow: var(--pop-shadow);
}

/* tooltips */
.tooltip {
  position: fixed; z-index: 90; pointer-events: none; max-width: 260px;
  padding: 6px 10px; border-radius: var(--r-sm); font-size: calc(12.5 / 16 * 1rem); font-weight: 600; line-height: 1.35;
  background: rgb(var(--text-rgb)); color: rgb(var(--bg)); box-shadow: 0 2px 4px rgb(0 0 0 / .14), 0 8px 22px rgb(0 0 0 / .26);
  animation: tip-in var(--dur-1) var(--ease-out);
}
@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)) var(--sheen); border: 1px solid var(--line); box-shadow: var(--hl), var(--shadow-sm);
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.rail-btn > img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.rail-btn:hover { color: var(--text); background-color: rgb(var(--s3) / var(--glass)); transform: translateY(-1px); box-shadow: var(--hl), 0 6px 14px -6px rgb(0 0 0 / .45); }
.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), 0 6px 18px -4px rgb(var(--accent-rgb) / .45); }
.rail-btn.home { color: var(--accent); }
.rail-btn.home .ic { width: 24px; height: 24px; }
.rail-btn.home.active { background: var(--accent) linear-gradient(145deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 60%); color: var(--on-accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .2), 0 6px 18px -4px rgb(var(--accent-rgb) / .55); }
.rail-btn.nav .ic { width: 20px; height: 20px; }
.rail-btn.add { color: var(--ok); border-style: dashed; border-color: var(--line-2); background: transparent; box-shadow: none; }
.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: calc(10.5 / 16 * 1rem); }
.rail-btn .badge[hidden] { display: none; }
.rail-initials { font: 700 calc(14 / 16 * 1rem) 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 calc(15 / 16 * 1rem) var(--font-display); text-align: left;
}
.server-head { transition: background var(--dur-1); }
.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: var(--r-md); 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: calc(13 / 16 * 1rem); text-align: left;
  transition: border-color var(--dur-1), color var(--dur-1);
}
.find-btn .ic { width: 15px; height: 15px; }
.find-btn > span:not(.ic) { flex: 1; }
.find-btn kbd { font-size: calc(10.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); font-weight: 700; color: var(--muted); letter-spacing: .02em;
}
.cat-toggle { display: flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 700; font-size: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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 var(--dur-1), color var(--dur-1);
}
.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); box-shadow: inset 0 0 0 1px var(--line); }
.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 var(--dur-1), color var(--dur-1);
}
.dm-row:hover { background: var(--hover); color: var(--text); }
.dm-row.active { background: var(--active); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.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: calc(14 / 16 * 1rem); }
.dm-row-time { font-size: calc(11 / 16 * 1rem); color: var(--muted); flex: none; }
.dm-row-status { font-size: calc(12.5 / 16 * 1rem); 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: var(--r-sm); color: var(--muted); flex: none; position: relative; transition: background var(--dur-1), color var(--dur-1); }
.ch-row:hover { background: var(--hover); color: var(--text-2); }
.ch-row.active { background: var(--active); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.ch-row.active::after { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / .5); }
.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: calc(14.5 / 16 * 1rem); }
.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; transition: opacity var(--dur-1); }
.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: calc(13.5 / 16 * 1rem); 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: var(--r-lg);
  background: rgb(63 207 131 / .08); border: 1px solid rgb(63 207 131 / .22); box-shadow: var(--hl); 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: calc(13 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: var(--r-lg); background: rgb(var(--s3) / .5); border: 1px solid var(--line); min-height: 52px; box-shadow: var(--hl), var(--shadow-sm);
}
.me-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 3px 6px; border-radius: var(--r-md); text-align: left; transition: background var(--dur-1); }
.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: calc(14 / 16 * 1rem); }
.me-sub { font-size: calc(12 / 16 * 1rem); 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: calc(16 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: var(--r-sm); font-weight: 600; color: var(--text-2); font-size: calc(14 / 16 * 1rem); flex: none; transition: background var(--dur-1), color var(--dur-1); }
.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: calc(18 / 16 * 1rem); color: var(--text); }
.empty-state p { margin: 0; max-width: 44ch; }
.list-label { font-size: calc(12.5 / 16 * 1rem); font-weight: 700; color: var(--muted); padding: 14px 10px 6px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--hover); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.seg-btn { padding: 5px 10px; border-radius: 7px; font-size: calc(13 / 16 * 1rem); font-weight: 600; color: var(--text-2); white-space: nowrap; flex: none; transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1); }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: linear-gradient(var(--active), var(--active)) rgb(var(--elev)); color: var(--text); box-shadow: var(--hl), var(--shadow-sm), 0 0 0 1px var(--line); }
.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: calc(26 / 16 * 1rem); 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: calc(14 / 16 * 1rem); 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: calc(13 / 16 * 1rem); color: var(--muted); }
.conv-card.unread strong { color: var(--text); }
.conv-card.unread .conv-card-text span { color: var(--text-2); }
/* "typing…" in place of a conversation's last message (the sidebar's rows, Home's cards), with the chat's dots */
.conv-line.is-typing { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-2); }
.conv-line.is-typing .dots { flex: none; overflow: visible; }
.conv-line.is-typing .dots i { width: 4px; height: 4px; background: currentColor; }
.conv-line.is-typing .conv-typing-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.conv-card-time { font-size: calc(11.5 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); 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 calc(14 / 16 * 1rem) 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: calc(12.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); }
.activity-text span { font-size: calc(13 / 16 * 1rem); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-time { font-size: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.friend-sub { color: var(--text-2); font-size: calc(13 / 16 * 1rem); 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: calc(20 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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 calc(18 / 16 * 1rem) 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: calc(28 / 16 * 1rem); 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: calc(13 / 16 * 1rem); color: var(--muted); padding: 4px 12px 4px 9px; border-radius: var(--r-lg); background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.welcome-note .ic { width: 14px; height: 14px; color: var(--ok); }
.welcome-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--text-2); background: linear-gradient(145deg, var(--active), var(--hover)); box-shadow: var(--hl), inset 0 0 0 1px var(--line); }
.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: calc(12 / 16 * 1rem); font-weight: 600; }
.day-div::before, .day-div::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.day-div span { padding: 0 10px; border-radius: 999px; color: var(--text-2); background: var(--hover); box-shadow: inset 0 0 0 1px 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: calc(12.5 / 16 * 1rem); text-align: center; }
.sys-line .ic { width: 14px; height: 14px; flex: none; }
.sys-line time { font-size: calc(11.5 / 16 * 1rem); }
/* 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: calc(11 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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 .unread-text { 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';
  /* Inset from the panel's edges with rounded corners, so the hover highlight reads as a soft card;
     the padding gives back the margin, so the text sits where it always did. */
  padding: 2px 12px 2px 4px; margin-top: 16px; margin-inline: 8px; border-radius: var(--r-md); transition: background var(--dur-1);
}
.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: var(--r-md); }
/* The accent bar on a highlighted message stays straight: the card's left corners square off for it. */
.msg.mentioned, .msg.replying, .msg.selected { border-radius: 0 var(--r-md) var(--r-md) 0; }
.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: 32px; }
.msg-select { position: absolute; left: 6px; 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: calc(13.5 / 16 * 1rem); }
.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: calc(10.5 / 16 * 1rem); 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: calc(15 / 16 * 1rem); text-align: left; }
.msg-name:hover .uname { text-decoration: underline; }
.msg-time { font-size: calc(12 / 16 * 1rem); 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: calc(11 / 16 * 1rem); 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: calc(42 / 16 * 1rem); 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: calc(11 / 16 * 1rem); color: var(--muted); margin-left: 4px; }
.msg-reply { grid-area: reply; display: flex; align-items: center; gap: 6px; font-size: calc(13 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: calc(10.5 / 16 * 1rem); 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: var(--r-md); padding: 10px 14px; box-shadow: inset 0 1px 2px rgb(0 0 0 / .12); margin: 4px 0; overflow-x: auto; font: calc(13 / 16 * 1rem)/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; }
.md-spoiler .md-time { visibility: hidden; }
.md-spoiler.revealed .md-time { visibility: visible; }
/* #channel mentions (markdown.js): a link to the channel; one the reader can't see is plain, muted text */
.channel-mention { cursor: pointer; }
.channel-mention:hover, .channel-mention:focus-visible { background: rgb(var(--accent-rgb) / .3); text-decoration: none; }
.channel-mention .ic { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; margin-right: 2px; }
.channel-unknown { color: var(--muted); font-style: italic; }
/* Discord's line formatting: headings, small print, lists; >>> and > quotes */
.md-h1, .md-h2, .md-h3 { display: block; font-weight: 800; line-height: 1.3; color: var(--text); margin: 6px 0 2px; }
.md-h1 { font-size: 1.5em; }
.md-h2 { font-size: 1.3em; }
.md-h3 { font-size: 1.12em; }
.md-sub { display: block; font-size: .8em; color: var(--muted); }
.md-li { display: block; position: relative; padding-left: 1.4em; }
.md-li::before { content: '\2022'; position: absolute; left: .4em; color: var(--text-2); }
.md-li.md-ol { padding-left: 2em; }
.md-li.md-ol::before { content: attr(data-n) '.'; left: 0; width: 1.7em; text-align: right; font-variant-numeric: tabular-nums; }
.md-li.md-lv1 { margin-left: 1.4em; }
.md-li.md-lv2 { margin-left: 2.8em; }
.md-quote:empty::before { content: '\200b'; }
.md-time { background: rgb(var(--text-rgb) / .08); border-radius: 5px; padding: 0 4px; }
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: calc(14 / 16 * 1rem); }
.embed-ask-sub { color: var(--muted); font-size: calc(12.5 / 16 * 1rem); }
.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; max-height: min(340px, 40vh); 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: calc(13 / 16 * 1rem); 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; } }
/* Spoiler attachments: blurred under a Spoiler button until the first click (app.js spoilerCover) */
.att-spoiler:not(.revealed) > :not(.att-spoiler-btn) { filter: blur(40px); pointer-events: none; }
.att-spoiler:not(.revealed) { min-width: 220px; min-height: 120px; }
.att-spoiler-btn { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; background: rgb(0 0 0 / .25); cursor: pointer; border-radius: inherit; }
.att-spoiler-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.att-spoiler-tag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: calc(11 / 16 * 1rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.att-spoiler-tag .ic { width: 12px; height: 12px; }
/* The ALT button on a described picture, and its popup (a tiny picture gets room for it beside Download) */
.att-media.has-alt { min-width: 96px; min-height: 64px; }
.att-alt { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 1px 6px; border-radius: 6px; font-size: calc(11 / 16 * 1rem); font-weight: 800; letter-spacing: .04em; background: rgb(0 0 0 / .7); color: #fff; }
.att-alt:hover, .att-alt:focus-visible { background: rgb(0 0 0 / .9); }
.alt-pop { max-width: min(360px, calc(100vw - 32px)); padding: 10px 12px; background: rgb(var(--elev)); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--pop-shadow); }
.alt-pop-head { font-size: calc(11 / 16 * 1rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.alt-pop p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.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: calc(8.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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 9px; border-radius: 999px;
  background: var(--hover); border: 1px solid var(--line); font-size: calc(13.5 / 16 * 1rem); transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.reaction:hover { border-color: var(--line-2); background: var(--active); }
.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: calc(12.5 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: 8px; top: -16px; z-index: 3;
  display: flex; align-items: center; padding: 3px; border-radius: var(--r-md); gap: 1px;
  background: rgb(var(--elev)); border: 1px solid var(--line-2); box-shadow: var(--hl), 0 2px 4px rgb(0 0 0 / .1), 0 8px 20px -4px rgb(0 0 0 / .3);
  opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.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: calc(15 / 16 * 1rem); transition: background var(--dur-1), color var(--dur-1); }
.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: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(12 / 16 * 1rem); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.pending-size { font-size: calc(11 / 16 * 1rem); color: var(--muted); }
.pending-note { font-size: calc(11 / 16 * 1rem); color: var(--accent-ink); line-height: 1.25; }
.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; }
/* A file's Edit button (description, spoiler) beside Remove, and what it set */
.pending-edit { position: absolute; top: -6px; right: 22px; 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-edit:hover { background: var(--hover); color: var(--text); }
.pending-edit .ic { width: 13px; height: 13px; }
.pending.is-spoiler img { filter: blur(10px); }
.pending-tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; }
.pending-tag { font-size: calc(10 / 16 * 1rem); font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; background: rgb(0 0 0 / .7); color: #fff; }
.att-options-name { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; margin: 0; }
.att-options-name .ic { width: 15px; height: 15px; flex: none; }
.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: calc(12 / 16 * 1rem); 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: 16px;
  background: rgb(var(--s3) / .65); border: 1px solid var(--line-2); box-shadow: var(--hl), var(--shadow-sm);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.composer:hover:not(:focus-within) { border-color: rgb(var(--text-rgb) / .18); }
.composer:focus-within { border-color: rgb(var(--accent-rgb) / .55); box-shadow: var(--hl), 0 0 0 3px rgb(var(--accent-rgb) / .12), 0 8px 24px -10px rgb(0 0 0 / .4); }
.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) linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0)); color: var(--on-accent);
  box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 1px 2px rgb(0 0 0 / .18);
  transition: opacity var(--dur-1), filter var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.send-btn:active:not(:disabled) { transform: scale(.93); }
.send-btn .ic { width: 17px; height: 17px; }
.send-btn:hover { filter: brightness(1.08); }
.send-btn:disabled { background: transparent; color: var(--muted); opacity: .6; box-shadow: none; }
.typing { height: 20px; display: flex; align-items: center; gap: 6px; font-size: calc(12 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); }
.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: calc(13 / 16 * 1rem); 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: calc(15 / 16 * 1rem); font-weight: 700; font-family: var(--font); }
.panel-title span { font-size: calc(12.5 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); }
.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: calc(13.5 / 16 * 1rem); }
.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: var(--r-md); text-align: left; transition: background var(--dur-1), opacity var(--dur-1); }
/* 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: calc(12 / 16 * 1rem); color: var(--muted); overflow: hidden; white-space: nowrap; }
.member-status .role-tag { height: 16px; font-size: calc(10.5 / 16 * 1rem); }
.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%; }
/* The DM profile's own row: its fold button where the panel meets the chat, so on the far end when the panel is on
   the left of it (and pointing that way). */
.dm-profile-head { padding: 0 16px 0 8px; }
[data-panel-side='left'] .dm-profile-head { flex-direction: row-reverse; padding: 0 8px 0 16px; }
[data-panel-side='left'] .dm-fold .ic { transform: scaleX(-1); }
/* The DM header's profile button, lit while the profile is open beside the chat: the one to look for once it's
   folded away. */
#main-head .head-profile.active { color: var(--text); background: rgb(var(--accent-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .45); }
/* Folding the DM profile away and back (app.js slidePanel): the panel's width goes to nothing and back, the chat
   reaching over the gap and the panel's borders meanwhile (--fold-ml/--fold-mr), so the chat widens and narrows with
   it rather than jumping, even by a few pixels at the end. What's inside keeps its width (--fold-w) and slides out
   under the edge. panel-in stays in the list so it isn't played again when the slide's class goes. Only beside the
   chat (app.js), and the reduced-motion rules below cover it. */
#members.panel-folding { animation: panel-in .18s var(--ease), panel-fold .18s var(--ease) forwards; }
#members.panel-unfolding { animation: panel-in .18s var(--ease), panel-unfold .18s var(--ease); }
#members.panel-folding > :not(.resize-handle), #members.panel-unfolding > :not(.resize-handle) { width: var(--fold-w); }
[data-panel-side='left'] #members.panel-folding, [data-panel-side='left'] #members.panel-unfolding { align-items: flex-end; }
#main.panel-folding { animation: main-fold .18s var(--ease) forwards; }
#main.panel-unfolding { animation: main-unfold .18s var(--ease); }
@keyframes panel-fold { to { width: 0; opacity: 0; } }
@keyframes panel-unfold { from { width: 0; opacity: 0; } }
@keyframes main-fold { to { margin-left: var(--fold-ml, 0px); margin-right: var(--fold-mr, 0px); } }
@keyframes main-unfold { from { margin-left: var(--fold-ml, 0px); margin-right: var(--fold-mr, 0px); } }
.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: calc(13.5 / 16 * 1rem); 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: calc(11 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(12 / 16 * 1rem); color: var(--muted); }
.pin-meta .uname { font-size: calc(13 / 16 * 1rem); }
.pin-text { font-size: calc(14 / 16 * 1rem); 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: 4px; }
.thread-list .msg-tools { right: 4px; }
.thread-divider { display: flex; align-items: center; gap: 10px; margin: 8px 16px; font-size: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.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: calc(14 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(10 / 16 * 1rem); 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 .16s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.menu, .emoji-picker, .gif-picker, .inbox, .sb-pop {
  background: rgb(var(--elev) / .92); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.menu { min-width: 220px; max-width: 300px; padding: 5px; border-radius: var(--r-lg); display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-sm); text-align: left; font-size: calc(14 / 16 * 1rem); font-weight: 500; color: var(--text-2);
  transition: background var(--dur-1), color var(--dur-1);
}
.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: calc(12 / 16 * 1rem); opacity: .6; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.menu-header { padding: 8px 9px 3px; font-size: calc(11.5 / 16 * 1rem); font-weight: 700; color: var(--muted); }
.menu-col { display: flex; flex-direction: column; }
.menu-desc { font-size: calc(12 / 16 * 1rem); 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; flex: none; }
.inbox-head h3 { flex: 1; font-size: calc(16 / 16 * 1rem); }
/* The head and tabs keep their height; only the list shrinks and scrolls (a long list squashed the tabs). */
.inbox .seg { margin: 0 12px 6px; flex: none; }
.inbox-list { overflow-y: auto; padding: 0 6px 8px; flex: 1 1 auto; min-height: 0; }
.inbox-day { padding: 10px 10px 4px; font-size: calc(12 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); font-weight: 600; }
.inbox-snippet { font-size: calc(13 / 16 * 1rem); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inbox-time { font-size: calc(11.5 / 16 * 1rem); 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: calc(17 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); padding: 8px; }
.emoji-btn { aspect-ratio: 1; font-size: calc(23 / 16 * 1rem); 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: calc(13 / 16 * 1rem); font-weight: 600; color: var(--text-2); }
.ep-big { font-size: calc(22 / 16 * 1rem); }
.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: calc(11 / 16 * 1rem); 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(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); animation: fade var(--dur-2) 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)) var(--sheen); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--pop-shadow);
  animation: rise .22s var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.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: calc(19 / 16 * 1rem); font-weight: 800; letter-spacing: -.02em; }
.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 var(--r-xl) var(--r-xl); }
.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: var(--r-lg); border: 1px solid var(--line-2); background: var(--hover); transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.choice > span { display: flex; flex-direction: column; gap: 2px; }
.choice:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / .06); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgb(var(--accent-rgb) / .45); }
.choice strong { font-size: calc(15 / 16 * 1rem); }
.choice span span { color: var(--text-2); font-size: calc(13.5 / 16 * 1rem); }
.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: calc(13 / 16 * 1rem); }
.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 calc(20 / 16 * 1rem) var(--font-display); flex: none; }
.invite-preview div { display: flex; flex-direction: column; }
.invite-preview div span { color: var(--text-2); font-size: calc(13 / 16 * 1rem); }
.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; transition: border-color var(--dur-1), background var(--dur-1); }
.radio-card:hover { border-color: rgb(var(--text-rgb) / .2); }
.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: calc(13 / 16 * 1rem); }
.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 calc(17 / 16 * 1rem) 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: calc(13 / 16 * 1rem); 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: var(--r-sm); color: var(--text-2); font-weight: 600; font-size: calc(14 / 16 * 1rem); text-align: left; transition: background var(--dur-1), color var(--dur-1); }
.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); box-shadow: inset 0 0 0 1px var(--line); }
.ss-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 70vh; }
.ss-body h3 { font-size: calc(17 / 16 * 1rem); }
.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 calc(22 / 16 * 1rem) 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: calc(12.5 / 16 * 1rem); 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: calc(17 / 16 * 1rem); }
.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: calc(12.5 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.search-item-sub { font-size: calc(13 / 16 * 1rem); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item-meta { font-size: calc(12 / 16 * 1rem); 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: calc(12 / 16 * 1rem); }
.search-ic .ic { width: 16px; height: 16px; }
.search-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: calc(13.5 / 16 * 1rem); }
.search-status { display: flex; align-items: center; gap: 10px; margin: 8px; padding: 10px 12px; border-radius: 10px; background: var(--hover); font-size: calc(13 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.search-privacy { display: flex; gap: 12px; margin: 8px; padding: 12px 14px; border-radius: 12px; background: var(--hover); font-size: calc(13 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(10.5 / 16 * 1rem); padding: 0 5px; }
/* phones: search takes the whole screen, with a close button instead of the Esc hint */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .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: calc(11 / 16 * 1rem); 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: calc(14 / 16 * 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.viewer-count { font-size: calc(13 / 16 * 1rem); color: #a39bb4; margin-left: 10px; }
/* The picture fits the screen however tall or wide it is: the grid's one cell is the stage's size (an auto-sized row
   grew to the picture, so a tall photo was drawn at the window's width and cut off below). */
.viewer-stage { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); 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: var(--r-lg);
  background: rgb(var(--elev) / .94); 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);
  font-size: calc(14 / 16 * 1rem); 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: calc(14 / 16 * 1rem); }
.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: calc(13 / 16 * 1rem); 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: calc(21 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); margin-top: -6px; }
.pc-pronouns { font-size: calc(12 / 16 * 1rem); 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: calc(12 / 16 * 1rem); font-weight: 700; color: var(--acc); }
.pc-bio { font-size: calc(14 / 16 * 1rem); max-height: 220px; overflow-y: auto; overflow-wrap: anywhere; color: #e2deeb; }
.pc-since { font-size: calc(13.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); font-weight: 600; overflow-wrap: anywhere; color: #e2deeb; }
.pc-nick-row .link-btn { color: var(--acc); font-size: calc(13 / 16 * 1rem); }
.pc-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-link { font-size: calc(13 / 16 * 1rem); 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; }
.set-nav, .set-main { background-image: var(--sheen); }
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: calc(12.5 / 16 * 1rem); font-weight: 700; color: var(--muted); padding: 0 12px 6px; }
.set-nav-btn { width: 210px; text-align: left; padding: 9px 12px; border-radius: var(--r-md); color: var(--text-2); font-weight: 500; transition: background var(--dur-1), color var(--dur-1); }
.set-nav-btn:hover { background: var(--hover); color: var(--text); }
.set-nav-btn.active { background: var(--active); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.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); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.set-title { font-size: calc(26 / 16 * 1rem); 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); box-shadow: inset 0 0 0 1px var(--line); }
.set-subtab { padding: 7px 14px; border-radius: 9px; font-size: calc(13.5 / 16 * 1rem); font-weight: 600; color: var(--muted); transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1); }
.set-subtab:hover { color: var(--text); }
.set-subtab.active { background: linear-gradient(var(--active), var(--active)) rgb(var(--elev)); color: var(--text); box-shadow: var(--hl), var(--shadow-sm), 0 0 0 1px var(--line); }
.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: calc(16 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.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: calc(13 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); }
.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: calc(12 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); }
.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: calc(13.5 / 16 * 1rem); color: var(--text-2); transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.chip:hover { background: var(--active); color: var(--text); border-color: var(--line-2); }
.chip:active { transform: scale(.97); }
.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: calc(12.5 / 16 * 1rem); 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); box-shadow: inset 0 1px 2px rgb(0 0 0 / .18); transition: background var(--dur-2); 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 2px rgb(0 0 0 / .25), 0 2px 6px rgb(0 0 0 / .15); transition: transform var(--dur-2) var(--ease-out); }
.switch:hover .switch-track { background: rgb(var(--text-rgb) / .2); }
.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: calc(14 / 16 * 1rem) 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: calc(14 / 16 * 1rem); 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: calc(14 / 16 * 1rem); }
.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: calc(14 / 16 * 1rem); }
.theme-name span { font-size: calc(12 / 16 * 1rem); color: var(--muted); line-height: 1.3; }

/* background gallery */
.bg-group-label { font-size: calc(12.5 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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 */
/* The phone layout (one column, servers and channels in a drawer) is for narrow windows and for phones held sideways:
   (max-width: 760px), (pointer: coarse) and (max-height: 500px). js/device.js has the same query: change them together.
   Rules for wider screens use its opposite: (min-width: 761px) with a fine pointer, no pointer, or more height. */
/* 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), (pointer: coarse) and (max-height: 500px) {
  :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: 4px; margin-inline: 4px; }
  .msg-tools { right: 2px; }
  .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 is a list page and a section page here: ux-settings.css.) */
  .settings { padding: 0; gap: 0; }
  .set-main { border-radius: 0; }
  .set-content { padding: 20px 16px 140px; }
  .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: calc(15 / 16 * 1rem); }
  #toasts { top: 62px; left: 12px; right: 12px; align-items: center; }
  .modal-search { margin-top: 0; }
}
/* Phones: notches, rounded corners and the home bar (index.html's viewport-fit=cover lets the page draw under them)
   keep their distance from the header, drawer, composer and panels; the keyboard covers the home bar when it's up. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  body #app, body:not(.panel-open) #app { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  #main { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  html.kb-open #main { padding-bottom: 0; }
  #rail { width: calc(var(--rail-w) + env(safe-area-inset-left)); padding: calc(10px + env(safe-area-inset-top)) 0 calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
  #sidebar {
    left: calc(var(--rail-w) + env(safe-area-inset-left)); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    width: min(var(--side-w), calc(100vw - var(--rail-w) - env(safe-area-inset-left) - 36px));
    transform: translateX(calc(-100% - var(--rail-w) - env(safe-area-inset-left) - 16px));
  }
  #members { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  html.kb-open #members { padding-bottom: 0; }
  .settings { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .set-close { top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); }
  .modal.modal-search { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #toasts { top: calc(62px + env(safe-area-inset-top)); }
  /* The drawer or side panel follows the finger while it's swiped (js/phone-nav.js), with the chat dimmed behind the drawer. */
  body.nav-swiping #rail, body.nav-swiping #sidebar, body.panel-swiping #members { transition: none; }
  body.nav-swiping .nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: var(--scrim); }
  /* Messages: a narrower avatar column, so the text gets the width (follow-up messages line up with it). */
  .msg { grid-template-columns: 40px minmax(0, 1fr); padding-left: 2px; }
  .msg-av { height: 32px; }
  .msg-av .av { --size: 32px !important; }
  .msg-hover-time { font-size: calc(9.5 / 16 * 1rem); }
  .msg-reply { padding-left: 48px; }
  .reply-spine { left: 23px; width: 21px; }
  .sending-note { padding-left: 0; }
}
/* ===== Phone shell (stack + tabs)
   app.js phoneShell: a list page (body.m-list, the tab bar at the bottom, and on Home the server bar beside the list)
   and the conversation pushed over it (body.m-conv), full screen with a Back button. The level out of sight is inert.
   Every rule is under body.m-ui, which only the phone layout has, so a computer's screen never changes. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  body.m-ui { --tab-h: 60px; --m-ease: cubic-bezier(.25, .8, .25, 1); }
  body.m-ui #app { overflow: clip; }
  body.m-ui .nav-scrim, body.m-ui .nav-toggle, body.m-ui #rail .rail-inbox, body.m-ui #rail .rail-item:has(> .rail-dms) { display: none !important; }
  /* The list level: the server bar and the list, under the conversation's level. */
  body.m-ui #rail, body.m-ui #sidebar {
    position: fixed; top: 0; bottom: 0; z-index: 5; transform: none; visibility: visible;
    transition: transform .26s var(--m-ease), visibility 0s;
  }
  body.m-ui #rail {
    left: 0; width: calc(var(--rail-w) + env(safe-area-inset-left)); gap: 8px; background: rgb(var(--bg));
    padding: calc(12px + env(safe-area-inset-top)) 0 calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px) env(safe-area-inset-left);
  }
  body.m-ui #rail .rail-btn { width: 48px; height: 48px; border-radius: 16px; }
  body.m-ui #sidebar {
    left: calc(var(--rail-w) + env(safe-area-inset-left)); right: 0; width: auto; border: 0; border-left: 1px solid var(--line);
    border-radius: 18px 0 0 0; background: rgb(var(--s1));
    padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(var(--tab-h) + env(safe-area-inset-bottom)) 0;
  }
  body.m-ui:not([data-mtab='home']) #rail { transform: translateX(-100%); visibility: hidden; transition: transform .26s var(--m-ease), visibility 0s .26s; }
  body.m-ui:not([data-mtab='home']) #sidebar { left: 0; border: 0; border-radius: 0; padding-left: env(safe-area-inset-left); }
  body.m-ui.m-conv #rail, body.m-ui.m-conv #sidebar { transform: translateX(-28%); visibility: hidden; transition: transform .26s var(--m-ease), visibility 0s .26s; }
  body.m-ui.m-conv #rail { transform: translateX(-100%); }
  /* A swipe from the edge takes the conversation away under the finger, with the list showing underneath. */
  body.m-ui.m-conv.panel-swiping:not(.panel-open) #sidebar, body.m-ui.m-conv.panel-swiping:not(.panel-open)[data-mtab='home'] #rail { visibility: visible; transform: none; transition: none; }
  body.m-ui.panel-swiping #main { transition: none; }
  /* The conversation level. */
  body.m-ui #main { position: relative; z-index: 6; background-color: rgb(var(--s2)); transition: transform .26s var(--m-ease), visibility 0s; box-shadow: -10px 0 30px rgb(0 0 0 / .25); }
  body.m-ui.m-list #main { transform: translateX(100%); visibility: hidden; transition: transform .26s var(--m-ease), visibility 0s .26s; }
  body.m-ui #members { animation: m-push .22s var(--m-ease); }
  @keyframes m-push { from { opacity: 0; transform: translateX(28px); } }

  /* The tab bar (app.js renderTabbar): only on the list level, and not over the keyboard. */
  #tabbar { display: none; }
  body.m-ui.m-list #tabbar:not([hidden]) {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: rgb(var(--s1) / .96); border-top: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  html.kb-open #tabbar { display: none !important; }
  body.m-ui .tab-btn { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: calc(12 / 16 * 1rem); font-weight: 600; }
  body.m-ui .tab-ic { position: relative; display: grid; place-items: center; width: 58px; height: 32px; border-radius: 16px; transition: background var(--dur-2), color var(--dur-2); }
  body.m-ui .tab-ic > .ic { width: 23px; height: 23px; }
  body.m-ui .tab-btn[aria-current='page'] { color: var(--text); }
  body.m-ui .tab-btn[aria-current='page'] .tab-ic { background: rgb(var(--accent-rgb) / .2); color: var(--accent-ink, var(--accent)); }
  body.m-ui .tab-btn:active .tab-ic { background: var(--active); }
  body.m-ui .tab-badge {
    position: absolute; top: -3px; left: 34px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--danger-fill); color: #fff; font: 700 calc(11 / 16 * 1rem)/18px var(--font); text-align: center; box-shadow: 0 0 0 2px rgb(var(--s1));
  }
  body.m-ui .tab-badge.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 2px; left: 38px; background: var(--text); }
  body.m-ui .tab-badge[hidden] { display: none; }

  /* A list page's header: a big title with its buttons, then (Messages) search. */
  body.m-ui #sidebar { display: flex; flex-direction: column; }
  body.m-ui #sidebar-head { order: 0; height: auto; min-height: 60px; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 10px 14px 8px 16px; border-bottom: 0; }
  body.m-ui #sidebar-head.has-banner { padding: 0 0 8px; }
  body.m-ui #user-panel { order: 1; }
  body.m-ui #sidebar-body { order: 2; padding: 4px 8px 20px; gap: 2px; }
  body.m-ui #voice-panel { order: 3; }
  body.m-ui .m-page-head { display: flex; align-items: center; gap: 6px; min-height: 44px; }
  body.m-ui .m-page-title { flex: 1; min-width: 0; font: 800 calc(27 / 16 * 1rem)/1.15 var(--font-display); letter-spacing: -.025em; color: var(--text); outline: none; }
  body.m-ui .m-page-tools { display: flex; align-items: center; gap: 6px; }
  body.m-ui .m-page-tools .icon-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--hover); }
  body.m-ui .m-page-tools .link-btn { min-height: 44px; padding: 0 10px; font-size: calc(14.5 / 16 * 1rem); }
  body.m-ui #sidebar-head .find-btn { height: 44px; border-radius: 12px; font-size: calc(15 / 16 * 1rem); padding: 0 14px; gap: 10px; }
  body.m-ui #sidebar-head .find-btn .ic { width: 18px; height: 18px; }
  body.m-ui #sidebar-head .find-btn kbd { display: none; }
  body.m-ui .server-head { height: 52px; font-size: calc(19 / 16 * 1rem); padding: 0 10px; border-radius: 12px; }
  body.m-ui .has-banner .server-head { margin: 0 6px; width: auto; }

  /* Rows a finger's size apart. */
  body.m-ui .nav-row { height: 52px; gap: 14px; padding: 0 14px; border-radius: 14px; font-size: calc(16 / 16 * 1rem); }
  body.m-ui .nav-row .ic { width: 22px; height: 22px; }
  body.m-ui .nav-row.active, body.m-ui .dm-row.active, body.m-ui .ch-row.active { box-shadow: none; }
  body.m-ui .dm-row { min-height: 68px; gap: 14px; padding: 8px 12px; border-radius: 16px; }
  body.m-ui .dm-row > .av { --size: 46px !important; }
  body.m-ui .dm-row > .group-av { --size: 46px !important; }
  body.m-ui .dm-row > .group-av > .av { --size: 32px !important; }
  body.m-ui .dm-row-text { gap: 2px; }
  body.m-ui .dm-row-name { font-size: calc(16.5 / 16 * 1rem); }
  body.m-ui .dm-row-time { font-size: calc(12.5 / 16 * 1rem); }
  body.m-ui .dm-row-status { font-size: calc(14.5 / 16 * 1rem); }
  body.m-ui .dm-row .badge { height: 22px; min-width: 22px; border-radius: 11px; font-size: calc(12 / 16 * 1rem); line-height: 22px; }
  body.m-ui .group-label, body.m-ui .cat-head { padding: 18px 6px 6px 14px; font-size: calc(13 / 16 * 1rem); }
  body.m-ui .cat-toggle { font-size: calc(13 / 16 * 1rem); gap: 6px; min-height: 44px; }
  body.m-ui .cat-head .icon-btn.sm, body.m-ui .group-label .icon-btn.sm { width: 44px; height: 44px; }
  body.m-ui .ch-row { border-radius: 12px; }
  body.m-ui .ch-main { height: 48px; gap: 12px; padding: 0 14px; font-size: calc(16.5 / 16 * 1rem); }
  body.m-ui .ch-ic { width: 21px !important; height: 21px !important; }
  body.m-ui .ch-gear { opacity: .75; width: 44px; height: 44px; margin-right: 2px; }
  body.m-ui .ch-row.unread:not(.active)::before { right: 16px; width: 8px; height: 8px; }
  body.m-ui .ch-row.active::after { top: 12px; bottom: 12px; }
  body.m-ui .ev-row { min-height: 52px; font-size: calc(15.5 / 16 * 1rem); border-radius: 14px; }
  body.m-ui .vc-users { padding-left: 44px; }
  body.m-ui .vc-user { min-height: 40px; font-size: calc(15 / 16 * 1rem); }
  body.m-ui .sidebar-empty { font-size: calc(15 / 16 * 1rem); padding: 10px 14px; }
  body.m-ui .icon-btn { min-width: 44px; min-height: 44px; }

  /* Side panels (members, threads, pins…) cover the conversation: their rows and header roomier too. */
  body.m-ui #members > .panel-head { height: calc(var(--head-h) + 4px); padding: 0 4px 0 16px; }
  body.m-ui #members > .panel-head h2 { font-size: calc(17 / 16 * 1rem); }
  body.m-ui #members .member { min-height: 54px; gap: 12px; padding: 6px 12px; border-radius: 14px; font-size: calc(15.5 / 16 * 1rem); }
  body.m-ui #members .member .av { --size: 40px !important; }

  /* Notifications, as a page. */
  body.m-ui .inbox-page { width: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
  body.m-ui .inbox-page .seg { margin: 2px 4px 10px; }
  body.m-ui .inbox-page .seg-btn { flex: 1 1 0; min-height: 44px; font-size: calc(14.5 / 16 * 1rem); }
  body.m-ui .inbox-page .inbox-list { padding: 0; overflow: visible; }
  body.m-ui .inbox-page .inbox-day { padding: 14px 12px 6px; font-size: calc(13 / 16 * 1rem); }
  body.m-ui .inbox-page .inbox-item { min-height: 64px; padding: 12px; gap: 12px; border-radius: 14px; }
  body.m-ui .inbox-page .inbox-text strong { font-size: calc(15.5 / 16 * 1rem); }
  body.m-ui .inbox-page .inbox-snippet { font-size: calc(14.5 / 16 * 1rem); }
  body.m-ui .inbox-page .inbox-time { font-size: calc(12.5 / 16 * 1rem); }
  body.m-ui .inbox-page .inbox-item.unread::after { top: 20px; right: 14px; width: 9px; height: 9px; }
  body.m-ui .inbox-page .panel-empty { padding: 60px 20px; }

  /* You: your card, then what's yours. */
  body.m-ui #user-panel { display: none; }
  body.m-ui.m-list[data-mtab='you'] #user-panel { display: flex; min-height: 84px; margin: 2px 16px 14px; padding: 10px 8px 10px 10px; border-radius: 20px; gap: 6px; }
  body.m-ui[data-mtab='you'] #user-panel .me-btn { gap: 14px; padding: 4px 6px; border-radius: 14px; }
  body.m-ui[data-mtab='you'] #user-panel .me-btn > .av { --size: 58px !important; }
  body.m-ui[data-mtab='you'] #user-panel .me-btn > .av .av-initials { font-size: calc(22 / 16 * 1rem) !important; }
  body.m-ui[data-mtab='you'] #user-panel .me-text .uname { font-size: calc(19 / 16 * 1rem); font-weight: 800; }
  body.m-ui[data-mtab='you'] #user-panel .me-sub { font-size: calc(14.5 / 16 * 1rem); }
  body.m-ui #user-panel .me-actions .icon-btn { width: 48px; height: 48px; border-radius: 50%; }
  body.m-ui:not([data-mtab='you']) #voice-panel, body.m-ui.m-conv #voice-panel { display: none !important; }
  body.m-ui #voice-panel { margin: 0 16px 12px; padding: 12px 12px 12px 16px; border-radius: 18px; }
  body.m-ui .vp-controls { gap: 6px; }
  body.m-ui .vp-controls .icon-btn { height: 48px; border-radius: 14px; }
  body.m-ui .m-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  body.m-ui .m-row-text small { font-size: calc(13.5 / 16 * 1rem); font-weight: 500; color: var(--muted); }
  body.m-ui .m-you-row { height: auto; min-height: 56px; padding: 6px 10px 6px 14px; }
  body.m-ui .m-row-chev { width: 18px !important; height: 18px !important; color: var(--muted); }
  body.m-ui .m-sep { height: 1px; flex: none; margin: 8px 14px; background: var(--line); }

  /* The call you're in: floating over the lists, a bar across the top of a conversation. */
  #m-callbar { display: none; }
  body.m-ui #m-callbar:not([hidden]) {
    display: flex; align-items: center; gap: 4px; position: fixed; z-index: 27; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right));
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); min-height: 60px; padding: 6px 8px 6px 14px; border-radius: 18px;
    background: rgb(var(--elev)); border: 1px solid rgb(63 207 131 / .4); box-shadow: var(--pop-shadow); animation: m-call-in .22s var(--m-ease);
  }
  @keyframes m-call-in { from { opacity: 0; transform: translateY(12px); } }
  body.m-ui.m-list.m-call #sidebar { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 76px); }
  body.m-ui #m-callbar .cb-where { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; text-align: left; }
  body.m-ui .cb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 4px rgb(63 207 131 / .18); }
  body.m-ui .cb-dot.q-connecting, body.m-ui .cb-dot.q-warn { background: var(--idle); box-shadow: 0 0 0 4px rgb(240 194 75 / .18); }
  body.m-ui .cb-dot.q-failed { background: var(--danger); box-shadow: none; }
  body.m-ui .cb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  body.m-ui .cb-text small { font-size: calc(12.5 / 16 * 1rem); font-weight: 700; color: var(--ok); }
  /* (The light theme's green is for dots, 3:1: as words on the bar it's darkened to 4.5:1.) */
  [data-theme='light'] body.m-ui .cb-text small { color: color-mix(in oklab, var(--ok) 55%, var(--text)); }
  body.m-ui .cb-text strong { font-size: calc(15.5 / 16 * 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.m-ui #m-callbar .icon-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--hover); flex: none; }
  body.m-ui #m-callbar .icon-btn.off { color: var(--danger); }
  body.m-ui #m-callbar .icon-btn.hang { background: var(--danger-fill); color: #fff; }
  body.m-ui.m-conv #m-callbar:not([hidden]) {
    top: 0; bottom: auto; left: 0; right: 0; min-height: 0; height: calc(env(safe-area-inset-top) + 50px); border-radius: 0; border: 0; box-shadow: none;
    padding: env(safe-area-inset-top) calc(4px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left));
    background: color-mix(in oklab, var(--ok) 26%, rgb(var(--s1))); animation: none;
  }
  body.m-ui.m-conv #m-callbar .icon-btn:not(.hang) { background: transparent; }
  body.m-ui.m-conv.m-call #main { padding-top: calc(env(safe-area-inset-top) + 50px); }
  html.kb-open body.m-ui.m-conv #m-callbar { display: none; }
  html.kb-open body.m-ui.m-conv.m-call #main { padding-top: env(safe-area-inset-top); }
  body.m-ui:has(.reels-layer.full:not([hidden])) #m-callbar { display: none !important; }

  /* The conversation's header: Back, the name with a line under it, two buttons and More. */
  body.m-ui #main-head { height: calc(var(--head-h) + 4px); gap: 2px; padding: 0 4px 0 2px; }
  body.m-ui #main-head.has-tabs { height: auto; flex-wrap: wrap; padding-bottom: 8px; row-gap: 4px; }
  body.m-ui #main-head.has-tabs > .head-title { min-height: calc(var(--head-h) + 4px); }
  body.m-ui #main-head .icon-btn { width: 44px; height: 44px; border-radius: 50%; }
  body.m-ui #main-head .head-back .ic { width: 26px; height: 26px; }
  body.m-ui #main-head .head-title { gap: 10px; }
  body.m-ui .head-names { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
  body.m-ui .head-title h1 { max-width: 100%; font-size: calc(17 / 16 * 1rem); outline: none; }
  body.m-ui .head-name-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: inherit; text-align: left; }
  /* A DM's name opens the profile: the whole title (picture, name and the line under it) is the button's to tap, the
     header's full height. */
  body.m-ui #main-head .head-title:has(.head-name-btn) { position: relative; align-self: stretch; min-height: 44px; }
  body.m-ui #main-head .head-title:has(.head-name-btn) > * { pointer-events: none; }
  body.m-ui .head-name-btn { pointer-events: auto; }
  body.m-ui .head-name-btn::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
  body.m-ui .head-name-btn:focus-visible { outline: none; }
  body.m-ui .head-name-btn:focus-visible::before { outline: 2px solid var(--focus); outline-offset: -2px; }
  body.m-ui .head-name-btn:active::before { background: var(--active); }
  body.m-ui .head-sub { display: block; font-size: calc(12.5 / 16 * 1rem); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.m-ui .head-sub.warn { color: var(--danger); font-weight: 600; }
  body.m-ui #main-head .head-tools { gap: 0; }
  body.m-ui #main-head .head-tools .icon-btn.live { color: var(--ok); }
  body.m-ui #main-head .head-tools .icon-btn.hang { color: #fff; background: var(--danger-fill); }
  body.m-ui #main-head .m-head-tabs { order: 3; flex-basis: 100%; gap: 6px; padding: 0 10px; }
  body.m-ui .m-head-tabs .tab { min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--hover); font-size: calc(14.5 / 16 * 1rem); }
  body.m-ui .m-head-tabs .tab.active { background: rgb(var(--accent-rgb) / .2); color: var(--text); }
  body.m-ui .conv-tabs { padding-left: 10px; padding-right: 10px; }

  /* The chat: a little more room at the edges. */
  body.m-ui .composer-wrap { padding: 0 10px 8px; }
  html.kb-open body.m-ui .composer-wrap { padding-bottom: 6px; }
  body.m-ui .composer { border-radius: 22px; }
  body.m-ui .msg { margin-inline: 6px; }

  /* Dialogs come up from the bottom, as cards the width of the screen, above the keyboard. */
  body.m-ui .modal-backdrop:not(:has(.modal-full, .modal-search, .modal-lightbox)) { padding: env(safe-area-inset-top) 0 0; place-items: end stretch; }
  html.kb-open body.m-ui .modal-backdrop:not(:has(.modal-full, .modal-search, .modal-lightbox)) { bottom: auto; height: var(--app-h, 100%); }
  /* (A full-screen dialog, Settings, hides the app under it: the levels' own visibility mustn't show through.) */
  body.m-ui:has(.modal-full) #rail, body.m-ui:has(.modal-full) #sidebar, body.m-ui:has(.modal-full) #main, body.m-ui:has(.modal-full) #tabbar, body.m-ui:has(.modal-full) #m-callbar { visibility: hidden; }
  body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) {
    max-width: none; border-radius: 24px 24px 0 0; border-bottom: 0; animation: sheet-up .24s var(--m-ease);
    max-height: calc(var(--app-h, 100dvh) - env(safe-area-inset-top) - 12px); padding-bottom: env(safe-area-inset-bottom);
  }
  html.kb-open body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) { padding-bottom: 0; }
  body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) .modal-head { padding: 16px 10px 4px 20px; }
  body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) .modal-head h2 { font-size: calc(20 / 16 * 1rem); }
  body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) .modal-body { padding: 12px 20px 18px; }
  body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) .modal-foot { flex-wrap: wrap; padding: 12px 16px; border-radius: 0; background: none; }
  body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) .modal-foot .btn { flex: 1 1 40%; min-height: 50px; font-size: calc(15.5 / 16 * 1rem); border-radius: 14px; }

  /* Collisions with the tab bar and the call bar. */
  body.m-ui.m-list .wt-dock.mini { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 84px); }
  body.m-ui .ring-card { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); width: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* The owner's announcement: a strip across the top, and everything else moved down by its height (--ann-h, set by
     app.js fitAnnouncement), so it never covers Back, a title, a button or a row. */
  body.m-ui .announce {
    top: 0; left: 0; right: 0; transform: none; max-width: none; border-radius: 0; border-width: 0 0 1px; z-index: 30; animation: none;
    padding: calc(env(safe-area-inset-top) + 8px) calc(6px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
  }
  body.m-ui.has-ann #app { margin-top: var(--ann-h, 0px); height: calc(var(--app-h, 100%) - var(--ann-h, 0px)); }
  body.m-ui.has-ann #rail, body.m-ui.has-ann #sidebar, body.m-ui.has-ann #members, body.m-ui.has-ann .reels-layer.full { top: var(--ann-h, 0px); }
  body.m-ui.has-ann.m-conv #m-callbar:not([hidden]) { top: var(--ann-h, 0px); }
  body.m-ui.m-list .ring-card { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); }
  /* (Above the call bar floating over the list, not on its Mute and Leave.) */
  body.m-ui.m-list.m-call .ring-card { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 80px); }
  body.m-ui .ring-actions .round-btn { width: 52px; height: 52px; }
  body.m-ui .cs-controls { gap: 4px; }
  body.m-ui .cs-controls .round-btn { width: 44px; height: 44px; }
  /* Seven or eight of them don't fit in one row on a narrow phone: two rows of four, every one a finger's size. */
  @media (max-width: 480px) {
    body.m-ui .cs-controls:has(> .round-btn:nth-child(7)) { display: grid; grid-template-columns: repeat(4, 44px); justify-content: center; gap: 8px 18px; }
  }
  body.m-ui .emoji-tab { width: 44px; height: 44px; }
  body.m-ui .xp-back, body.m-ui .xp-clear { width: 44px; height: 44px; }
  body.m-ui #toasts { top: calc(70px + env(safe-area-inset-top)); }

  /* Sideways (a short screen): a slimmer tab bar, its labels beside the icons, and a smaller call bar. */
  @media (max-height: 500px) {
    body.m-ui { --tab-h: 48px; }
    body.m-ui .tab-btn { flex-direction: row; gap: 6px; }
    body.m-ui .tab-ic { width: 44px; height: 30px; }
    body.m-ui #m-callbar:not([hidden]) { left: auto; width: min(420px, calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); min-height: 52px; padding-block: 4px; }
    body.m-ui.m-conv #m-callbar:not([hidden]) { width: auto; left: 0; height: calc(env(safe-area-inset-top) + 44px); }
    body.m-ui.m-conv.m-call #main { padding-top: calc(env(safe-area-inset-top) + 44px); }
    body.m-ui.m-list.m-call #sidebar { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 66px); }
  }

  /* Reduce motion (Cindrly's own setting, or the device's): the levels swap without sliding. */
  html.reduce-motion body.m-ui #main, html.reduce-motion body.m-ui #sidebar, html.reduce-motion body.m-ui #rail, html.reduce-motion body.m-ui #members,
  html.reduce-motion body.m-ui #m-callbar, html.reduce-motion body.m-ui .modal { transition: none !important; animation: none !important; }
}
/* Touch screens: a sideways swipe in the chat doesn't take the browser back out of Cindrly (Back still works, and
   closes what's open first: js/phone-nav.js). */
@media (pointer: coarse) {
  html { overscroll-behavior-x: none; }
  /* Nothing hovers on a touch screen, so a pressed row or button answers the finger instead of the grey tap flash. */
  html { -webkit-tap-highlight-color: transparent; }
  .ch-row:active, .dm-row:active, .member:active, .nav-row:active, .menu-item:active, .set-nav-btn:active,
  .tab:active, .seg-btn:active, .set-subtab:active, .ss-tab:active, .find-btn:active, .server-head:active, .me-btn:active, .choice:active { background: var(--active); }
  /* A phone held sideways (the short half of the phone layout): a slimmer header leaves more of the short screen to
     the chat, and none while the keyboard is up (the header comes back with the keyboard gone). Android makes the page
     shorter for the keyboard; iOS covers it (html.kb-open, js/viewport.js). */
  @media (max-height: 500px) {
    :root { --head-h: 44px; }
    html.kb-open #main-head, html.kb-open #members > .panel-head { display: none; }
    body .chat > .call-stage { height: 130px; } /* a call going on above the chat (240px upright) */
  }
  @media (max-height: 260px) {
    #main-head, #members > .panel-head { display: none; }
  }
}

/* ------------------------------------------------------------------ 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; }
  .dots i { animation: none; opacity: .8; } /* "is typing…": three dots that hold still */
}
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; }
html.reduce-motion .dots i { animation: none; opacity: .8; }

/* ------------------------------------------------------------------ encryption states */
.key-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 0 8px; border-radius: 12px;
  font-size: calc(13.5 / 16 * 1rem); 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; }
/* The post-quantum password bar: its buttons go under the text on a phone instead of squeezing it. */
.key-bar.pq-bar { flex-wrap: wrap; }
.key-bar.pq-bar > span:not(.ic) { min-width: min(260px, 100%); }
.pq-bar-actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
.key-bar.pq-bar > span.pq-bar-actions:not(.ic) { flex: none; min-width: 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: calc(11.5 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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), (pointer: coarse) and (max-height: 500px) { .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) and (pointer: fine), (min-width: 761px) and (pointer: none), (min-width: 761px) and (min-height: 501px) {
  [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: calc(14 / 16 * 1rem); }
.layout-card span { font-size: calc(12 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); 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: calc(14 / 16 * 1rem);
  animation: rise .2s var(--ease);
}
.update-bar > .ic, .push-offer > .ic { width: 16px; height: 16px; color: var(--accent); }
.push-offer { max-width: calc(100vw - 24px); }
.push-offer > span { flex: 1; min-width: 0; }
.push-offer > .ic, .push-offer > .btn { flex: none; }

/* ------------------------------------------------------------------ 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: calc(13 / 16 * 1rem); line-height: 1; cursor: default; }
.role-mention { background: color-mix(in srgb, var(--rc, var(--accent)) 18%, transparent); color: var(--rc, var(--accent-ink)); }
/* Custom emoji are stored at most 128×128 (server/emojiimage.js) and always drawn in a fixed box, whatever size the
   file is (older uploads can be bigger): 22 px in a line of text (1.375em of the 16 px message text), 48 px on their
   own, 16-17 px in reactions. object-fit keeps a wide or tall one's shape inside the box. */
img.cemoji { display: inline-block; width: 1.375em; height: 1.375em; min-width: 0; max-width: none; object-fit: contain; vertical-align: -0.3em; 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: calc(10 / 16 * 1rem); font-weight: 800; }
.ep-big img.cemoji { width: 24px; height: 24px; }
.ep-src { margin-left: auto; font-size: calc(12 / 16 * 1rem); color: var(--muted); font-weight: 500; }
.suggest-emoji { width: 24px; height: 24px; display: grid; place-items: center; font-size: calc(18 / 16 * 1rem); }
.suggest-emoji img.cemoji { width: 22px; height: 22px; }
.suggest-at.role { font-size: calc(14 / 16 * 1rem); }
.slow-note { font-size: calc(12 / 16 * 1rem); color: var(--muted); padding: 4px 6px 0; }
.slow-note[hidden] { display: none; }
.dis-note { display: flex; align-items: center; gap: 5px; font-size: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); }
.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: calc(12.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); }
.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: calc(12 / 16 * 1rem); 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: calc(15 / 16 * 1rem); }
.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: calc(12 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.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), (pointer: coarse) and (max-height: 500px) { .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: calc(14 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); }
.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: calc(10 / 16 * 1rem); 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: calc(9.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); }
.giphy-test { display: flex; align-items: center; gap: 10px; min-height: 0; font-size: calc(13.5 / 16 * 1rem); }
.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: calc(11 / 16 * 1rem); 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: calc(28 / 16 * 1rem); margin-bottom: 8px; }
.doc h2, .tos-text h2 { font-size: calc(18 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); color: var(--text-2); margin: 4px 0 2px; cursor: pointer; }
.tos-check input { margin-top: 3px; accent-color: var(--accent); }
.tos-privacy { margin: -10px 0 0; }

/* ------------------------------------------------------------------ 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: calc(14 / 16 * 1rem); 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: calc(17 / 16 * 1rem); }
.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 calc(26 / 16 * 1rem) 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: calc(12.5 / 16 * 1rem); font-weight: 700; color: var(--muted); }
.stat-sub { font-size: calc(12.5 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(10 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); }
.adm-row:first-child { border-top: 0; }
.adm-row.head { background: var(--hover); font-size: calc(12 / 16 * 1rem); 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: calc(12 / 16 * 1rem); color: var(--muted); }
.ip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ip-chip { font: calc(12 / 16 * 1rem) 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: calc(11.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); overflow-wrap: anywhere; }
.audit-sub { font-size: calc(12.5 / 16 * 1rem); color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.audit-time { font-size: calc(12 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); color: var(--muted); }
.ev-meta strong { color: var(--text); }
.ev-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(14 / 16 * 1rem); }
.report-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.radio-card.sm { padding: 8px 10px; font-size: calc(13.5 / 16 * 1rem); }
.terms-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.terms-edit textarea { min-height: 380px; font-size: calc(13 / 16 * 1rem); }
.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: calc(14 / 16 * 1rem); }
.captcha[data-state='error'] .cap-label { color: var(--danger); font-size: calc(12.5 / 16 * 1rem); }
.cap-brand { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: calc(9.5 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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; }
/* Phones: the call's seven buttons (soundboard included) on one row, 7 × 40 + 6 × 8 = 328px. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .cs-controls { gap: 8px; }
  .cs-controls .round-btn { width: 40px; height: 40px; }
  .cs-controls .round-btn .ic { width: 18px; height: 18px; }
}
.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: calc(13 / 16 * 1rem); 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), (pointer: coarse) and (max-height: 500px) {
  .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: calc(13 / 16 * 1rem); 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: calc(17 / 16 * 1rem); }
.uo-sub { font-size: calc(13.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(14 / 16 * 1rem); display: flex; gap: 8px; align-items: center; }
.diag-table { width: 100%; border-collapse: collapse; font-size: calc(12.5 / 16 * 1rem); }
.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: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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; }
/* A short window (a small laptop's screen) keeps a picture to 40% of its height, so one never fills the chat; it
   shrinks in its shape (app.js attachmentEl gives it --att-w and --att-h). From 850px tall it's the usual 340px. While
   it loads, the box already has the picture's size (so it doesn't jump), and a box made wider than that (a spoiler's,
   one that failed to load) is still no taller. */
.att-media.sized { max-width: min(440px, 100%, calc(40vh * var(--att-w) / var(--att-h))); max-height: max(150px, min(340px, 40vh)); }
.att-media.sized.locked { min-width: 0; min-height: 0; }
/* 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: calc(13 / 16 * 1rem); 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: calc(12 / 16 * 1rem); }
.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: calc(13 / 16 * 1rem); }
.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: calc(12 / 16 * 1rem); }
.viewer-stage { position: relative; }

/* ------------------------------------------------------------------ phones and touch screens: pictures and the viewer
   The same media queries as device.js. PHONE LAYOUT: (max-width: 760px), (pointer: coarse) and (max-height: 500px),
   a narrow window or a phone held sideways. TOUCH UI: (pointer: coarse), phones and tablets. A PHONE is both at once.
   A desktop with a mouse matches none and looks as it always has. */
/* A message with more than 10 files (only the server's owner sends that many; app.js attachmentEl many): pictures are
   square tiles in a grid, cropped to fill them (the viewer shows the whole picture), and everything else (files,
   videos, songs) takes a row of its own (dense: later pictures fill the gaps rows like that leave). On every screen: it comes after the rules for one picture. */
.msg-files.many { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-flow: row dense; gap: 6px; width: min(560px, 100%); }
.msg-files.many > :not(.tile) { grid-column: 1 / -1; }
.msg-files.many .att-media.tile { width: auto !important; max-width: none; aspect-ratio: 1; min-width: 0; min-height: 0; max-height: none; border-radius: 10px; }
.msg-files.many .att-media.tile .att-img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.msg-files.many .att-media.tile.click-to-load { padding: 0; display: grid; place-items: center; }
.msg-files.many .att-media.tile .att-play { font-size: calc(12 / 16 * 1rem); padding: 6px 8px; margin: 0; }
.msg-files.many .att-media.tile .att-dl { top: 4px; right: 4px; width: 28px; height: 28px; }
.msg-files.many .att-media.tile .att-alt { left: 4px; bottom: 4px; }
/* A PHONE (PHONE LAYOUT and TOUCH UI at once): a picture in the chat takes the message's whole width when its shape
   allows, and a tall one up to about 70% of the screen's height instead of 340px, so a phone screenshot can be read.
   The box keeps the picture's shape (app.js attachmentEl gives it --att-w and --att-h), so nothing jumps while it
   loads, and the picture is never cropped: should the box ever disagree with it, it's letterboxed. A computer keeps
   the usual size, a narrow window or a touch screen too (sized like this, one filled a laptop's whole chat). */
@media (max-width: 760px) and (pointer: coarse), (pointer: coarse) and (max-height: 500px) {
  .att-media { max-width: 100%; }
  .att-media.sized { max-width: 100%; max-height: none; width: min(100%, calc(var(--att-w) * 1px), calc(560px * var(--att-w) / var(--att-h))) !important; }
  @supports (height: 1svh) {
    .att-media.sized { width: min(100%, calc(var(--att-w) * 1px), calc(70svh * var(--att-w) / var(--att-h))) !important; }
  }
  .att-media.sized .att-img { object-fit: contain; }
  .att-img { max-height: 560px; max-height: 70svh; }
  .msg-files.many .att-media.tile .att-img { max-height: none; }
}
/* TOUCH UI: the viewer takes the fingers itself (viewer-touch.js: pinch, double tap, swipes), so the page never zooms
   or scrolls underneath. The picture follows a finger directly and glides when it's let go. */
@media (pointer: coarse) {
  .viewer { touch-action: none; }
  .viewer-stage.touching .viewer-img { transition: none; }
  .viewer-stage.easing .viewer-img { transition: transform .2s var(--ease); }
}
/* PHONE LAYOUT or TOUCH UI (a tablet's too): the viewer bar's buttons are 44px, for a finger. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) {
  .viewer-bar .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
  .viewer-bar .icon-btn .ic { width: 22px; height: 22px; }
}
/* PHONE LAYOUT: the viewer goes edge to edge on an opaque backdrop, clear of the notch and the home bar. Its bar keeps
   the name, the count on one line, Download, More (app.js openViewer) and Close; swipes stand in for the arrow
   buttons. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .viewer { background: rgb(8 7 11); }
  .viewer-bar { gap: 2px; padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left)); }
  .viewer-name { display: flex; min-width: 0; max-width: none; }
  .viewer-name-base { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .viewer-name-ext { flex: none; }
  .viewer-count { flex: none; white-space: nowrap; margin-left: 8px; }
  .viewer-stage { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .viewer-stage.loading-full::after { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .viewer-img { border-radius: 0; }
  .viewer-nav { display: none; }
  #layer > .viewer-menu { z-index: 85; }
}
.adm-srv-ic { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; background: var(--active); display: grid; place-items: center; font-size: calc(11 / 16 * 1rem); 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: calc(14 / 16 * 1rem); 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: calc(11 / 16 * 1rem); flex: none; }
.pc-song-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: calc(13.5 / 16 * 1rem); }
.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: calc(12.5 / 16 * 1rem); font-weight: 600; }
.pc-about { font-size: calc(14 / 16 * 1rem); line-height: 1.55; max-height: 340px; overflow-y: auto; }
.pc-about h1 { font-size: calc(18 / 16 * 1rem); } .pc-about h2 { font-size: calc(15 / 16 * 1rem); } .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: calc(12 / 16 * 1rem); 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: calc(22 / 16 * 1rem); 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: calc(18 / 16 * 1rem); }
@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: calc(13 / 16 * 1rem); color: var(--text-2); }
.pg-css { min-height: 220px; font-size: calc(12.5 / 16 * 1rem); }
.pg-help summary { cursor: pointer; color: var(--text-2); font-size: calc(13 / 16 * 1rem); }
.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 { grid-column: 2; font-size: calc(12 / 16 * 1rem); color: var(--muted); padding-left: 0; }

/* ------------------------------------------------------------------ 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 :is(.menu, .emoji-picker, .gif-picker, .inbox, .sb-pop, .toast) { background: rgb(var(--elev)); }
html.lite { --island-shadow: 0 1px 0 rgb(255 255 255 / .03) inset; }

/* GIF library */
.gif-notice { font-size: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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), (pointer: coarse) and (max-height: 500px) { .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: calc(14 / 16 * 1rem); }
.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: calc(11 / 16 * 1rem); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.wt-sub { font-size: calc(12 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); font-weight: 800; letter-spacing: -.02em; }
.wt-time { margin: 0 auto 0 8px; font-variant-numeric: tabular-nums; font-size: calc(13 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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; }
/* TikTok and Instagram (social.js): upright 9:16 players. In watch together the stage gets taller and the
   video sits in the middle; side by side, two of them share it. */
.wt-slot { position: absolute; inset: 0; }
.wt-stage.wt-upright { display: flex; justify-content: center; gap: 8px; aspect-ratio: auto; height: max(240px, min(68vh, calc(100vh - 380px), 640px, calc(100vw * 16 / 9))); max-height: none; }
.wt-stage.wt-upright .wt-slot { position: relative; inset: auto; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; }
.wt-stage.wt-split { height: max(240px, min(68vh, calc(100vh - 380px), 640px, calc((100vw - 48px) / 2 * 16 / 9))); }
.wt-stage.wt-split .wt-slot { max-width: calc(50% - 4px); }
.wt-dock.mini .wt-stage.wt-upright { height: 300px; }
.wt.wt-is-full .wt-stage.wt-upright { height: auto; }
.wt-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none;
  font-size: clamp(32px, 9vw, 88px); font-weight: 800; color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / .8); background: rgb(0 0 0 / .25); }
.wt-count[hidden] { display: none; }
.wt-manual { flex-wrap: wrap; gap: 6px; }
.wt-manual .btn.active { background: rgb(var(--accent-rgb) / .18); }
.wt-note { flex-basis: 100%; margin: 0; font-size: calc(12 / 16 * 1rem); color: var(--muted); }
/* in a message: a placeholder (the sender's preview picture, or a plain panel) until tapped, then the player */
.msg-socials { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 6px; }
.soc-embed { position: relative; width: min(325px, 100%); aspect-ratio: 9 / 16; max-height: 78vh; border-radius: 12px; overflow: hidden; background: #000; color: #f4f1fa; flex: 0 1 auto; }
.soc-embed.kind-instagram { aspect-ratio: 9 / 19; background: #111; }
.soc-embed.kind-instagram.post { aspect-ratio: 4 / 6; }
.msg-socials.many .soc-embed { width: min(325px, calc(50% - 4px)); }
.soc-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.soc-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.soc-blank { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / .45), transparent 60%), linear-gradient(160deg, #1d1726, #0b0910); }
.kind-tiktok .soc-blank { background: radial-gradient(circle at 25% 25%, rgb(37 244 238 / .35), transparent 55%), radial-gradient(circle at 75% 80%, rgb(254 44 85 / .35), transparent 55%), #0b0b0f; }
.kind-instagram .soc-blank { background: radial-gradient(circle at 20% 100%, rgb(253 186 63 / .45), transparent 55%), radial-gradient(circle at 80% 0%, rgb(131 58 180 / .5), transparent 60%), linear-gradient(160deg, #3a1630, #120b14); }
.soc-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-align: center; }
.soc-site { font-size: calc(11 / 16 * 1rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.soc-title { font-weight: 600; font-size: calc(14 / 16 * 1rem); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.soc-play { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 0; background: rgb(255 255 255 / .92); color: #111; font-weight: 700; font-size: calc(14 / 16 * 1rem); cursor: pointer; }
.soc-play:hover { background: #fff; }
.soc-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.soc-play[disabled] { opacity: .6; cursor: progress; }
.soc-play-ic .ic { width: 16px; height: 16px; }
.soc-note { font-size: calc(11.5 / 16 * 1rem); line-height: 1.35; opacity: .8; max-width: 250px; }
.soc-open { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12 / 16 * 1rem); color: inherit; opacity: .85; }
.soc-open .ic { width: 13px; height: 13px; }
.soc-close { position: absolute; top: 6px; right: 6px; z-index: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; }
.soc-close .ic { width: 15px; height: 15px; }
@media (max-width: 760px) { .soc-embed { width: min(300px, 100%); } }
/* 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: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.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: calc(13.5 / 16 * 1rem); color: var(--text-2); }
.fund-text strong { color: var(--text); font-size: calc(15 / 16 * 1rem); }
.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: calc(12 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); color: var(--text-2); }
.people-me-text strong { color: var(--text); font-size: calc(15 / 16 * 1rem); }
.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: calc(16 / 16 * 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-handle, .person-meta { font-size: calc(12 / 16 * 1rem); color: rgb(255 255 255 / .7); }
.person-headline { font-size: calc(13 / 16 * 1rem); 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: calc(11 / 16 * 1rem); 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: calc(11 / 16 * 1rem); 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: calc(12 / 16 * 1rem); color: var(--text-2); white-space: nowrap; }
.poll-foot { display: flex; gap: 8px; align-items: center; font-size: calc(12 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(12 / 16 * 1rem); color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 34px; }
.vm-speed { font-size: calc(11 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.ev-row-text small { font-size: calc(11.5 / 16 * 1rem); 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: calc(11 / 16 * 1rem); font-weight: 800; text-transform: uppercase; color: var(--accent-ink); }
.ev-date strong { font-size: calc(22 / 16 * 1rem); line-height: 1; }
.ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-when { font-size: calc(12.5 / 16 * 1rem); 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: calc(16 / 16 * 1rem); }
.ev-where { font-size: calc(13 / 16 * 1rem); color: var(--text-2); }
.ev-desc { margin: 2px 0; font-size: calc(13.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); color: var(--muted); margin-left: 6px; flex: 1; }
.ev-home { display: flex; flex-direction: column; gap: 4px; }
.ev-home-server { font-size: calc(11.5 / 16 * 1rem); 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: calc(11 / 16 * 1rem); 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: calc(12.5 / 16 * 1rem); 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: calc(20 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.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: calc(12.5 / 16 * 1rem)/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: calc(12 / 16 * 1rem); 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.member-row { grid-template-columns: minmax(130px, 1.2fr) minmax(100px, 1fr) auto minmax(180px, 2fr) auto; }
.member-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.member-actions { flex-wrap: wrap; justify-content: flex-end; }
/* Settings → Help host: a member's own relays */
.relay-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--hover); border: 1px solid var(--line); }
.relay-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.relay-text strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.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: calc(13.5 / 16 * 1rem); }
.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.member-row, .adm-row.pay-row, .price-table .adm-row.three { grid-template-columns: 1fr 1fr; }
  .member-actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- 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: calc(14 / 16 * 1rem); 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: calc(15 / 16 * 1rem); }
.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: calc(14.5 / 16 * 1rem); }
.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: calc(15 / 16 * 1rem); 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 calc(13 / 16 * 1rem) 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: calc(12 / 16 * 1rem); 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: calc(15 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); }
.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: calc(10 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); color: var(--text-2); line-height: 1.4; }
.news-meta { font-size: calc(11.5 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Admin → Audit log */
.chain-ok, .chain-bad { padding: 8px 12px; border-radius: 8px; font-size: calc(13 / 16 * 1rem); 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: calc(20 / 16 * 1rem); 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: calc(7 / 16 * 1rem); }
.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: calc(16 / 16 * 1rem); 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: calc(11 / 16 * 1rem); }
.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: calc(12 / 16 * 1rem); color: var(--muted); }
.update-tracker { color: var(--accent); font-weight: 600; }
.update-title { font-weight: 700; font-size: calc(15 / 16 * 1rem); color: var(--text); text-decoration: none; line-height: 1.3; }
.update-title:hover { text-decoration: underline; }
.update-summary { margin: 0; font-size: calc(13.5 / 16 * 1rem); 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: calc(11.5 / 16 * 1rem); 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: calc(19 / 16 * 1rem); 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: calc(17 / 16 * 1rem); margin: 0 0 4px; }
.mb-price { text-align: right; white-space: nowrap; }
.mb-price strong { font-size: calc(20 / 16 * 1rem); font-family: var(--font-display); }
.mb-price span { color: var(--muted); font-size: calc(13 / 16 * 1rem); margin-left: 2px; }
.mb-desc { margin: 0; color: var(--text-2); font-size: calc(14 / 16 * 1rem); white-space: pre-line; }
.mb-role { display: inline-block; font-size: calc(12 / 16 * 1rem); 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: calc(13 / 16 * 1rem); 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: calc(14 / 16 * 1rem); }
.mb-step-body { display: grid; gap: 10px; min-width: 0; }
.mb-step-body h4 { margin: 2px 0 0; font-size: calc(15 / 16 * 1rem); }
.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 calc(11.5 / 16 * 1rem)/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: calc(13 / 16 * 1rem); 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: calc(13 / 16 * 1rem); }
.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: calc(13 / 16 * 1rem); }
@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; }
/* Sharing invites (public/js/invite-share.js): the sign-in banner, the dialog's extra buttons, "It's just you here" */
.auth-invite { background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .35); border-radius: 12px; padding: 10px 12px; font-size: calc(13.5 / 16 * 1rem); margin: 0 0 16px; text-align: center; }
.auth-invite .link-btn { margin-left: 4px; }
.invite-extras { flex-wrap: wrap; }
.invite-extras:empty { display: none; }
.welcome-invite-slot { align-self: stretch; }
.welcome-invite-slot:empty { display: none; }
.invite-nudge { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .3); max-width: 520px; }
.invite-nudge > .ic { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.invite-nudge-text { flex: 1; min-width: 120px; font-weight: 600; }
/* 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: calc(12.5 / 16 * 1rem); 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: calc(12 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); }
.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: calc(13 / 16 * 1rem); 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, .att-spoiler-pill {
  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: calc(12.5 / 16 * 1rem); font-weight: 600;
}
.wf-blur-show:hover, .wf-blur-show:focus-visible, .att-spoiler-btn:hover .att-spoiler-pill, .att-spoiler-btn:focus-visible .att-spoiler-pill { background: rgb(var(--text-rgb)); }
.wf-blur-show .ic, .att-spoiler-pill .ic { width: 14px; height: 14px; flex: none; }
.wf-hidden-text { color: var(--muted); }
.wf-list { min-height: 120px; font-family: var(--mono); font-size: calc(13 / 16 * 1rem); }
.wf-errors { margin: 0; padding-left: 18px; color: var(--danger); font-size: calc(12.5 / 16 * 1rem); }
.wf-errors:empty { display: none; }
.wf-count { display: block; }
.wf-try-out { margin: 0; font-size: calc(13 / 16 * 1rem); 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: calc(13.5 / 16 * 1rem); }
.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: calc(14 / 16 * 1rem); 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: calc(13 / 16 * 1rem); font-weight: 600; width: fit-content; }
.wf-word-list { margin: 6px 0 0; font-size: calc(13 / 16 * 1rem); color: var(--text-2); overflow-wrap: anywhere; }
/* The keyboard shortcuts sheet (Ctrl+/) */
.sc-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 24px; }
.sc-group .set-h { margin: 4px 0 6px; }
.sc-list { margin: 0; display: grid; grid-template-columns: fit-content(9.5rem) minmax(0, 1fr); gap: 6px 12px; align-items: baseline; }
.sc-row { display: contents; } /* (its keys and words line up in the list's two columns) */
.sc-row dt { min-width: 0; }
.sc-row dd { margin: 0; color: var(--text-2); font-size: calc(13.5 / 16 * 1rem); }
.sc-combo { display: inline-flex; align-items: center; gap: 2px; }
.sc-plus, .sc-or, .sc-none { color: var(--muted); font-size: calc(12 / 16 * 1rem); }

/* ------------------------------------------------------------------ phones and tablets
   The same two media queries as device.js, so the styles and the code agree:
     (max-width: 760px), (pointer: coarse) and (max-height: 500px)   the phone layout: a narrow window, or a phone held sideways
     (pointer: coarse)                                                the touch UI: a finger is the main pointer
   A desktop with a mouse matches neither, so nothing below changes it. */

/* Bottom sheets (ui.js sheet): a message's actions after a long press (app.js messageSheet), and in the phone layout
   menus too (ui.js sheetMenu): touch screens and the phone layout open them. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) {
  #layer > .sheet-backdrop { z-index: 50; }
  .sheet-backdrop { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: var(--scrim); animation: fade .16s ease; }
  .sheet-backdrop.closing { animation: fadeout .18s ease forwards; pointer-events: none; }
  .sheet {
    width: min(100%, 560px); max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 max(8px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgb(var(--elev)); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: var(--pop-shadow);
    animation: sheet-up .22s var(--ease); transition: transform .2s var(--ease);
  }
  .sheet:focus { outline: none; }
  .sheet.dragging { transition: none; }
  .sheet-backdrop.closing .sheet { animation: sheet-down .18s ease forwards; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
  .sheet-grip { width: 40px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: var(--line-2); }
  .sheet-reacts { display: flex; justify-content: space-between; gap: 6px; padding: 8px 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .sheet-react { flex: 1 1 0; max-width: 52px; min-height: 44px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: calc(24 / 16 * 1rem); background: var(--hover); transition: transform .1s; }
  .sheet-react:active { transform: scale(.92); }
  .sheet-react.mine { background: rgb(var(--accent-rgb) / .2); box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / .6); }
  .sheet-react.more { color: var(--text-2); }
  .sheet-react.more .ic { width: 22px; height: 22px; }
  .sheet-list { display: flex; flex-direction: column; }
  .sheet-row { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: calc(16 / 16 * 1rem); font-weight: 500; text-align: left; color: var(--text); }
  .sheet-row:active, .sheet-row:focus-visible { background: var(--active); }
  .sheet-row .ic { width: 20px; height: 20px; flex: none; color: var(--text-2); }
  .sheet-row.danger, .sheet-row.danger .ic { color: var(--danger); }
  .sheet-sep { height: 1px; margin: 4px 8px; background: var(--line); }
  .msg.pressed { background: var(--active); }
  .sheet { max-height: calc(min(var(--app-h, 100dvh), 100dvh) - env(safe-area-inset-top) - 24px); }
  html.kb-open .sheet-backdrop { bottom: auto; height: var(--app-h, 100%); }
  /* A menu as a sheet: its items a finger's height, the full width. */
  .sheet-menu { min-width: 0; max-width: none; width: auto; max-height: none; overflow: visible; padding: 2px 0 6px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sheet-menu .menu-item:not(:has(.menu-ic, .status-dot)) { padding-left: 49px; }
  .sheet-menu .menu-item { min-height: 50px; padding: 12px 14px; gap: 14px; border-radius: 14px; font-size: calc(16 / 16 * 1rem); color: var(--text); flex-shrink: 0; }
  .sheet-menu .menu-ic { width: 21px !important; height: 21px !important; color: var(--text-2); opacity: 1; }
  .sheet-menu .menu-item.danger, .sheet-menu .menu-item.danger .menu-ic { color: var(--danger); }
  .sheet-menu .menu-hint { font-size: calc(13.5 / 16 * 1rem); }
  .sheet-menu .menu-desc { font-size: calc(13.5 / 16 * 1rem); }
  .sheet-menu .menu-header { padding: 14px 14px 4px; font-size: calc(13 / 16 * 1rem); }
  .sheet-menu .menu-sep { margin: 6px 10px; }
  .sheet-menu .menu-check { width: 20px !important; height: 20px !important; }
  .sheet-menu .status-dot.inline { transform: scale(1.25); }
  .pc-sheet { padding: 4px 0 6px; }
  .pc-sheet .pcard { width: 100%; max-width: none; }
}

/* PHONE LAYOUT or TOUCH UI: the message box's buttons are 44px, for a finger (a tablet keeps all of them beside the
   box), and focus handed back after a gesture shows no ring (ui.js quietFocus: the next key press brings it back). */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) {
  .composer .attach, .composer-tools .icon-btn, .send-btn { width: 44px; height: 44px; border-radius: 11px; }
  .composer-tools .icon-btn .ic { width: 22px; height: 22px; }
  .composer textarea { min-height: 44px; padding: 11px 6px; }
  .send-btn .ic { width: 20px; height: 20px; }
  .quiet-focus:focus-visible { outline: none; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* The message box gets the room: GIFs, voice messages and Send later are in the + menu (app.js createComposer). */
  .composer .composer-more { display: none; }
  .composer { padding: 3px; gap: 0; }
  .send-btn:disabled { background: var(--hover); opacity: 1; }
}

@media (pointer: coarse) {
  /* Nothing hovers on a touch screen: a long press opens a message's actions instead (app.js messageSheet). Holding a
     finger on a message doesn't select its words or open the browser's own menu; Copy text is in the sheet. */
  .msg-tools { display: none; }
  .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .msg textarea, .msg input { -webkit-user-select: text; user-select: text; }
  .msg img, .msg a { -webkit-user-drag: none; }
  .reaction.add-r { opacity: .75; }
  /* Room for a finger: 44px to tap. */
  #main-head .icon-btn, .panel-head .icon-btn, .modal-x, .set-close, .me-actions .icon-btn, .rec-bar .icon-btn, .pc-actions .icon-btn,
  .icon-btn.search-close { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
  .reply-bar { padding: 0 0 0 12px; }
  .reply-bar .icon-btn { width: 44px; height: 44px; }
  .ch-main, .nav-row, .server-head, .find-btn, .panel-search .input, .emoji-search { height: 44px; }
  .dm-row, .member, .ev-row, .me-btn, .set-nav-btn, .set-subtab, .ss-tab, .seg-btn, .tab, .chip, .menu-item, .toggle-row, .cat-toggle,
  .pc-mutual { min-height: 44px; }
  .search-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .seg-btn, .chip.search-chip { min-width: 44px; justify-content: center; }
  /* (A min-height would let a row with more on it shrink below its content in a scrolling column: they keep it.) */
  .ev-row, .member, .set-nav-btn, .set-subtab, .ss-tab, .menu-item, .toggle-row, .pc-mutual { flex-shrink: 0; }
  .vm { padding: 6px 12px 6px 6px; }
  .vm-play { width: 44px; height: 44px; font-size: calc(14 / 16 * 1rem); }
  /* A call's own buttons above it: their room reaches past the line they sit on, which stays as low as it was. */
  .cs-head-tools .icon-btn { width: 44px; height: 44px; margin: -11px 0; }
  /* Where the look stays small, the room to tap is bigger than what's drawn (the ::before): reactions under a message
     (their rows a little further apart, and from the next message, so the rooms don't overlap), the voice message
     player's speed, the × that removes a filter or a role, and Download on a picture. */
  .reactions { gap: 8px 6px; margin-bottom: 2px; }
  .reaction { height: 36px; min-width: 44px; justify-content: center; padding: 0 10px; }
  .vm-speed { min-width: 36px; min-height: 30px; }
  .chip-x { width: 28px; height: 28px; }
  .chip.active.search-chip { padding-right: 8px; }
  .att-dl { width: 36px; height: 36px; }
  :where(.reaction, .vm-speed, .chip-x) { position: relative; }
  .reaction::before, .vm-speed::before, .chip-x::before, .att-dl::before { content: ''; position: absolute; }
  .reaction::before { inset: -5px 0; } /* (measured from inside its border: 4px past it) */
  .vm-speed::before { inset: -7px -4px; }
  .chip-x::before { inset: -8px; }
  .att-dl::before { inset: -4px; }
  /* (A long menu scrolls rather than running off a short screen: on every pointer now, ux-menus.css .menu.) */
  /* (moved to ux-menus.css) */
  /* 16px or more in text boxes: iOS zooms the page in when a smaller one gets focus. */
  input:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file])), textarea, select { font-size: max(16px, 1em); }
  .input.mono, .hex-in, .panel-search .input, .xp-input, .edit-input { font-size: calc(16 / 16 * 1rem); }
}

/* ======================================================================= Photos & videos panel (media-panel.js) */
/* The side panel: as wide as a thread (the same resize handle sets it), its filters, then the tiles, newest first under
   their months, three to a row at the panel's usual width. */
#members[data-mode='media'] { width: var(--thread-w); }
.mp-filters { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.mp-kinds { align-self: flex-start; }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.mp-tag { height: 28px; padding: 0 10px; gap: 6px; font-size: calc(12.5 / 16 * 1rem); max-width: 100%; min-width: 0; }
.chip.active.mp-tag { padding: 0 4px 0 0; }
.mp-tag-name { display: inline-flex; align-items: center; gap: 6px; align-self: stretch; min-width: 0; padding: 0 2px 0 10px; color: inherit; font: inherit; }
.mp-tag-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-tag-n { font-size: calc(11.5 / 16 * 1rem); font-weight: 600; color: var(--muted); }
.mp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 16px; }
.mp-month-name { margin: 12px 2px 6px; font-family: var(--font); font-size: calc(12 / 16 * 1rem); font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.mp-tile { position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden; border-radius: 8px; background: var(--hover); }
.mp-tile.loading { background: var(--active); }
.mp-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; cursor: pointer; }
.mp-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mp-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A video has no poster: a dark square with a play sign and its size. */
.mp-tile.video { background: #16131c; color: #f2eff7; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.mp-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; font-size: calc(11.5 / 16 * 1rem); color: var(--muted); }
.mp-tile.video .mp-ph { color: #d8d3e2; }
.mp-ph .ic { width: 24px; height: 24px; }
.mp-ph .ic.mp-play { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; }
.mp-size { font-variant-numeric: tabular-nums; }
.mp-gif { position: absolute; top: 4px; left: 4px; padding: 1px 5px; border-radius: 5px; background: rgb(0 0 0 / .6); color: #fff; font-size: calc(10 / 16 * 1rem); font-weight: 800; letter-spacing: .05em; pointer-events: none; }
/* The counts over the tile let a click or a tap through to it (they're only words), as the chat's do; a real button in
   them would still take its own. Always there, so they can change in place: empty, nothing shows. */
.mp-badges { position: absolute; left: 4px; bottom: 4px; z-index: 1; display: flex; gap: 4px; max-width: calc(100% - 8px); pointer-events: none; }
.mp-badges:empty { display: none; }
.mp-badges :is(button, a) { pointer-events: auto; }
/* A spoiler, or a photo the word filter blurs: blurred under a cover until it's clicked (it loads behind it all the same). */
.mp-tile.spoiler:not(.revealed) > :not(.mp-cover), .mp-tile.veiled > :not(.mp-cover) { filter: blur(14px); }
.mp-cover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 5px; background: rgb(0 0 0 / .3); color: #fff; font-size: calc(12 / 16 * 1rem); font-weight: 700; }
.mp-cover:hover { background: rgb(0 0 0 / .42); }
.mp-cover .ic { width: 15px; height: 15px; }
/* (Always there, even with nothing in it: thumbnails the word filter hides load as it comes near the screen.) */
.mp-foot { min-height: 1px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 4px; }
.mp-loading { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--muted); font-size: calc(13 / 16 * 1rem); }
.mp-foot .panel-empty { padding-top: 24px; }
/* The header button is for wider screens: a phone's header is full, and the ⋯ menu has Photos & videos too. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  #main-head .head-media { display: none; }
}

/* The viewer (app.js openViewer), around the picture: videos play in the stage (a big one waits for Play), Jump to
   message is in the bar, and a photo's comments and tags (photo-notes.js) are a column on the right that the
   next-picture button keeps clear of. */
.viewer-body { flex: 1; min-height: 0; display: flex; position: relative; }
.viewer-body > .viewer-stage { flex: 1; min-width: 0; }
.viewer-video { max-width: 100%; max-height: 100%; border-radius: 6px; background: #000; }
.viewer-play { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; font-size: calc(14 / 16 * 1rem); font-weight: 600; }
.viewer-play:hover { background: rgb(255 255 255 / .2); }
.viewer-play .ic { width: 20px; height: 20px; }
.viewer-stage.loading-full[data-loading]::after { content: attr(data-loading); }
.viewer-bar .viewer-jump { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin-right: 4px; border-radius: 8px; background: rgb(255 255 255 / .08); color: #d8d3e2; font-size: calc(13 / 16 * 1rem); font-weight: 600; white-space: nowrap; }
.viewer-bar .viewer-jump:hover { background: rgb(255 255 255 / .16); color: #fff; }
.viewer-bar .viewer-jump .ic { width: 15px; height: 15px; }
.viewer-bar .viewer-side-btn.active { background: rgb(255 255 255 / .14); color: #fff; }
.viewer-side-btn .badge { background: var(--accent); }
.viewer-side { flex: none; width: 340px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: #17141d; border-left: 1px solid rgb(255 255 255 / .08); color: #f2eff7; }
.viewer.side-open .viewer-nav.next { right: 354px; }
/* Opened from inside the viewer (its More menu, its side panel's menus, popups and questions) and toasts: over it. */
#layer > .over-viewer { z-index: 85; }
body:has(> .viewer:not(.closing)) #toasts { z-index: 86; }
/* PHONE LAYOUT: the side panel is a sheet along the bottom, and it scrolls with a finger. It takes its own room: the
   picture fits in what's left above it rather than going on under it. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .viewer-body { flex-direction: column; }
  .viewer-side { position: relative; flex: none; z-index: 3; width: auto; max-height: 60%; border-left: 0; border-top: 1px solid rgb(255 255 255 / .1); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 30px rgb(0 0 0 / .5); touch-action: pan-y; }
  /* The sheet keeps clear of the home bar itself: the picture above it doesn't have to, nor does its loading label. */
  .viewer.side-open .viewer-stage { padding-bottom: 0; }
  .viewer.side-open .viewer-stage.loading-full::after { bottom: 14px; }
  .viewer-video { border-radius: 0; }
}
/* (end of the Photos & videos panel) */



/* ======================================================================= Photo comments and tags (photo-notes.js) */
/* On each photo or video of a message with several: its counts in the top-left corner (left free by the download button
   and the ALT chip), and on hover or focus a "Comment on this photo" button beside the download button. Under an
   unopened spoiler the counts are blurred like everything else on it, and the button isn't there at all (no key or
   screen reader can reach it): it would open the picture without the reveal. */
.pn-slot { position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none; }
.pn-slot:empty { display: none; }
.pn-badges { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; font-size: calc(11.5 / 16 * 1rem); font-weight: 700; line-height: 18px; }
.pn-badges[hidden] { display: none; }
.pn-badge { display: inline-flex; align-items: center; gap: 3px; }
.pn-badge .ic, .pn-badge svg { width: 12px; height: 12px; }
.pn-comment-btn { position: absolute; top: 8px; right: 46px; 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; }
.pn-comment-btn .ic, .pn-comment-btn svg { width: 17px; height: 17px; }
.pn-comment-btn:hover { background: rgb(0 0 0 / .75); }
.att-media:hover .pn-comment-btn, .att-media:focus-within .pn-comment-btn { opacity: 1; }
.att-media.gone .pn-comment-btn, .att-media.gone .pn-slot { display: none; }
.att-spoiler:not(.revealed) .pn-comment-btn { display: none; }
/* A video (or a big picture) waiting for a click shows its name along the top: the counts go under its button. */
.att-media.click-to-load:not(.tile) .pn-slot { position: static; display: block; margin: 6px 12px 0; }
.msg-files.many .att-media.tile .pn-slot { top: 4px; left: 4px; }
.msg-files.many .att-media.tile .pn-badges { padding: 1px 5px; gap: 4px; font-size: calc(10.5 / 16 * 1rem); line-height: 16px; }
.msg-files.many .att-media.tile .pn-comment-btn { top: 4px; right: 36px; width: 28px; height: 28px; }

/* The quote of a comment on one photo: a thumbnail of it, big enough to tell which photo it was, and "<name>’s photo". */
.pn-quote-thumb { flex: none; width: 32px; height: 32px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--hover); border: 1px solid var(--line-2); color: var(--muted); }
.pn-quote-thumb .ic, .pn-quote-thumb svg { width: 12px; height: 12px; }
.pn-quote-thumb.loaded { border-color: transparent; }
.pn-quote-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-reply-name { font-weight: 600; color: var(--text-2); }
.msg-reply.pn-reply:hover .pn-reply-name { color: var(--text); }

/* The picture viewer's side panel for one photo (the viewer gives it a place: a column about 340px wide beside the
   picture, or a bottom sheet on a phone). Its comment list scrolls between the tags and the box when the panel has a
   height of its own (the column); in a sheet that grows with what's in it, the sheet scrolls instead. */
/* The viewer is dark in every theme, so is the panel: the dark theme's colours, whatever the app's. */
.pn-side {
  --field: 17 15 24; --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); color-scheme: dark;
  display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; padding: 14px; color: var(--text); font-size: calc(14 / 16 * 1rem); touch-action: pan-y; overflow-wrap: anywhere;
}
.pn-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pn-tags { flex: none; }
.pn-comments { flex: 1 1 auto; min-height: 0; }
.pn-h { display: flex; align-items: center; gap: 6px; font-size: calc(12.5 / 16 * 1rem); font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.pn-h .ic, .pn-h svg { width: 14px; height: 14px; }
.pn-count { color: var(--text-2); }
.pn-count:empty { display: none; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* A label is someone's words: kept apart from the text around it (unicode-bidi), so it can't turn that around. */
.pn-chip { height: 28px; padding: 0 4px 0 10px; font-size: calc(13 / 16 * 1rem); color: var(--text); max-width: 100%; }
.pn-chip:not(:has(.chip-x)) { padding-right: 10px; }
.pn-chip-text, .pn-suggestion { unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pn-add { display: flex; gap: 6px; align-items: center; }
.pn-add .input { height: 36px; }
.pn-add .btn { flex: none; }
.pn-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-suggest[hidden] { display: none; }
.chip.pn-suggestion { height: 26px; padding: 0 10px; font-size: calc(12.5 / 16 * 1rem); font-weight: 600; max-width: 100%; display: inline-block; line-height: 24px; }
.pn-note { margin: 0; font-size: calc(12.5 / 16 * 1rem); color: var(--muted); }
.pn-note[role=status]:not(:empty) { color: var(--danger); }
/* "Removed the tag …": said to screen readers only (the chips show it). */
.pn-said { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pn-empty { color: var(--muted); font-size: calc(13 / 16 * 1rem); list-style: none; }
.pn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 48px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.pn-c { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: start; }
.pn-c-body { min-width: 0; }
.pn-c-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pn-c-name { font-size: calc(13.5 / 16 * 1rem); }
.pn-c-time { font-size: calc(11.5 / 16 * 1rem); color: var(--muted); }
.pn-c-text { color: var(--msg-text); font-size: calc(14 / 16 * 1rem); line-height: 1.4; margin-top: 1px; }
.pn-c-jump { color: var(--muted); opacity: .7; }
.pn-c:hover .pn-c-jump, .pn-c-jump:focus-visible { opacity: 1; }
.pn-more { align-self: flex-start; font-size: calc(13 / 16 * 1rem); }
.pn-more[hidden] { display: none; }
.pn-compose { flex: none; display: flex; align-items: flex-end; gap: 6px; }
textarea.pn-box { flex: 1; min-height: 38px; max-height: 140px; padding: 8px 11px; resize: none; line-height: 1.4; }

@media (pointer: coarse) {
  /* Nothing hovers on a touch screen: tapping a picture opens the viewer, whose side panel has the comments. */
  .pn-comment-btn { display: none; }
  .pn-chip .chip-x { width: 32px; height: 32px; }
  .pn-add .input { height: 44px; }
  .pn-c-jump { opacity: 1; width: 40px; height: 40px; }
}

/* (end of photo comments and tags) */



/* ======================================================================= Chat backgrounds (chat-look.js) */
/* The "Chat background" dialog: a preview of what's picked (with two sample bubbles, to judge how readable it is), the
   presets in the same tiles as Settings → Appearance, your own picture, and Dim for a picture. */
.cl-dialog { display: grid; gap: 12px; }
.cl-preview { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: rgb(var(--bg)); box-shadow: inset 0 0 0 1px var(--line-2); }
.cl-preview .cl-sw, .cl-preview .cl-shade { position: absolute; inset: 0; }
.cl-preview .cl-shade { background: rgb(var(--dim-rgb)); opacity: 0; transition: opacity .15s; }
.cl-none { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-size: calc(13 / 16 * 1rem); color: var(--text-2); }
.cl-bubbles { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cl-preview.empty .cl-bubbles { display: none; }
.cl-bubble { max-width: 70%; padding: 6px 11px; border-radius: 12px; font-size: calc(13 / 16 * 1rem); color: var(--text); background: rgb(var(--s1) / .88); box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.cl-bubble.mine { align-self: flex-end; color: var(--on-accent); background: var(--accent); }
.cl-dialog .bg-tile:disabled { opacity: .6; transform: none; cursor: default; }
.cl-status { margin: 0; font-size: calc(13 / 16 * 1rem); color: var(--text-2); }
.cl-status:empty { display: none; }
.cl-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: calc(13 / 16 * 1rem); color: var(--text-2); }
.cl-note .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
@media (max-width: 760px) {
  .cl-preview { height: 120px; }
}

/* (end of chat backgrounds) */



/* ======================================================================= The side view (side-view.js) */
/* "Pinned to side": as wide as a thread (the same resize handle sets it), its cards newest first, each saying who, when
   and where; a picture pinned on its own as wide as the panel, a message's pictures small. */
#members[data-mode='side'] { width: var(--thread-w); }
.sv-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 16px; }
.sv-list { display: flex; flex-direction: column; gap: 10px; }
.sv-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); }
.sv-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(12 / 16 * 1rem); color: var(--muted); }
.sv-meta .uname { min-width: 0; font-size: calc(13 / 16 * 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-when { flex: none; white-space: nowrap; }
.sv-where { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: calc(12 / 16 * 1rem); color: var(--muted); }
.sv-where .ic { width: 13px; height: 13px; flex: none; }
.sv-where span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sv-text { font-size: calc(14 / 16 * 1rem); color: var(--msg-text); overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
.sv-veil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: calc(13.5 / 16 * 1rem); color: var(--muted); }
.sv-veil .ic { width: 15px; height: 15px; }
/* Its flags, as on its row in the chat (a bot's, an older message, a key or signature that doesn't check out, the
   server having moved it): each as wide as its words, not the card. */
.sv-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-flags .msg-flag { margin-top: 0; }
.sv-meta .bot-tag { flex: none; }
/* A card with nothing in it but a line (loading, gone, hidden while sharing your screen): the × in its corner. */
.sv-note { display: flex; align-items: center; gap: 8px; min-height: 26px; padding-right: 30px; font-size: calc(13.5 / 16 * 1rem); color: var(--muted); }
.sv-note .ic { width: 16px; height: 16px; flex: none; }
.sv-card > .sv-x { position: absolute; top: 8px; right: 8px; }
.sv-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-actions .btn .ic { width: 14px; height: 14px; }
/* The picture pinned on its own: the panel's width, never taller than most of the screen. */
.sv-pic { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-height: 70vh; min-height: 48px; overflow: hidden; border-radius: 10px; background: var(--active); }
.sv-pic .sv-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; cursor: zoom-in; }
.sv-pic .sv-img { display: block; width: 100%; height: 100%; max-height: 70vh; object-fit: contain; }
.sv-pic.video { min-height: 140px; background: #16131c; }
.sv-video { display: block; width: 100%; max-height: 70vh; background: #000; }
.sv-play { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgb(255 255 255 / .14); color: #fff; font-size: calc(13.5 / 16 * 1rem); font-weight: 600; }
.sv-play:hover { background: rgb(255 255 255 / .22); }
.sv-play .ic { width: 18px; height: 18px; }
/* A message's pictures and videos: small squares, as in Photos & videos. */
.sv-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.sv-thumbs.one { grid-template-columns: minmax(0, 200px); }
.sv-tile { position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden; border-radius: 8px; background: var(--active); }
.sv-tile .sv-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; cursor: pointer; }
.sv-tile .sv-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-tile.video { background: #16131c; color: #d8d3e2; }
.sv-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sv-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; font-size: calc(11.5 / 16 * 1rem); color: var(--muted); font-variant-numeric: tabular-nums; }
.sv-tile.video .sv-ph { color: #d8d3e2; }
.sv-ph .ic { width: 22px; height: 22px; }
/* A spoiler: blurred under a cover until it's clicked (it loads behind it all the same). */
.sv-pic.spoiler > :not(.sv-cover), .sv-tile.spoiler > :not(.sv-cover) { filter: blur(14px); }
.sv-cover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 5px; background: rgb(0 0 0 / .3); color: #fff; font-size: calc(12 / 16 * 1rem); font-weight: 700; }
.sv-cover:hover { background: rgb(0 0 0 / .42); }
.sv-cover .ic { width: 15px; height: 15px; }
.sv-files { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sv-file { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(13 / 16 * 1rem); }
.sv-file > .ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.sv-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-size { flex: none; font-size: calc(12 / 16 * 1rem); color: var(--muted); font-variant-numeric: tabular-nums; }
.sv-empty[hidden] { display: none; }
/* The header button's count: how many things are pinned, not something new, so not in the alert colour. */
.icon-btn.with-badge .sv-count { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgb(var(--s1)); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 700 calc(10 / 16 * 1rem)/16px var(--font); text-align: center; pointer-events: none; }
/* The header button is for wider screens: a phone's header is full, and the ⋯ menu has Pinned to side too. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  #main-head .head-side { display: none; }
}

/* (end of the side view) */

/* Nicknames only you see (personal-names.js): the note under the name on a profile, and the settings list. */
.pc-personal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: calc(12.5 / 16 * 1rem); color: var(--text-2); }
.pc-personal .pnick-badge { padding: 1px 7px; border-radius: 999px; background: rgb(var(--accent-rgb) / .16); color: var(--accent-ink, var(--accent)); font-weight: 700; font-size: calc(11 / 16 * 1rem); letter-spacing: .02em; }
.pc-personal .pnick-real { overflow-wrap: anywhere; }
.mys-personal { margin-top: 6px; }
.pnick-list .pnick-name { font-weight: 700; }

/* Emoji upload (emoji-upload.js): each picked picture as it will be stored, at the sizes it's shown. */
.pending-emoji { flex-wrap: wrap; }
.pending-emoji .ep-sizes { display: flex; align-items: flex-end; gap: 6px; }
.pending-emoji .ep-sizes img.cemoji { margin: 0; }
.pending-emoji .ep-sizes .s-inline { width: 22px; height: 22px; }
.pending-emoji .ep-sizes .s-jumbo { width: 48px; height: 48px; }
.pending-emoji .ep-info { flex-basis: 100%; font-size: calc(12 / 16 * 1rem); color: var(--muted); }
.pending-emoji .ep-info.bad { color: var(--danger, #e5484d); }
.pending-emoji.bad { border-color: var(--danger, #e5484d); }

/* ------------------------------------------------------------------ soundboard (v25: soundboard.js) */
.sb-popover { width: min(380px, calc(100vw - 16px)); }
.sb-pop { display: flex; flex-direction: column; gap: 10px; padding: 12px; max-height: min(70vh, 520px); overflow-y: auto; border-radius: var(--r-lg); }
.sb-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-tab { padding: 4px 10px; border-radius: 999px; background: var(--hover); color: var(--text-2); font-size: calc(12.5 / 16 * 1rem); font-weight: 600; border: 1px solid transparent; }
.sb-tab.active { background: var(--accent); color: var(--on-accent); }
.sb-board { display: grid; gap: 8px; }
.sb-board.sb-grid.sb-size-sm, .sb-edit-list.sb-grid.sb-size-sm { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.sb-board.sb-grid.sb-size-md, .sb-edit-list.sb-grid.sb-size-md { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sb-board.sb-grid.sb-size-lg, .sb-edit-list.sb-grid.sb-size-lg { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sb-board.sb-list, .sb-edit-list.sb-list { grid-template-columns: 1fr; }
.sb-btn {
  --sb-color: #f2a541; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  padding: 10px 6px; border-radius: 12px; color: var(--text); font-weight: 600; font-size: calc(12.5 / 16 * 1rem);
  background: color-mix(in srgb, var(--sb-color) 22%, transparent); border: 1px solid color-mix(in srgb, var(--sb-color) 55%, transparent);
  transition: transform .1s, background .12s;
}
.sb-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--sb-color) 34%, transparent); }
.sb-btn:active:not(:disabled) { transform: scale(.96); }
.sb-btn:disabled { opacity: .5; cursor: not-allowed; }
.sb-btn.playing { box-shadow: 0 0 0 2px var(--sb-color); }
.sb-emoji { font-size: calc(22 / 16 * 1rem); line-height: 1; }
.sb-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-size-sm .sb-btn { padding: 6px 4px; font-size: calc(11.5 / 16 * 1rem); }
.sb-size-sm .sb-emoji { font-size: calc(17 / 16 * 1rem); }
.sb-size-lg .sb-btn { padding: 16px 8px; font-size: calc(14 / 16 * 1rem); }
.sb-size-lg .sb-emoji { font-size: calc(30 / 16 * 1rem); }
.sb-list .sb-btn { flex-direction: row; justify-content: flex-start; padding: 8px 12px; gap: 10px; }
.sb-empty { color: var(--muted); font-size: calc(13 / 16 * 1rem); grid-column: 1 / -1; list-style: none; }
.sb-why { margin: 0; }
.sb-pages { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.sb-edit-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sb-edit-item { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 14px; border: 1px dashed transparent; cursor: grab; }
.sb-list .sb-edit-item { flex-direction: row; align-items: center; }
.sb-list .sb-edit-item .sb-btn { flex: 1; }
.sb-edit-item.dragging { opacity: .5; }
.sb-edit-item.drop { border-color: var(--accent); }
.sb-edit-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.sb-edit-tools select { max-width: 110px; }
.sb-muted { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sb-muted li { display: flex; justify-content: space-between; gap: 8px; }
/* Someone's sound is playing in the call. A call tile's own ring is its outline (green while they talk), so the glow
   goes with it: talking and playing a sound at once shows both. */
.board-playing { box-shadow: 0 0 0 2px var(--board), 0 0 14px rgb(var(--board-rgb) / .55); }
.cs-tile.board-playing { outline-color: var(--board); box-shadow: 0 0 0 3px rgb(var(--board-rgb) / .3), 0 0 16px rgb(var(--board-rgb) / .5); }
.cs-tile.speaking.board-playing { outline-color: var(--ok); box-shadow: 0 0 0 3px rgb(63 207 131 / .22), 0 0 0 5px rgb(var(--board-rgb) / .75), 0 0 18px rgb(var(--board-rgb) / .5); }
.vol-pop .toggle-row.sm { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 2px; font-size: calc(13 / 16 * 1rem); }

/* ------------------------------------------------------------------ profile extras (v25) */
.pc-banner.bfx { background: linear-gradient(120deg, var(--b1), var(--b2)); }
.pc-banner.bfx-flow { background: linear-gradient(120deg, var(--b1), var(--b2), var(--b1), var(--b2)); background-size: 300% 300%; animation: bfx-flow 9s ease-in-out infinite alternate; }
.pc-banner.bfx-aurora {
  background: radial-gradient(60% 120% at 20% 110%, color-mix(in srgb, var(--b2) 85%, transparent), transparent 70%),
    radial-gradient(50% 100% at 80% -10%, color-mix(in srgb, var(--b2) 60%, white 10%), transparent 70%), var(--b1);
  background-size: 160% 160%; animation: bfx-flow 12s ease-in-out infinite alternate;
}
/* Stripes that slide without a jump or a seam: at 115deg, stripes 43.5px apart repeat every 48px across (43.5 /
   sin 115deg), so the picture is one 48px-wide tile, repeated, and the loop moves it exactly one tile. */
.pc-banner.bfx-stripes { background: repeating-linear-gradient(115deg, var(--b1) 0 21.75px, var(--b2) 21.75px 43.5px) 0 0 / 48px 100%; animation: bfx-stripes 6s linear infinite; }
@keyframes bfx-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes bfx-stripes { from { background-position: 0 0; } to { background-position: 48px 0; } }
/* Moving banners hold still for people who asked for less motion (the rule further down stops every animation; this
   also puts them back where they start rather than wherever the cut-short loop ends). */
@media (prefers-reduced-motion: reduce) { .pc-banner.bfx-flow, .pc-banner.bfx-aurora, .pc-banner.bfx-stripes { animation: none; } }
html.reduce-motion :is(.pc-banner.bfx-flow, .pc-banner.bfx-aurora, .pc-banner.bfx-stripes) { animation: none; }
.pcard.pc-text-sm .pc-inner { font-size: 92%; }
.pcard.pc-text-sm .pc-bio { font-size: calc(13 / 16 * 1rem); }
.pcard.pc-text-lg .pc-bio, .pcard.pc-text-lg .pc-about { font-size: calc(15.5 / 16 * 1rem); }
.pcard.pc-text-lg .pc-name { font-size: calc(24 / 16 * 1rem); }
.pcard.pc-text-xl .pc-bio, .pcard.pc-text-xl .pc-about { font-size: calc(17 / 16 * 1rem); }
.pcard.pc-text-xl .pc-name { font-size: calc(27 / 16 * 1rem); }
.pc-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc-fav { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 10px; background: rgb(255 255 255 / .07); min-width: 0; }
.pc-fav-emoji { font-size: calc(20 / 16 * 1rem); line-height: 1; }
.pc-fav-text { display: flex; flex-direction: column; min-width: 0; }
.pc-fav-label { font-size: calc(11 / 16 * 1rem); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pc-fav-value { font-size: calc(13.5 / 16 * 1rem); font-weight: 600; overflow-wrap: anywhere; }
.pc-songlink { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgb(0 0 0 / .25); color: inherit; text-decoration: none; }
.pc-songlink:hover { background: rgb(0 0 0 / .35); }
.pc-songlink-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #111; font-size: calc(15 / 16 * 1rem); flex: none; }
.pc-songlink-text { display: flex; flex-direction: column; min-width: 0; }
.pc-songlink-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-songlink-service { font-size: calc(12 / 16 * 1rem); color: var(--text-2); }
.pc-sounds { display: flex; flex-wrap: wrap; gap: 5px; }
.pc-sound { --sb-color: #f2a541; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: calc(12.5 / 16 * 1rem); font-weight: 600;
  background: color-mix(in srgb, var(--sb-color) 25%, transparent); border: 1px solid color-mix(in srgb, var(--sb-color) 50%, transparent); }
.section-order { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.section-order-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 10px; background: var(--hover); }
.section-order-row.off { opacity: .6; }
.fav-edit-row { grid-template-columns: 56px 1fr 1.4fr auto; }
.fav-edit-row .emoji-input { width: 100%; min-width: 0; } /* fills its 56px column instead of spilling into the gap */
/* Phones: the emoji and the label side by side, the value under them with the remove button (instead of the link
   rows' layout, where the first box takes a row to itself). */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .fav-edit-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .fav-edit-row .input:first-child { grid-column: auto; }
  .fav-edit-row .input:nth-child(3) { grid-column: 1 / -2; }
  .fav-edit-row > :last-child { grid-column: -2 / -1; grid-row: 1 / span 2; align-self: center; }
}

/* Avatar decorations: worn on top of the avatar, never clipped by its shape. */
.av.has-deco { overflow: visible; }
.av-deco { position: absolute; z-index: 3; pointer-events: none; line-height: 1; font-size: calc(var(--size) * .3); }
.deco-crown, .deco-headphones { left: 50%; top: calc(var(--size) * -.2); transform: translateX(-50%) rotate(-8deg); }
.deco-headphones { font-size: calc(var(--size) * .42); top: calc(var(--size) * -.16); transform: translateX(-50%); }
.deco-flowers { left: 50%; bottom: calc(var(--size) * -.1); transform: translateX(-50%); font-size: calc(var(--size) * .22); white-space: nowrap; }
.deco-hearts { right: calc(var(--size) * -.08); top: calc(var(--size) * -.06); animation: deco-bob 2.4s ease-in-out infinite; }
.deco-flames { left: 50%; bottom: calc(var(--size) * -.14); transform: translateX(-50%); font-size: calc(var(--size) * .34); animation: deco-flicker 1.2s ease-in-out infinite; }
.deco-leaves { left: calc(var(--size) * -.08); bottom: calc(var(--size) * -.04); font-size: calc(var(--size) * .24); }
.deco-stars { inset: calc(var(--size) * -.12); display: flex; justify-content: space-between; align-items: flex-start; font-size: calc(var(--size) * .2); color: #ffe27a; animation: ring-spin-deco 8s linear infinite; }
.deco-cat-ears::before, .deco-cat-ears::after, .deco-horns::before, .deco-horns::after {
  content: ''; position: absolute; top: calc(var(--size) * -.14); width: calc(var(--size) * .3); height: calc(var(--size) * .3);
  background: var(--ring, #f2a541); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.deco-cat-ears, .deco-horns { inset: 0; }
.deco-cat-ears::before { left: calc(var(--size) * .04); transform: rotate(-18deg); }
.deco-cat-ears::after { right: calc(var(--size) * .04); transform: rotate(18deg); }
.deco-horns::before, .deco-horns::after { background: #d6343f; width: calc(var(--size) * .2); clip-path: polygon(40% 0, 100% 100%, 0 100%); }
.deco-horns::before { left: calc(var(--size) * .12); transform: rotate(-24deg); }
.deco-horns::after { right: calc(var(--size) * .12); transform: rotate(24deg) scaleX(-1); }
.deco-halo { left: 50%; top: calc(var(--size) * -.16); width: calc(var(--size) * .62); height: calc(var(--size) * .16); transform: translateX(-50%); border-radius: 50%;
  border: max(2px, calc(var(--size) * .045)) solid #ffe27a; box-shadow: 0 0 calc(var(--size) * .12) #ffe27a; }
.deco-sparkle-frame { inset: calc(var(--size) * -.07); border-radius: 50%; padding: max(2px, calc(var(--size) * .04));
  background: conic-gradient(from var(--spin, 0deg), #fff 0 4%, transparent 4% 25%, #ffe27a 25% 29%, transparent 29% 50%, #fff 50% 54%, transparent 54% 75%, #b07cff 75% 79%, transparent 79%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ring-spin 5s linear infinite; }
.av.shape-rounded .deco-sparkle-frame { border-radius: 30%; }
.av.shape-square .deco-sparkle-frame, .av.shape-hexagon .deco-sparkle-frame { border-radius: 14%; }
@keyframes deco-bob { 50% { transform: translateY(-15%); } }
@keyframes deco-flicker { 50% { transform: translateX(-50%) scale(1.08); opacity: .85; } }
@keyframes ring-spin-deco { to { transform: rotate(360deg); } }

/* ---- Chat | Reels tabs, and the Reels tab (reels-ui.js, docs/design/SCROLL-TOGETHER.md) */
.conv-tabs { display: flex; gap: 4px; padding: 6px 12px 0; flex: none; }
.conv-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: calc(13 / 16 * 1rem); font-weight: 600; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.conv-tab .ic { width: 15px; height: 15px; }
.conv-tab:hover { color: var(--text); background: rgb(var(--s3) / .5); }
.conv-tab.active { color: var(--text); background: rgb(var(--accent-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .4); }
.reels-host { flex: 1; min-height: 0; }
.reels-layer { position: fixed; z-index: 14; display: flex; flex-direction: column; background: rgb(var(--s2)); color: var(--text); overflow: hidden; }
.reels-layer.full { inset: 0; z-index: 28; background: #000; color: #f4f1fa; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.reels-top { display: none; align-items: center; gap: 6px; padding: 6px 8px; flex: none; }
.reels-layer.full .reels-top { display: flex; }
.reels-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.reels-title span { font-size: calc(12 / 16 * 1rem); opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reels-layer.full .icon-btn { color: #fff; }
.reels-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 12px; flex: none; min-height: 44px; }
.reels-bar:empty { display: none; }
.reels-sub { font-size: calc(12 / 16 * 1rem); color: var(--muted); }
.reels-layer.full .reels-sub { color: rgb(255 255 255 / .7); }
.reels-with { font-size: calc(13 / 16 * 1rem); font-weight: 600; }
.reels-avatars { display: flex; }
.reels-avatars > * { margin-right: -6px; box-shadow: 0 0 0 2px rgb(var(--s2)); border-radius: 50%; }
.reels-manual { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.reels-manual .btn.active { background: rgb(var(--accent-rgb) / .18); }
.reels-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.reels-layer.full .reels-body { grid-template-columns: minmax(0, 1fr); }
.reels-main { position: relative; min-height: 0; min-width: 0; }
.reels-feed { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; }
.reels-feed::-webkit-scrollbar { display: none; }
.reel-card { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 10px 0; box-sizing: border-box; }
.reels-layer.full .reel-card { padding: 0; }
.reel-frame { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 10px; }
.reel-stage { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: calc(100vw - 32px); border-radius: 14px; overflow: hidden; background: #000; color: #f4f1fa; }
.reels-layer.full .reel-frame { width: 100%; }
.reels-layer.full .reel-stage { width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
.reel-stage .soc-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel-info { position: absolute; left: 0; bottom: 0; width: calc(100% - 0px); max-width: min(100%, 420px); padding: 40px 64px 12px 12px; box-sizing: border-box; pointer-events: none; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / .7);
  background: linear-gradient(transparent, rgb(0 0 0 / .55)); border-radius: 0 0 14px 14px; }
.reel-frame:not(:has(.soc-frame)) .reel-info { background: none; }
.reel-who { display: flex; align-items: center; gap: 8px; font-size: calc(13.5 / 16 * 1rem); }
.reel-who time { font-size: calc(12 / 16 * 1rem); opacity: .8; }
.reel-caption { margin-top: 4px; font-size: calc(13 / 16 * 1rem); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 12px; }
.reels-layer.full .reel-actions { position: absolute; right: 6px; bottom: 90px; z-index: 1; }
.reel-act { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; border-radius: 22px; border: 0; cursor: pointer;
  background: rgb(var(--s3) / .8); color: var(--text); font-size: calc(11.5 / 16 * 1rem); font-weight: 700; text-decoration: none; }
.reels-layer.full .reel-act { background: rgb(0 0 0 / .45); color: #fff; }
.reel-act.mine { box-shadow: inset 0 0 0 2px var(--accent); }
.reel-act .ic { width: 20px; height: 20px; }
.reel-act .r-emoji { font-size: calc(18 / 16 * 1rem); width: 20px; height: 20px; }
.reel-sound, .reel-note { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 0;
  background: rgb(0 0 0 / .6); color: #fff; font-size: calc(12 / 16 * 1rem); font-weight: 600; cursor: pointer; }
.reel-note { cursor: default; right: 10px; }
.reel-sound .ic { width: 15px; height: 15px; }
.reels-cover, .reels-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; text-align: center; }
.reels-cover { background: rgb(0 0 0 / .78); color: #f4f1fa; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.reels-cover-in, .reels-empty-in { max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.reels-cover-in strong { font-size: calc(18 / 16 * 1rem); }
.reels-cover-in p, .reels-empty-in p { margin: 0; font-size: calc(13.5 / 16 * 1rem); line-height: 1.45; }
.reels-cover .muted-p { color: rgb(255 255 255 / .7); }
.reels-count { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; font-size: clamp(32px, 10vw, 96px); font-weight: 800; color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / .8); background: rgb(0 0 0 / .25); }
.reels-side { display: flex; flex-direction: column; gap: 14px; padding: 12px 14px; border-left: 1px solid var(--line); overflow-y: auto; }
.reels-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.reels-pos { font-variant-numeric: tabular-nums; font-size: calc(13 / 16 * 1rem); color: var(--muted); min-width: 60px; text-align: center; }
.reels-add { display: flex; flex-direction: column; gap: 8px; }
.reels-limits { margin-top: auto; }
/* phone: the side is a sheet that + opens over the bottom of the feed */
.reels-layer.full .reels-side { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; border: 0; border-radius: 16px 16px 0 0; background: rgb(var(--s1)); color: var(--text); box-shadow: var(--pop-shadow); padding-bottom: max(14px, env(safe-area-inset-bottom)); max-height: 70%; }
.reels-layer.full .reels-side.open { display: flex; }
.reels-layer.full .reels-nav { display: none; }
.reels-layer:not(.full) .reels-add-btn { display: none; }
@media (max-width: 1000px) { .reels-layer:not(.full) .reels-body { grid-template-columns: minmax(0, 1fr) 220px; } }
/* The countdown never shows over the "Tap to start watching" cover. */
.reels-cover:not([hidden]) ~ .reels-count { display: none !important; }
/* Paste and drop (reels-ui.js addLinks): an undo bar before anything is sent; a copied link offered (desktop app). */
.reels-undo, .reels-offer { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
  padding: 8px 8px 8px 14px; border-radius: 12px; background: rgb(var(--s1)); color: var(--text); box-shadow: var(--pop-shadow); font-size: calc(13.5 / 16 * 1rem); }
.reels-offer { bottom: auto; top: 12px; }
.reels-layer.dropping .reels-main::after { content: 'Drop a TikTok or Instagram link'; position: absolute; inset: 8px; z-index: 6; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 14px;
  background: rgb(0 0 0 / .55); color: #fff; font-weight: 700; pointer-events: none; }
/* The share picker and the import screen (app.js openSharePicker, openReelsImport). */
.share-pick .share-what { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgb(var(--s3) / .5); font-size: calc(13.5 / 16 * 1rem); overflow: hidden; }
.share-pick .share-what span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-list { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 420px); overflow-y: auto; margin: 0 -6px; }
.share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 48px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.share-row:hover, .share-row:focus-visible { background: rgb(var(--s3) / .6); }
.share-row[disabled] { opacity: .5; cursor: progress; }
.share-row .share-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgb(var(--accent-rgb) / .16); color: var(--accent-ink); }
.share-row .share-ic .ic { width: 16px; height: 16px; }
.share-row .share-name { display: flex; flex-direction: column; min-width: 0; }
.share-row .share-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14 / 16 * 1rem); }
.share-row .share-name span { font-size: calc(12 / 16 * 1rem); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-drop { display: grid; place-items: center; gap: 6px; padding: 22px 14px; border: 2px dashed var(--line); border-radius: 14px; text-align: center; cursor: pointer; }
.import-drop.over { border-color: var(--accent); background: rgb(var(--accent-rgb) / .08); }
.import-found { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--s3) / .5); }
.import-found strong { font-size: calc(18 / 16 * 1rem); }
.import-progress { height: 6px; border-radius: 3px; background: rgb(var(--s3)); overflow: hidden; }
.import-progress > div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.bookmarklet { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgb(var(--accent-rgb) / .16); color: var(--text); font-weight: 700; text-decoration: none; cursor: grab; }
.home-links { display: flex; gap: 8px; flex-wrap: wrap; }