/* ============================================================
   NEBULA — design system
   Sections: 1 reset · 2 background · 3 tokens · 4 atoms
             5 shell · 6 nav · 7 topbar · 8 cards · 9 auth
             10 home · 11 dms · 12 overlays · 13 transitions
             14 responsive · 15 a11y
   ============================================================ */

/* 1. reset ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

/* Icons are all 24x24 viewBoxes with no intrinsic size, so give them a
   text-relative default. Any container that needs a different size
   overrides this with a more specific selector. */
svg { width: 18px; height: 18px; flex: 0 0 auto; }

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection {
  background: color-mix(in srgb, var(--brand-1) 45%, transparent);
  color: #fff;
}

::placeholder { color: var(--faint); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: content-box; }

/* 2. background -------------------------------------------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* mixed from the theme's own stops, so the sky changes colour with it */
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in srgb, var(--brand-1) 24%, var(--bg-deep)) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 100%,
      color-mix(in srgb, var(--brand-3) 15%, var(--bg-deep)) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-void));
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  mix-blend-mode: screen;
}

.blob--a {
  width: 52vw; height: 52vw; min-width: 420px; min-height: 420px;
  top: -18vw; left: -10vw;
  background: radial-gradient(circle at 40% 40%, var(--brand-1), transparent 68%);
}

.blob--b {
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  bottom: -16vw; right: -8vw;
  background: radial-gradient(circle at 55% 45%, var(--brand-3), transparent 68%);
}

.blob--c {
  width: 34vw; height: 34vw; min-width: 300px; min-height: 300px;
  top: 34%; left: 52%;
  background: radial-gradient(circle at 50% 50%, var(--cyan), transparent 70%);
  opacity: .3;
}

/* star layer — stars injected by nebula-core.js */
.stars {
  position: absolute;
  inset: 0;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: .35;
  animation: twinkle var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  0%, 100% { opacity: .12; transform: scale(.7); }
  50%      { opacity: .85; transform: scale(1.25); }
}

/* faint grid for texture */
.sky__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 78%);
}

/* 3. tokens ------------------------------------------------ */
:root {
  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;

  --bg-void: #04050b;
  --bg-deep: #070a16;
  --panel: rgba(11, 16, 32, .78);
  --panel-solid: #0b1020;
  --panel-2: #101729;
  --elev: #141d33;
  --elev-hi: #1b2540;

  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .2);

  --text: #e9edf7;
  --muted: #99a2bd;
  --faint: #6a7391;

  --brand-1: #7c5cff;
  --brand-2: #c04bff;
  --brand-3: #ff4d9d;
  --cyan: #35e0ff;
  --ok: #37e0a0;
  --warn: #ffc53d;
  --danger: #ff5f6d;

  /* built from the three brand stops, so a theme only has to change those */
  --grad-brand: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 48%, var(--brand-3) 100%);
  --grad-brand-soft: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-1) 22%, transparent),
    color-mix(in srgb, var(--brand-3) 18%, transparent));
  --grad-line: linear-gradient(90deg, transparent, var(--brand-1), var(--brand-3), transparent);

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.85);
  --glow: 0 0 0 1px color-mix(in srgb, var(--brand-1) 30%, transparent),
          0 12px 40px -14px color-mix(in srgb, var(--brand-1) 55%, transparent);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.45, .05, .15, 1);

  --nav-w: 274px;
  --rail-w: 72px;
  --rail-w-collapsed: 60px;
  --mem-w: 248px;
  --topbar-h: 62px;
}

/* 3b. themes --------------------------------------------------
   Nebula is the default and lives in :root above, so a page with no theme
   set looks exactly like it always has. Each theme below only has to name
   its surfaces and its three brand stops - every gradient, glow and tint in
   the sheet is derived from those, so nothing else needs to change. */
[data-theme="midnight"] {
  --bg-void: #03060f;
  --bg-deep: #050b18;
  --panel: rgba(8, 18, 38, .78);
  --panel-solid: #081226;
  --panel-2: #0c1a33;
  --elev: #10203d;
  --elev-hi: #16294b;

  --line: rgba(140, 190, 255, .09);
  --line-2: rgba(140, 190, 255, .16);
  --line-3: rgba(140, 190, 255, .26);

  --text: #e6eefb;
  --muted: #8fa4c6;
  --faint: #61779b;

  --brand-1: #2f7bff;
  --brand-2: #22c8f0;
  --brand-3: #6ee7ff;
}

[data-theme="ember"] {
  --bg-void: #0a0603;
  --bg-deep: #120b06;
  --panel: rgba(32, 20, 11, .78);
  --panel-solid: #20140b;
  --panel-2: #2b1b0f;
  --elev: #362315;
  --elev-hi: #452e1b;

  --line: rgba(255, 205, 150, .09);
  --line-2: rgba(255, 205, 150, .17);
  --line-3: rgba(255, 205, 150, .27);

  --text: #f7ece2;
  --muted: #c4a992;
  --faint: #93775f;

  --brand-1: #ff7a18;
  --brand-2: #ff3d6e;
  --brand-3: #ffc247;
}

[data-theme="moss"] {
  --bg-void: #040806;
  --bg-deep: #07110c;
  --panel: rgba(12, 28, 20, .78);
  --panel-solid: #0c1c14;
  --panel-2: #10261b;
  --elev: #163024;
  --elev-hi: #1d3f2e;

  --line: rgba(150, 230, 190, .09);
  --line-2: rgba(150, 230, 190, .17);
  --line-3: rgba(150, 230, 190, .27);

  --text: #e8f5ee;
  --muted: #94b8a6;
  --faint: #678a78;

  --brand-1: #21c07a;
  --brand-2: #0fb9a8;
  --brand-3: #a8e05f;
}

[data-theme="orchid"] {
  --bg-void: #0b0410;
  --bg-deep: #140720;
  --panel: rgba(32, 13, 44, .78);
  --panel-solid: #200d2c;
  --panel-2: #2b1239;
  --elev: #38184a;
  --elev-hi: #48205e;

  --line: rgba(240, 180, 255, .10);
  --line-2: rgba(240, 180, 255, .18);
  --line-3: rgba(240, 180, 255, .28);

  --text: #f6ecfa;
  --muted: #bda2cc;
  --faint: #8d7399;

  --brand-1: #b14bff;
  --brand-2: #ff5cc8;
  --brand-3: #7ad7ff;
}

/* 4. atoms ------------------------------------------------- */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono { font-family: var(--mono); font-variant-ligatures: none; }
.srow__text { min-width: 0; }
.srow__label.mono {
  display: block; max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tiny { font-size: 11.5px; }
.small { font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: 4px; }
.row { display: flex; align-items: center; gap: 10px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* buttons */
.btn {
  --btn-bg: var(--elev);
  --btn-fg: var(--text);
  --btn-line: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .16s var(--ease-out), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .22s var(--ease),
              opacity .18s var(--ease);
}

.btn:hover { background: var(--elev-hi); border-color: var(--line-3); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--primary {
  --btn-line: transparent;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--brand-1) 85%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--brand-2) 90%, transparent);
  filter: brightness(1.07);
}

.btn--ghost { --btn-bg: transparent; --btn-line: transparent; color: var(--muted); }
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.06); color: var(--text); }

.btn--quiet { --btn-bg: rgba(255,255,255,.045); }

.btn--danger { --btn-bg: color-mix(in srgb, var(--danger) 16%, transparent);
               --btn-line: color-mix(in srgb, var(--danger) 40%, transparent);
               color: #ffd7da; }

.btn--lg { height: 50px; padding: 0 24px; font-size: 15.5px; border-radius: var(--r-lg); }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn--icon { width: 38px; padding: 0; }
.btn--block { width: 100%; }

/* spinner inside button */
.btn.is-busy { pointer-events: none; color: transparent !important; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.btn--primary.is-busy::after { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* form fields */
.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__wrap { position: relative; display: flex; align-items: center; }

.field__icon {
  position: absolute;
  left: 14px;
  color: var(--faint);
  pointer-events: none;
  transition: color .18s var(--ease);
}

.input {
  width: 100%;
  height: 46px;
  padding: 0 46px 0 44px;
  border-radius: var(--r-md);
  background: rgba(4, 6, 14, .6);
  border: 1px solid var(--line-2);
  color: var(--text);
  transition: border-color .18s var(--ease), box-shadow .2s var(--ease),
              background .18s var(--ease);
}

.input:hover { border-color: var(--line-3); }

.input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-1) 70%, transparent);
  background: rgba(4, 6, 14, .85);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 18%, transparent);
}

.field:focus-within .field__icon { color: var(--brand-2); }

.input--flush { padding-left: 14px; padding-right: 14px; }
.input--flush:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 14%, transparent); }
/* a flush input that carries the show/hide eye needs the room back on the right */
.field__wrap .input--flush { padding-right: 44px; }

.field__action {
  position: absolute;
  right: 8px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--faint);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.field__action:hover { color: var(--text); background: rgba(255,255,255,.07); }

.field.has-error .input { border-color: color-mix(in srgb, var(--danger) 65%, transparent); }
.field.has-error .field__label { color: #ffb3b9; }

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #ffb3b9;
}
.field.has-error .field__error { display: flex; }

.field__hint { font-size: 12.5px; color: var(--faint); }

/* checkbox */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px;
  color: var(--muted);
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1.5px solid var(--line-3);
  background: rgba(4,6,14,.5);
  display: grid;
  place-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.check__box svg { opacity: 0; transform: scale(.6); transition: opacity .16s var(--ease), transform .2s var(--ease-out); }
.check input:checked + .check__box {
  background: var(--grad-brand);
  border-color: transparent;
}
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--brand-1); outline-offset: 2px; }

/* a pickable row that carries a face: full width, name truncates */
.gmrow__row { display: flex; width: 100%; padding: 6px 4px; }
.gmrow__row:hover { color: var(--text); }
.gmrow__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* link */
.link {
  color: var(--cyan);
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .28s var(--ease-out), color .18s var(--ease);
}
.link:hover { color: #7fe9ff; background-size: 100% 1px; }

/* a URL inside a message: a real link, opening in a new tab */
.msg__link {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.msg__link:hover { color: #7fe9ff; text-decoration-color: currentColor; }

/* avatars */
.av {
  --size: 40px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  border-radius: 32%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: calc(var(--size) * .38);
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  overflow: hidden;
  /* a picture has to fill the shape and sit in the middle of it: without
     these it renders at its own size from the top left corner, which is why
     an uploaded face looked like a scrap of it */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.av--round { border-radius: 50%; }
.av--xs { --size: 22px; }
.av--sm { --size: 30px; }
.av--md { --size: 40px; }
.av--lg { --size: 52px; }
.av--xl { --size: 76px; }

/* with a presence dot in the corner, the initials move off it */
.av--has-presence { padding: 0 7% 9% 0; }

.av__presence {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: calc(var(--size) * .3);
  height: calc(var(--size) * .3);
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  border: 3px solid var(--panel-solid);
  background: var(--faint);
  box-sizing: content-box;
}
.av--round .av__presence { border-radius: 50%; }

.av__presence[data-status="online"]  { background: var(--ok); }
.av__presence[data-status="idle"]    { background: var(--warn); }
.av__presence[data-status="dnd"]     { background: var(--danger); }
.av__presence[data-status="offline"] { background: #4b5372; }

.av--status-border { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 3px var(--bg-void); }

/* pills + badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
}
.pill--brand {
  background: var(--grad-brand-soft);
  border-color: color-mix(in srgb, var(--brand-1) 35%, transparent);
  color: #d9d2ff;
}
.pill--ok    { background: color-mix(in srgb, var(--ok) 14%, transparent);
               border-color: color-mix(in srgb, var(--ok) 34%, transparent);
               color: #a9f5d3; }
.pill--warn  { background: color-mix(in srgb, var(--warn) 14%, transparent);
               border-color: color-mix(in srgb, var(--warn) 34%, transparent);
               color: #ffe0a3; }
.pill--danger{ background: color-mix(in srgb, var(--danger) 14%, transparent);
               border-color: color-mix(in srgb, var(--danger) 34%, transparent);
               color: #ffc0c6; }

.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--panel-solid);
}
.badge--ghost { background: rgba(255,255,255,.1); color: var(--muted); box-shadow: none; }
.badge--dot {
  min-width: 9px; width: 9px; height: 9px; padding: 0;
  background: var(--brand-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-3) 25%, transparent);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--brand-3) 18%, transparent);
  color: #ffc4dc;
  font-size: 11px;
  font-weight: 700;
}

/* divider */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

/* tooltip */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 90;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translate(-50%, 4px);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: #05070f;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .2s var(--ease-out);
}
[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
[data-tip-side="right"]::after { left: calc(100% + 10px); bottom: 50%; transform: translateY(50%) translateX(-4px); }
[data-tip-side="right"]:hover::after { transform: translateY(50%) translateX(0); }

/* the anchor was too near an edge, so the tip moves to the other side of it */
[data-tip].tip-below::after {
  bottom: auto;
  top: calc(100% + 9px);
  transform: translate(-50%, -4px);
}
[data-tip].tip-below:hover::after { transform: translate(-50%, 0); }
[data-tip-side="right"].tip-left::after {
  left: auto;
  right: calc(100% + 10px);
  transform: translateY(50%) translateX(4px);
}
[data-tip-side="right"].tip-left:hover::after { transform: translateY(50%) translateX(0); }

/* 5. shell ------------------------------------------------- */
.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail-w) var(--nav-w) minmax(0, 1fr) var(--mem-w);
  grid-template-rows: 100dvh;
  grid-template-areas: "rail nav main mem";
  overflow: hidden;
}

.app--no-mem {
  grid-template-columns: var(--rail-w) var(--nav-w) minmax(0, 1fr);
  grid-template-areas: "rail nav main";
}

.app--full { grid-template-rows: 100dvh; }

.main {
  grid-area: main;
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(6, 8, 18, .55);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.main--dms { grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.main--chat { grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }

/* 6. nav (sidebar) ------------------------------------------ */
.nav {
  grid-area: nav;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: rgba(5, 7, 15, .72);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border-right: 1px solid var(--line);
}

/* DM mode gains a pinned header + filter row above the list */
.nav--dms { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }

/* sidebar top: search + system tabs */
.nav__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 11px 11px 10px;
  border-bottom: 1px solid var(--line);
}
.nav__top .search { width: 100%; }

.nav__tabs { display: flex; flex-direction: column; gap: 2px; }

.nav__tab {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 550;
  transition: background .16s var(--ease), color .16s var(--ease);
  min-width: 0;
}
.nav__tab svg { flex: 0 0 auto; width: 19px; height: 19px; }
.nav__tab .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__tab:hover { background: rgba(255,255,255,.055); color: var(--text); }
.nav__tab.is-active {
  background: var(--grad-brand-soft);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-1) 32%, transparent);
}
.nav__tab .badge,
.nav__tab .badge--dot { margin-left: auto; }

/* "Direct Messages" header with the + button */
.nav__dmhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 9px 8px 11px;
}
.nav__dmhead h2 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav__dmhead .badge { box-shadow: none; }
.nav__dmhead .icon-btn { margin-left: 0; }

.nav__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}

.nav__section { display: flex; flex-direction: column; gap: 3px; }

/* Conversation rows share one compact list, with pinned chats sorted first. */
#dmList { gap: 2px; padding-top: 6px; }
#dmList .dmitem { flex: 0 0 auto; min-height: 48px; padding: 6px 8px; gap: 9px; align-items: center; }
#dmList .dmitem > .av { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; }
#dmList .dmitem__name { font-size: 13px; }
#dmList .dmitem__prev { font-size: 11.5px; }
#dmList .dmitem__top, #dmList .dmitem__bottom { line-height: 18px; }
.audit-list { display: grid; gap: 10px; margin: 14px 0; }
.audit-entry { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.025); overflow-wrap: anywhere; }
.audit-entry p { margin: 6px 0; }

.nav__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav__heading button {
  margin-left: auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  color: var(--faint);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav__heading button:hover { color: var(--text); background: rgba(255,255,255,.08); }

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 550;
  transition: background .16s var(--ease), color .16s var(--ease);
  min-width: 0;
}
.nav__item svg { flex: 0 0 auto; width: 19px; height: 19px; }
.nav__item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__item:hover { background: rgba(255,255,255,.055); color: var(--text); }

.nav__item.is-active {
  background: var(--grad-brand-soft);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-1) 32%, transparent);
}
.nav__item.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-brand);
}
.nav__item .badge,
.nav__item .badge--dot { margin-left: auto; }

.nav__divider { margin: 0 6px; }

/* brand mark (login panel + veil) */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  min-width: 0;
}
.nav__mark {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -8px var(--brand-1);
}
.nav__mark svg { width: 19px; height: 19px; }
.nav__wordmark {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.gs-mark { width: 15px; height: 15px; }

.nav__foot {
  display: flex;
  flex-direction: column;
  background: rgba(4, 6, 14, .74);
}

/* profile bar: identity on the left, account + settings on the right */
.profilebar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px 9px 10px;
  min-width: 0;
  transition: background .16s var(--ease);
}
.profilebar:hover { background: rgba(255,255,255,.045); }
/* the avatar keeps its size; only the name beside it gives way */
.profilebar__av {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: none;
  padding: 0;
  cursor: pointer;
}
.profilebar__id {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.profilebar__name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profilebar__sub {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profilebar__tools { display: flex; gap: 2px; flex: 0 0 auto; }
.profilebar .icon-btn { width: 30px; height: 30px; }
.profilebar .icon-btn.is-off {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

/* 7. topbar ------------------------------------------------ */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 18, .4);
  min-width: 0;
}

.topbar__heading { min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* pushes everything after the title to the right edge */
.topbar__gap { flex: 1 1 auto; min-width: 12px; }

/* the in-conversation search sits at the far right of the header */
.topbar__search {
  width: min(300px, 26vw);
  flex: 0 1 auto;
  margin-left: 8px;
}
.topbar__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.topbar__sub { font-size: 12px; color: var(--faint); margin-top: -2px; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar__sep { width: 1px; height: 26px; background: var(--line-2); margin: 0 6px; }

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(360px, 34vw);
}
.search svg {
  position: absolute;
  left: 12px;
  color: var(--faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 36px;
  padding: 0 40px 0 36px;
  border-radius: var(--r-sm);
  background: rgba(4, 6, 14, .55);
  border: 1px solid transparent;
  font-size: 13.5px;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .2s var(--ease);
}
.search input:hover { background: rgba(4, 6, 14, .8); }
.search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-1) 60%, transparent);
  background: rgba(4, 6, 14, .9);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 15%, transparent);
}
.search kbd {
  position: absolute;
  right: 9px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}
.search input:focus ~ kbd { opacity: 0; }

/* user chip */
.userchip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 5px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.userchip:hover { background: rgba(255,255,255,.08); border-color: var(--line-2); }
.userchip__name { font-size: 13px; font-weight: 700; }
.userchip__tag { font-size: 10.5px; font-weight: 800; color: var(--cyan); }

/* 8. cards + sections -------------------------------------- */
.page {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 30px 60px;
  scroll-behavior: smooth;
}
.page__inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }

.section { display: flex; flex-direction: column; gap: 14px; }

.section__head { display: flex; align-items: center; gap: 12px; }
.section__head h2 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.section__head .link { margin-left: auto; font-size: 12.5px; }

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .22s var(--ease-out),
              box-shadow .25s var(--ease);
}

/* ============================================================
   the profile popout - anchored to the person, no scrim, no dimming
   ============================================================ */
.profilepop {
  position: fixed;
  z-index: 340;
  width: min(360px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .72);
  opacity: 0;
  transform: translateY(4px) scale(.985);
  transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
  will-change: opacity, transform;
}
.profilepop.is-in { opacity: 1; transform: none; }
.profilepop--centre { left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.985); }
.profilepop--centre.is-in { transform: translate(-50%, -50%); }
.profilepop .profilecard { box-shadow: none; }

/* the little bar you get by right-clicking a space */
.ctxmenu {
  position: fixed;
  z-index: 360;
  min-width: 224px;
  background: #0b0f1c;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ctxmenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.ctxmenu__item:hover { background: color-mix(in srgb, var(--brand-1) 14%, transparent); }
.ctxmenu__item.is-danger { color: var(--danger); }
.ctxmenu__item.is-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ctxmenu__ico { width: 18px; display: grid; place-items: center; color: var(--muted); }
.ctxmenu__ico svg { width: 17px; height: 17px; }
.ctxmenu__item.is-danger .ctxmenu__ico { color: var(--danger); }
.ctxmenu__hint { margin-left: auto; color: var(--faint); font-size: 12px; }
.ctxmenu__sep { height: 1px; background: var(--line); margin: 4px 6px; }

.profilecard__roles { margin-top: 16px; }
.profilecard__roles h4 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.profilecard__rolelist { display: flex; flex-wrap: wrap; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .profilepop,
  .profilepop.is-in { transition: none; opacity: 1; transform: none; }
  .profilepop--centre,
  .profilepop--centre.is-in { transform: translate(-50%, -50%); }
}

.profilecard { width: 100%; }

.profilecard__banner {
  position: relative;
  height: 96px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
/* the pencil sits on the banner rather than as a button under the bio */
.profilecard__edit {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
}
.profilecard__edit:hover { background: rgba(0,0,0,.62); }
.profilecard__edit svg { width: 16px; height: 16px; }

/* the gradient runs from the primary colour at the top to the accent at the
   bottom, behind the name and everything under it. The two stops arrive as
   plain colours so they can be blended with the page here. */
.profilecard__body {
  position: relative;
  padding: 0 18px 16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--p1) 46%, transparent) 0%,
      color-mix(in srgb, var(--p2) 26%, transparent) 30%,
      color-mix(in srgb, var(--p2) 8%, transparent) 58%,
      transparent 88%);
}

.profilecard__top { display: flex; align-items: flex-end; gap: 13px; }
/* the avatar overlaps the banner, which is what makes it read as one card */
.profilecard__av {
  margin-top: -34px;
  border-radius: 50%;
  border: 4px solid var(--panel-solid);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}
.profilecard__av .av { box-shadow: none; }

.profilecard__id { min-width: 0; padding-bottom: 2px; }
.profilecard__name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* pronouns sit under the name and are deliberately quiet */
.profilecard__pronouns {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.profilecard__handle { display: block; font-size: 12px; color: var(--faint); }

.profilecard__flag { align-self: flex-start; margin-top: 10px; }

/* member since sits on its own line under the name */
.profilecard__joined {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--faint);
}
.profilecard__joined b { font-weight: 650; color: var(--text); }

/* About Me is a section with its own heading, not a loose paragraph */
.profilecard__about { margin-top: 16px; }
.profilecard__about h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.profilecard__bio {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.profilecard__bio--empty { color: var(--faint); font-style: italic; }
.profilecard__bio strong { color: var(--text); }
.profilecard__bio em { font-style: italic; }
.profilecard__bio s { color: var(--faint); }
.profilecard__bio a { color: var(--cyan); text-decoration: none; }
.profilecard__bio a:hover { text-decoration: underline; }
.profilecard__bio code {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(0,0,0,.4);
  color: var(--text);
}

/* only the things you can do to this person sit under their card */
.profilecard__acts {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.profilecard__actrow { display: flex; gap: 6px; }
.profilecard__actrow .btn { flex: 1 1 0; min-width: 0; justify-content: center; }

/* In settings the card is the thing you are checking your changes against,
   so it stays put while you scroll the controls underneath it rather than
   scrolling away the moment you reach the bio. */
.sheet__pane > .sgroup:first-child .profilecard {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: var(--shadow-lg);
}
.sheet__pane > .sgroup:first-child { position: relative; z-index: 3; }

.card--hover:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);  box-shadow: var(--shadow-lg);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.card__title { font-size: 14.5px; font-weight: 750; }
.card__body { padding: 16px 18px; }
.card__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 9. auth -------------------------------------------------- */
/* one centred column: brand, heading, two fields, one button */
.auth {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
}

.auth__card {
  width: min(370px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.auth__brand { display: flex; align-items: center; gap: 11px; }
.auth__brand .nav__mark { width: 36px; height: 36px; border-radius: 12px; }
.auth__brand .nav__mark svg { width: 20px; height: 20px; }
.auth__brand .nav__wordmark { font-size: 16px; }

.auth__title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-top: -6px;
}

.auth__form { display: flex; flex-direction: column; gap: 14px; }
.auth__form .btn { margin-top: 4px; }

.auth__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13.5px;
}
.auth__links-sep { color: var(--faint); }
.welcome-steps { display: grid; gap: 18px; }
.welcome-steps section { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.welcome-steps h4 { font-size: 15px; margin: 0 0 6px; }
.invite-notice, .invite-preview { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--grad-brand-soft); }
.invite-notice p { margin: 8px 0; }
.invite-preview { display: grid; justify-items: center; text-align: center; gap: 12px; }
.invite-rules { max-height: 180px; overflow: auto; font-size: 13px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.welcome-steps section p { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.6; }

/* 11. dms -------------------------------------------------- */
/* the conversation list lives in the sidebar, so `.nav` hosts the
   `.dmitem` rows directly and `.main` holds only the chat surface */
.dmgroup {
  padding: 12px 10px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* inbox filters — a compact row under the DM header */
.dmtabs {
  display: flex;
  gap: 4px;
  padding: 0 11px 10px;
}

.dmtab {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid transparent;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.dmtab:hover { background: rgba(255,255,255,.06); color: var(--text); }
.dmtab.is-active {
  background: var(--grad-brand-soft);
  border-color: color-mix(in srgb, var(--brand-1) 40%, transparent);
  color: #fff;
}

/* person rows (used by the add-friend / new-DM pickers) */
.friend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  transition: background .16s var(--ease);
}
.friend:last-child { border-bottom: 0; }
.friend:hover { background: rgba(255,255,255,.035); }
.friend__meta { min-width: 0; flex: 1 1 auto; }
.friend__name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.friend__sub { font-size: 12px; color: var(--muted); }
.friend__actions { display: flex; gap: 4px; opacity: 0; transition: opacity .18s var(--ease); }
.friend:hover .friend__actions,
.friend:focus-within .friend__actions { opacity: 1; }

.dmitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-align: left;
  min-width: 0;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.dmitem:hover { background: rgba(255,255,255,.05); }

.dmitem.is-active {
  background: var(--grad-brand-soft);
  border-color: color-mix(in srgb, var(--brand-1) 34%, transparent);
}
.dmitem.is-active::before {
  content: "";
  position: absolute;
  left: -8px; top: 50%;
  translate: 0 -50%;
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-brand);
}

.dmitem__meta { min-width: 0; flex: 1 1 auto; }
.dmitem__top { display: flex; align-items: center; gap: 7px; }
.dmitem__name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmitem__time { margin-left: auto; font-size: 11px; color: var(--faint); flex: 0 0 auto; }
.dmitem__bottom { display: flex; align-items: center; gap: 7px; }
.dmitem__prev { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmitem__right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.dmitem.is-unread .dmitem__name { color: #fff; }
.dmitem.is-unread .dmitem__prev { color: var(--text); font-weight: 650; }

/* hover reveals a close X in place of the read receipt, Discord-style */
.dmitem__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.dmitem__close {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: none;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--faint);
  transition: color .14s var(--ease), background .14s var(--ease);
}
.dmitem__close svg { width: 13px; height: 13px; }
.dmitem__close:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }

.dmitem:hover .dmitem__close,
.dmitem:focus-within .dmitem__close { display: grid; }
.dmitem:hover .dmitem__receipt,
.dmitem:focus-within .dmitem__receipt { display: none; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  color: var(--muted);
}
.empty__icon {
  width: 58px; height: 58px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: var(--grad-brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand-1) 30%, transparent);
  color: #c9bcff;
}
.empty strong { font-size: 15px; font-weight: 750; color: var(--text); }
.empty p { font-size: 13px; max-width: 34ch; }
/* an empty state in a narrow column centres a row of buttons that is wider
   than the column, which pushed it out over the rail on both sides */
.empty .row { flex-wrap: wrap; max-width: 100%; }
.empty .row .btn { min-width: 0; }

/* thread */
.thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  background: rgba(6, 8, 18, .35);
}

.thread__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.thread__meta { min-width: 0; }
.thread__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 750; }
.thread__sub { font-size: 12px; color: var(--muted); }
.thread__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.thread__back { display: none; }

.msgs {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 8px 8px;
  scroll-behavior: smooth;
  position: relative;
}

/* a way back down when you scrolled up through history */
.skip-button {
  position: absolute;
  right: 18px;
  bottom: 78px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(12, 16, 30, .9);
  color: var(--text);
  font: 600 12px/1 var(--font);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.skip-button:hover { background: #151d3a; }
#main { position: relative; }

/* ---- find in a stream: a bar that floats, so nothing reflows ---- */
.findbar {
  position: absolute;
  top: calc(var(--topbar-h) + 10px);
  right: 14px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: rgba(12, 16, 30, .96);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.findbar[hidden] { display: none; }
.findbar__mark { display: grid; place-items: center; color: var(--muted); }
.findbar__mark svg { width: 15px; height: 15px; }
.findbar__input {
  width: 186px; min-width: 0;
  border: 0; background: transparent;
  color: var(--text); font: 500 13.5px/1.2 var(--font);
  outline: none;
}
.findbar__input::placeholder { color: var(--faint); }
.findbar__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.findbar__count {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.findbar__step {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-xs);
  background: transparent; color: var(--muted); cursor: pointer;
}
.findbar__step:hover { background: var(--elev); color: var(--text); }
.findbar__step svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .findbar { left: 10px; right: 10px; }
  .findbar__input { width: auto; flex: 1 1 auto; }
}

.msgs__intro { padding: 26px 20px 18px; display: flex; flex-direction: column; gap: 9px; }
.msgs__intro h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.msgs__intro p { font-size: 13.5px; color: var(--muted); max-width: 60ch; }
.msgs__intro .av { margin-bottom: 6px; }

.msgday {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 14px 12px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.msgday::before, .msgday::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* "Someone joined the space" */
.msg-system {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 14px 4px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  width: fit-content;
  max-width: calc(100% - 28px);
}
.msg-system__icon {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand-1) 34%, transparent);
  color: #c9bcff;
}
.msg-system__icon svg { width: 12px; height: 12px; }
.msg-system time { color: var(--faint); font-size: 11px; flex: 0 0 auto; }

.msg {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 3px 14px 3px 20px;
  border-radius: var(--r-sm);
  transition: background .14s var(--ease);
}
.msg:hover { background: rgba(255,255,255,.032); }
.msg.is-grouped { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.msg:not(.is-grouped) { margin-top: 14px; }
.msg.is-mention { background: color-mix(in srgb, var(--warn) 9%, transparent); box-shadow: inset 2px 0 0 var(--warn); }
.msg.is-mention:hover { background: color-mix(in srgb, var(--warn) 13%, transparent); }
/* a message a link pointed at: the mention treatment in the theme's own
   colour, so following a link to a line lands somewhere visible. It is a
   painted state, not an animation, so "less motion" still shows it. */
.msg.is-linked { background: color-mix(in srgb, var(--brand-1) 12%, transparent); box-shadow: inset 2px 0 0 var(--brand-1); }
.msg.is-linked:hover { background: color-mix(in srgb, var(--brand-1) 17%, transparent); }

.msg__gutter {
  width: 40px;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.msg__stamp { font-size: 10.5px; color: var(--faint); opacity: 0; transition: opacity .14s var(--ease); padding-top: 4px; }
.msg:hover .msg__stamp { opacity: 1; }

.msg__col { min-width: 0; flex: 1 1 auto; padding-bottom: 2px; }
.msg__meta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.msg__author { font-size: 14.5px; font-weight: 750; }
.msg__author--bot { color: var(--cyan); }
.msg__time { font-size: 11px; color: var(--faint); }
.msg__tag { font-size: 10.5px; font-weight: 800; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); padding: 1px 6px; border-radius: var(--r-xs); }
.msg__text { font-size: 14.5px; color: #dfe4f2; white-space: pre-wrap; overflow-wrap: anywhere; }

.msg__edited { font-size: 10.5px; color: var(--faint); }

/* inline edit */
.msg__edit {
  max-width: 520px;
  padding: 10px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line-2);
}
.msg__edit textarea {
  width: 100%;
  padding: 8px 10px;
  background: rgba(4,6,14,.6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  font-size: 14.5px;
  resize: none;
  min-height: 40px;
}
.msg__edit textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-1) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 16%, transparent);
}

/* inline sticker - tinted by the theme, and each sticker can override it */
.msg__sticker {
  --hue: var(--brand-1);
  width: 78px;
  height: 78px;
  margin-top: 6px;
  display: grid;
  place-items: center;
  font-size: 44px;
  border-radius: 20px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--hue) 30%, transparent),
    rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--hue) 36%, transparent);
}

/* the "+" pill that opens the reaction picker */
.reaction--add {
  width: 27px;
  padding: 0;
  justify-content: center;
  color: var(--faint);
}
.reaction--add svg { width: 14px; height: 14px; }

/* brief highlight when jumping from a reply quote */
.msg.is-flash .msg__col {
  animation: flash 1.2s var(--ease-out);
}
@keyframes flash {
  0%, 100% { background: transparent; }
  25% { background: color-mix(in srgb, var(--brand-1) 18%, transparent); }
}
.msg__text a { color: var(--cyan); font-weight: 600; }
.msg__text code {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 1.5px 6px;
  border-radius: var(--r-xs);
  background: rgba(0,0,0,.42);
  border: 1px solid var(--line);
}
.msg__text pre {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(2, 4, 10, .72);
  border: 1px solid var(--line);
  overflow-x: auto;
  margin: 8px 0 2px;
}
.msg__attach {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  max-width: 420px;
}
.msg__attach .thumb {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--grad-brand);
}
.msg__attach strong { font-size: 13px; font-weight: 650; }
.msg__attach span { display: block; font-size: 11.5px; color: var(--faint); }

.replyline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.replyline__dash { width: 26px; height: 8px; flex: 0 0 auto; border-top: 2px solid var(--faint); border-left: 2px solid var(--faint); border-top-left-radius: 5px; }
.replyline b { color: var(--text); font-weight: 700; }
.replyline:hover b { color: var(--cyan); }

.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  transition: background .16s var(--ease), transform .16s var(--ease-out);
}
.reaction:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.reaction.is-mine {
  background: color-mix(in srgb, var(--brand-1) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand-1) 55%, transparent);
}

.msg__tools {
  position: absolute;
  top: -16px;
  right: 16px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: #0a0e1c;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(4px) scale(.96);
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .2s var(--ease-out);
}
.msg:hover .msg__tools { opacity: 1; transform: none; pointer-events: auto; }

.typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 4px;
  font-size: 12px;
  color: var(--muted);
  min-height: 22px;
}
.typing__dots { display: inline-flex; gap: 3px; }
.typing__dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: bounce 1.2s var(--ease-soft) infinite;
}
.typing__dots i:nth-child(2) { animation-delay: .16s; }
.typing__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* composer */
.composer { padding: 0 16px 20px; }

.composer__box {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 6px 6px 8px;
  border-radius: var(--r-lg);
  background: rgba(4, 6, 14, .7);
  border: 1px solid var(--line-2);
  transition: border-color .18s var(--ease), box-shadow .2s var(--ease);
}
.composer__box:focus-within {
  border-color: color-mix(in srgb, var(--brand-1) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 14%, transparent);
}

.composer__input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 220px;
  padding: 10px 6px;
  border: 0;
  background: none;
  resize: none;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 100%;
}
.composer__input:focus { outline: none; }

.composer__send {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  color: #fff;
  transition: filter .16s var(--ease), transform .16s var(--ease-out), opacity .16s var(--ease);
}
.composer__send:hover { filter: brightness(1.1); }
.composer__send:active { transform: scale(.94); }
.composer__send:disabled { background: var(--elev); color: var(--faint); pointer-events: none; }

.composer__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px 0;
  font-size: 11.5px;
  color: var(--faint);
}
.composer__foot kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}

.composer__reply {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 8px 12px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2);
  border-bottom: 0;
  font-size: 12.5px;
}
.composer__reply span { color: var(--muted); }

/* quick-reply suggestions under empty state */
.suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 10px; }
.suggest button {
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--muted);
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease-out);
}
.suggest button:hover { background: var(--grad-brand-soft); border-color: color-mix(in srgb, var(--brand-1) 45%, transparent); color: #fff; transform: translateY(-1px); }

/* 12. overlays --------------------------------------------- */
/* the way back into a long conversation, so the top is never a dead end */
.msgs__older {
  display: block;
  width: calc(100% - 32px);
  margin: 10px 16px 4px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 12px;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.msgs__older:hover {
  border-color: var(--brand-1);
  color: var(--text);
  background: color-mix(in srgb, var(--brand-1) 10%, transparent);
}

/* a file that has been chosen and not yet sent */
.composer__pending {
  display: flex;
  gap: 8px;
  padding: 8px 8px 0;
}
.composer__pending.hidden { display: none; }
.composer__pendingitem {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  padding: 7px 8px 7px 7px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
}
.composer__pendingimg {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.3);
}
.composer__pendingfile {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--elev);
  color: var(--muted);
}
.composer__pendingmeta { min-width: 0; flex: 1 1 auto; }
.composer__pendingmeta strong {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer__pendingmeta span { font-size: 11px; color: var(--faint); }
.composer__pendingitem .icon-btn { width: 26px; height: 26px; flex: 0 0 auto; }

/* the cropper: the picture at full size with a frame you can move */
.crop { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.crop__stage {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
  line-height: 0;
}
.crop__canvas {
  display: block;
  max-width: 100%;
  /* the frame is dragged, so the pointer has to be taken rather than the
     page scrolled away underneath */
  touch-action: none;
  cursor: grab;
}
.crop__canvas:active { cursor: grabbing; }
.crop__hint { font-size: 12px; color: var(--faint); text-align: center; margin: 0; }

/* progress ring, shown while a file is being read and converted */
.progresshost {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 330;
  transform: translateX(-50%);
  pointer-events: none;
}
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 10px;
  border-radius: var(--r-full);
  background: var(--panel-solid);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .2s var(--ease), transform .24s var(--ease-out);
}
.progress.is-on { opacity: 1; transform: none; }
.progress__ring { width: 30px; height: 30px; flex: 0 0 auto; transform: rotate(-90deg); }
.progress__track {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 3.5;
}
.progress__bar {
  fill: none;
  stroke: var(--brand-1);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .18s linear;
}
.progress__pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}
.progress__label { font-size: 12px; color: var(--muted); }

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* above dialogs too: a message about what just happened outranks the
     dialog it happened in */
  z-index: 320;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 380px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: rgba(10, 14, 28, .94);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  font-size: 13.5px;
  pointer-events: auto;
  animation: toast-in .12s ease-out both;
}
.toast.is-out { animation: toast-out .12s ease-out forwards; }
.toast__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--brand-2); }
.toast--ok .toast__dot { background: var(--ok); }
.toast--warn .toast__dot { background: var(--warn); }
.toast--danger .toast__dot { background: var(--danger); }

@keyframes toast-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes toast-out {
  to { opacity: 0; }
}

/* modal */
.modal {
  position: fixed;
  inset: 0;
  /* Above the settings sheet, because nearly every dialog is opened from
     inside it. Below that it renders underneath and looks like the button
     did nothing at all. */
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 3, 8, .7);
  backdrop-filter: blur(8px);
  animation: fade .1s ease-out both;
}
.modal[hidden] { display: none; }

.modal__card {
  width: min(480px, 100%);
  background: #0a0e1c;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fade .1s ease-out both;
}
.modal__head { padding: 20px 22px 0; }
.modal__head h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.modal__head p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.modal__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal__foot { padding: 14px 22px 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* the space settings open as a centred modal, not a full-screen take-over:
   a wide card with the pane scrolling inside it */
.modal--space .modal__card {
  width: min(880px, 100%);
  max-height: min(85vh, 780px);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.modal--space .spacebar { flex: 0 0 auto; }
.modal--space .spacelayout { flex: 1 1 auto; min-height: 0; }
.modal--space .spacepane { overflow-y: auto; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; } }

/* skeleton */
.skel {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* page transition veil */
.veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(24, 18, 60, .94), rgba(4, 5, 11, .985) 70%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.veil__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}
.veil__mark .nav__mark {
  width: 62px; height: 62px;
  border-radius: 20px;
  animation: pulse-mark 1.1s var(--ease-soft) infinite;
}
.veil__mark .nav__mark svg { width: 32px; height: 32px; }
@keyframes pulse-mark {
  0%, 100% { transform: scale(.9); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-1) 45%, transparent); }
  50%      { transform: scale(1); box-shadow: 0 0 0 22px transparent; }
}

/* Navigation and background refreshes never animate the page or its rows. */
.veil { display: none; }
[data-stagger] > *, .is-swapping > *, .is-swapped > * { animation: none; }

/* motion is decoration, never the only way something is legible */
.reduce-motion [data-stagger] > *,
.reduce-motion .is-swapping > *,
.reduce-motion .is-swapped > * {
  animation: none !important;
}

/* a warning that has to be read before anything irreversible happens */
.notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.notice strong { color: var(--text); font-size: 13.5px; }
.notice ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.notice--danger {
  border-color: color-mix(in srgb, var(--danger) 46%, transparent);
  background: color-mix(in srgb, var(--danger) 11%, transparent);
}
.notice--danger strong { color: var(--danger); }

/* 13. legacy breakpoints (the 4-column grid is handled in section 19) */
@media (max-width: 1180px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .page { padding: 22px 20px 50px; }
}

@media (max-width: 760px) {
  .search { width: auto; flex: 1 1 auto; }
  .userchip__text { display: none; }
}

@media (max-width: 520px) {
  .auth { padding: 22px 16px; }
}

/* ============================================================
   16. server rail (far-left column)
   ============================================================ */
.rail {
  grid-area: rail;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
  gap: 10px;
  padding: 12px 0 14px;
  background: rgba(3, 5, 12, .82);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid var(--line);
  min-width: 0;
}

.rail__top { display: grid; place-items: center; gap: 9px; }

.rail__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  padding: 2px 0;
  scrollbar-width: none;
}
.rail__list::-webkit-scrollbar { width: 0; }

.rail__sep { width: 32px; height: 2px; border-radius: 2px; background: var(--line-2); }
.rail__util { display: flex; flex-direction: column; align-items: center; gap: 9px; }

/* home / direct-messages switch */
.rail__home,
.rail__server,
.rail__add,
.rail__util-btn {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: border-radius .2s var(--ease-out), background .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease-out);
}

.rail__home { background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px -10px var(--brand-1); }
.rail__home:hover { border-radius: 13px; color: #fff; filter: brightness(1.08); }
.rail__home.is-dm { background: var(--panel-2); color: var(--muted); border-color: var(--line); box-shadow: none; }

.rail__server { background: var(--tint, var(--elev)); color: #fff; border-color: transparent; font-weight: 800; }
.rail__server:hover { border-radius: 13px; transform: translateY(-1px); }

.rail__server.is-active {
  border-radius: 13px;
  box-shadow: 0 0 0 2px var(--bg-void), 0 0 0 4px color-mix(in srgb, var(--brand-1) 70%, transparent);
}

/* the tile that makes another space: present but never the active one, so it
   can never be mistaken for somewhere you already are */
.rail__add {
  background: var(--panel-2);
  color: var(--ok);
  border: 1px dashed color-mix(in srgb, var(--ok) 40%, transparent);
  font-weight: 800;
}
.rail__add:hover {
  background: color-mix(in srgb, var(--ok) 16%, var(--panel-2));
  border-color: var(--ok);
  border-style: solid;
  border-radius: 13px;
  color: var(--ok);
}
.rail__add .rail__glyph svg { width: 19px; height: 19px; text-shadow: none; }
.rail__add:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

.rail__glyph {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.rail__util-btn { background: var(--ok); color: #06231a; border-color: transparent; font-weight: 800; }
.rail__util-btn--muted { background: var(--panel-2); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.rail__util-btn:hover { border-radius: 13px; transform: translateY(-1px); }
.rail__util-btn--muted:hover { background: color-mix(in srgb, var(--ok) 18%, var(--panel-2)); }

/* the little pill on the left edge */
.rail__pill,
.rail__home::before,
.rail__server::before,
.rail__util-btn::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 4px;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: #fff;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .2s var(--ease-out), height .2s var(--ease-out);
}

.rail__server:hover::before,
.rail__server.is-active::before,
.rail__util-btn:hover::before { transform: translateY(-50%) scaleY(1); }

.rail__server.is-active::before,
.rail__util-btn:hover::before { height: 20px; }

/* a space with something waiting wears a small bar on its edge; a ping for
   you is the loud red one - it should never have to be hunted for */
.rail__server.has-unread::before { transform: translateY(-50%) scaleY(1); height: 10px; background: var(--muted); }
.rail__server.has-mention::before { transform: translateY(-50%) scaleY(1); height: 20px; background: var(--danger); }

/* a space folder: collapsed shows one tile, opened it draws its spaces
   inline with a coloured panel behind them */
.rail__foldgrid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px; width: 100%; height: 100%; border-radius: inherit;
  background: var(--gfold);
}
.rail__foldcell {
  display: grid; place-items: center; overflow: hidden;
  background: rgba(0, 0, 0, .3); border-radius: 5px;
  font-size: 10px; font-weight: 800; color: #fff;
}
.rail__foldcell img { width: 82%; height: 82%; object-fit: cover; border-radius: 4px; }
.rail__foldericon { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rail__groupwrap {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px; border-radius: 16px; align-items: center;
  background: color-mix(in srgb, var(--gfold) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--gfold) 60%, transparent);
}
.rail__folderhead {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 6px; border: 0; background: transparent; color: var(--text);
  font: inherit; cursor: pointer; text-align: left;
}
.rail__folderhead .rail__foldgrid,
.rail__folderhead .rail__foldericon { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; }
.rail__foldername { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rail__home::before { display: none; }

/* red mention counter */
.rail__badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 11.5px;
  font-weight: 850;
  display: grid;
  place-items: center;
  border: 3px solid #06080f;
  box-sizing: content-box;
}
.rail__badge--quiet {
  background: var(--muted);
  color: #0b1020;
}

/* a space told to be quiet wears a small crossed bell: the badge says how
   much is waiting, this says whether it will ever make a sound */
.rail__quiet {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--panel-2);
  color: var(--muted);
  display: grid;
  place-items: center;
  border: 3px solid #06080f;
  box-sizing: content-box;
}
.rail__quiet svg { width: 11px; height: 11px; }

/* ---------- extras (a rail tile opens this, next to the rail) ---------- */
.extras { position: fixed; inset: 0; z-index: 260; pointer-events: none; }
.extras[hidden] { display: none; }
.extras__card {
  position: fixed;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0b0f1c;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  animation: pop .16s var(--ease-out);
}
.extras__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 15px;
  border-bottom: 1px solid var(--line);
}
.extras__title { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; margin-right: auto; }
.extras__status { font-size: 12.5px; color: var(--muted); }
.extras__status[data-tone="bad"] { color: var(--danger); }
.extras__close {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.extras__close:hover { background: var(--elev); color: var(--text); }
.extras__close svg { width: 17px; height: 17px; }
.extras__grid { flex: 1 1 auto; min-height: 0; position: relative; background: #070a14; }
.extras__grid iframe { width: 100%; height: 100%; border: 0; display: block; }

.rail__folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.rail__folder .rail__server { border-radius: 13px; }

/* rail tooltips point left, away from the edge */
.rail [data-tip]::after {
  left: calc(100% + 14px);
  bottom: 50%;
  transform: translateY(50%) translateX(-4px);
}
.rail [data-tip]:hover::after { transform: translateY(50%) translateX(0); }

/* ============================================================
   17. member list (right column)
   ============================================================ */
.memlist {
  grid-area: mem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  background: rgba(5, 7, 15, .6);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border-left: 1px solid var(--line);
}

.memlist__head { padding: 11px; border-bottom: 1px solid var(--line); }
.memlist__head .search { width: 100%; }
.memlist__head .search input { height: 32px; font-size: 13px; }
.memlist__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 4px;
}

.memlist__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 6px 18px;
}

.membergroup {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.membergroup:first-child { padding-top: 4px; }

.member {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  min-width: 0;
  text-align: left;
  transition: background .14s var(--ease);
}
.member:hover { background: rgba(255,255,255,.05); }
.member.is-offline { opacity: .42; }

.member__meta { min-width: 0; flex: 1 1 auto; }
.member__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member__sub {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member__actions { display: flex; gap: 2px; opacity: 0; transition: opacity .16s var(--ease); }
.member:hover .member__actions,
.member:focus-within .member__actions { opacity: 1; }

/* role badges */
.role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--role, var(--brand-1)) 20%, transparent);
  color: color-mix(in srgb, var(--role, var(--brand-1)) 55%, #fff);
  border: 1px solid color-mix(in srgb, var(--role, var(--brand-1)) 34%, transparent);
  flex: 0 0 auto;
}
.role--bot { background: color-mix(in srgb, var(--cyan) 18%, transparent);
             color: #a9f0ff; border-color: color-mix(in srgb, var(--cyan) 34%, transparent); }
.role--bot svg { width: 11px; height: 11px; }

.membergroup__action {
  margin-left: auto;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: .06em;
}
.membergroup__action:hover { color: var(--text); }

/* ============================================================
   18. chat-area additions: NEW divider + rich embeds
   ============================================================ */
.newdivider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 14px 12px;
}
.newdivider::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--danger);
}
.newdivider span {
  position: relative;
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.embed {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 12px;
  margin-top: 8px;
  max-width: 520px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  overflow: hidden;
}
.embed__bar { background: var(--edge, var(--brand-1)); }
.embed__body { padding: 11px 13px; min-width: 0; }
.embed__provider {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--muted);
  margin-bottom: 5px;
}
.embed__title {
  font-size: 14px;
  font-weight: 750;
  color: var(--cyan);
  margin-bottom: 4px;
}
.embed__desc { font-size: 13px; color: var(--muted); }
.embed__fields {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.embed__field { font-size: 12.5px; }
.embed__field b { display: block; color: var(--brand-2); font-size: 11.5px; margin-bottom: 1px; }
.embed__foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--faint);
}

/* sticker / gif buttons live in the composer */
.composer__tools { display: flex; gap: 2px; flex: 0 0 auto; }

/* ============================================================
   19. responsive (overrides earlier blocks)
   ============================================================ */
@media (max-width: 1240px) {
  .app { grid-template-columns: var(--rail-w) var(--nav-w) minmax(0, 1fr);
         grid-template-areas: "rail nav main"; }
  .app--no-mem { grid-template-columns: var(--rail-w) var(--nav-w) minmax(0, 1fr); }
  .memlist { display: none; }
}

@media (min-width: 761px) and (max-width: 980px) {
  :root { --nav-w: 84px; --rail-w: var(--rail-w-collapsed); }

  .nav__top .search input { padding: 0 12px; }
  .nav__top .search svg,
  .nav__top .search kbd { display: none; }
  .nav__top { padding: 10px 12px; }
  .nav__tab { justify-content: center; padding: 0; }
  .nav__tab .label { display: none; }
  .nav__tab .badge, .nav__tab .badge--dot { display: none; }
  .nav__dmhead h2 { display: none; }
  .nav__dmhead { justify-content: center; padding: 12px 0 8px; }
  .nav__dmhead .icon-btn { margin-left: 0; }

  .nav__scroll { padding: 12px 12px 16px; }
  .nav__heading span, .nav__heading button { display: none; }
  .nav__heading { justify-content: center; padding-bottom: 6px; }
  .nav__wordmark,
  .nav__item .label,
  .profilebar__id { display: none; }

  .nav__item { justify-content: center; padding: 0; }
  .nav__item .badge, .nav__item .badge--dot { display: none; }
  .nav__item.is-active::before { left: -12px; }
  .nav__brand { justify-content: center; padding: 0; }

  .profilebar { justify-content: center; padding: 9px 0; gap: 0; }
  .profilebar__tools { gap: 0; }
  .profilebar__tools .icon-btn:last-child { display: none; }

  .rail__home, .rail__server, .rail__add, .rail__util-btn { width: 40px; height: 40px; border-radius: 14px; }
  .rail__glyph { font-size: 13px; }

  .data-tip::after { display: none; }
}

@media (max-width: 760px) {
  :root { --rail-w: 0px; --nav-w: 236px; }
  .rail { display: none; }
  .app,
  .app--no-mem {
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    grid-template-areas: "nav main";
  }

  .page { padding: 18px 14px 44px; }
}

@media (max-width: 520px) {
  :root { --nav-w: 100%; }
  /* one pane at a time, and whichever pane is showing fills the whole width.
     The old rule kept a 100%-wide first column in place, so an open thread
     landed in a zero-width second column and could not be seen at all. */
  .app,
  .app--no-mem {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nav";
  }
  .app.is-thread-open { grid-template-areas: "main"; }

  /* one pane at a time: the list, or the open thread */
  .app:not(.is-thread-open) .main { display: none; }
  .app.is-thread-open .nav { display: none; }
  .thread__back { display: inline-grid; }
}

/* ============================================================
   20. narrow-column hardening
   The rail / sidebar / member list are narrow by design, so every
   flex child gets min-width:0 and anything textual is allowed to
   ellipsize instead of forcing the column to grow.
   ============================================================ */
.nav,
.memlist,
.rail,
.nav__top,
.nav__scroll,
.nav__dmhead,
.nav__foot,
.profilebar,
.memlist__scroll,
.rail__list,
.thread,
.msgs,
.composer,
.topbar { min-width: 0; }

.nav__top > *,
.nav__dmhead > *,
.profilebar > *,
.memlist__scroll > *,
.rail__list > *,
.topbar > * { min-width: 0; }

.nav__item,
.nav__tab,
.dmitem,
.member,
.profilebar,
.continue__item { max-width: 100%; }

.nav__item > *,
.nav__tab > *,
.member > * { min-width: 0; }

/* a label that must never push the row wider than its column */
.nav__item .label,
.nav__tab .label,
.member__name,
.member__sub,
.dmitem__name,
.dmitem__prev,
.profilebar__name,
.profilebar__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the topbar search gives up width before anything else clips */
@media (max-width: 980px) {
  .topbar__search { width: auto; flex: 1 1 150px; min-width: 110px; }
  .topbar__heading { flex: 0 1 auto; }
  .topbar__actions { flex: 0 0 auto; }
}

/* the composer row: media tools drop out before the send button does */
.composer__box { min-width: 0; }
.composer__input { min-width: 0; }
.composer__tools { min-width: 0; }

@media (max-width: 700px) {
  .composer__tools .icon-btn[data-comp="gif"],
  .composer__tools .icon-btn[data-comp="sticker"] { display: none; }
}
@media (max-width: 560px) {
  .composer__tools .icon-btn[data-comp="gift"] { display: none; }
}

.composer__foot { min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.composer__foot > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* rich content must never widen the chat column */
.embed { max-width: 100%; }
.embed__desc,
.embed__field { overflow-wrap: anywhere; }
.msg__tools { right: 8px; }
.reactions { max-width: 100%; }

@media (max-width: 620px) {
  .msg { padding-left: 12px; }
  .msg__tools { display: none; }
}

/* ============================================================
   21. user preferences applied from Settings
   ============================================================ */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html.reduce-motion .blob,
html.reduce-motion .star,
html.reduce-motion .veil__mark .nav__mark { animation: none !important; }

html[data-contrast="high"] {
  --text: #ffffff;
  --muted: #d8dff0;
  --faint: #aab4cd;
  --line: rgba(255, 255, 255, .18);
  --line-2: rgba(255, 255, 255, .32);
  --line-3: rgba(255, 255, 255, .46);
}

html[data-text="large"] .msg__text,
html[data-text="large"] .composer__input,
html[data-text="large"] .msg__author,
html[data-text="large"] .nav__item,
html[data-text="large"] .nav__tab,
html[data-text="large"] .member__name { font-size: 16px; }
html[data-text="large"] .member__sub,
html[data-text="large"] .nav__heading,
html[data-text="large"] .dmgroup { font-size: 12px; }
html[data-text="large"] .composer__input { min-height: 46px; }

html[data-density="compact"] .msg { padding-top: 1px; padding-bottom: 1px; }
html[data-density="compact"] .msg:not(.is-grouped) { margin-top: 8px; }
html[data-density="compact"] .msg__text { font-size: 13.5px; line-height: 1.45; }
html[data-density="compact"] .member { padding-top: 3px; padding-bottom: 3px; }
html[data-density="compact"] .dmitem { padding: 6px 10px; }
html[data-density="compact"] .dmgroup { padding-top: 8px; }

/* ============================================================
   22. settings sheet
   ============================================================ */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 3, 8, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade .1s ease-out both;
}
.sheet[hidden] { display: none; }

.sheet__card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1000px, 94vw);
  height: min(660px, 88dvh);
  background: #080b16;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fade .1s ease-out both;
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.sheet__head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sheet__head .icon-btn { margin-left: auto; }

.sheet__body {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  min-height: 0;
}

.sheet__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: rgba(4, 6, 14, .5);
  overflow-y: auto;
  min-width: 0;
}

.sheet__tab {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  min-width: 0;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sheet__tab svg { flex: 0 0 auto; width: 18px; height: 18px; }
.sheet__tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet__tab:hover { background: rgba(255,255,255,.055); color: var(--text); }
.sheet__tab.is-active {
  background: var(--grad-brand-soft);
  color: #fff;
  font-weight: 750;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-1) 34%, transparent);
}
.sheet__tab--danger { color: #ffb3b9; margin-top: auto; }
.sheet__tab--danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: #ffd7da; }

.sheet__pane {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 26px 34px;
  min-width: 0;
}

/* preference groups */
.sgroup { margin-bottom: 26px; }
.sgroup:last-child { margin-bottom: 0; }

.sgroup__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.sgroup__hint {
  font-size: 12.5px;
  color: var(--faint);
  margin-bottom: 12px;
}

.sbox {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.025);
  overflow: hidden;
}

.srow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.srow:last-child { border-bottom: 0; }
.srow--stack { flex-direction: column; align-items: stretch; gap: 12px; }

.srow__text { min-width: 0; flex: 1 1 auto; }
.srow__label { font-size: 13.5px; font-weight: 700; }
.srow__desc { font-size: 12px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.srow__control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.srow--stack .srow__control { flex: 1 1 auto; }
.srow__control > .input { width: min(280px, 44vw); }

/* switch */
.stoggle {
  position: relative;
  width: 44px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: var(--elev);
  border: 1px solid var(--line-2);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.stoggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out);
}
.stoggle[aria-pressed="true"] {
  background: var(--grad-brand);
  border-color: transparent;
}
.stoggle[aria-pressed="true"]::after { transform: translateX(19px); }

/* option cards (theme, density, text size) */
.sopts { display: flex; flex-wrap: wrap; gap: 10px; }
.sopt {
  flex: 1 1 150px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-2);
  background: rgba(255,255,255,.03);
  text-align: left;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--ease-out);
}
.sopt:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
.sopt.is-on {
  border-color: color-mix(in srgb, var(--brand-1) 70%, transparent);
  background: var(--grad-brand-soft);
}
.sopt strong { display: block; font-size: 13px; font-weight: 750; }
.sopt span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* the colour field: a chip, the native picker, the hex, and quick picks */
.colour {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.colour__pick {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
/* the native control paints its own swatch, so only the frame is ours */
.colour__pick::-webkit-color-swatch-wrapper { padding: 2px; }
.colour__pick::-webkit-color-swatch { border: none; border-radius: 6px; }
.colour__pick::-moz-color-swatch { border: none; border-radius: 6px; }
.colour__pick:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.colour__hex { width: 92px; flex: 0 0 auto; }
.colour__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.colour__swatches .sswatch { width: 20px; height: 20px; }

/* colour swatches */
.sswatches { display: flex; flex-wrap: wrap; gap: 9px; }

/* a theme is chosen by looking at it, so it gets a real swatch and a name */
.sthemes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  width: 100%;
}
.stheme {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel-2);
  text-align: left;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.stheme:hover { border-color: var(--line-2); background: var(--elev); }
.stheme:active { transform: translateY(1px); }
.stheme.is-on {
  border-color: color-mix(in srgb, var(--brand-1) 60%, transparent);
  background: color-mix(in srgb, var(--brand-1) 10%, var(--panel-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-1) 30%, transparent);
}
.stheme__chip {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.stheme__meta { min-width: 0; }
.stheme__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
}
.stheme__tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-full);
  color: var(--faint);
  border: 1px solid var(--line-2);
}
.stheme__note {
  display: block;
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stheme:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.sswatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line-2);
  transition: transform .16s var(--ease-out), border-color .16s var(--ease);
}
.sswatch:hover { transform: scale(1.1); }
.sswatch.is-on { border-color: #fff; box-shadow: 0 0 0 1px var(--brand-1); }

.sfile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.sfile__preview {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  overflow: hidden;
}

/* blocked-user row */
.sblocked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.sblocked:last-child { border-bottom: 0; }
.sblocked__meta { min-width: 0; flex: 1 1 auto; }

@media (max-width: 760px) {
  .sheet { padding: 0; }
  .sheet__card { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .sheet__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sheet__nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px;
  }
  .sheet__tab { flex: 0 0 auto; padding: 8px 12px; }
  .sheet__tab--danger { margin-top: 0; margin-left: auto; }
  .srow { flex-wrap: wrap; }
  .srow__control > .input { width: 100%; }
  .sopts .sopt { flex: 1 1 100%; }
}

/* ============================================================
   23. pickers (emoji / stickers / GIFs)
   ============================================================ */
.sheet--picker { z-index: 220; }
.sheet__card--picker { width: min(620px, 94vw); height: min(560px, 84dvh); }

.picker {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.picker__tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.picker__tab {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease-out);
}
.picker__tab:hover { background: rgba(255,255,255,.06); color: var(--text); }
.picker__tab.is-on {
  background: var(--grad-brand-soft);
  border-color: color-mix(in srgb, var(--brand-1) 42%, transparent);
  color: #fff;
}

.picker__body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 18px; }

.emoji__group + .emoji__group { margin-top: 16px; }

.emoji__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 4px 8px;
}

.emoji__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
}

.emoji {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: var(--r-sm);
  transition: background .14s var(--ease), transform .14s var(--ease-out);
}
.emoji:hover { background: rgba(255,255,255,.08); transform: scale(1.15); }

.sticker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.sticker {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 42px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--hue, var(--brand-1)) 26%, transparent),
    rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--hue, var(--brand-1)) 34%, transparent);
  transition: transform .18s var(--ease-out), border-color .18s var(--ease);
}
.sticker:hover { transform: translateY(-3px) scale(1.04); border-color: var(--hue, var(--brand-1)); }

.gif__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.gifcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  transition: transform .18s var(--ease-out), border-color .18s var(--ease);
}
.gifcard:hover { transform: translateY(-2px); border-color: var(--brand-1); }
.gifcard img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}
.gifcard span {
  font-size: 11px;
  color: var(--muted);
  padding: 0 4px 4px;
  text-align: left;
}

/* attachment rendering for real uploads */
.msg__attach {
  cursor: pointer;
}
.msg__attach:hover { border-color: var(--line-2); background: rgba(255,255,255,.06); }

.msg__attach img.thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}
.msg__attach .thumb--file {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.msg__attach--big {
  display: block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
/* a picture that was let go to keep the save small: still there, but plainly
   not something to click */
.msg__attach--gone {
  cursor: default;
  opacity: .62;
  border-style: dashed;
}
.msg__attach--gone:hover { border-color: var(--line); background: rgba(255,255,255,.04); }
.msg__attach--big .msg__attach__image {
  display: block;
  width: auto;
  /* the recorded width/height are a shape, not a size: without this the
     height attribute would pin every picture to its own pixel height */
  height: auto;
  max-width: min(380px, 100%);
  max-height: min(360px, 55vh);
  object-fit: contain;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.3);
}

/* an audio or a video file plays in place rather than sitting in a row you
   have to download first; the name and a Save button sit under the player */
.msg__attach--media {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: 10px;
  cursor: default;
}
.msg__attach--media:hover { border-color: var(--line); background: rgba(255,255,255,.04); }
.msg__attach__video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(420px, 100%);
  /* Constrain both dimensions without stretching or cropping the clip. */
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: #000;
}
.msg__attach--audio { width: min(380px, 100%); }
.msg__attach__audio { display: block; width: 100%; }
.msg__attach--media .msg__file__meta { margin-top: 9px; }
.msg__attach__save {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cyan);
  font: inherit;
  cursor: pointer;
}
.msg__attach__save:hover { text-decoration: underline; }
.msg__media-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.msg__attach--big { position: relative; }
.msg__gif-heart {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  background: rgba(15,17,28,.85); color: white; cursor: pointer;
}
.msg__gif-heart svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.msg__gif-heart:hover, .msg__gif-heart.is-saved { color: #ff6b9d; }
.msg__gif-heart.is-saved path { fill: currentColor; }
.sync-status { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px 8px; font-size:11px; color:var(--muted); }
.sync-status[data-state="offline"] { color:var(--warn, #ffc53d); }
.sync-status button { background:transparent; color:var(--text); border:0; font:inherit; cursor:pointer; text-decoration:underline; }
.sync-status button[hidden] { display:none; }
.msg__attach__image[role="button"] { cursor:zoom-in; }
.modal--image-viewer .modal__card { width:min(1100px,94vw); max-width:94vw; }
.modal--image-viewer .modal__body { display:grid; place-items:center; padding:12px; }
.image-viewer__image { display:block; max-width:100%; max-height:70vh; width:auto; height:auto; object-fit:contain; }

/* downloaded-file action row */
.msg__file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  max-width: 420px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.msg__file__meta { min-width: 0; flex: 1 1 auto; }
.msg__file__meta strong { display: block; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg__file__meta span { font-size: 11.5px; color: var(--faint); }

  /* ============================================================
     24. system views (Friends / Inbox)
     ============================================================ */
.view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

/* the main column becomes the view when a system tab is open */
.main--view { grid-template-rows: minmax(0, 1fr); }
.main--view > .view { min-height: 0; }
.main--view .view__body > * { max-width: 880px; }

/* card grid used by the shop */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
}

.view__head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.view__head h2 { font-size: 21px; font-weight: 850; letter-spacing: -.02em; }
.view__head p { font-size: 13px; color: var(--muted); margin-top: 4px; }

.view__body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 32px; min-width: 0; }

.view__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--brand-1);
  color: #fff;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }

[hidden] { display: none !important; }

  /* ============================================================
     private chat — composer row, group rows, and the side panel
   ============================================================ */

/* the + sits outside the pill, as its own round control */
.composer__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}
.composer__attach {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--elev);
  border: 1px solid var(--line);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.composer__attach:hover { color: var(--text); background: color-mix(in srgb, var(--brand-1) 20%, transparent); }
.composer__attach svg { width: 19px; height: 19px; }
.composer__row .composer__box { flex: 1 1 auto; min-width: 0; }

/* the pinned reactions in the hover bar */
.msg__quick {
  width: 28px;
  height: 28px;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  transition: background .14s var(--ease), transform .14s var(--ease);
}
.msg__quick:hover { background: rgba(255,255,255,.08); transform: scale(1.12); }
.msg__quick.is-on { background: color-mix(in srgb, var(--brand-1) 22%, transparent); }

/* a group row in the DM list carries its own member count */
.dmitem.is-group { align-items: flex-start; }
.dmitem__count { height: 18px; font-size: 10.5px; padding: 0 7px; }
.dmitem__sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- the side panel ---------- */
.panel {
  flex: 0 0 288px;
  width: 288px;
  border-left: 1px solid var(--line);
  background: rgba(0,0,0,.16);
  overflow: hidden;
  display: flex;
}
.panel[hidden] { display: none; }
body.has-panel .main--dms { grid-template-columns: minmax(0, 1fr) 288px; }
body.has-panel .main--dms > .topbar { grid-column: 1 / -1; }
body.has-panel .main--dms > .thread { grid-column: 1; grid-row: 2; min-width: 0; }
body.has-panel .main--dms > .panel { grid-column: 2; grid-row: 2; min-height: 0; width: 100%; }
.thread__group-actions { display: flex; gap: 6px; flex-shrink: 0; }
.thread__group-actions .btn { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
@media (max-width: 520px) {
  .main--dms .topbar__head, .main--dms .topbar__gap { display: none; }
  .main--dms .topbar__search { flex: 1; max-width: none; }
}
@media (max-width: 1100px) { body.has-panel .main--dms { grid-template-columns: minmax(0, 1fr) 240px; } }
@media (max-width: 900px) {
  body.has-panel .main--dms { grid-template-columns: minmax(0, 1fr); }
  body.has-panel .main--dms > .panel { inset: 64px 0 0; width: 100%; }
  .thread__head { flex-wrap: wrap; }
  .thread__group-actions { order: 5; flex-basis: 100%; }
}

.panel__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 18px 16px;
  overflow-y: auto;
}
.panel__inner--group { padding: 0; }

.panel__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--faint);
  z-index: 2;
}
.panel__close:hover { color: var(--text); background: rgba(255,255,255,.07); }

.panel__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  padding-bottom: 14px;
}
.panel__hero h3 { font-size: 17px; font-weight: 850; }
.panel__handle { font-size: 12.5px; color: var(--muted); }
.panel__note {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  padding: 0 4px 12px;
}

.panel__block {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.panel__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}
.panel__addr {
  font-size: 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.panel__value { font-size: 12.5px; color: var(--muted); }
.panel__line { font-size: 12.5px; color: var(--muted); padding: 2px 0; }

.panel__acts { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; }
/* the contact card's actions run along the right under the name instead of
   stacking down the bottom of the card */
.panel__acts--top {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 0 2px;
}

/* group roster */
.panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.panel__head h3 { font-size: 14px; font-weight: 850; }
.panel__count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--elev);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.panel__scroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px; }
.panel__member {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  min-width: 0;
}
.panel__member:hover { background: rgba(255,255,255,.05); }
.panel__member__meta { flex: 1 1 auto; min-width: 0; }
.panel__member__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel__you {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ok);
}
.panel__member__sub {
  display: block;
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel__member__act { flex: 0 0 auto; }
.panel__foot {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

/* the topbar heading grows an avatar for a private chat */
.topbar__head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

/* account rows in the switcher */
.acctrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 0;
}
.acctrow.is-on { border-color: var(--ok); background: rgba(55,224,160,.07); }
.acctrow__meta { flex: 1 1 auto; min-width: 0; }
.acctrow__name {
  display: block;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
}
.acctrow__addr {
  display: block;
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.membergroup--action { padding: 8px; }

@media (max-width: 1100px) {
  .panel { flex-basis: 240px; width: 240px; }
}

@media (max-width: 900px) {
  /* on a phone the panel covers the thread instead of sitting beside it */
  .panel {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 20;
    background: var(--panel-solid, #14131f);
  }
  .topbar__head .av { display: none; }
}

/* a long name or a long channel name truncates rather than wrapping */
.modal__head p {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ============================================================
   inbox — list on the left, the message itself on the right
   ============================================================ */
.inbox {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 16px;
  min-height: 380px;
}

.inbox__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
  background: rgba(0,0,0,.16);
  min-width: 0;
}

.inbox__filters {
  display: flex;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.inbox__filter {
  flex: 1 1 0;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
.inbox__filter:hover { background: rgba(255,255,255,.05); color: var(--text); }
.inbox__filter.is-active { background: color-mix(in srgb, var(--brand-1) 18%, transparent); color: var(--text); }

.mailrow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 10px 11px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--muted);
  transition: background .16s var(--ease-out);
}
.mailrow:hover { background: rgba(255,255,255,.05); }
.mailrow.is-open { background: color-mix(in srgb, var(--brand-1) 16%, transparent); }
.mailrow__dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}
.mailrow.is-unread .mailrow__dot { background: var(--brand-1); box-shadow: 0 0 7px color-mix(in srgb, var(--brand-1) 80%, transparent); }
.mailrow__meta { flex: 1 1 auto; min-width: 0; }
.mailrow__from {
  display: block;
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mailrow__subj {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mailrow.is-unread .mailrow__subj { font-weight: 850; }
.mailrow__prev {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mailrow__time { flex: 0 0 auto; font-size: 10.5px; color: var(--faint); padding-top: 2px; }

.inbox__reader {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.16);
  padding: 18px 20px;
  min-width: 0;
  overflow-y: auto;
}

.mailread { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.mailread__head h3 { font-size: 17px; font-weight: 850; letter-spacing: -.015em; }
.mailread__from {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.mailread__from span { font-size: 12px; color: var(--muted); }
.mailread__acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.mailread__body {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  font: inherit;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}

/* ============================================================
   space settings — its own two-pane layout
   ============================================================ */
.view--space {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.spacebar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-1) 10%, transparent), transparent);
  flex: 0 0 auto;
}
.spacebar__name { font-size: 17px; font-weight: 850; letter-spacing: -.015em; }
.spacebar__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.spacelayout {
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}

.spacenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.spacenav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  text-align: left;
  transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
.spacenav__item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.spacenav__item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.spacenav__item.is-active { background: color-mix(in srgb, var(--brand-1) 18%, transparent); color: var(--text); }
.spacenav__item--back { margin-top: auto; color: var(--faint); }

.spacepane {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 26px 40px;
  min-width: 0;
}

.spacerow { margin-bottom: 18px; }
.spacerow h2 { font-size: 19px; font-weight: 850; letter-spacing: -.015em; }
.spacerow h3 { font-size: 15px; font-weight: 800; }
.spacerow p { margin-top: 4px; }

.spaceform {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.16);
}
.spaceform[aria-disabled="true"] { opacity: .72; }
.spaceform input[type="file"] { padding: 7px 10px; font-size: 12px; }

.preview {
  max-width: 620px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0,0,0,.16);
}
.preview__banner {
  height: 76px;
  background: linear-gradient(120deg, var(--tint), transparent);
  background-size: cover;
  background-position: center;
}
.preview__body { padding: 0 18px 18px; margin-top: -30px; }
.preview__body .av { border: 3px solid var(--surface-2, #14131f); margin-bottom: 10px; }
.preview__body strong { display: block; font-size: 18px; font-weight: 850; }
.preview__body p { margin: 5px 0 8px; font-size: 13px; color: var(--muted); }
.preview__body span { font-size: 11.5px; color: var(--faint); }

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-on { box-shadow: 0 0 0 2px var(--text); transform: scale(1.06); }
.swatch:disabled { opacity: .45; cursor: not-allowed; }

.chlist, .rolelist, .peoplelist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0,0,0,.16);
  max-width: 720px;
}

.chrow, .rolerow, .people {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.chrow:last-child, .rolerow:last-child, .people:last-child { border-bottom: 0; }

.chrow__ord {
  flex: 0 0 auto;
  width: 20px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  text-align: right;
}
.chrow__glyph, .rolerow__dot { flex: 0 0 auto; color: var(--muted); }
.chrow__glyph svg { width: 16px; height: 16px; }
.rolerow__dot { width: 11px; height: 11px; border-radius: 50%; }
.chrow__meta, .rolerow__meta, .people__meta { flex: 1 1 auto; min-width: 0; }
.chrow__name, .rolerow__name, .people__name {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 750;
}
.chrow__topic, .rolerow__sub, .people__sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chrow__acts, .rolerow__acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.people select { width: 130px; flex: 0 0 auto; }
.people.is-removed { opacity: .55; }
.chrow .icon-btn:disabled, .rolerow .icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.people select:disabled { opacity: .55; }

.member--empty { padding: 12px 14px; }
.member--empty .member__sub { white-space: normal; }

/* ---------- login note ---------- */
.auth__note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint);
}
.auth__note b { color: var(--muted); font-weight: 750; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox__reader { min-height: 260px; }
  .spacelayout { grid-template-columns: minmax(0, 1fr); }
  .spacenav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px;
  }
  .spacenav__item { flex: 0 0 auto; }
  .spacenav__item--back { margin-top: 0; margin-left: auto; }
}
/* ---------- update feed ----------
   A release is shown as one wide hero and then a change per
   row, each with its own coloured icon tile. The tone of the
   hero carries what kind of release it is: a named major one
   gets the brand gradient, a fix gets a quiet grey. */
.wn { display: flex; flex-direction: column; gap: 16px; }

.wn__hero {
  position: relative;
  overflow: hidden;
  padding: 20px 22px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--brand-3) 30%, transparent), transparent 62%),
    var(--panel-2);
}
.wn__hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-brand);
}
.wn__hero--minor::after { background: var(--grad-line); opacity: .8; }
.wn__hero--fix {
  background: var(--elev);
  border-style: dashed;
}
.wn__hero--fix::after { background: var(--line-3); }

.wn__herotop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wn__ver {
  font: 750 11px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}
.wn__kind {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-full);
  color: #fff;
  background: var(--grad-brand);
}
.wn__hero--minor .wn__kind { background: color-mix(in srgb, var(--brand-1) 55%, var(--elev)); }
.wn__hero--fix .wn__kind { background: var(--elev-hi); color: var(--muted); }

.wn__hero h4 { margin: 0 0 6px; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.wn__hero p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.wn__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wn__note {
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--elev) 70%, transparent);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.wn__note:hover { border-color: var(--line-2); transform: translateX(2px); }

/* the tile is what makes this read as a list of things rather
   than a wall of text: four tones, taken round the row */
.wn__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}
.wn__icon svg { width: 18px; height: 18px; }
.wn__icon--0 { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.wn__icon--1 { background: linear-gradient(135deg, var(--cyan), var(--brand-1)); }
.wn__icon--2 { background: linear-gradient(135deg, var(--brand-3), var(--warn)); }
.wn__icon--3 { background: linear-gradient(135deg, var(--ok), var(--cyan)); }

.wn__notebody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wn__notebody b { font-size: 13.5px; letter-spacing: -.01em; }
.wn__notebody span { font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.wn__archive-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.wn__archive-link svg { width: 15px; height: 15px; }
.wn__archive-link:hover { color: var(--text); border-color: var(--brand-1); }

/* ---------- the archive ---------- */
.wnarc { display: flex; flex-direction: column; gap: 14px; }
.wnarc__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--elev) 60%, transparent);
  padding: 14px 15px;
}
.wnarc__item.is-read { opacity: .78; }
.wnarc__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 11px; }
.wnarc__head h4 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.wnarc__ver { font: 750 11px/1 var(--mono); color: var(--text); letter-spacing: .05em; }
.wnarc__kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-full);
  color: #fff;
  background: var(--grad-brand);
}
.wnarc__kind--minor { background: color-mix(in srgb, var(--brand-1) 55%, var(--elev)); }
.wnarc__kind--fix { background: var(--elev-hi); color: var(--muted); }
.wnarc__date { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.wnarc__item .wn__note { background: none; padding: 9px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.wnarc__item .wn__note:hover { transform: none; }
.wnarc__item .wn__icon { width: 28px; height: 28px; }
.wnarc__item .wn__icon svg { width: 15px; height: 15px; }
/* ---------- version pill ----------
   In Settings > About the version number is the button into the
   update archive, so it needs to look pressable - and to carry a
   dot when there is a release this person has not read yet. */
.pill--action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  background: var(--elev);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.pill--action:hover { border-color: var(--brand-1); background: var(--elev-hi); }
.pill--action svg { width: 14px; height: 14px; color: var(--brand-1); }
.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-3) 25%, transparent);
}

/* ---------- @ mention picker ---------- */
.mnt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  border-radius: var(--r-md);
  background: var(--panel-solid);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
}
.mnt[hidden] { display: none; }
.mnt__head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 4px 8px 2px;
}
.mnt__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.mnt__item:hover,
.mnt__item.is-sel {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.mnt__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.mnt__meta b { font-size: 13px; font-weight: 600; }
.mnt__meta span { font-size: 11px; color: var(--faint); }

.msg__text .mention-text {
  color: #dee0fc;
  background: color-mix(in srgb, #5865f2 30%, transparent);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
}
/* a mention is a button into that person's card, so it keeps its pill but
   has to forget it is a <button> */
.msg__text button.mention-text {
  border: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.msg__text button.mention-text:hover { filter: brightness(1.18); }

/* Tenor search sits above the grid; the input is the same flush field
   used elsewhere so it does not look like a different app */
.gif__search { margin-bottom: 8px; }
.gif__input { width: 100%; }
.gif__status { margin: 0 0 10px; min-height: 14px; }

/* dragging a channel to reorder it: the row itself is the handle, and the
   half-faded copy is what is being carried */
.nav__item[data-channel] { cursor: grab; }
.nav__item[data-channel]:active { cursor: grabbing; }
.nav__item.is-dragging { opacity: .45; }

/* ---------- channel categories ---------- */
.nav__cat { margin-top: 2px; }
.nav__catbtn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 5px 8px 3px;
  background: transparent;
  border: 0;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.nav__catbtn:hover { color: var(--muted); }
.nav__catbtn--static { cursor: default; }
.nav__chev { display: inline-flex; width: 12px; height: 12px; transition: transform .18s var(--ease); }
.nav__chev svg { width: 12px; height: 12px; }
.nav__cat.is-collapsed .nav__chev { transform: rotate(-90deg); }
.nav__cat.is-collapsed .nav__catbody { display: none; }
.nav__catname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* categories editor inside space settings */
.catlist { display: flex; flex-direction: column; gap: 6px; }
.catrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.catrow__meta { min-width: 0; flex: 1 1 auto; }
.catrow__name { font-weight: 600; }
.catrow__sub { font-size: 11px; color: var(--faint); }
.catrow__acts { display: flex; gap: 4px; }
.chrow__cat { max-width: 130px; flex: 0 0 auto; }

/* ---------- space settings beside the channel name ---------- */
.topbar__spacebtn { flex: 0 0 auto; opacity: .8; }
.topbar__spacebtn:hover { opacity: 1; }

/* 3c. the colourful worlds -------------------------------------
   Five brighter themes, each naming only its surfaces and three
   brand stops - the rest of the sheet is derived from those, the
   same as the darker set above. */
[data-theme="candy"] {
  --bg-void: #100610;
  --bg-deep: #1a0a1c;
  --panel: rgba(44, 16, 44, .78);
  --panel-solid: #2b1029;
  --panel-2: #361536;
  --elev: #431b44;
  --elev-hi: #552357;

  --line: rgba(255, 180, 240, .10);
  --line-2: rgba(255, 180, 240, .18);
  --line-3: rgba(255, 180, 240, .28);

  --text: #fdeef9;
  --muted: #d0a8c8;
  --faint: #9c7a98;

  --brand-1: #ff6ec7;
  --brand-2: #7ce0ff;
  --brand-3: #ffd166;
}

[data-theme="sunset"] {
  --bg-void: #0d0505;
  --bg-deep: #170a08;
  --panel: rgba(42, 18, 16, .78);
  --panel-solid: #2a1210;
  --panel-2: #351713;
  --elev: #421d16;
  --elev-hi: #53251b;

  --line: rgba(255, 190, 150, .10);
  --line-2: rgba(255, 190, 150, .18);
  --line-3: rgba(255, 190, 150, .28);

  --text: #fdeee6;
  --muted: #d3a894;
  --faint: #9e7a68;

  --brand-1: #ff8a3d;
  --brand-2: #ff4d6d;
  --brand-3: #ffb347;
}

[data-theme="deepsea"] {
  --bg-void: #020a10;
  --bg-deep: #041420;
  --panel: rgba(8, 28, 42, .78);
  --panel-solid: #082333;
  --panel-2: #0b2c3f;
  --elev: #10374d;
  --elev-hi: #164860;

  --line: rgba(150, 225, 255, .09);
  --line-2: rgba(150, 225, 255, .17);
  --line-3: rgba(150, 225, 255, .27);

  --text: #e4f4fa;
  --muted: #8fb4c4;
  --faint: #618a9c;

  --brand-1: #12b3c7;
  --brand-2: #1f6feb;
  --brand-3: #45e0c0;
}

[data-theme="jungle"] {
  --bg-void: #040a04;
  --bg-deep: #081408;
  --panel: rgba(14, 32, 16, .78);
  --panel-solid: #0e2010;
  --panel-2: #142b16;
  --elev: #1b381d;
  --elev-hi: #244a26;

  --line: rgba(180, 235, 150, .09);
  --line-2: rgba(180, 235, 150, .17);
  --line-3: rgba(180, 235, 150, .27);

  --text: #edf7e6;
  --muted: #a6bd94;
  --faint: #748c66;

  --brand-1: #2bb673;
  --brand-2: #9acd32;
  --brand-3: #ffe066;
}

[data-theme="neon"] {
  --bg-void: #05030a;
  --bg-deep: #0a0518;
  --panel: rgba(18, 8, 38, .80);
  --panel-solid: #120826;
  --panel-2: #1a0d33;
  --elev: #24124a;
  --elev-hi: #331a63;

  --line: rgba(255, 120, 255, .12);
  --line-2: rgba(120, 240, 255, .18);
  --line-3: rgba(255, 120, 255, .30);

  --text: #f6ecff;
  --muted: #c2a6e6;
  --faint: #8f74b8;

  --brand-1: #ff00d4;
  --brand-2: #00e5ff;
  --brand-3: #faff00;
}

/* ============================================================
   Overhaul batch: theme character, sidebar space header,
   server tags, category headers, popup picker, modal scroll
   ============================================================ */

/* ---------- modal: never taller than the window, body scrolls ---------- */
.modal__card {
  max-height: min(720px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
}
.modal__head,
.modal__foot { flex: 0 0 auto; }
.modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- sidebar: the space you are standing in ---------- */
.spacehead { padding: 0; }
.spacehead--empty { height: 0; padding: 0; }

.spacehead__banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 108px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: height .2s var(--ease), border-color .2s var(--ease);
}
.spacehead__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, .66));
}
.spacehead__banner:hover { border-color: var(--line-3); }
.spacehead__name {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 8px 11px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- server tags + category headings ---------- */
.nametag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  font: 800 9.5px/1.5 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 1px 6px -2px color-mix(in srgb, var(--brand-1) 70%, transparent);
}

.nav__section { margin-bottom: 4px; }

/* a category header reads exactly like the Text channels heading */
.nav__heading--cat { padding: 0 8px; }
.nav__heading--cat .nav__catbtn {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.nav__heading--cat .nav__catbtn:hover { color: var(--text); }
.nav__heading--cat .nav__catbtn .nav__chev { flex: 0 0 auto; }

/* ---------- picker as a small popup on the button ---------- */
.sheet--pop {
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
  /* the see-through layer must not eat the click that dismisses it */
  pointer-events: none;
}
.sheet__card--pop {
  position: fixed;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #080b16;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop .18s var(--ease-out) both;
  pointer-events: auto;
}
.sheet--pop .sheet__head { padding: 10px 12px; }
.sheet--pop .sheet__head h2 { font-size: 13.5px; }
.sheet--pop .sheet__head .icon-btn { width: 26px; height: 26px; }
.sheet--pop .picker__tabs { padding: 8px 10px; }
.sheet--pop .picker__body { padding: 10px 12px 14px; }
.sheet--pop .gif__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ============================================================
   Theme character: each world gets its own shape, texture and
   light - not just different colours.
   ============================================================ */

/* Midnight - crisp, engineered, cold grid, tight corners */
[data-theme="midnight"] { --r-xs: 5px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; }
[data-theme="midnight"] .blob { opacity: .38; filter: blur(112px); }
[data-theme="midnight"] .sky__grid {
  background-image:
    linear-gradient(rgba(150, 200, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 200, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Ember - warm, squared-off, a bed of heat glowing from below */
[data-theme="ember"] { --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 11px; --r-xl: 14px; }
[data-theme="ember"] .sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--brand-1) 34%, transparent), transparent 72%);
}
[data-theme="ember"] .blob--a { opacity: .62; filter: blur(76px); }

/* Orchid - soft, round, dreamy bloom */
[data-theme="orchid"] { --r-xs: 8px; --r-sm: 12px; --r-md: 17px; --r-lg: 23px; --r-xl: 30px; }
[data-theme="orchid"] .blob { opacity: .6; filter: blur(100px); }
[data-theme="orchid"] .sky__grid {
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 140, 230, .10) 1.5px, transparent 2.5px);
  background-size: 52px 52px;
}

/* Moss - organic, very round, a canopy of soft dots */
[data-theme="moss"] { --r-xs: 8px; --r-sm: 13px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; }
[data-theme="moss"] .blob { opacity: .44; filter: blur(96px); }
[data-theme="moss"] .sky__grid {
  background-image: radial-gradient(circle at 50% 50%, rgba(160, 240, 140, .10) 2px, transparent 3px);
  background-size: 30px 30px;
}

/* Candy - bouncy and round, polka dots everywhere */
[data-theme="candy"] { --r-xs: 9px; --r-sm: 14px; --r-md: 19px; --r-lg: 26px; --r-xl: 34px; }
[data-theme="candy"] .blob { opacity: .56; filter: blur(86px); }
[data-theme="candy"] .sky__grid {
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 150, 220, .13) 2px, transparent 3px);
  background-size: 40px 40px;
}

/* Sunset - a warm horizon settles at the bottom of the sky */
[data-theme="sunset"] { --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; }
[data-theme="sunset"] .sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 74%);
}

/* Deep sea - shafts of light falling through cold water */
[data-theme="deepsea"] { --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; }
[data-theme="deepsea"] .sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(74deg,
    color-mix(in srgb, var(--brand-3) 12%, transparent) 0 2px,
    transparent 2px 46px);
}

/* Jungle - dappled light through a leaf canopy */
[data-theme="jungle"] { --r-xs: 6px; --r-sm: 11px; --r-md: 15px; --r-lg: 21px; --r-xl: 28px; }
[data-theme="jungle"] .sky__grid {
  background-image:
    radial-gradient(circle at 30% 55%, rgba(180, 255, 150, .12) 2px, transparent 3px),
    radial-gradient(circle at 70% 25%, rgba(255, 245, 170, .10) 2px, transparent 3px);
  background-size: 44px 44px, 62px 62px;
}

/* Neon - hard edges, scanlines, everything hums */
[data-theme="neon"] { --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 9px; --r-xl: 12px; }
[data-theme="neon"] .blob { opacity: .66; filter: blur(74px); }
[data-theme="neon"] .sky__grid {
  background-image:
    linear-gradient(rgba(255, 80, 240, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 240, 255, .10) 1px, transparent 1px);
  background-size: 40px 40px;
}
[data-theme="neon"] .sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
}
[data-theme="neon"] {
  --glow: 0 0 0 1px color-mix(in srgb, var(--brand-1) 55%, transparent),
          0 0 34px -6px color-mix(in srgb, var(--brand-1) 75%, transparent),
          0 0 60px -10px color-mix(in srgb, var(--brand-2) 60%, transparent);
}

/* ---- mention highlight: a ping for someone else is a soft accent, a ping
   for you is the full blue so it is unmistakable in a scroll ---- */
.msg__text .mention-text--me {
  color: #fff;
  background: #5865f2;
  box-shadow: 0 0 0 1px color-mix(in srgb, #5865f2 70%, #000);
}
.msg.is-mention .msg__text .mention-text--me { background: #4752c4; }

/* ---- rail home unread ping ---- */
.rail__home .rail__badge { right: -6px; top: -6px; bottom: auto; }

/* ---- role member picker in Space settings ---- */
.picklist { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; }
.pickrow { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; }
.pickrow:hover { background: var(--elev); }
.pickrow input { accent-color: var(--brand-1); width: 16px; height: 16px; flex: 0 0 auto; }
.pickrow__name { font-weight: 700; font-size: 13.5px; }
.pickrow__sub { margin-left: auto; font-size: 11px; color: var(--faint); }

/* ---- several role chips on one name ---- */
.member__name .role, .people__name .role { flex: 0 0 auto; }

/* ============================================================
   Release pass — custom colour picker, cropper zoom, server icon
   ============================================================ */

/* ---- custom colour picker (replaces the native OS dialog) ---- */
.cp {
  position: fixed;
  z-index: 340;
  width: 252px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md), 0 26px 60px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@keyframes cp-in { from { opacity: 0; } }
.cp { animation: cp-in .13s var(--ease-out); }
.cp__head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; }
.cp__x {
  width: 24px; height: 24px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.cp__x:hover { color: var(--text); background: var(--elev); }
.cp__x svg { width: 13px; height: 13px; }
.cp__sv { width: 100%; height: 150px; border-radius: 8px; cursor: crosshair; touch-action: none; display: block; }
.cp__hue { width: 100%; height: 14px; border-radius: 7px; cursor: pointer; touch-action: none; display: block; }
.cp__row { display: flex; align-items: center; gap: 8px; }
.cp__dropper {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.cp__dropper:hover { color: var(--text); background: var(--elev); }
.cp__dropper svg { width: 16px; height: 16px; }
.cp__prev { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line-2); background: #7c5cff; }
.cp__hex {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--text); font-size: 13px;
  letter-spacing: .03em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cp__hex:focus { outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 22%, transparent); }
.cp__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.cp__swatch { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; padding: 0; }
.cp__swatch:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }

/* ---- cropper zoom bar ---- */
.crop__bar { display: flex; align-items: center; gap: 8px; width: 100%; }
.crop__step {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--text); font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.crop__step:hover { background: var(--elev); }
.crop__range { flex: 1 1 auto; min-width: 0; accent-color: var(--brand-1); }

/* ---- slow mode: a wait is a number, so it is a slider ---- */
.slowpick { display: flex; align-items: center; gap: 12px; width: 100%; }
.slowpick__slider { flex: 1 1 auto; min-width: 0; accent-color: var(--brand-1); }
.slowpick__out {
  flex: 0 0 auto; min-width: 92px; text-align: right;
  font-size: 13px; color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- picture icons for spaces ---- */
.rail__iconimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover; display: block;
}
.spacehead__ico, .preview__icon { overflow: hidden; }
.spacehead__ico img, .preview__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- mention tiles in the rail: red for a name, quiet white for unread ---- */
.rail__badge--quiet { background: #fff; color: #1b1d29; }

.spacehead__ico {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  margin: 0 0 8px 11px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.preview__icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
}

/* the hex label beside a colour chip */
.colour__live {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .03em;
}

/* a channel that is holding a mention wears the loud red badge; a plain
   unread one keeps the ordinary accent count */
.badge--mention {
  background: var(--danger);
  color: #fff;
}

/* ============================================================
   22. performance pass
   A page change used to re-blur the whole viewport twice over: the veil
   blurred everything behind it, and the change keyframes blurred the whole
   body. On top of that three huge blobs drifted behind three more glass
   panels and 130 stars twinkled, so the compositor never had a still frame
   to cache. Those are the reasons a change felt heavy and could stutter
   even though the hand-off itself is only 90ms. Everything here removes
   work rather than moving anything: the layout is untouched.
   ============================================================ */

/* the veil is already a near-opaque wash, so blurring the page behind it
   bought nothing and cost a full-screen backdrop filter every frame */
.veil { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* the sky keeps its colours but stops moving: a still backdrop means the
   glass panels over it are read once instead of on every single frame */
.blob { animation: none !important; }
.star { animation: none !important; }

/* ============================================================
   23. small screens: phones, Chromebooks, half-height windows
   The four-column grid already folds down in section 19; this is the
   detail around it - the notch, the mobile toolbars, and the flat, cheap
   surfaces a small device needs.
   ============================================================ */

/* browser chrome is not part of the page: keep controls clear of the notch
   and the home indicator, and follow the *visible* viewport rather than the
   old 100vh, which hides content behind mobile toolbars. The plain 100vh
   lines stay first as a fallback for browsers without dvh. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
.app {
  grid-template-rows: 100vh;
  grid-template-rows: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
}
.topbar { padding-top: var(--safe-t); }
.nav { padding-bottom: var(--safe-b); }
.rail { padding-bottom: var(--safe-b); }
.nav { padding-left: var(--safe-l); }
.main { padding-right: var(--safe-r); }
.composer__row { padding-bottom: calc(var(--safe-b) + 4px); }
.composer__slow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 0 52px;
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}

/* flat, cheap panels on touch screens and small windows: backdrop blur
   during a scroll is the heaviest thing this app does on a phone, and a
   slightly more solid panel reads just as well at that size */
@media (max-width: 900px), (pointer: coarse) {
  .main, .nav, .rail, .memlist, .topbar, .veil {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .main { background: rgba(6, 8, 18, .84); }
}

/* a Chromebook in a half-height window, or a phone held sideways: trim the
   chrome before the messages lose a line */
@media (max-height: 640px) {
  :root { --topbar-h: 54px; }
  .page { padding-top: 16px; }
}

/* the tightest phones: a little less padding, still roomy enough to tap */
@media (max-width: 420px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .topbar { padding-left: 10px; padding-right: 10px; }
  .composer__row { gap: 6px; }
  .nav__scroll { padding-left: 10px; padding-right: 10px; }
  .composer__slow { padding-left: 46px; }
}

/* never let a stray wide child drag the whole page sideways on a phone */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* ============================================================
   24. instant-render pass + back-to-top
   Nothing here moves anything: it removes work. The glass panels lose
   their backdrop filter on anything that is not a wide desktop (a
   Chromebook is a fine-pointer laptop, so section 23's phone rule never
   caught it), the last infinite decorative animations are stopped so the
   compositor can go idle, and one floating button gives the long panes a
   way back to the top.
   ============================================================ */

/* glass is the most expensive thing a scroll can carry: the blur is recomputed
   whenever anything beneath a panel repaints. Keep it on wide desktops only -
   flatten it for laptops, Chromebooks, touch and slow refresh, and whenever
   the OS asks for less transparency. */
@media (max-width: 1440px), (pointer: coarse), (update: slow) {
  .main, .nav, .rail, .memlist, .topbar, .veil {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .main { background: rgba(6, 8, 18, .84); }
  .nav  { background: rgba(5, 7, 15, .9); }
}
@media (prefers-reduced-transparency: reduce) {
  .main, .nav, .rail, .memlist, .topbar, .veil, .toast, .modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* no animation that never ends: a loop keeps the compositor awake forever for
   no perceived benefit. Finite entrance animations (toast, modal, list
   stagger) all finish, so they stay. */
.skel { animation: none; }
.typing__dots i { animation: none; opacity: .7; }
.veil__mark .nav__mark { animation: none; }

/* back-to-top: one button for whichever pane is scrolling */
.scrolltop {
  position: fixed;
  right: 18px;
  bottom: calc(var(--safe-b, 0px) + 84px);
  z-index: 45;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(14, 16, 28, .92);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease-out);
}
.scrolltop svg { width: 20px; height: 20px; }
.scrolltop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.scrolltop:hover { background: rgba(24, 26, 44, .96); border-color: var(--brand-1); }
@media (max-width: 520px) {
  .scrolltop { right: 12px; bottom: calc(var(--safe-b, 0px) + 96px); }
}

/* live filters (nebula-shell.js): a typed query hides non-matching rows in
   place, so filtering never refetches and never rebuilds the list. */
.is-filtered-out { display: none !important; }
.nav__scroll.is-filter-empty::after,
.msgs.is-filter-empty::after {
  content: "No matches";
  display: block;
  padding: 14px 12px;
  color: var(--faint);
  font-size: 12.5px;
  text-align: center;
}

/* ============================================================
   25. the system's "less motion" request
   The in-app Reduce motion toggle (section 21) already covers every
   animation, but that only helps someone who goes looking for the setting.
   A person whose OS asks for less motion gets the same treatment here, with
   no setting to find and no reload needed.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .blob, .star, .veil__mark .nav__mark { animation: none !important; }
  .profilepop, .profilepop.is-in { transition: none; opacity: 1; transform: none; }
  .profilepop--centre, .profilepop--centre.is-in { transform: translate(-50%, -50%); }
}

/* ============================================================
   26. tooltips that have to leave their scroll box

   A CSS tooltip is the anchor's own ::after, so it is laid out inside whatever
   scroll box the anchor sits in - and a scroll box clips everything it does not
   scroll to. The space names in the rail were never actually readable because
   of that, and the hidden tips were enough to give the rail horizontal scroll
   of its own (a 71px rail whose scroll width measured 207px).

   Inside these scrollers the tooltip is drawn by the fixed layer in
   nebula-shell.js instead, which belongs to the viewport and cannot be clipped.
   The ::after is switched off so it also stops widening the box.
   ============================================================ */
.rail__list [data-tip]::after,
.nav__scroll [data-tip]::after,
.msgs [data-tip]::after,
.memlist__scroll [data-tip]::after,
.panel__scroll [data-tip]::after,
.picklist [data-tip]::after,
.view__body [data-tip]::after,
.profilepop [data-tip]::after { display: none; }

.floattip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 400;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: #05070f;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
}
.floattip.is-in { opacity: 1; transform: none; }

/* ============================================================
   27. the sheet of keys
   The bindings are only folklore if nothing ever writes them down. A plain
   two-column list: what it does on the left, the keys on the right.
   ============================================================ */
.keys { display: grid; gap: 0; }
.keys__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.keys__row:last-child { border-bottom: 0; }
.keys__row > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.keys__row kbd {
  flex: 0 0 auto;
  font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  color: var(--text);
  white-space: nowrap;
}

/* ============================================================
   28. a file being dragged over the page
   An outline, so the composer says "here" without moving anything: no
   transition, nothing to reflow.
   ============================================================ */
.composer.is-drop {
  outline: 2px dashed var(--brand-1);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

.msg__pin-label { display:flex; align-items:center; gap:5px; margin-bottom:4px; font-size:11px; color:var(--brand-2); }
.msg__pin-label svg { width:12px; height:12px; }
.pin-entry__meta { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.dmitem__pin { display:inline-flex; flex:0 0 auto; color:var(--brand-2); }
.dmitem__pin svg { width:12px; height:12px; }
.composer__count { padding:4px 8px 0; text-align:right; color:var(--muted); font-size:11px; }
.composer__count[data-over="true"] { color:var(--danger); }
.replyline[role="button"] { cursor:pointer; }
.web[hidden],.web [hidden] { display:none!important; }
.web { position:fixed;inset:0 0 0 var(--rail-w);z-index:265;display:flex;flex-direction:column;background:#0c1020;color:#edf0ff; }
.web--browsing { left:0; }
.web__bar { display:flex;align-items:center;gap:6px;padding:10px 12px;background:#151a2e;border-bottom:1px solid #ffffff12;flex-shrink:0; }
.web__bar button { display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:#cbd0e8;font-size:21px;cursor:pointer;flex-shrink:0; }
.web__bar button:hover { background:#ffffff10;color:white; }
.web__bar button:disabled { opacity:.3;cursor:default; }
.web__bar button svg { width:18px;height:18px; }
.web__bar form { display:flex;flex:1;min-width:30px;border:1px solid #ffffff12;border-radius:10px;background:#0b1020; }
.web__bar input { width:100%;min-width:0;background:transparent;color:#edf0ff;border:0;outline:0;padding:0 12px;font:13px system-ui; }
.web__bar form:focus-within { border-color:#9c8cff; }
.web iframe { display:none;flex:1;width:100%;min-height:0;border:0;background:white; }
.web--browsing iframe { display:block; }
.web__home { overflow-y:auto;flex:1;padding:clamp(35px,8vh,100px) max(24px,calc((100% - 820px)/2));background:radial-gradient(ellipse at 70% 0,#7562bb25,transparent 65%),#0c1020; }
.web__eyebrow { font:10px system-ui;letter-spacing:.22em;color:#9398b9; }
.web__brand { display:flex;align-items:center;gap:12px;margin:22px 0 32px;font-size:23px;letter-spacing:-.04em; }
.web__brand svg { width:36px;height:36px;color:#ad9bff; }
.web__brand strong { color:#b4a2ff;font-weight:500; }
.web__home h1 { font-size:clamp(32px,5vw,52px);letter-spacing:-.05em;line-height:1.15;margin:0 0 12px; }
.web__home>p { color:#a8afca;font-size:15px; }
.web__search { display:flex;margin:32px 0 24px;border:1px solid #8e7fba60;background:#1a1e33;border-radius:16px;padding:8px;box-shadow:0 15px 60px #0003; }
.web__search:focus-within { border-color:#b9a9ff; }
.web__search input { flex:1;min-width:0;border:0;background:transparent;color:#fff;padding:12px;font:15px system-ui;outline:0; }
.web__search button { background:#b5a4ff;color:#19112e;border:0;border-radius:10px;padding:0 20px;font-weight:700;cursor:pointer; }
.web__shortcuts { display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 32px; }
.web__shortcut { display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;background:#151a2c;border:1px solid #ffffff10;border-radius:13px;padding:18px;min-width:160px;max-width:250px;flex:1;color:#e7e9f7;cursor:pointer;overflow:hidden; }
.web__shortcut:hover { background:#20253c;border-color:#b5a4ff60; }
.web__shortcut span { color:#b5a4ff;font:22px Georgia;margin-bottom:10px; }
.web__shortcut strong { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.web__shortcut small { color:#8f97b6;font-size:11px; }
.web__home h2 { font-size:12px;letter-spacing:.03em;color:#a7aec9; }
.web__home .web__hint { font-size:12px;color:#737e9e;line-height:1.8; }
.web__status { min-height:25px;padding:5px 14px;background:#151a2e;font:11px system-ui;color:#a0abc8;flex-shrink:0; }
.web__progress { height:2px;background:linear-gradient(90deg,#7562bb,#b9a9ff,#7562bb);flex-shrink:0; }
@media(max-width:600px){.web__bar{gap:1px;padding:7px 4px}.web__bar button{width:29px}.web__bar input{padding:0 6px;font-size:12px}.web__shortcut{min-width:120px;padding:14px}.web__search button{padding:0 12px}.web__home{padding-top:35px}.web__brand{margin-bottom:24px}}
.av__identicon { position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none; }
.recovery-key { overflow-wrap:anywhere;user-select:all;padding:16px;background:var(--elev);border:1px solid var(--line);border-radius:var(--r-md); }
/* Web uses the same surfaces, type and controls as chat. */
.web { background:var(--panel-solid);color:var(--text);font-family:inherit; }
.web__bar,.web__status { background:var(--panel-2);border-color:var(--line);color:var(--muted); }
.web__bar button { color:var(--muted);border-radius:var(--r-sm); }
.web__bar form { background:var(--bg-deep);border-color:var(--line);border-radius:var(--r-md); }
.web__bar input { font:inherit;font-size:13px;color:var(--text); }
.web__home { padding:32px max(24px,calc((100% - 860px)/2));background:var(--panel-solid); }
.web__eyebrow { display:none; }
.web__brand { margin:4px 0 32px;font-family:inherit;font-size:17px;font-weight:700;letter-spacing:normal; }
.web__brand svg { width:24px;height:24px;color:var(--brand-1); }
.web__brand strong { color:var(--text);font-weight:700; }
.web__home h1 { font-size:26px;letter-spacing:-.025em;margin-bottom:8px; }
.web__home>p { color:var(--muted);font-size:14px; }
.web__search { margin:22px 0;border-radius:var(--r-md);background:var(--elev);border-color:var(--line);box-shadow:none;padding:6px; }
.web__search input { font-family:inherit;color:var(--text);font-size:14px; }
.web__search button { background:var(--brand-1);color:white;font-family:inherit;border-radius:var(--r-sm); }
.web__shortcut { background:var(--panel-2);border-color:var(--line);border-radius:var(--r-md);color:var(--text);padding:16px; }
.web__shortcut:hover { background:var(--elev);border-color:var(--line-2); }
.web__shortcut span { color:var(--brand-1);font-family:inherit; }
.web__shortcut small,.web__home h2,.web__home .web__hint { color:var(--muted); }
.web--reader iframe { display:none!important; }
.web__bar .web__mode { width:auto;padding:0 8px;font:600 12px var(--font); }
.web__mode[aria-pressed="true"] { background:var(--brand-1);color:white; }
.web__reader { overflow:auto;flex:1;padding:28px max(24px,calc((100% - 850px)/2));line-height:1.7;overflow-wrap:anywhere; }
.web__reader h1 { font-size:25px;margin:0 0 15px; }
.web__reader p,.web__reader ul,.web__reader ol { margin:12px 0; }
.web__reader h2 { font-size:20px;margin-top:22px; }
.web__reader button.web__reader-link { display:inline;background:transparent;border:0;padding:0;color:var(--brand-1);text-align:left;font:inherit;cursor:pointer;text-decoration:underline; }
.web__reader pre { white-space:pre-wrap; }
/* Searchable fonts stay inside the settings pane at every text size. */
.font-picker { width:100%; min-width:0; display:grid; gap:12px; }
.font-picker > .input { width:100%; min-width:0; box-sizing:border-box; }
.font-picker__current { overflow-wrap:anywhere; font-size:13px; }
.font-picker__results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:8px; max-height:260px; overflow:auto; padding:2px; }
.font-picker__choice { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); color:inherit; font:inherit; font-size:14px; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.font-picker__choice:hover, .font-picker__choice[aria-pressed="true"] { background:rgba(124,92,255,.18); border-color:var(--brand-1); }
.font-picker__count { grid-column:1/-1; color:var(--muted); font-size:12px; }
.font-picker__preview { margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; font-size:16px; line-height:1.6; overflow-wrap:anywhere; }
.srow--stack:has(.font-picker) .srow__control { min-width:0; width:100%; }
.ea-controls { display:flex; gap:8px; flex-wrap:wrap; }
.ea-controls .input { flex:1 1 180px; min-width:0; }
.ea-users { display:grid; gap:8px; }
.ea-user { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.ea-user > span { min-width:0; overflow-wrap:anywhere; }
.ea-user small { color:var(--muted); }
.web__help { position:absolute; left:16px; right:16px; bottom:40px; z-index:3; padding:18px; border:1px solid var(--line); border-radius:12px; background:#171b2b; color:#eef0ff; box-shadow:0 8px 30px #0008; max-width:620px; }
.web__help[hidden] { display:none; }
.web__help p { font-size:13px; line-height:1.5; margin:8px 0 12px; }
/* Nebular AI */
.nebular-ai { position:fixed; inset:0 0 0 var(--rail-w); z-index:80; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--brand-1) 8%,transparent),transparent 60%),var(--bg-deep); color:var(--text); }
.nebular-ai[hidden] { display:none; }
.ai-header { display:flex; align-items:center; gap:12px; padding:16px 28px; border-bottom:1px solid var(--line); background:var(--panel); }
.ai-header > div { flex:1; display:grid; gap:4px; }
.ai-header b { font-size:18px; }
.ai-header span { color:var(--muted); font-size:12px; }
.ai-stream { flex:1; min-height:0; overflow:auto; padding:28px max(24px,calc((100% - 780px)/2)); }
.ai-welcome { max-width:720px; margin:clamp(20px,6vh,80px) auto 20px; text-align:center; }
.ai-welcome > span { display:grid; place-items:center; width:64px; height:64px; margin:auto; border:1px solid var(--line-2); border-radius:20px; background:var(--grad-brand-soft); font-size:34px; color:var(--brand-1); }
.ai-welcome h1 { font-size:clamp(24px,4vw,34px); margin:22px 0 10px; letter-spacing:-.8px; }
.ai-welcome p { color:var(--muted); line-height:1.6; }
.ai-prompts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; }
.ai-prompts button { display:grid; gap:8px; text-align:left; border:1px solid var(--line-2); border-radius:14px; padding:18px; background:var(--panel); color:var(--text); font:inherit; cursor:pointer; }
.ai-prompts button:hover { border-color:var(--brand-1); background:var(--panel-2); }
.ai-prompts b { font-size:13px; }.ai-prompts span { color:var(--muted); font-size:12px; line-height:1.5; }
.ai-message { width:fit-content; max-width:100%; min-width:0; box-sizing:border-box; padding:18px 0; margin:0 0 16px; background:transparent; }
.ai-message--user { margin-left:auto; max-width:88%; padding:16px 20px; border:1px solid var(--line); border-radius:18px 18px 4px 18px; background:color-mix(in srgb,var(--brand-1) 28%,var(--panel-solid)); border-color:color-mix(in srgb,var(--brand-1) 65%,var(--line)); }
.ai-message > strong { display:block; font-size:12px; color:var(--muted); margin-bottom:10px; }
.ai-message > div { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.ai-thinking { color:var(--muted); }
.ai-compose { width:min(840px,100%); align-self:center; padding:14px 24px 36px; box-sizing:border-box; }
.ai-compose > p { text-align:center; font-size:12px; color:var(--muted); }
.ai-compose form { display:flex; align-items:flex-end; gap:10px; padding:8px; border:1px solid var(--line-2); border-radius:18px; background:var(--panel-solid); box-shadow:0 8px 30px #0002; }
.ai-compose form:focus-within { border-color:var(--brand-1); }
.ai-compose textarea.input { flex:1; width:0; min-width:0; resize:none; min-height:48px; max-height:144px; padding:13px 10px; border:0; border-radius:10px; background:transparent; box-shadow:none; line-height:22px; }
.ai-compose [data-ai-send] { width:44px; height:44px; padding:10px; margin:2px; border-radius:12px; flex-shrink:0; }
.ai-compose__meta { display:flex; justify-content:space-between; gap:12px; padding:10px 3px 0; color:var(--muted); font-size:11px; }
.ai-compose .ai-privacy { font-size:10px; margin:8px 0 0; color:var(--faint); }
.ai-build { position:absolute; left:18px; bottom:12px; color:var(--muted); font:11px var(--mono); pointer-events:none; }
.ai-alert { padding:14px 16px; margin-bottom:12px; border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); border-radius:12px; background:color-mix(in srgb,var(--warn) 7%,var(--panel-solid)); font-size:12px; line-height:1.6; }
.ai-alert[hidden] { display:none; }.ai-alert strong { color:var(--warn); }.ai-alert p { margin:5px 0 8px; overflow-wrap:anywhere; }
.ai-status { font-size:12px; color:var(--muted); margin-top:9px; overflow-wrap:anywhere; }
.early-access-tag { display:inline-block; margin-left:8px; padding:3px 8px; border-radius:20px; background:color-mix(in srgb,var(--brand-1) 18%,transparent); color:var(--text); font-size:10px; font-weight:600; vertical-align:middle; text-transform:none; letter-spacing:0; }
.custom-theme__name { display:grid; gap:8px; font-size:13px; }
.custom-theme__colors { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:12px; }
.custom-theme__colors label { display:grid; gap:8px; font-size:12px; }
.custom-theme__colors input { width:100%; height:40px; padding:3px; border:1px solid var(--line-2); background:var(--panel-solid); border-radius:8px; cursor:pointer; }
.custom-theme__preview { padding:20px; border:2px solid; border-radius:14px; line-height:1.6; }
.custom-theme__preview p { margin:6px 0 0; }
@media(max-width:600px) { .ai-header { padding:12px; } .ai-header b { font-size:15px; } .ai-compose { padding:12px 12px 36px; } .ai-compose form { gap:6px; } .ai-stream { padding:16px 12px; } .ai-prompts { grid-template-columns:1fr; gap:8px; margin-top:20px; } .ai-prompts button { padding:12px 16px; } .ai-compose__meta { flex-wrap:wrap; gap:5px; } .ai-welcome { margin-top:12px; } }

.ai-workspace { display:flex; flex:1; min-height:0; min-width:0; position:relative; }
.ai-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.ai-history { width:250px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; padding:22px 14px 38px; border-right:1px solid var(--line); background:var(--panel); box-sizing:border-box; }
.ai-history__heading { display:grid; gap:5px; padding:0 6px; }
.ai-history__heading b { font-size:14px; }.ai-history__heading > span { font-size:11px; color:var(--muted); }
.ai-history > input { width:100%; min-width:0; font-size:12px; }
.ai-history__list { overflow:auto; min-height:0; display:grid; align-content:start; gap:8px; }
.ai-history__chat { display:grid; gap:7px; width:100%; min-width:0; padding:13px; text-align:left; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.ai-history__chat:hover { background:var(--panel-2); }.ai-history__chat.is-active { background:color-mix(in srgb,var(--brand-1) 13%,var(--panel-solid)); border-color:color-mix(in srgb,var(--brand-1) 45%,var(--line)); }
.ai-history__chat b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-history__chat > span { font-size:11px; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.ai-history__chat small { font-size:10px; color:var(--faint); }
.ai-history-toggle { display:none; }
.ai-attachments { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.ai-file { display:inline-flex; align-items:center; gap:8px; padding:6px 8px; max-width:100%; min-width:0; border:1px solid var(--line-2); border-radius:10px; background:var(--panel-solid); color:var(--text); margin:4px 4px 0 0; box-sizing:border-box; }
.ai-file img { width:48px; height:48px; object-fit:cover; border-radius:6px; }
.ai-file > span { font-size:11px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-file__icon svg { width:22px; height:22px; }.ai-file .icon-btn { width:28px; height:28px; flex-shrink:0; }
.ai-compose [data-ai-attach] { margin:6px 0; flex-shrink:0; }
@media(max-width:800px) {
 .ai-history-toggle { display:inline-flex; }.ai-history { display:none; }
 .ai-history-open .ai-history { display:flex; position:absolute; inset:0 auto 0 0; z-index:3; width:min(290px,90%); background:var(--panel-solid); box-shadow:12px 0 32px #0005; }
 .ai-header { gap:7px; padding:12px; flex-wrap:wrap; }.ai-header b { font-size:15px; }.ai-header .btn { padding:8px 10px; font-size:11px; }
}

.ai-message > div strong { display:inline; color:inherit; font-size:inherit; font-weight:750; }
.ai-message > div pre { white-space:pre; overflow:auto; padding:14px; border-radius:10px; background:var(--panel-solid); border:1px solid var(--line); max-width:100%; }
.ai-message > div code { font-family:var(--mono); font-size:.9em; background:var(--panel-solid); padding:2px 5px; border-radius:4px; }
.ai-message > div pre code { padding:0; background:none; }
.settings-search { padding:0 22px 14px; border-bottom:1px solid var(--line); }.settings-search .input { width:100%; }
.settings-results { display:grid; gap:10px; }.settings-result { display:grid; gap:7px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); text-align:left; color:var(--text); font:inherit; cursor:pointer; }
.settings-result:hover { border-color:var(--brand-1); }.settings-result small,.settings-result span { font-size:12px; color:var(--muted); }.setting-found { outline:2px solid var(--brand-1); outline-offset:-2px; border-radius:8px; }

.sheet__card--settings { grid-template-rows:auto auto minmax(0,1fr); }

.channel-create-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.channel-create-grid .field { min-width:0; }.channel-create-grid .input { width:100%; }.channel-create-topic { grid-column:1/-1; }
.channel-preview { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid color-mix(in srgb,var(--brand-1) 40%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--brand-1) 8%,var(--panel)); }
.channel-preview__icon { color:var(--brand-1); display:flex; }.channel-preview svg { width:24px; height:24px; }.channel-preview > div { min-width:0; flex:1; display:grid; gap:5px; }.channel-preview b,.channel-preview div span { overflow-wrap:anywhere; }.channel-preview div span { color:var(--muted); font-size:12px; }.channel-preview .pill { flex-shrink:0; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 html:not(.reduce-motion) :is(.btn,.nav__item,.ai-history__chat,.settings-result,.chrow) { transition:transform 120ms ease-out,background-color 120ms ease-out,border-color 120ms ease-out; }
 html:not(.reduce-motion) :is(.btn,.settings-result,.ai-history__chat):hover { transform:translateY(-1px); }
 html:not(.reduce-motion) :is(.btn,.settings-result,.ai-history__chat):active { transform:translateY(0) scale(.985); }
 html:not(.reduce-motion) .chrow:hover { background:var(--panel-2); }
}
@media(max-width:600px) { .channel-create-grid { grid-template-columns:1fr; }.channel-create-topic { grid-column:auto; } }

.reaction-view__tabs { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.reaction-view__people { max-height:min(380px,55vh); overflow:auto; }
.reaction-view__person { display:flex; align-items:center; gap:12px; padding:12px 4px; }.reaction-view__person > span:not(.pill) { display:grid; gap:4px; flex:1; min-width:0; }.reaction-view__person b { overflow-wrap:anywhere; font-size:13px; }.reaction-view__person small { color:var(--muted); font-size:11px; }

.emoji__search { position:sticky; top:-12px; z-index:1; background:var(--panel-solid); padding:8px 0 12px; }.emoji__search .input { width:100%; }

.custom-emoji { display:inline-block; width:1.55em; height:1.55em; object-fit:contain; vertical-align:middle; }
.emoji .custom-emoji { width:30px; height:30px; }.reaction .custom-emoji { width:20px; height:20px; }.msg__text .custom-emoji { width:28px; height:28px; }
.server-emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:18px; }.server-emoji-card { display:grid; justify-items:center; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }.server-emoji-card .custom-emoji,[data-emoji-preview] .custom-emoji { width:64px; height:64px; }.server-emoji-card b { font-size:12px; overflow-wrap:anywhere; }.server-emoji-grid + p { margin-top:12px; }

.rr-mapping { display:flex; align-items:center; gap:10px; margin:10px 0; }.rr-mapping select { flex:1; min-width:0; }.rr-mapping [data-rr-emoji] { min-width:54px; }.rr-mapping .custom-emoji { width:24px; height:24px; }
.rr-panels { display:grid; gap:12px; margin-top:20px; }.rr-panel { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }.rr-panel > div { flex:1; min-width:180px; }.rr-panel small { display:block; margin-top:6px; color:var(--muted); }.rr-panel p { font-size:12px; color:var(--muted); }.rr-panel .custom-emoji { width:20px; height:20px; }
.embed__desc { white-space:pre-wrap; }.spaceform #rrDescription { width:100%; resize:vertical; }

.nametag--bot { background:var(--brand-1); color:#fff; font-size:10px; padding:2px 5px; border-radius:4px; }

.msg[data-role-prompt] :is(.msg__quick,[data-act="react"],.reaction--add) { display:none; }

/* Emoji choices opened from Space settings must sit above its modal. */
.sheet.sheet--over-modal { z-index: 350; }

.modal--image-search .modal__card { width:min(760px,100%); }
.image-search { min-width:0; }
.image-search form { display:flex; gap:8px; }
.image-search form .input { flex:1; min-width:0; }
.image-search__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; max-height:min(42vh,400px); overflow:auto; overscroll-behavior:contain; }
.image-search__tile { min-width:0; height:150px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--panel-solid); color:var(--text); cursor:pointer; text-align:left; }
.image-search__tile img { display:block; width:100%; height:120px; object-fit:cover; }
.image-search__tile span { display:block; padding:5px 8px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-search__tile:hover,.image-search__tile:focus-visible { border-color:var(--brand-1); }
.image-search__tile.is-unavailable { opacity:.4; cursor:default; }
.image-search__grid[aria-busy=true] { opacity:.65; pointer-events:none; }
@media(max-width:450px){.image-search__grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Phone navigation and visible-viewport sizing. Desktop layout stays independent. */
.mobile-nav,.mobile-search-toggle { display:none; }
@media(max-width:760px){
 :root { --rail-w:64px; --nav-w:100%; --mobile-nav-h:0px; --app-height:100dvh; }
 body.mobile-keyboard { --mobile-nav-h:0px; }
 .app,.app.app--no-mem { position:fixed; top:var(--viewport-top,0px); left:0; right:0; height:calc(var(--app-height) - var(--mobile-nav-h)); min-height:0; grid-template-columns:var(--rail-w) minmax(0,1fr); grid-template-rows:minmax(0,1fr); grid-template-areas:'rail nav'; }
 .app.is-thread-open { grid-template-columns:minmax(0,1fr); grid-template-areas:'main'; }
 .app:not(.is-thread-open) .main,.app.is-thread-open .nav,.app.is-thread-open .rail { display:none; }
 .thread__back { display:inline-grid; flex-shrink:0; }
 input,textarea,select,.input,.composer__input { font-size:16px; }
 .icon-btn,.composer__attach,.composer__send { min-width:44px; min-height:44px; touch-action:manipulation; }
 .topbar { flex-wrap:wrap; gap:4px; padding:calc(6px + var(--safe-t)) 8px 6px; min-height:56px; height:auto; }
 .topbar__gap,.topbar__sep,.topbar .js-help,.topbar .js-sound,.topbar [data-toggle-members] { display:none; }
 .topbar__head { flex:1; min-width:0; gap:4px; }.topbar__heading { min-width:0; }.topbar__title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .topbar__sub { display:none; }.topbar__actions { margin-left:0; gap:0; }
 .main--dms .topbar__head { display:none; }.main--dms .topbar { justify-content:flex-end; }
 .mobile-search-toggle { display:inline-grid; flex-shrink:0; }
 .topbar .topbar__search { display:none; }
 .topbar.mobile-search-open .topbar__search { display:flex; order:100; flex:1 0 100%; width:100%; min-width:0; margin:2px 0 4px; }
 .thread__head { padding:8px; gap:8px; }.thread__meta { min-width:0; flex:1; }.thread__group-actions { flex-wrap:wrap; }
 .msgs { padding-left:4px; padding-right:4px; overscroll-behavior-y:contain; }
 .msg { padding-right:48px; }.msg__text { font-size:15px; }
 .msg .msg__tools { display:flex; top:2px; right:2px; opacity:1; transform:none; pointer-events:auto; box-shadow:none; padding:0; border:0; background:transparent; }
 .msg .msg__tools>button:not([data-act='more']) { display:none; }.msg .msg__tools>button[data-act='more'] { display:inline-grid; }
 .composer { padding:4px 8px 8px; }.composer__row { gap:6px; padding-bottom:4px; }.composer__box { flex-wrap:wrap; }.composer__input { max-height:120px; }
 .composer__tools { gap:0; }.composer__tools .icon-btn[data-comp='emoji'] { min-width:40px; }
 .nav__item,.dmitem { min-height:52px; }.profilebar { padding:10px 12px; }
 .sheet { top:var(--viewport-top,0px); height:var(--app-height); bottom:auto; }
 .sheet__card { height:var(--app-height); max-height:var(--app-height); }
 .sheet__nav { gap:4px; }.sheet__tab { min-height:44px; }.settings-search { padding:8px 12px; }
 .modal { top:var(--viewport-top,0px); height:var(--app-height); bottom:auto; padding:12px; box-sizing:border-box; backdrop-filter:none; }
 .modal__card { max-height:calc(var(--app-height) - 24px); max-width:100%; }.modal__body { min-height:0; }.modal__foot { flex-wrap:wrap; }
 .modal--space .modal__card { width:100%; height:calc(var(--app-height) - 24px); }.spacenav__item { min-height:44px; }
 .sheet--pop .sheet__card--pop { top:12px!important; bottom:auto!important; left:12px!important; right:12px; width:auto!important; height:calc(var(--app-height) - 24px)!important; max-height:480px; }
 .nebular-ai { inset:var(--viewport-top,0px) 0 auto; height:calc(var(--app-height) - var(--mobile-nav-h)); }
 .ai-header { gap:6px; padding:10px; }.ai-header>div>span { display:none; }.ai-header b { font-size:14px; }.ai-header .btn { padding:8px; font-size:12px; min-height:44px; }
 .ai-compose { padding:8px 10px 28px; }.ai-stream { padding:14px 12px; }.ai-message--user { padding:12px 14px; }.ai-privacy { font-size:10px; }
 .ai-history { max-width:85vw; }.image-search__grid { max-height:35dvh; }
 .toasts { bottom:calc(var(--mobile-nav-h) + 12px); max-width:calc(100vw - 24px); }.back-to-top { bottom:calc(var(--mobile-nav-h) + 12px); }
}
@media(pointer:coarse){
 [data-tip]::after,[data-tip]::before { display:none!important; }
 .reaction { min-height:36px; min-width:40px; }.emoji { min-height:44px; }
}
@media(max-width:760px){.composer__input { min-height:44px; } .mobile-nav svg { flex-shrink:0; }}

.mobile-home-title,.mobile-friends,.mobile-view-back { display:none; }
@media(max-width:760px){
 .app:not(.is-thread-open) .rail { display:grid; padding:calc(10px + var(--safe-t)) 0 calc(10px + var(--safe-b)); gap:10px; background:var(--bg-void); border:0; }
 .rail__home,.rail__server,.rail__add,.rail__util-btn { width:44px; height:44px; border-radius:14px; }
 .rail__top,.rail__util { gap:8px; }.rail__list { gap:12px; padding:4px 0; }
 .rail__server.is-active { box-shadow:0 0 0 2px var(--bg-void),0 0 0 3px var(--brand-1); }
 .rail__foldername { display:none; }.rail__groupwrap { padding:3px; }.rail__folderhead { padding:2px; }
 .nav { background:var(--panel-solid); border-radius:18px 0 0 0; border:1px solid var(--line); border-right:0; padding-left:0; }
 .nav__top { padding:14px 12px 8px; }.mobile-home-title { display:block; margin:0 0 12px; font-size:22px; font-weight:800; line-height:1.25; }
 .nav__top .search { width:100%; min-width:0; }.nav__top .search input { min-width:0; width:100%; padding-right:10px; }.nav__top .search kbd { display:none; }
 .nav__tabs { display:flex; gap:6px; padding-top:8px; }.nav__tabs .nav__tab { flex:1; min-width:0; min-height:42px; padding:8px; gap:6px; justify-content:center; }
 .nav__dmhead { padding:12px 12px 4px; }.nav__dmhead h2 { font-size:12px; letter-spacing:.04em; }
 .dmtabs { gap:2px; padding:4px 8px 8px; }.dmtab { min-height:36px; padding:6px 8px; font-size:12px; }
 .nav__scroll { padding:6px 8px 12px; }.dmitem { min-height:66px; padding:10px 8px; gap:10px; }.dmitem__prev { font-size:12px; }.dmitem__name { font-size:14px; }
 .profilebar { gap:7px; padding:10px 8px; }.profilebar__tools { gap:0; }.profilebar__name { font-size:13px; }
 .mobile-friends { display:block; margin-top:10px; }.mobile-friends>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:6px; }.mobile-friends b { font-size:12px; color:var(--muted); }.mobile-friends .nav__tab { padding:2px 6px; min-height:30px; flex:none; font-size:11px; }
 .mobile-friends__list { display:flex; overflow-x:auto; gap:12px; padding:4px 0 8px; scrollbar-width:none; }
 .mobile-friends__list>button { display:flex; flex:0 0 54px; min-width:0; flex-direction:column; align-items:center; gap:5px; background:none; border:0; color:var(--text); padding:0; font:inherit; }
 .mobile-friends__list>button>span:last-child { width:54px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .mobile-view-back { display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-bottom:8px; }.mobile-view-back svg { width:18px; height:18px; }
 .view__head { padding:10px 14px 14px; }.view__head .row { flex-wrap:wrap; gap:10px; }.view__head h2 { font-size:21px; }.view__body { padding:14px; }
 .nebular-ai { left:0; }.ai-build { bottom:8px; }
}
@media(max-width:760px){.nav__tabs {flex-direction:row;} .nav__tabs .nav__tab {width:auto;}}
@media(max-width:760px){
 .app.is-thread-open:has(.main--view) {grid-template-columns:var(--rail-w) minmax(0,1fr);grid-template-areas:'rail main';}
 .app:has(.main--view) .rail {display:grid;padding:calc(10px + var(--safe-t)) 0 calc(10px + var(--safe-b));gap:10px;background:var(--bg-void);border:0;}
 .main--view .view__head p {overflow-wrap:anywhere;} .main--view .view__body {padding:12px;}
}
@media(max-width:760px){
 .main--view>.view {min-width:0;width:100%;overflow:hidden;}
 .view__head {min-width:0;}.view__head .row {min-width:0;}.view__head .row>.grow {flex:1 1 100%;}
 .view__actions {max-width:100%;flex-wrap:wrap;}.view__actions>.btn {max-width:100%;}
 #friendRows .sblocked {padding:10px 8px;gap:6px;} #friendRows .sblocked__meta {display:grid;gap:3px;min-width:0;}
 #friendRows .srow__label,#friendRows .srow__desc {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
/* Consistent identity rows wherever a person is selected. */
.people-select { display:grid; gap:6px; max-height:240px; overflow:auto; overscroll-behavior:contain; flex:1; min-width:0; width:100%; padding:2px; }
.person-choice { display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; min-width:0; box-sizing:border-box; }
.person-choice:hover { background:var(--elev); }.person-choice:has(input:checked) { background:color-mix(in srgb,var(--brand-1) 12%,var(--panel-solid)); border-color:var(--brand-1); }
.person-choice>.av,.person-choice>.check__box { flex-shrink:0; }.person-choice>input { flex-shrink:0; accent-color:var(--brand-1); }
.person-choice__meta { display:grid; gap:3px; flex:1; min-width:0; }.person-choice__meta b { font-size:13px; font-weight:650; }.person-choice__meta small { color:var(--muted); font-size:11px; }
.person-choice__meta b,.person-choice__meta small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* A user-initiated launch works without relying on page-load popup permissions. */
.blank-launch-prompt{position:fixed;z-index:400;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 32px));padding:18px 20px;border:1px solid var(--line-3);border-radius:18px;background:var(--panel-solid);color:var(--text);box-shadow:0 12px 45px #0008;display:flex;align-items:center;gap:20px}.blank-launch-prompt strong{font-size:15px}.blank-launch-prompt p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}.blank-launch-prompt__actions{display:flex;gap:8px;flex-shrink:0}.blank-launch-prompt .btn{min-height:44px}
@media(max-width:600px){.blank-launch-prompt{flex-direction:column;align-items:stretch;gap:12px;padding:16px}.blank-launch-prompt__actions{flex-wrap:wrap}.blank-launch-prompt__actions .btn{flex:1}}

/* Short compositor-only entrance transitions; no layout or blur animation. */
@media(prefers-reduced-motion:no-preference){
  @keyframes nebula-menu-open{from{opacity:0;transform:translateX(-6px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes nebula-surface-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes nebula-screen-open{from{opacity:0}to{opacity:1}}
  .apps-menu{transform-origin:left top;animation:nebula-menu-open 180ms cubic-bezier(.2,.8,.2,1) backwards}
  .modal__card,.sheet__card,.extras__card{animation:nebula-surface-open 180ms cubic-bezier(.2,.8,.2,1) backwards}
  .nebular-ai:not([hidden]),.cloud-gaming{animation:nebula-screen-open 180ms ease-out backwards}
}

.owner-crown{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;margin-left:5px;color:#f4c85a;flex-shrink:0}.owner-crown[hidden]{display:none}.owner-crown svg{width:14px;height:14px}