/* ============ Discord clone — design system ============ */
* { box-sizing: border-box; }
:root { color-scheme: dark; }
:root {
  --bg-deepest: #1e1f22;
  --bg-deep: #232428;
  --bg-sidebar: #2b2d31;
  --bg-chat: #313338;
  --bg-hover: #35373c;
  --bg-msg-hover: #2e3035;
  --bg-active: #404249;
  --bg-floating: #111214;
  --bg-input: #383a40;
  --bg-embed: #2b2d31;
  --brand: #5865f2;
  --brand-hover: #4752c4;
  --brand-active: #3c45a5;
  --green: #248046;
  --green-hover: #1a6334;
  --red: #da373c;
  --red-hover: #a1282c;
  --danger-soft: #fa777c; /* soft danger text/hint red (validation errors), distinct from the --red action button */
  --link: #00a8fc;
  --text-normal: #dbdee1;
  --text-muted: #949ba4;
  --text-header: #f2f3f5;
  --text-faint: #9aa0aa; /* 4.5:1 on --bg-chat; was #80848e (3.4:1) */
  --yellow: #f0b232;
  --divider: #3f4147;
  --red-badge: #f23f43; /* Discord's notification/badge red (not the danger button) */
  --status-online: #23a55a;
  --status-idle: #f0b232;
  --status-dnd: #f23f43;
  --status-offline: #80848e;
  --font: "gg sans", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --font-size: 15px;
  /* --radius is the corner-roundness *scale* (base unit). Every concrete radius
     token below derives from it, so a single value rounds or squares the whole
     UI. The default 4px reproduces the original hard-coded design. */
  --radius: 4px;
  --radius-xs: calc(var(--radius) * 0.5);
  --radius-sm: var(--radius);
  --radius-md: calc(var(--radius) * 1.5);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 2.5);
  --radius-2xl: calc(var(--radius) * 3);
  --radius-3xl: calc(var(--radius) * 4);
  --shadow-elev: 0 8px 16px rgba(0,0,0,.24);
  --elev-high: 0 12px 24px rgba(0,0,0,.45);
  /* --- motion: one multiplier scales every transition/animation duration --- */
  --anim: 1;                                   /* 0 = instant, 1 = normal, 2 = slow */
  --ease: cubic-bezier(.25, .1, .25, 1);       /* == the `ease` keyword */
  --ease-in: cubic-bezier(.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .58, 1);
  --ease-in-out: cubic-bezier(.42, 0, .58, 1);
  --ease-linear: linear;
  /* --- effects --- */
  --glow: var(--brand);                        /* accent used by glow/neon shadows */
  --glass: 0px;                                /* backdrop blur on floating panels */
  --glass-alpha: 100%;                         /* opacity of floating panels */
  --accent-gradient: none;                     /* layered over accent surfaces */
  --scrollbar-thumb: #1a1b1e;
  --avatar-radius: 50%;
  /* --- typography --- */
  --line-height: 1.35;
  --letter-spacing: normal;
  /* --- layout dimensions (advanced theming) --- */
  --rail-width: 72px;
  --sidebar-width: 240px;
  --member-width: 240px;
  /* --- expressive text surfaces (advanced theming) --- */
  --mention-bg: #5865f230;
  --mention-text: #c9cdfb;
  --code-bg: var(--bg-deepest);
  --spoiler-bg: var(--bg-deepest);
  --selection-bg: #5865f255;
  /* --- uploaded background assets (advanced theming) ---
     Defaults reproduce the plain, image-less design. --bg-image* drive the
     whole-app backdrop; the region vars layer over an opaque surface. */
  --bg-image: none;
  --bg-sidebar-image: none;
  --bg-chat-image: none;
  --bg-image-size: cover;
  --bg-image-position: center;
  --bg-image-repeat: no-repeat;
  --bg-image-attachment: fixed;
  --bg-image-blend: normal;
  --bg-image-opacity: 100%;
  --theme-cursor: auto;
  --theme-logo: none;
}
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-deepest);
  color: var(--text-normal);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#app { height: 100vh; height: 100dvh; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: var(--text-header); }
img { user-select: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: .875em; background: var(--code-bg); padding: 2px 5px; border-radius: var(--radius-sm); }
kbd {
  font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-deepest); border: 1px solid var(--divider); border-bottom-width: 2px;
  border-radius: var(--radius-sm); padding: 2px 5px;
}
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.pad { padding: 16px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm); border: 2px solid transparent; background-clip: padding-box; }

/* ============ buttons & inputs ============ */
.primary-btn {
  background: var(--brand); background-image: var(--accent-gradient); color: #fff; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-sm); padding: 10px 18px; transition: background-color calc(150ms * var(--anim)) var(--ease), filter calc(150ms * var(--anim)) var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.primary-btn:hover { background: var(--brand-hover); }
.primary-btn:active { background: var(--brand-active); }
.primary-btn:disabled { opacity: .5; cursor: not-allowed; }
.primary-btn.small { padding: 7px 14px; font-size: 13px; }
.primary-btn.wide { width: 100%; }
.primary-btn.loading { opacity: .7; pointer-events: none; }
.primary-btn.loading::after {
  content: ""; width: 14px; height: 14px; border: 2px solid #fff6; border-top-color: #fff;
  border-radius: 50%; animation: spin .7s var(--ease-linear) infinite;
}
.danger-btn {
  background: var(--red); color: #fff; font-weight: 600; border-radius: var(--radius-sm); padding: 10px 18px;
  transition: background-color calc(150ms * var(--anim)) var(--ease);
}
.danger-btn:hover { background: var(--red-hover); }
.link-btn { color: var(--link); font-size: 14px; padding: 2px 4px; }
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--danger-soft); }
.icon-btn {
  display: grid; place-items: center; color: var(--text-muted); border-radius: var(--radius-sm);
  width: 32px; height: 32px; transition: color calc(120ms * var(--anim)) var(--ease), background-color calc(120ms * var(--anim)) var(--ease);
}
.icon-btn:hover { color: var(--text-normal); background: var(--bg-hover); }
.icon-btn.toggled { color: var(--text-header); }
.icon-btn.danger { color: var(--danger-soft); }
.field { display: block; margin-bottom: 20px; }
.field-label {
  display: block; color: var(--text-muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px;
}
.field .req { color: var(--danger-soft); font-style: normal; }
.field-input {
  width: 100%; background: var(--bg-deepest); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 15px; outline: none;
  transition: border-color calc(150ms * var(--anim)) var(--ease), box-shadow calc(150ms * var(--anim)) var(--ease);
}
.field-input:hover { border-color: transparent; }
.field-input:focus { border-color: var(--brand); }
.field-input::placeholder { color: var(--text-faint); }
.field-input.mono { font-family: var(--font-mono); }
.field-input:disabled { opacity: .6; }
textarea.field-input { resize: vertical; min-height: 60px; }
.field-hint { display: block; color: var(--text-faint); font-size: 12px; margin-top: 6px; }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text-normal); font-size: 14px; cursor: pointer; }
.radio-row input[type="radio"], .radio-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg-deepest);
  border: 1px solid #72767d; cursor: pointer; position: relative;
  transition: border-color calc(120ms * var(--anim)) var(--ease), background-color calc(120ms * var(--anim)) var(--ease), box-shadow calc(120ms * var(--anim)) var(--ease);
}
.radio-row input[type="radio"]:hover, .radio-row input[type="checkbox"]:hover { border-color: var(--brand); }
.radio-row input[type="radio"]:focus-visible, .radio-row input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 2px #5865f266; }
.radio-row input[type="radio"]::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--text-header); transform: scale(0); transition: transform calc(120ms * var(--anim)) var(--ease);
}
.radio-row input[type="radio"]:checked { border-color: var(--brand); }
.radio-row input[type="radio"]:checked::after { transform: scale(1); }
.radio-row input[type="checkbox"] { border-radius: calc(var(--radius) * 1.25); }
.radio-row input[type="checkbox"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0) translateY(-1px);
  transition: transform calc(120ms * var(--anim)) var(--ease);
}
.radio-row input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.radio-row input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1) translateY(-1px); }
.radio-row input:disabled { opacity: .45; cursor: not-allowed; }
.badge {
  background: #f23f43; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: var(--radius-lg); display: inline-flex;
  align-items: center; justify-content: center; padding: 0 4px; line-height: 1;
}
.badge.gold { background: #f0b232; color: #000; }
.bot-tag {
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 600;
  border-radius: calc(var(--radius) * 0.75); padding: 1.5px 4px; margin-left: 4px; vertical-align: middle;
  display: inline-flex; align-items: center; gap: 2px; text-transform: uppercase; flex: none;
}
.spinner {
  width: 16px; height: 16px; border: 2px solid #fff3; border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s var(--ease-linear) infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ avatars ============ */
.avatar {
  position: relative; border-radius: var(--avatar-radius); overflow: visible; flex: none;
  display: grid; place-items: center; color: #fff; user-select: none;
}
.avatar img { width: 100%; height: 100%; border-radius: var(--avatar-radius); object-fit: cover; }
.avatar-initials { font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.avatar.xl .avatar-initials { font-size: 30px; }
.avatar-status {
  position: absolute; right: -2px; bottom: -2px; width: 40%; min-width: 10px; height: 40%; min-height: 10px;
  /* the halo must match the surface the avatar sits on; friends/gdm override
     --status-ring because their background is --bg-chat / --bg-floating */
  border-radius: 50%; border: 3px solid var(--status-ring, var(--bg-sidebar)); background: var(--status-offline);
}
.avatar-status.big { width: 22px; height: 22px; border-width: 4px; border-color: var(--bg-floating); right: -4px; bottom: -4px; }
.avatar-status.online { background: var(--status-online); }
.avatar-status.idle { background: var(--status-idle); }
.avatar-status.idle svg { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); }
.avatar-status.dnd { background: var(--status-dnd); }
.avatar-status.dnd svg { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); }
.avatar-status.offline { background: var(--status-offline); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-offline); flex: none; }
.status-dot.online { background: var(--status-online); }
.status-dot.idle { background: var(--status-idle); }
.status-dot.dnd { background: var(--status-dnd); }

/* ============ auth ============ */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; position: relative; overflow-x: hidden; overflow-y: auto; padding: 16px 0; }
.auth-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 90% at 85% 10%, #4c5fe0 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 90%, #3b2a8f 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 55% 55%, #2b3a9e22 0%, transparent 70%),
    linear-gradient(160deg, #141432 0%, #232a63 45%, #3f55c9 100%);
}
.auth-bg::before {
  content: ""; position: absolute; inset: -10%;
  background-image:
    radial-gradient(circle at 20% 30%, #ffffff12 0 2px, transparent 3px),
    radial-gradient(circle at 65% 15%, #ffffff0d 0 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, #ffffff10 0 2px, transparent 3px),
    radial-gradient(circle at 35% 75%, #ffffff0a 0 2px, transparent 3px),
    radial-gradient(circle at 45% 50%, #ffffff08 0 1.5px, transparent 2.5px);
  animation: star-drift calc(90000ms * var(--anim)) var(--ease-linear) infinite;
}
@keyframes star-drift { to { transform: translateY(-40px); } }
.auth-card {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 48px;
  background: var(--bg-chat); border-radius: var(--radius-lg); padding: 32px; width: min(92vw, 780px);
  box-shadow: var(--elev-high); animation: auth-in calc(300ms * var(--anim)) var(--ease-out);
}
.auth-card.wide { grid-template-columns: 1fr; width: min(92vw, 480px); }
@keyframes auth-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
}
.field-error {
  display: none; color: var(--danger-soft); font-size: 12px; font-weight: 500; margin-top: 6px;
}
.field-error.visible { display: block; }
.field.invalid .field-input { border-color: #f23f43; }
.field.invalid .field-label { color: var(--danger-soft); }
.field-hint.invalid { color: var(--danger-soft); }
.auth-logo { display: flex; align-items: center; gap: 8px; color: var(--text-header); font-weight: 800; font-size: 20px; letter-spacing: -.5px; margin-bottom: 24px; }
.auth-title { color: var(--text-header); font-size: 24px; font-weight: 700; text-align: center; margin: 0 0 8px; }
.auth-sub { color: var(--text-muted); text-align: center; margin: 0 0 20px; font-size: 15px; }
.auth-error { color: var(--danger-soft); font-size: 13px; min-height: 20px; margin-bottom: 8px; }
.auth-error.shake { animation: shake calc(300ms * var(--anim)) var(--ease); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.auth-switch { color: var(--text-muted); font-size: 14px; margin: 12px 0 0; }
.auth-tos { color: var(--text-faint); font-size: 12px; margin-top: 14px; line-height: 1.4; }
.auth-qr-col { text-align: center; align-self: center; max-width: 240px; }
.auth-qr-col h3 { color: var(--text-header); font-size: 20px; margin: 20px 0 8px; }
.auth-qr-col p { color: var(--text-muted); font-size: 14px; margin: 0; line-height: 1.5; }
.qr-box { background: #fff; border-radius: var(--radius-md); padding: 10px; width: 176px; height: 176px; margin: 0 auto; position: relative; }
.qr-grid { display: grid; grid-template-columns: repeat(25, 1fr); gap: 1px; width: 100%; height: 100%; }
.qr-grid i { background: transparent; border-radius: calc(var(--radius) * 0.25); }
.qr-grid i.on { background: #111; }
.qr-logo {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; background: var(--brand); border: 5px solid #fff; border-radius: var(--radius-xl);
  display: grid; place-items: center; color: #fff;
}
.dob-row { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 10px; }
select.field-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ============ app shell ============ */
.app-shell { display: flex; height: 100%; }
.app-body { flex: 1; display: flex; min-width: 0; }

/* ---- server rail ---- */
.rail {
  width: var(--rail-width); background: var(--bg-deepest); display: flex; flex-direction: column;
  align-items: center; padding: 12px 0; gap: 8px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; flex: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-sep { width: 32px; height: 2px; background: #35363c; border-radius: calc(var(--radius) * 0.25); flex: none; }
.rail-spacer { flex: 1; }
.rail-btn {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bg-chat); color: var(--text-normal);
  display: grid; place-items: center; position: relative; flex: none;
  transition: border-radius calc(150ms * var(--anim)) var(--ease), background-color calc(150ms * var(--anim)) var(--ease), color calc(150ms * var(--anim)) var(--ease);
  overflow: visible; font-weight: 600;
}
.rail-btn img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.rail-btn:hover { border-radius: var(--radius-3xl); }
.rail-btn.home-btn:hover, .rail-btn.home-btn.active { border-radius: var(--radius-3xl); background: var(--brand); color: #fff; }
.rail-btn.server-btn.active { border-radius: var(--radius-3xl); }
.rail-btn.action-btn { color: var(--status-online); }
.rail-btn.action-btn:hover { background: var(--status-online); color: #fff; }
.rail-btn::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 0; background: var(--text-header); border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  transition: height calc(150ms * var(--anim)) var(--ease);
}
.rail-btn:hover::before { height: 20px; }
.rail-btn.active::before { height: 40px; }
.rail-btn.unread::before { height: 8px; }
.rail-btn .rail-initials { font-size: 15px; }
.rail-dot {
  position: absolute; left: -7px; bottom: 0; top: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-header); box-shadow: 0 0 0 3px var(--bg-deepest);
}
.rail-badge {
  position: absolute; right: -3px; bottom: -3px; background: #f23f43; color: #fff;
  font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  box-shadow: 0 0 0 3px var(--bg-deepest);
}

/* ---- sidebar ---- */
.sidebar { width: var(--sidebar-width); background: var(--bg-sidebar); display: flex; flex-direction: column; flex: none; border-radius: var(--radius-lg) 0 0 0; overflow: hidden; }
.sidebar-search { padding: 10px; border-bottom: 1px solid #23242895; box-shadow: 0 1px 0 #00000030; }
.search-trigger {
  width: 100%; text-align: left; background: var(--bg-deepest); color: var(--text-faint);
  font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); padding: 6px 8px;
  display: flex; align-items: center; gap: 6px; transition: color calc(120ms * var(--anim)) var(--ease);
}
.search-trigger kbd { margin-left: auto; }
.search-trigger kbd + kbd { margin-left: 0; }
.search-trigger:hover { color: var(--text-muted); }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 8px 8px 8px; display: flex; flex-direction: column; gap: 1px; }
.side-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; min-height: 42px;
  color: var(--text-muted); font-size: 15px; font-weight: 500; border-radius: var(--radius-sm);
  transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease); text-align: left;
}
.side-item:hover { background: var(--bg-hover); color: var(--text-normal); }
.side-item.active { background: var(--bg-active); color: var(--text-header); }
.side-item .badge { margin-left: auto; }
.side-section {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; padding: 16px 8px 4px;
}
.side-section .icon-btn { width: 20px; height: 20px; }
.dm-list { display: flex; flex-direction: column; gap: 1px; }
.dm-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease);
  position: relative; min-height: 42px;
}
.dm-item:hover { background: var(--bg-hover); color: var(--text-normal); }
.dm-item.active { background: var(--bg-active); color: var(--text-header); }
.dm-item.unread .dm-name { color: var(--text-header); font-weight: 600; }
.dm-item.unread::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 8px; background: var(--text-header); border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.dm-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.dm-count { color: var(--text-faint); font-size: 12px; }
.dm-close { position: absolute; right: 6px; opacity: 0; color: var(--text-muted); padding: 3px; border-radius: calc(var(--radius) * 0.75); transition: opacity calc(120ms * var(--anim)) var(--ease); }
.dm-item:hover .dm-close { opacity: 1; }
.dm-close:hover { color: var(--text-header); }
/* the close button is absolutely positioned over the row's trailing badge; shift
   the badge left so the mention count isn't hidden while hovering */
.dm-item:hover .badge { margin-right: 20px; }
.dm-empty-note { color: var(--text-faint); font-size: 13px; padding: 8px; text-align: center; }
.group-avatar { background: var(--bg-deep); color: var(--text-muted); width: 32px; height: 32px; }

/* server sidebar */
.server-header {
  height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #232428; box-shadow: 0 1px 0 #00000030; cursor: pointer;
  color: var(--text-header); font-weight: 600; transition: background-color calc(120ms * var(--anim)) var(--ease); flex: none;
}
.server-header:hover { background: var(--bg-hover); }
.server-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-list { display: flex; flex-direction: column; gap: 1px; padding-top: 8px; }
.channel-item {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; margin: 1px 8px 0; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease);
  position: relative;
}
.channel-item:hover { background: var(--bg-hover); color: var(--text-normal); }
.channel-item.active { background: var(--bg-active); color: var(--text-header); }
.channel-item.unread { color: var(--text-header); }
.channel-item.unread .channel-name { font-weight: 600; }
.channel-item.unread::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 8px; background: var(--text-header); border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.channel-hash { flex: none; opacity: .8; }
.channel-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.channel-settings { opacity: 0; width: 20px; height: 20px; }
.channel-item:hover .channel-settings { opacity: 1; }
.channel-item.in-category { padding-left: 28px; }
.channel-item.in-category.unread::before { left: 8px; }

/* channel categories */
.category-header {
  display: flex; align-items: center; gap: 2px; padding: 16px 4px 4px; margin: 0 8px;
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; cursor: pointer; transition: color calc(120ms * var(--anim)) var(--ease); user-select: none;
}
.category-header:hover { color: var(--text-normal); }
.category-header.unread { color: var(--text-header); }
.category-chevron { flex: none; transition: transform calc(150ms * var(--anim)) var(--ease-in-out); }
.category-header.collapsed .category-chevron { transform: rotate(-90deg); }
.category-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-add { opacity: 0; width: 20px; height: 20px; }
.category-header:hover .category-add { opacity: 1; }
/* keyboard users: reveal hover-only row controls when focus enters the row */
.channel-item:focus-within .channel-settings,
.category-header:focus-within .category-add,
.dm-item:focus-within .dm-close { opacity: 1; }

/* user panel */
.user-panel {
  height: 52px; background: var(--bg-deep); display: flex; align-items: center; gap: 2px;
  padding: 0 8px; flex: none;
}
.user-panel-main {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 3px 4px;
  border-radius: var(--radius-sm); transition: background-color calc(120ms * var(--anim)) var(--ease); text-align: left;
}
.user-panel-main:hover { background: var(--bg-hover); }
.user-panel-names { min-width: 0; display: flex; flex-direction: column; }
.user-panel-name { color: var(--text-header); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-panel-status { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ content ============ */
.content { flex: 1; min-width: 0; display: flex; background: var(--bg-chat); }
.channel-view { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.channel-header {
  height: 48px; flex: none; display: flex; align-items: center; padding: 0 12px; gap: 8px;
  border-bottom: 1px solid #232428; box-shadow: 0 1px 2px #00000024; z-index: 5; position: relative;
}
.channel-header-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.header-icon { color: var(--text-faint); flex: none; }
.channel-title { color: var(--text-header); font-weight: 700; font-size: 15px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.channel-topic-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.channel-topic-divider { width: 1px; height: 20px; background: var(--divider); flex: none; }
.channel-topic { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-header-actions { display: flex; align-items: center; gap: 4px; }
.header-search { display: flex; align-items: center; background: var(--bg-deepest); border-radius: var(--radius-sm); padding: 0 6px; color: var(--text-muted); transition: width calc(200ms * var(--anim)) var(--ease); }
.header-search-input { width: 140px; border: 0; background: transparent; outline: 0; padding: 5px 4px; font-size: 13px; color: var(--text-normal); transition: width calc(200ms * var(--anim)) var(--ease); }
.header-search-input:focus { width: min(220px, 40vw); }

.channel-body { flex: 1; display: flex; min-height: 0; }
.chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.message-scroller { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.messages { padding: 8px 0 4px; display: flex; flex-direction: column; margin-top: auto; width: 100%; }

/* ============ forum view ============ */
.forum-view { background: var(--bg-chat); }
.forum-toolbar {
  flex: none; display: flex; align-items: center; gap: 16px; padding: 12px 20px 0;
}
.forum-sort {
  display: flex; gap: 4px; background: var(--bg-deepest); border-radius: var(--radius-md); padding: 3px;
}
.forum-sort-btn {
  padding: 4px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; font-weight: 600;
  transition: color calc(120ms * var(--anim)) var(--ease), background-color calc(120ms * var(--anim)) var(--ease);
}
.forum-sort-btn:hover { color: var(--text-normal); }
.forum-sort-btn.active { background: var(--bg-active); color: var(--text-header); }
.forum-search { margin-left: auto; }
.forum-scroller { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.forum-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px;
}
.forum-card {
  background: var(--bg-sidebar); border: 1px solid #232428; border-radius: var(--radius-lg);
  padding: 14px 16px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: background-color calc(120ms * var(--anim)) var(--ease), border-color calc(120ms * var(--anim)) var(--ease), transform calc(120ms * var(--anim)) var(--ease), box-shadow calc(120ms * var(--anim)) var(--ease);
  max-height: 260px; overflow: hidden; position: relative;
}
.forum-card:hover {
  background: var(--bg-hover); border-color: var(--divider); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.forum-card:focus-visible { outline: 2px solid var(--brand); }
.forum-card.unread .forum-card-title { color: #fff; }
.forum-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.forum-card-head .avatar { width: 24px; height: 24px; flex: none; }
.forum-card-author {
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forum-card-time { margin-left: auto; color: var(--text-faint); font-size: 11px; flex: none; }
.forum-card-title {
  margin: 0; color: var(--text-header); font-size: 16px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.forum-card-preview {
  color: var(--text-muted); font-size: 13px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.forum-card-preview img.emoji { width: 16px; height: 16px; vertical-align: -2px; }
.forum-card-thumb { border-radius: var(--radius-md); overflow: hidden; max-height: 110px; }
.forum-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forum-card-foot {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px;
}
.forum-card-stat {
  display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted);
  font-size: 13px; font-weight: 600;
}
.forum-card-new {
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: var(--radius-sm); padding: 1px 5px; letter-spacing: .02em;
}
.forum-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  padding: 80px 16px; text-align: center; color: var(--text-muted);
}
.forum-empty h2 { color: var(--text-header); margin: 16px 0 6px; font-size: 22px; }
.forum-empty p { margin: 0; }
.forum-empty-icon {
  width: 90px; height: 90px; border-radius: 50%; background: var(--bg-sidebar);
  display: grid; place-items: center; color: var(--text-faint);
}
#new-post-btn { gap: 6px; }

/* ---- message rendering ---- */
.channel-intro { padding: 40px 16px 16px; }
.channel-intro h1 { color: var(--text-header); font-size: 28px; font-weight: 800; margin: 12px 0 8px; overflow-wrap: anywhere; }
.channel-intro p { color: var(--text-muted); font-size: 15px; margin: 0; max-width: 480px; line-height: 1.5; overflow-wrap: anywhere; }
.intro-icon {
  width: 68px; height: 68px; border-radius: 50%; background: #41434a; color: var(--text-header);
  display: grid; place-items: center;
}
.msg-divider {
  display: flex; align-items: center; margin: 18px 16px 6px; color: var(--text-muted);
  font-size: 11px; font-weight: 700; position: relative;
}
.msg-divider::before, .msg-divider::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
.msg-divider span { padding: 0 8px; }
.msg-new {
  display: flex; align-items: center; margin: 10px 16px 4px; color: #f23f43;
  font-size: 11px; font-weight: 700; text-transform: uppercase; position: relative;
}
.msg-new::before { content: ""; flex: 1; height: 1px; background: #f23f43; }
.msg-new span { padding: 0 0 0 8px; background: transparent; position: relative; }
.msg-group { display: flex; padding: 2px 48px 2px 16px; margin-top: 14px; position: relative; }
.msg-group:hover { background: transparent; }
.msg-gutter { width: 40px; flex: none; margin-right: 16px; padding-top: 3px; cursor: pointer; }
.msg-gutter .avatar { width: 40px; height: 40px; }
.msg-avatar-btn { all: unset; display: block; cursor: pointer; border-radius: var(--avatar-radius); }
.msg-avatar-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.msg-content-col { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; min-width: 0; }
.msg-author { color: var(--text-header); font-weight: 500; font-size: 16px; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-author:hover { text-decoration: underline; }
.msg-timestamp { color: var(--text-muted); font-size: 12px; flex: none; }
.msg-row { position: relative; padding: 2px 16px 2px 0; border-radius: var(--radius-xs); }
/* the group's first row already shows the timestamp in its header — showing the
   gutter time there too would collide with the avatar */
.msg-group > .msg-content-col > .msg-row:first-of-type .msg-gutter-time { display: none; }
/* gutter timestamp: hidden until hover, sits in the avatar gutter like Discord */
.msg-gutter-time {
  position: absolute; left: -56px; top: 4px; width: 44px; text-align: right;
  color: var(--text-muted); font-size: 11px; line-height: 1;
  opacity: 0; transition: opacity calc(100ms * var(--anim)) var(--ease); user-select: none; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.msg-row:hover .msg-gutter-time { opacity: 1; }
.msg-row:hover { background: var(--bg-msg-hover); }
.msg-group.pinned { background: #f0b23212; border-radius: var(--radius-sm); }
.msg-group.pinned::before { content: ""; position: absolute; left: 2px; top: 0; bottom: 0; width: 3px; background: var(--yellow); border-radius: var(--radius-xs); }
.msg-row.editing { background: var(--bg-msg-hover); }
.msg-row.replying { background: #5865f214; }
.msg-row.highlight-flash { animation: highlight calc(1800ms * var(--anim)) var(--ease); }
@keyframes highlight { 0% { background: #5865f245; } 100% { background: transparent; } }
.msg-hover-actions {
  position: absolute; top: -16px; right: 16px; display: flex; gap: 0;
  background: var(--bg-chat); border: 1px solid #232428; border-radius: var(--radius-md); padding: 1px;
  box-shadow: 0 0 0 1px rgba(4,4,5,.15), 0 2px 6px rgba(0,0,0,.24); z-index: 4;
  /* hidden visually but kept display:flex so its buttons stay in the tab order
     (display:none would make them unreachable to keyboard/screen-reader users) */
  opacity: 0; pointer-events: none; transition: opacity calc(100ms * var(--anim)) var(--ease);
}
.msg-row:hover .msg-hover-actions,
.msg-row:focus-within .msg-hover-actions,
.msg-hover-actions:focus-within { opacity: 1; pointer-events: auto; }
.msg-hover-actions .icon-btn { width: 32px; height: 32px; }
.msg-body { font-size: 16px; line-height: 1.4; color: var(--text-normal); word-wrap: break-word; overflow-wrap: anywhere; }
.msg-text { white-space: pre-wrap; }
.msg-text .md-line { min-height: 1.2em; }
.msg-text .md-gap { height: .7em; }
.msg-h { color: var(--text-header); font-weight: 800; margin: 8px 0 4px; }
.msg-h1 { font-size: 22px; } .msg-h2 { font-size: 19px; } .msg-h3 { font-size: 16px; }
.md-subtext { color: var(--text-muted); font-size: 12px; }
.msg-text ul, .msg-text ol { margin: 2px 0; padding-left: 22px; }
.msg-text blockquote {
  margin: 4px 0; padding-left: 10px; border-left: 3px solid #4e5058;
  color: var(--text-normal);
}
.inline-code {
  background: var(--code-bg); border-radius: var(--radius-sm); padding: 1.5px 4px;
  font-family: var(--font-mono); font-size: .85em;
}
.code-block { position: relative; max-width: 90%; margin: 4px 0; }
.codeblock {
  background: var(--code-bg); border: 1px solid #101214; border-radius: var(--radius-sm);
  padding: 8px 10px; margin: 0; overflow-x: auto; font-family: var(--font-mono);
  font-size: .85em; line-height: 1.45; max-width: 100%;
}
.md-link { color: var(--link); }
.edited { color: var(--text-faint); font-size: 10px; margin-left: 4px; }
.mention {
  background: var(--mention-bg); color: var(--mention-text); font-weight: 500; border-radius: calc(var(--radius) * 0.75);
  padding: 0 2px; cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease);
}
.mention:hover { background: var(--brand); color: #fff; }
.mention.me { background: #f0b23230; color: #f8c352; }
.mention.me:hover { background: var(--yellow); color: #000; }
.emoji { width: 20px; height: 20px; vertical-align: -4px; object-fit: contain; }
.emoji.big { width: 44px; height: 44px; }
.msg-text .emoji { width: 22px; height: 22px; }
.msg-text .emoji:only-child { width: 44px; height: 44px; }
.spoiler {
  background: var(--spoiler-bg); border-radius: var(--radius-sm); cursor: pointer; color: transparent;
  transition: color calc(150ms * var(--anim)) var(--ease), background-color calc(150ms * var(--anim)) var(--ease); user-select: none;
}
.spoiler * { visibility: hidden; }
.spoiler.revealed { background: rgba(255,255,255,.1); color: inherit; cursor: text; }
.spoiler:not(.revealed):hover { background: #26272c; }
.spoiler.revealed * { visibility: visible; }
.msg-reply-ref {
  display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12.5px;
  /* Stays in the content column (like Discord) — the "arm" reaches left into the
     avatar gutter from here. The big avatar is pushed down via .has-reply so it
     sits below the reply line instead of underneath the arm. */
  margin: 4px 0 2px 0; cursor: pointer; position: relative; line-height: 16px;
  min-width: 0; max-width: 100%;
}
.msg-reply-ref:hover .reply-snip { color: var(--text-normal); }
/* spine elbow: vertical leg starts at the big avatar's centre (36px left of the
   content column) and the horizontal arm reaches the reply avatar, mirroring
   Discord's repliedMessageClickableSpine */
.msg-reply-ref::before {
  content: ""; position: absolute; left: -36px; top: 8px; width: 32px; height: 10px;
  border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px;
}
.msg-reply-ref .avatar { width: 16px; height: 16px; flex: none; }
.msg-reply-ref .avatar-initials { font-size: 8px; }
.reply-author {
  font-weight: 600; color: var(--text-normal);
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reply-author:hover { text-decoration: underline; }
.msg-reply-ref .bot-tag { margin-left: 0; }
.reply-snip {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 480px; min-width: 0;
  color: var(--text-muted); transition: color calc(100ms * var(--anim)) var(--ease);
}
.reply-snip .emoji { width: 16px; height: 16px; vertical-align: -3px; }
.reply-snip .mention { background: none; color: inherit; padding: 0; font-weight: inherit; cursor: pointer; }
.reply-snip .inline-code { background: none; padding: 0; font-size: inherit; }
.reply-fallback { color: var(--text-muted); }
/* A group that opens with a reply reference pushes its avatar down so the reply
   line sits above it (aligned with the author header) instead of the spine and
   reply avatar overlapping it — matches Discord's reply layout. 24px = reply
   reference block height (4px margin + 16px line + 2px margin) + 2px gap. */
.msg-group.has-reply > .msg-gutter { padding-top: 24px; }
.system-msg { color: var(--text-muted); font-size: 14px; padding: 6px 0; }
.system-text { display: flex; align-items: center; gap: 6px; }
.pinned-badge { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.msg-status { font-size: 12px; color: var(--text-muted); }
.failed-note { color: var(--danger-soft); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.failed-note .link-btn { color: var(--danger-soft); text-decoration: underline; }

/* attachments & embeds */
.msg-image img, .msg-image { max-width: min(400px, 100%); border-radius: var(--radius-lg); display: block; margin-top: 4px; }
.msg-image { cursor: zoom-in; }
.msg-image img { max-height: 320px; object-fit: contain; background: #00000020; }
.msg-video, .msg-gif { max-width: min(400px, 100%); max-height: 320px; border-radius: var(--radius-lg); margin-top: 4px; display: block; }
.msg-audio { margin-top: 4px; max-width: 400px; }
.msg-file {
  display: flex; align-items: center; gap: 10px; background: var(--bg-embed);
  border: 1px solid #232428; border-radius: var(--radius-lg); padding: 10px 12px; margin-top: 4px;
  max-width: 400px; color: var(--text-normal);
}
.msg-file:hover { text-decoration: none; border-color: #000; }
.msg-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-file-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-file-info span { color: var(--text-muted); font-size: 12px; }
.msg-embed {
  border-left: 4px solid var(--brand); background: var(--bg-embed); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 4px; max-width: 420px; display: flex; flex-direction: column; gap: 4px;
}
.embed-site { color: var(--text-muted); font-size: 12px; }
.embed-title { color: var(--link); font-weight: 600; font-size: 15px; }
.embed-desc { color: var(--text-normal); font-size: 13px; line-height: 1.4; }
.embed-image { max-width: 100%; max-height: 240px; border-radius: var(--radius-md); margin-top: 4px; object-fit: contain; }
.msg-sticker { width: 160px; height: 160px; margin-top: 4px; }
.msg-sticker img, .msg-sticker svg, .msg-sticker div { width: 100%; height: 100%; object-fit: contain; }

/* reactions */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction {
  display: flex; align-items: center; gap: 4px; background: var(--bg-embed);
  border: 1px solid transparent; border-radius: var(--radius-lg); padding: 2px 6px;
  transition: border-color calc(120ms * var(--anim)) var(--ease), background-color calc(120ms * var(--anim)) var(--ease); cursor: pointer;
}
.reaction:hover { border-color: #000; }
.reaction.mine { background: rgba(88,101,242,.16); border-color: var(--brand); }
.reaction-emoji { font-size: 16px; line-height: 18px; }
.reaction .emoji { width: 18px; height: 18px; }
.reaction-count { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.reaction.mine .reaction-count { color: #c9cdfb; }
@keyframes reaction-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.reaction.pop { animation: reaction-pop calc(200ms * var(--anim)) var(--ease); }

/* ---- polls ---- */
.poll {
  background: var(--bg-embed); border-radius: var(--radius-lg); margin-top: 6px;
  padding: 14px 16px; max-width: min(480px, 100%); min-width: min(280px, 100%);
}
.poll-head { display: flex; gap: 12px; align-items: flex-start; }
.poll-icon {
  width: 36px; height: 36px; border-radius: var(--radius-lg); background: var(--brand);
  display: grid; place-items: center; color: #fff; flex: none;
}
.poll-question-wrap { min-width: 0; }
.poll-question { color: var(--text-header); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.poll-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.poll-answers-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.poll-answer {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--bg-deepest); border: 1px solid var(--divider); border-radius: var(--radius-md);
  padding: 9px 12px; cursor: pointer; overflow: hidden;
  transition: border-color calc(120ms * var(--anim)) var(--ease), background-color calc(120ms * var(--anim)) var(--ease);
}
.poll-answer:hover { border-color: var(--brand); }
.poll-answer.voted { border-color: var(--brand); }
.poll-answer.closed { cursor: default; }
.poll-answer.closed:hover { border-color: var(--divider); }
.poll-answer.winner { border-color: var(--green); }
.poll-answer.winner .poll-answer-text { font-weight: 700; }
.poll-bar {
  position: absolute; inset: 0 auto 0 0; background: rgba(88,101,242,.22);
  transition: width calc(350ms * var(--anim)) var(--ease); pointer-events: none;
}
.poll-answer:not(.voted) .poll-bar { background: rgba(255,255,255,.05); }
.poll-answer.winner .poll-bar { background: rgba(35,165,90,.22); }
.poll-choice {
  flex: none; width: 18px; height: 18px; border: 1px solid #72767d;
  display: grid; place-items: center; color: #fff; position: relative;
}
.poll-choice.single { border-radius: 50%; }
.poll-choice.multi { border-radius: calc(var(--radius) * 1.25); }
.poll-choice.checked { background: var(--brand); border-color: var(--brand); }
.poll-choice.single.checked::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.poll-answer-text { position: relative; color: var(--text-header); font-size: 14px; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.poll-answer-emoji { font-size: 16px; line-height: 1; }
.poll-answer-stats { position: relative; margin-left: auto; color: var(--text-muted); font-size: 13px; flex: none; }
.poll-answer-stats b { color: var(--text-header); }
.poll-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; color: var(--text-muted); font-size: 12px;
}
.poll-timer { display: inline-flex; align-items: center; gap: 5px; }
.poll-timer.ended { color: var(--text-muted); }

/* attach "+" menu */
.attach-menu-popover { min-width: 300px; padding: 6px; }
.attach-menu { display: flex; flex-direction: column; }
.attach-menu-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-md);
  text-align: left; transition: background-color calc(120ms * var(--anim)) var(--ease);
}
.attach-menu-item:hover { background: var(--bg-hover); }
.attach-menu-icon {
  width: 36px; height: 36px; border-radius: var(--radius-lg); background: var(--bg-deepest);
  display: grid; place-items: center; color: var(--text-muted); flex: none;
}
.attach-menu-text { display: flex; flex-direction: column; gap: 1px; }
.attach-menu-text b { color: var(--text-header); font-size: 14px; font-weight: 600; }

/* poll creation modal */
.poll-modal { width: min(100%, 520px); }
.poll-modal-body { max-height: 60vh; }
.poll-answers { display: flex; flex-direction: column; gap: 8px; }
.poll-answer-row { display: flex; align-items: center; gap: 8px; }
.poll-answer-row .field-input { flex: 1; }
.poll-answer-row .icon-btn { flex: none; width: 42px; height: 42px; background: var(--bg-deepest); border-radius: var(--radius-sm); }
.poll-answer-row .poll-remove-btn:disabled { opacity: .35; cursor: not-allowed; }
.poll-emoji-picked { font-size: 18px; line-height: 1; }
.poll-add-answer { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }

/* typing indicator */
.typing-bar {
  height: 22px; padding: 0 16px; font-size: 13px; color: var(--text-normal);
  display: flex; align-items: center; gap: 6px; flex: none; overflow: hidden;
  opacity: 0; transform: translateY(3px);
  transition: opacity calc(140ms * var(--anim)) var(--ease), transform calc(140ms * var(--anim)) var(--ease);
  margin-bottom: -2px;
}
.typing-bar.visible { opacity: 1; transform: none; }
.typing-bar b { color: var(--text-header); }
.typing-dots { display: inline-flex; gap: 2px; align-items: center; }
.typing-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted);
  animation: typing-bounce calc(1200ms * var(--anim)) infinite var(--ease);
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---- composer ---- */
.composer-wrap { position: relative; padding: 0 16px 20px; flex: none; }
.composer {
  background: var(--bg-input); border-radius: var(--radius-lg); display: flex; align-items: flex-end;
  padding: 0 4px; position: relative; transition: box-shadow calc(160ms * var(--anim)) var(--ease), background-color calc(160ms * var(--anim)) var(--ease);
}
.composer:focus-within { box-shadow: 0 0 0 2px #5865f266; background: var(--bg-input); }
.composer-btn {
  width: 40px; height: 44px; display: grid; place-items: center; color: var(--text-muted);
  border-radius: var(--radius-sm); transition: color calc(120ms * var(--anim)) var(--ease), transform calc(100ms * var(--anim)) var(--ease); flex: none;
}
.composer-btn:hover { color: var(--text-normal); }
.composer-btn:active { transform: scale(.92); }
.gif-chip {
  font-size: 10px; font-weight: 800; background: var(--text-muted); color: var(--bg-input);
  border-radius: var(--radius-sm); padding: 3px 4px; letter-spacing: .03em;
}
.composer-btn:hover .gif-chip { background: var(--text-normal); }
.composer-input-wrap { flex: 1; min-width: 0; position: relative; }
.composer-input {
  min-height: 22px; max-height: 400px; overflow-y: auto; padding: 11px 8px;
  outline: none; word-wrap: break-word; overflow-wrap: anywhere; color: var(--text-normal);
}
.composer-input:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; }
.composer.slowmode-blocked .composer-input { pointer-events: none; opacity: .55; }
.composer.slowmode-blocked .send-btn,
.composer.slowmode-blocked .composer-btn { pointer-events: none; opacity: .55; }
.slowmode-note {
  font-size: 12px; color: var(--text-muted); padding: 6px 4px 0; display: none;
  align-items: center; gap: 6px;
}
.slowmode-note.visible { display: flex; }
.slowmode-note svg { flex: none; }
.send-btn { color: var(--brand); }
.send-btn:hover { color: var(--brand-hover); }
.reply-bar, .edit-bar {
  background: var(--bg-input); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 8px 12px;
  font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid #2b2d31;
}
.reply-bar b { color: var(--text-normal); }
.edit-bar { color: var(--text-muted); }
.pending-files {
  background: var(--bg-input); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #2b2d31;
}
.pending-file { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pending-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump-pill {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 600;
  border-radius: var(--radius-3xl); padding: 6px 14px; box-shadow: var(--shadow-elev); z-index: 6;
  animation: pop-in calc(150ms * var(--anim)) var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }

/* autocomplete */
.autocomplete {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-floating); border-radius: var(--radius-lg); box-shadow: var(--elev-high);
  padding: 8px; z-index: 20; max-height: 320px; overflow-y: auto;
  animation: ac-in calc(120ms * var(--anim)) var(--ease);
}
@keyframes ac-in { from { opacity: 0; transform: translateY(4px); } }
.ac-title {
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 4px 8px 8px;
}
.ac-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-normal);
}
.ac-item.selected, .ac-item:hover { background: var(--bg-hover); }
.ac-label { font-weight: 600; font-size: 14px; }
.ac-sub { color: var(--text-muted); font-size: 12px; margin-left: auto; }

/* ---- member list ---- */
.member-list {
  width: var(--member-width); background: var(--bg-sidebar); flex: none; overflow-y: auto; overflow-x: hidden;
  padding: 12px 8px; opacity: 1; transition: width calc(200ms * var(--anim)) var(--ease), padding calc(200ms * var(--anim)) var(--ease), opacity calc(160ms * var(--anim)) var(--ease), transform calc(200ms * var(--anim)) var(--ease);
  transform: none;
}
.member-list.collapsing { width: 0; padding-left: 0; padding-right: 0; opacity: 0; transform: translateX(12px); }
.member-group { margin-bottom: 16px; }
.member-group-name {
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; padding: 6px 8px;
}
.member-item {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease);
}
.member-item:hover { background: var(--bg-hover); }
.member-item.offline { opacity: .4; }
.member-item.offline:hover { opacity: .5; }
.member-names { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.member-name { color: var(--text-normal); font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-custom { color: var(--text-faint); font-size: 12px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- search results panel ---- */
.search-panel {
  width: 420px; flex: 0 1 420px; min-width: 0; max-width: 420px; background: #2b2d31; display: flex; flex-direction: column;
  border-left: 1px solid #232428; overflow: hidden;
  transform: translateX(24px); opacity: 0;
  transition: transform calc(220ms * var(--anim)) var(--ease), opacity calc(180ms * var(--anim)) var(--ease);
}
.search-panel.open { transform: none; opacity: 1; }
.search-panel-head { padding: 14px 16px 10px; border-bottom: 1px solid #232428; position: relative; flex: none; }
.search-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 28px; }
.search-count { color: var(--text-header); font-size: 16px; font-weight: 700; }
.search-sort { display: flex; background: var(--bg-deepest); border-radius: var(--radius-sm); overflow: hidden; }
.search-sort-btn {
  border: 0; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600;
  padding: 3px 10px; cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease);
}
.search-sort-btn:hover { color: var(--text-normal); }
.search-sort-btn.active { background: var(--bg-active); color: var(--text-header); }
.search-panel-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 18px; }
.search-query { color: var(--text-normal); font-size: 13px; }
.search-scope { font-size: 12px; }
.search-chip {
  background: var(--bg-active); color: var(--text-normal); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; padding: 2px 8px;
}
.search-chip.invalid { background: transparent; color: var(--text-faint); text-decoration: line-through; }
.search-close { position: absolute; top: 12px; right: 12px; }
.search-results { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.search-result {
  padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer; background: var(--bg-chat);
  transition: background-color calc(120ms * var(--anim)) var(--ease);
}
.search-result:hover { background: var(--bg-hover); }
.search-result-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.search-result-head .avatar { width: 20px; height: 20px; font-size: 10px; }
.search-result-author { color: var(--text-header); font-size: 13px; font-weight: 600; }
.search-result-channel { color: var(--text-muted); font-size: 11px; font-weight: 600; }
.search-result-time { color: var(--text-muted); font-size: 11px; margin-left: auto; flex: none; }
.search-result-text {
  color: var(--text-normal); font-size: 13px; line-height: 1.4; padding-left: 26px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  word-break: break-word;
}
.search-result-text mark { background: #f0b23233; color: #f0b232; border-radius: var(--radius-xs); padding: 0 1px; }
.search-empty { color: var(--text-muted); font-size: 13px; padding: 24px 12px; text-align: center; line-height: 1.6; }
.search-loading { display: grid; place-items: center; padding: 16px; }
.search-more {
  margin: 6px 4px; border: 0; border-radius: var(--radius-sm); background: var(--bg-active); color: var(--text-normal);
  font-size: 13px; font-weight: 600; padding: 8px; cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease);
}
.search-more:hover { background: var(--bg-hover); color: var(--text-header); }

/* ============ friends view ============ */
.friends-view { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.friends-tabs { display: flex; align-items: center; gap: 2px; }
.friends-tab {
  color: var(--text-muted); font-size: 14px; font-weight: 500; padding: 4px 10px;
  border-radius: var(--radius-sm); display: flex; align-items: center; gap: 6px; transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease);
}
.friends-tab:hover { background: var(--bg-hover); color: var(--text-normal); }
.friends-tab.active { background: var(--bg-active); color: var(--text-header); }
.friends-tab.add-tab { background: var(--green); color: #fff; font-weight: 600; }
.friends-tab.add-tab:hover { background: var(--green-hover); color: #fff; }
.friends-tab.add-tab.active { background: var(--green); color: #fff; }
.friends-body { flex: 1; display: flex; min-height: 0; }
.friends-main { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 24px; --status-ring: var(--bg-chat); }
.friends-search {
  display: flex; align-items: center; background: var(--bg-deepest); border-radius: var(--radius-sm);
  padding: 8px 10px; color: var(--text-muted); margin-bottom: 16px;
}
.friends-search-input { flex: 1; border: 0; background: transparent; outline: 0; color: var(--text-normal); font-size: 14px; }
.friends-count {
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; margin: 12px 0 8px;
}
.friends-list { display: flex; flex-direction: column; }
.friend-row {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  border-radius: var(--radius-lg); cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease);
  border-top: 1px solid var(--divider);
}
.friend-row:first-child { border-top: 0; }
.friend-row:hover { background: var(--bg-hover); }
.friend-row.small { padding: 6px 4px; border: 0; }
.friend-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.friend-names { display: flex; flex-direction: column; min-width: 0; }
.friend-name { color: var(--text-header); font-weight: 600; font-size: 15px; }
.friend-username { color: var(--text-muted); font-weight: 400; font-size: 13px; margin-left: 5px; opacity: 0; transition: opacity calc(120ms * var(--anim)) var(--ease); }
.friend-row:hover .friend-username { opacity: 1; }
.friend-status { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-actions { display: flex; gap: 8px; }
.friend-action {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-deepest);
  display: grid; place-items: center; color: var(--text-muted); transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease);
}
.friend-action:hover { color: var(--text-header); }
.friend-action.accept:hover { color: var(--status-online); }
.friend-action.decline:hover { color: var(--red); }
.friends-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.friends-empty-art { color: var(--text-faint); margin-bottom: 16px; opacity: .6; }
.add-friend h2 { color: var(--text-header); font-size: 18px; margin: 0 0 8px; }
.add-friend-form { display: flex; gap: 10px; margin-top: 16px; }
.add-friend-form .field-input { flex: 1; }
.add-friend-ok { color: var(--status-online); font-size: 13px; min-height: 18px; margin-top: 8px; }
.active-now { width: 340px; flex: none; border-left: 1px solid #232428; padding: 20px 16px; overflow-y: auto; }
.active-now h2 { color: var(--text-header); font-size: 19px; font-weight: 800; margin: 0 0 16px; }
.active-empty {
  border: 1px solid var(--divider); border-radius: var(--radius-lg); padding: 20px; text-align: center;
  color: var(--text-muted); font-size: 13px;
}
.active-empty b { color: var(--text-normal); display: block; margin-bottom: 4px; }

/* ============ popovers / modals / menus ============ */
#layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
#layer > * { pointer-events: auto; }
.popover {
  position: fixed; background: var(--bg-floating); border-radius: var(--radius-lg);
  box-shadow: var(--elev-high); animation: pop-in2 calc(120ms * var(--anim)) var(--ease); z-index: 101;
  border: 1px solid #00000040;
  max-width: calc(100vw - 16px);
}
@keyframes pop-in2 { from { opacity: 0; transform: scale(.96); } }
.tooltip { position: fixed; z-index: 200; background: var(--bg-floating); color: var(--text-header); font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius-md); box-shadow: var(--elev-high); pointer-events: none; animation: tip-in calc(100ms * var(--anim)) var(--ease); max-width: 240px; text-align: center; }
.tooltip.below::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--bg-floating); }
.tooltip:not(.below)::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bg-floating); }
@keyframes tip-in { from { opacity: 0; transform: translateY(2px); } }
.context-menu { min-width: 190px; padding: 6px; display: flex; flex-direction: column; }
.ctx-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-height: 28px; border-radius: var(--radius-sm);
  color: var(--text-normal); font-size: 14px; font-weight: 500; text-align: left;
  transition: background-color calc(100ms * var(--anim)) var(--ease);
}
.ctx-item:hover { background: var(--brand-hover); color: #fff; }
.ctx-item.danger { color: var(--danger-soft); }
.ctx-item.danger:hover { background: var(--red); color: #fff; }
.ctx-item.disabled { opacity: .4; cursor: not-allowed; }
.ctx-item span { flex: 1; }
.ctx-sep { height: 1px; background: var(--divider); margin: 4px 6px; }
.ctx-icon-space { width: 16px; }
.menu-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-height: 28px; border-radius: var(--radius-sm);
  color: var(--text-normal); font-size: 14px; font-weight: 500; width: 100%; text-align: left;
}
.menu-item:hover { background: var(--brand-hover); color: #fff; }
.menu-item.danger { color: var(--danger-soft); }
.menu-item.danger:hover { background: var(--red); color: #fff; }
.menu-sep { height: 1px; background: var(--divider); margin: 4px 6px; }
.server-popover { min-width: 220px; padding: 6px; }
.status-popover { min-width: 280px; padding: 8px; }
.status-item { display: flex; align-items: center; gap: 10px; }
.status-item .small { display: block; }
.status-custom-row { padding: 2px 4px 6px; }
.status-custom-input {
  width: 100%; background: var(--bg-deepest); color: var(--text-header);
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px;
  outline: none; transition: border-color calc(150ms * var(--anim)) var(--ease);
}
.status-custom-input:focus { border-color: var(--brand); }
.status-custom-input::placeholder { color: var(--text-faint); }

.modal-backdrop {
  position: fixed; inset: 0; background: #000000a8; display: grid; place-items: center;
  z-index: 100; animation: fade-in calc(150ms * var(--anim)) var(--ease); padding: 20px; overflow-y: auto;
}
.modal-backdrop.closing { opacity: 0; transition: opacity calc(120ms * var(--anim)) var(--ease); }
@keyframes fade-in { from { opacity: 0; } }
.modal {
  background: var(--bg-chat); border-radius: var(--radius-lg); width: min(100%, 440px);
  box-shadow: var(--elev-high); animation: modal-in calc(120ms * var(--anim)) cubic-bezier(.2,.9,.3,1.15);
  max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column;
}
@keyframes modal-in { from { opacity: 0; transform: scale(.95); } }
.modal-head { padding: 16px; position: relative; }
.modal-head h2 { color: var(--text-header); font-size: 19px; margin: 0; font-weight: 700; }
.modal-head.center { text-align: center; padding-top: 24px; }
.modal-head.center p { margin-top: 8px; }
.modal-x { position: absolute; right: 12px; top: 12px; color: var(--text-muted); padding: 4px; border-radius: var(--radius-sm); }
.modal-x:hover { color: var(--text-header); }
.modal-body { padding: 0 16px 16px; overflow-y: auto; }
.modal-footer {
  padding: 16px; background: var(--bg-sidebar); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
}
.modal-footer.stick { margin-top: auto; }
/* In the settings tab panel the footer is the last child of the scrolling,
   padded .settings-content; stick it to the bottom and cancel that padding so
   it spans the modal width and never scrolls out of reach. */
.settings-content .modal-footer.stick {
  position: sticky; bottom: 0;
  margin-top: auto; margin-left: -36px; margin-right: -36px; margin-bottom: -40px;
  padding: 16px 36px;
}
body.mobile .settings-content .modal-footer.stick {
  margin-left: -12px; margin-right: -12px; margin-bottom: -12px; padding: 12px;
}
.confirm-modal { width: min(100%, 400px); }
.qs-modal { background: transparent; box-shadow: none; width: min(100%, 560px); align-self: flex-start; margin-top: 10vh; margin-top: 10dvh; }
.quick-switcher { background: var(--bg-floating); border-radius: var(--radius-lg); box-shadow: var(--elev-high); overflow: hidden; }
.qs-input {
  width: 100%; background: transparent; border: 0; outline: 0; color: var(--text-header);
  font-size: 18px; padding: 18px 20px; font-weight: 500;
}
.qs-input::placeholder { color: var(--text-faint); }
.qs-results { max-height: 320px; overflow-y: auto; padding: 4px 8px; }
.qs-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-muted);
}
.qs-item.selected { background: var(--bg-hover); color: var(--text-header); }
.qs-label { font-weight: 600; }
.qs-sub { margin-left: auto; font-size: 12px; }
.qs-empty { padding: 20px; text-align: center; color: var(--text-muted); }
.qs-footer {
  display: flex; gap: 18px; padding: 10px 16px; background: var(--bg-sidebar);
  color: var(--text-muted); font-size: 12px;
}

/* settings modal */
.settings-modal { width: min(96vw, 900px); height: min(90vh, 700px); height: min(90dvh, 700px); }
.settings { display: flex; height: 100%; min-height: 0; }
.settings-nav {
  width: 218px; flex: none; background: var(--bg-sidebar); padding: 24px 8px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg); overflow-y: auto;
}
.settings-nav-section {
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 6px 10px; letter-spacing: .02em;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  color: var(--text-muted); font-size: 14px; font-weight: 500; padding: 6px 10px;
  border-radius: var(--radius-sm); margin: 1px 0;
}
.settings-nav-item:hover { background: var(--bg-hover); color: var(--text-normal); }
.settings-nav-item.active { background: var(--bg-active); color: var(--text-header); }
.settings-nav-item.danger { color: var(--danger-soft); }
.settings-nav-sep { height: 1px; background: var(--divider); margin: 8px 10px; }
.settings-content { flex: 1; padding: 40px 36px; overflow-y: auto; display: flex; flex-direction: column; }
.settings-content h2 { color: var(--text-header); font-size: 18px; margin: 0 0 20px; font-weight: 700; }
.settings-subhead { color: var(--text-header); font-size: 14px; margin: 24px 0 12px; }
.account-card { background: var(--bg-deepest); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; position: relative; }
.account-banner {
  height: 90px;
  position: relative; background: var(--banner-a, #5865f2); overflow: hidden;
}
.account-banner.has-image { background-color: var(--bg-deep); }
.account-banner .banner-img { pointer-events: none; }
.banner-edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.banner-edit { display: flex; flex-direction: column; gap: 8px; }
.banner-edit-preview { border-radius: var(--radius-lg); overflow: hidden; }
.banner-edit-preview .account-banner { height: 140px; }
.account-card .primary-btn[data-goto] { position: absolute; top: 12px; right: 12px; box-shadow: 0 2px 8px #00000070; }
.account-head { display: flex; align-items: flex-end; padding: 0 16px; margin-top: -40px; }
.account-head .avatar { border: 6px solid var(--bg-deepest); }
.account-fields { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.account-field { display: flex; flex-direction: column; gap: 4px; }
.account-label { color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.account-value { color: var(--text-header); font-size: 15px; }
.profile-editor { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-input {
  appearance: none; -webkit-appearance: none; width: 56px; height: 42px; flex: none;
  border: 1px solid #00000080; border-radius: var(--radius-md); background: var(--bg-deepest);
  padding: 3px; cursor: pointer; transition: border-color calc(120ms * var(--anim)) var(--ease), box-shadow calc(120ms * var(--anim)) var(--ease);
}
.color-input:hover { border-color: var(--brand); }
.color-input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); outline: none; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: 0; border-radius: var(--radius-sm); }
.color-input::-moz-color-swatch { border: 0; border-radius: var(--radius-sm); }
.color-swatch {
  width: 40px; height: 40px; border-radius: var(--radius-md); border: 2px solid transparent;
  transition: transform calc(100ms * var(--anim)) var(--ease), border-color calc(120ms * var(--anim)) var(--ease);
}
.color-swatch.small { width: 28px; height: 28px; border-radius: 50%; }
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.active { border-color: #fff; }
.profile-card { background: var(--bg-deepest); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-elev); }
.profile-card .account-banner { height: 100px; }
.profile-card-body { padding: 0 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.profile-card-body .avatar { border: 6px solid var(--profile-top, var(--bg-deepest)); }
.profile-card-body b { color: var(--text-header); font-size: 17px; }
.profile-divider { height: 1px; background: var(--divider); margin: 10px 0; }
.profile-card-body p { margin: 0; font-size: 13px; }
.profile-popover { width: 320px; overflow: hidden; border-radius: var(--radius-xl); }
.profile-pop { background: var(--bg-floating); }
.profile-pop .account-banner { height: 70px; }
.profile-pop-avatar { padding: 0 12px; margin-top: -44px; position: relative; }
.profile-pop-avatar .avatar { border: 6px solid var(--bg-floating); }
.profile-pop-avatar .avatar-status { position: absolute; right: 14px; bottom: 2px; }
.profile-pop-body { padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 4px; background: transparent; margin: 0; }
.profile-pop-name { color: var(--text-header); font-size: 19px; font-weight: 800; }
.profile-about { font-size: 13px; margin: 2px 0; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.profile-custom { color: var(--text-normal); font-size: 13px; background: #ffffff10; padding: 6px 8px; border-radius: var(--radius-md); margin-top: 6px; }

/* bot / roles / emoji admin */
.bot-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.bot-row:last-child { border-bottom: 0; }
.bot-info { flex: 1; display: flex; flex-direction: column; }
.add-bot-row { display: flex; gap: 10px; margin-top: 16px; align-items: center; max-width: 460px; }
.add-bot-row .field-input { flex: 1; min-width: 0; }
.add-bot-row .primary-btn { flex: none; } /* use default sizing so it matches the input height */
.token-reveal { margin-top: 16px; background: var(--bg-deepest); padding: 14px; border-radius: var(--radius-lg); }
.token-box { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.token-box code { flex: 1; overflow-wrap: anywhere; }
.role-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.role-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-deepest); border-radius: var(--radius-md); }
.role-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.role-name { font-weight: 600; color: var(--text-header); }
.emoji-admin-grid { display: flex; flex-direction: column; gap: 6px; }
.emoji-admin-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--bg-deepest); border-radius: var(--radius-md); }
.member-admin-list { display: flex; flex-direction: column; gap: 4px; }
.member-admin-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-md); }
.member-admin-row:hover { background: var(--bg-deepest); }
.member-role-picks { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 8px;
  border-radius: var(--radius-xl); border: 1px solid var(--chip, #99aab5); color: var(--text-muted); cursor: pointer;
  transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease), border-color calc(120ms * var(--anim)) var(--ease);
}
.role-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.role-chip:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.role-chip.on { background: var(--chip, #99aab5); color: #fff; border-color: transparent; }


/* invite */
.invite-copy-row { display: flex; gap: 10px; margin-bottom: 16px; }
.invite-copy-row .field-input { flex: 1; }
.friends-invite-list { max-height: 240px; overflow-y: auto; }
.invite-card { width: min(92vw, 440px); }

/* upload drop */
.upload-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed #4e5058; border-radius: var(--radius-lg); padding: 24px; color: var(--text-muted);
  cursor: pointer; transition: border-color calc(150ms * var(--anim)) var(--ease), color calc(150ms * var(--anim)) var(--ease);
}
.upload-drop:hover { border-color: var(--brand); color: var(--text-normal); }
.upload-drop.round { border-radius: 50%; width: 90px; height: 90px; padding: 0; margin: 0 auto 16px; font-size: 11px; text-transform: uppercase; font-weight: 700; }
.upload-preview img { width: 48px; height: 48px; object-fit: contain; }
.upload-preview.large img { width: 120px; height: 120px; }
.cs-icon-preview { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* pickers */
.picker-popover { width: 424px; overflow: hidden; }
.picker { display: flex; flex-direction: column; height: min(420px, 70vh); height: min(420px, 70dvh); background: var(--bg-sidebar); border-radius: var(--radius-lg); }
.picker-head { padding: 12px 12px 8px; border-bottom: 1px solid #232428; }
.picker-search {
  display: flex; align-items: center; gap: 8px; background: var(--bg-deepest);
  border-radius: var(--radius-sm); padding: 7px 10px; color: var(--text-muted);
}
.picker-search input { flex: 1; border: 0; background: transparent; outline: 0; color: var(--text-normal); font-size: 14px; }
.picker-body { flex: 1; display: flex; min-height: 0; }
.picker-rail {
  width: 48px; flex: none; background: var(--bg-deepest); padding: 8px 0; display: flex;
  flex-direction: column; align-items: center; gap: 4px; overflow-y: auto;
}
.picker-rail-btn {
  width: 36px; height: 36px; border-radius: var(--radius-lg); display: grid; place-items: center;
  color: var(--text-muted); transition: background-color calc(120ms * var(--anim)) var(--ease), color calc(120ms * var(--anim)) var(--ease); overflow: hidden;
}
.picker-rail-btn:hover, .picker-rail-btn.active { background: var(--bg-active); color: var(--text-header); }
.rail-mini-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.rail-mini-initials { font-size: 13px; font-weight: 700; }
.rail-mini-lottie { width: 24px; height: 24px; }
.picker-scroll { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.picker-section-title {
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 12px 0 6px; position: sticky; top: -8px; background: var(--bg-sidebar); z-index: 1;
}
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-cell {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-md);
  transition: background-color calc(100ms * var(--anim)) var(--ease); padding: 3px;
}
.emoji-cell:hover { background: var(--bg-active); }
.emoji-cell:hover .emoji { transform: scale(1.15); }
.emoji-cell .emoji { width: 26px; height: 26px; transition: transform calc(100ms * var(--anim)) var(--ease); }
.emoji-cell .emoji.big { width: 30px; height: 30px; }
.sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sticker-cell {
  aspect-ratio: 1; background: var(--bg-deepest); border-radius: var(--radius-lg); padding: 8px;
  transition: background-color calc(120ms * var(--anim)) var(--ease); display: grid; place-items: center;
}
.sticker-cell:hover { background: var(--bg-active); }
.sticker-cell:hover img, .sticker-cell:hover .sticker-lottie { transform: scale(1.05); }
.sticker-cell img, .sticker-lottie { width: 100%; height: 100%; object-fit: contain; transition: transform calc(120ms * var(--anim)) var(--ease); }
.sticker-lottie.small { width: 36px; height: 36px; }
.gif-note { color: var(--text-faint); font-size: 12px; padding: 8px 14px 0; }
.gif-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; overflow-y: auto; }
.gif-cell { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; background: var(--bg-deepest); }
.gif-cell:hover img { transform: scale(1.03); }
.gif-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(120ms * var(--anim)) var(--ease); }

/* pins / inbox */
.pins-wrap, .inbox-wrap { width: 420px; max-height: 480px; overflow-y: auto; padding: 16px; }
.pins-popover h3 { color: var(--text-header); font-size: 16px; margin: 0 0 12px; }
.pin-item {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-lg);
  background: var(--bg-deepest); margin-bottom: 8px; cursor: pointer; transition: background-color calc(120ms * var(--anim)) var(--ease);
}
.pin-item:hover { background: var(--bg-hover); }
.pin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pin-author { color: var(--text-header); font-weight: 600; font-size: 13px; }
.pin-text { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.inbox-tab { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-2xl); background: var(--bg-deepest); color: var(--text-muted); }
.inbox-tab.active { background: var(--brand); color: #fff; }
.inbox-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-lg); cursor: pointer; color: var(--text-muted); }
.inbox-item:hover { background: var(--bg-hover); color: var(--text-header); }
.inbox-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inbox-body b { color: var(--text-header); font-size: 14px; }

/* toast */
#toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 24px); }
.toast {
  background: var(--bg-floating); color: var(--text-header); padding: 10px 18px;
  border-radius: var(--radius-lg); box-shadow: var(--elev-high); font-size: 14px;
  animation: toast-in calc(200ms * var(--anim)) cubic-bezier(.2,.9,.3,1.2);
  max-width: 100%; overflow-wrap: anywhere; text-align: center;
}
.toast.error { background: var(--red); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity calc(300ms * var(--anim)) var(--ease), transform calc(300ms * var(--anim)) var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.95); } }

/* drag overlay */
.drag-over::after {
  content: "Drop files to upload"; position: absolute; inset: 8px; z-index: 50;
  border: 3px dashed var(--brand); border-radius: var(--radius-2xl); background: #313338ee;
  display: grid; place-items: center; color: var(--text-header); font-size: 20px; font-weight: 700;
}
.channel-view { position: relative; }

/* compact density — Discord-style single-line message rows:
   no gutter avatar; a short timestamp sits in a fixed left column and the
   author name flows inline before the content of each group's first row */
body[data-density="compact"] .msg-group { display: block; padding: 0 16px 0 8px; margin-top: 1px; }
body[data-density="compact"] .msg-gutter { display: none; }
body[data-density="compact"] .msg-content-col { margin-left: 0; }
body[data-density="compact"] .msg-row { padding: 1px 8px 1px 62px; }
body[data-density="compact"] .msg-body { line-height: 1.25; font-size: 15px; }
/* author + first message share one line */
body[data-density="compact"] .msg-header { display: inline; margin: 0; }
body[data-density="compact"] .msg-header .msg-author { margin-right: 6px; font-size: 15px; }
body[data-density="compact"] .msg-header .bot-tag { margin-right: 4px; }
/* the long "Today at …" header timestamp yields to the short left-column time */
body[data-density="compact"] .msg-header .msg-timestamp { display: none; }
body[data-density="compact"] .msg-content-col > .msg-row:first-of-type { display: inline; }
body[data-density="compact"] .msg-content-col > .msg-row:first-of-type .msg-body { display: inline; }
body[data-density="compact"] .msg-content-col > .msg-row:first-of-type .msg-text { display: inline; }
/* keep non-text payload (attachments, embeds, reactions…) on their own lines */
body[data-density="compact"] .msg-content-col > .msg-row:first-of-type .msg-body > :not(.msg-text):not(.edited) { display: block; margin-top: 2px; }
/* left-column timestamps always visible, including on the first row */
body[data-density="compact"] .msg-gutter-time {
  opacity: 1; left: 6px; top: 3px; width: 50px; pointer-events: none;
}
body[data-density="compact"] .msg-group > .msg-content-col > .msg-row:first-of-type .msg-gutter-time { display: block; }
/* reply reference stays inline but no longer reaches into the (hidden) gutter */
body[data-density="compact"] .msg-reply-ref { margin: 2px 0 0; padding-left: 24px; max-width: 100%; }
body[data-density="compact"] .msg-reply-ref::before { left: 5px; top: 3px; width: 11px; height: 8px; border-top-left-radius: var(--radius-md); }
body[data-density="compact"] .msg-reply-ref + .msg-header { display: block; margin: 2px 0 0; }
body[data-density="compact"] .msg-reply-ref + .msg-header .msg-timestamp { display: inline; margin-left: 6px; }
body[data-density="compact"] .msg-reply-ref ~ .msg-row:first-of-type { display: block; }
body[data-density="compact"] .msg-reply-ref ~ .msg-row:first-of-type .msg-body { display: block; }
body[data-density="compact"] .msg-reply-ref ~ .msg-row:first-of-type .msg-body > :not(.msg-text):not(.edited) { display: block; }
body[data-density="compact"] .msg-hover-actions { top: -14px; right: 8px; }
body[data-density="compact"] .msg-new { margin: 4px 16px 2px; }
body[data-density="compact"] .channel-intro { padding-top: 12px; }

/* responsive */
@media (max-width: 1080px) {
  .active-now { display: none; }
}
@media (max-width: 860px) {
  .member-list { display: none; }
  /* the inline member toggle is a no-op once the inline list is hidden; the
     overlay toggle (#mobile-members-btn) is the real control in this range */
  #members-toggle { display: none; }
  /* the 420px panel overflows the narrow chat column once the sidebar and rail
     are subtracted; clamp it here — the ≤700 rule tightens it further */
  .search-panel { width: min(420px, calc(100vw - 328px)); min-width: 0; }
}
@media (max-width: 860px) {
  /* the two-pane editor leaves the form column ~59px wide between 701-860px */
  .profile-editor { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sidebar { position: absolute; z-index: 40; height: 100%; box-shadow: var(--elev-high); transform: translateX(-100%); transition: transform calc(180ms * var(--anim)) var(--ease); }
  .app-shell.nav-open .sidebar { transform: none; }
  .header-search { display: none; }
  .auth-card { grid-template-columns: 1fr; gap: 16px; }
  .auth-qr-col { display: none; }
  .profile-editor { grid-template-columns: 1fr; }
  .settings-nav { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* explore servers modal */
.explore-modal { width: 640px; max-width: 94vw; }
.explore-body { max-height: 72vh; }
.explore-search {
  display: flex; align-items: center; gap: 8px; background: var(--bg-deepest);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 14px; color: var(--text-muted);
}
.explore-search-input {
  flex: 1; background: none; border: none; outline: none; color: var(--text-header); font-size: 14px;
}
.explore-search-input::placeholder { color: var(--text-faint, var(--text-muted)); }
.explore-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 8px;
}
.explore-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  background: var(--bg-deepest); border-radius: var(--radius-lg); padding: 14px;
  transition: transform calc(120ms * var(--anim)) var(--ease), box-shadow calc(120ms * var(--anim)) var(--ease);
}
.explore-card:hover { transform: translateY(-2px); box-shadow: var(--elev-high); }
.explore-card-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.explore-card-icon {
  width: 48px; height: 48px; border-radius: calc(var(--radius) * 3.5); object-fit: cover; flex-shrink: 0;
}
.explore-card-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 16px;
}
.explore-card-meta { min-width: 0; }
.explore-card-name {
  color: var(--text-header); font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.explore-card-stats { display: flex; gap: 12px; margin-top: 4px; }
.explore-stat { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12.5px; }
.explore-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.explore-join { align-self: stretch; width: 100%; }
.explore-empty { text-align: center; padding: 28px 12px; }
.explore-empty p { margin: 4px 0; }
.explore-empty-art { color: var(--text-muted); opacity: .6; margin-bottom: 8px; }
.explore-publish-sect { border-top: 1px solid var(--bg-deep); margin-top: 14px; padding-top: 14px; }
.explore-subhead {
  color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; margin: 0 0 10px;
}
.explore-mine-row {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md);
}
.explore-mine-row:hover { background: var(--bg-hover); }
.explore-mine-icon { width: 32px; height: 32px; border-radius: var(--radius-xl); object-fit: cover; flex-shrink: 0; font-size: 12px; }
.explore-mine-name {
  flex: 1; min-width: 0; color: var(--text-header); font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* boot splash — shown until JS boots */
.boot-splash {
  height: 100%; display: grid; place-items: center; align-content: center; gap: 26px;
  color: var(--brand); background: var(--bg-deepest);
}
.boot-spinner {
  width: 26px; height: 26px; border: 3px solid var(--bg-hover); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .8s var(--ease-linear) infinite;
}

/* reconnect banner */
#reconnect-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  background: var(--yellow); color: #1e1f22; font-weight: 600; font-size: 13.5px;
  animation: banner-in calc(250ms * var(--anim)) cubic-bezier(.2,.9,.3,1.1);
}
#reconnect-banner.bye { opacity: 0; transform: translateY(-100%); transition: opacity calc(350ms * var(--anim)) var(--ease), transform calc(350ms * var(--anim)) var(--ease); }
.reconnect-inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 12px; }
.reconnect-inner .spinner { width: 14px; height: 14px; border-width: 2px; border-color: #0003; border-top-color: #1e1f22; }
@keyframes banner-in { from { transform: translateY(-100%); } }