/* Burst Talk
   One neutral ramp, one accent, three text roles. 4px spacing grid.
   Radii: 4 inline, 8 controls, 12 cards, 16 panels. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-0: #14161a;
  --bg-1: #17191e;
  --bg-2: #1d2026;
  --bg-3: #22262d;
  --bg-4: #2a2f37;
  --bg-5: #343a43;
  --hover: rgba(236, 239, 243, .04);
  --scrim: rgba(8, 9, 11, .6);

  /* Lines */
  --line: rgba(236, 239, 243, .08);
  --line-strong: rgba(236, 239, 243, .14);

  /* Text */
  --text: #eceff3;
  --text-2: #b4bcc7;
  --text-3: #8d96a3;

  /* Accent. The owner can change --accent; app.js sets --accent-soft and --on-accent to match */
  --accent: #7389ad;
  --accent-soft: #7389ad25;
  --on-accent: #14161a;
  --accent-ink: color-mix(in srgb, var(--accent) 55%, var(--text));

  /* Semantic */
  --danger: #e0868c;
  --green: #69b58a;
  --amber: #d6ad62;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;

  --ease: cubic-bezier(.2, 0, 0, 1);
  --fast: 120ms;
  --enter: 180ms;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Manrope", "DM Sans", system-ui, sans-serif;

  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg-1);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.light-theme {
  color-scheme: light;
  --bg-0: #e3e7ec;
  --bg-1: #f3f5f7;
  --bg-2: #eaedf1;
  --bg-3: #ffffff;
  --bg-4: #e1e6ec;
  --bg-5: #d3dae2;
  --hover: rgba(30, 36, 44, .04);
  --scrim: rgba(20, 24, 30, .35);
  --line: rgba(30, 36, 44, .1);
  --line-strong: rgba(30, 36, 44, .18);
  --text: #1e242c;
  --text-2: #444e5b;
  --text-3: #5f6a78;
  --accent-ink: color-mix(in srgb, var(--accent) 55%, var(--text));
  --danger: #b4414a;
  --green: #3f8a62;
  --amber: #a97a1f;
  background: var(--bg-1);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg-1); color: var(--text); font-size: 14px; line-height: 1.5; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--accent-ink); }
code, kbd { font-family: var(--mono); }
.hidden { display: none !important; }
.muted { color: var(--text-3); }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

.icon { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Shared hover and press transitions. Named properties only. */
button, a, input, select, textarea, .member-row, .dm-conversation-item, .dm-member-option {
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

/* Buttons */
.primary-btn, .secondary-btn {
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-weight: 500;
}
.primary-btn { background: var(--accent); color: var(--on-accent); }
.primary-btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.secondary-btn { border-color: var(--line-strong); background: var(--bg-4); color: var(--text); }
.secondary-btn:hover { background: var(--bg-5); }
.primary-btn:active, .secondary-btn:active, .send-btn:active { transform: scale(.98); }
.small-primary { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.small-primary, .full-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.full-btn { display: flex; width: 100%; height: 40px; margin-top: 16px; }

.icon-btn { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: var(--radius-m); background: transparent; color: var(--text-2); }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--bg-4); color: var(--text); }

/* Form fields */
.field { display: grid; min-width: 0; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field label, .login-form label { color: var(--text-2); font-size: 13px; font-weight: 500; }
.field input, .field select, .login-form input, .profile-card textarea {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--bg-1);
  color: var(--text);
}
.field input:focus, .field select:focus, .login-form input:focus, .profile-card textarea:focus, .dm-search:focus, .dm-composer textarea:focus { border-color: var(--accent); }
.field input[type="color"] { padding: 4px; }
.field input[type="file"] { padding: 0 8px; line-height: 38px; font-size: 13px; }
.profile-card textarea { height: auto; min-height: 80px; padding: 8px 12px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }

/* Status dot: used for presence and connection state only */
.status-dot, .presence-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.presence-online { background: var(--green); }
.presence-idle { background: var(--amber); }
.presence-dnd { background: var(--danger); }
.presence-offline { background: var(--text-3); }
.live-indicator[data-state="connecting"] .status-dot,
.live-indicator[data-state="reconnecting"] .status-dot { background: var(--amber); }

/* Sign in and setup */
.login-screen { display: grid; place-items: center; width: 100%; height: 100%; min-height: 520px; padding: 24px; overflow: auto; background: var(--bg-1); }
.login-card { width: min(400px, calc(100vw - 32px)); padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-3); }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 24px; border-radius: var(--radius-l); background: var(--bg-4); color: var(--text); font: 600 14px var(--display); }
.login-card h1 { margin-bottom: 8px; font-size: 24px; line-height: 32px; letter-spacing: -.01em; }
.login-card > p { margin-bottom: 24px; }
.login-form { display: grid; gap: 8px; }
.login-form label:not(:first-child) { margin-top: 8px; }
.form-error { min-height: 20px; margin-top: 12px; color: var(--danger); font-size: 13px; }
.config-warning { margin-top: 16px; padding: 12px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: var(--radius-m); background: var(--bg-1); color: var(--text-2); font-size: 13px; line-height: 20px; }
.config-warning code { color: var(--text); }
.login-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.login-foot a { text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

.setup-card { width: min(560px, calc(100vw - 32px)); padding: 32px; }
.setup-steps { display: grid; gap: 8px; margin: 24px 0; }
.setup-step { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--bg-1); }
.step-no { flex: 0 0 24px; display: grid; place-items: center; height: 24px; border-radius: var(--radius-m); background: var(--bg-4); color: var(--text-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.setup-step strong { font-size: 14px; font-weight: 500; }
.setup-step p { margin-top: 4px; color: var(--text-3); font-size: 13px; line-height: 20px; }
.setup-step code, .credentials-box code, .setup-result code { padding: 2px 4px; border-radius: var(--radius-s); background: var(--bg-0); font-size: 12px; }
.setup-secret { margin: 16px 0; }
.setup-result { margin-top: 16px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--bg-1); }
.setup-result p { margin-top: 4px; font-size: 13px; }
.credential-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.credential-row:last-of-type { border-bottom: 0; }
.credential-row small { color: var(--text-3); font-size: 12px; }
.credential-row code { overflow-wrap: anywhere; }
.setup-error { min-height: 20px; margin-top: 12px; color: var(--danger); font-size: 13px; }

/* App shell */
.app-shell { position: relative; display: flex; width: 100%; height: 100dvh; overflow: hidden; background: var(--bg-1); }

.server-rail { display: flex; flex: 0 0 56px; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; border-right: 1px solid var(--line); background: var(--bg-0); }
.rail-logo, .rail-active { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--bg-3); color: var(--text); font: 600 14px var(--display); overflow: hidden; }
.rail-logo:hover { background: var(--bg-4); }
.rail-active { overflow: visible; }
.rail-active::before { position: absolute; left: -8px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); content: ""; }
.rail-active span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; font-size: 16px; font-weight: 600; }
.rail-separator { width: 24px; height: 1px; background: var(--line-strong); }
.rail-logo img, .rail-active img { width: 100%; height: 100%; object-fit: cover; }

/* Channel sidebar */
.channel-sidebar { display: flex; flex: 0 0 240px; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); background: var(--bg-2); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.group-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.group-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; overflow: hidden; border-radius: var(--radius-m); background: var(--accent); color: var(--on-accent); font: 600 14px var(--display); }
.group-icon img, .welcome-icon img { width: 100%; height: 100%; object-fit: cover; }
.group-heading-copy { display: grid; min-width: 0; }
.group-heading-copy strong { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.group-heading-copy span { color: var(--text-3); font-size: 12px; line-height: 16px; }
.sidebar-section-label { margin: 24px 16px 8px; color: var(--text-3); font-size: 12px; font-weight: 500; }
.channel-item { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 8px; padding: 0 8px; border: 0; border-radius: var(--radius-m); background: transparent; color: var(--text-2); text-align: left; }
.channel-item .icon { color: var(--text-3); }
.channel-item:hover { background: var(--hover); }
.channel-item.active { background: var(--bg-4); color: var(--text); }
.sidebar-note { margin: 12px 16px; color: var(--text-3); font-size: 12px; line-height: 16px; }
.sidebar-bottom { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); background: var(--bg-0); }
.current-user-card { display: flex; align-items: center; gap: 4px; min-width: 0; }
.profile-open-btn { display: flex; align-items: center; flex: 1; gap: 12px; min-width: 0; padding: 4px; border: 0; border-radius: var(--radius-m); background: transparent; text-align: left; }
.profile-open-btn:hover { background: var(--hover); }
.avatar, .member-avatar, .message-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--bg-5); color: var(--text); font-weight: 600; }
.avatar { width: 32px; height: 32px; font-size: 12px; }
.current-user-copy { display: grid; flex: 1; min-width: 0; }
.current-user-copy strong { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.current-user-copy span { color: var(--text-3); font-size: 12px; line-height: 16px; }
.member-avatar img, .avatar img, .profile-avatar-large img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* Chat column */
.chat-column { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; background: var(--bg-1); background-size: cover; background-position: center; }
.chat-header { display: flex; flex: 0 0 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.chat-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header-hash { display: grid; color: var(--text-3); }
.chat-title-wrap h2 { font-size: 16px; line-height: 24px; }
.chat-title-wrap p { overflow: hidden; color: var(--text-3); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.live-indicator { display: flex; align-items: center; gap: 8px; margin-right: 8px; color: var(--text-3); font-size: 12px; }

.message-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.search-box { display: flex; align-items: center; gap: 8px; width: min(360px, 60%); height: 36px; padding: 0 4px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--bg-3); color: var(--text-3); }
.search-box:focus-within { border-color: var(--accent); }
.search-box input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
.search-box button { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text-3); }
.search-box button:hover { background: var(--bg-4); color: var(--text); }
.message-filters { display: flex; align-items: center; gap: 8px; }
.filter-btn { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: transparent; color: var(--text-2); font-size: 13px; font-weight: 500; }
.filter-btn:hover { background: var(--hover); }
.filter-btn.active { border-color: var(--line-strong); background: var(--bg-4); color: var(--text); }

/* Messages */
.message-list { flex: 1; min-height: 0; overflow-y: auto; padding: 24px max(24px, calc((100% - 880px) / 2)) 16px; scroll-behavior: smooth; }
.message-list::-webkit-scrollbar, .modal-card::-webkit-scrollbar { width: 8px; }
.message-list::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb { border-radius: var(--radius-s); background: var(--bg-5); }
.welcome-block { max-width: 880px; margin: 0 auto 24px; padding: 8px 0 24px; border-bottom: 1px solid var(--line); }
.welcome-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius-l); background: var(--accent); color: var(--on-accent); font: 600 20px var(--display); }
.welcome-block h2 { margin-bottom: 4px; font-size: 24px; line-height: 32px; letter-spacing: -.01em; }
.welcome-block p { color: var(--text-3); }

.message { position: relative; display: flex; max-width: 880px; gap: 12px; margin: 0 auto; padding: 8px 12px 8px 12px; border-radius: var(--radius-m); }
.message:hover, .message:focus-within { background: var(--hover); }
.message.pinned-message { box-shadow: inset 2px 0 0 var(--accent); }
.message-avatar { width: 36px; height: 36px; font-size: 12px; }
.message-main { flex: 1; min-width: 0; }
.message-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.message-name { font-size: 14px; font-weight: 600; }
.message-name.profile-link { padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.message-name.profile-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.message-role, .message-time, .forwarded-label { color: var(--text-3); font-size: 12px; }
.message-time { font-variant-numeric: tabular-nums; }
.pin-label { color: var(--accent-ink); font-size: 12px; font-weight: 500; }
.forwarded-label { margin-bottom: 4px; }
.message-content { overflow-wrap: anywhere; color: var(--text); line-height: 1.5; }
.message-content a { text-underline-offset: 2px; }
.message-content code, .inline-code { padding: 2px 4px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-0); font-size: 13px; }
.message-code { max-width: 100%; margin: 8px 0; padding: 12px 16px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-0); }
.message-code code { padding: 0; border: 0; background: transparent; white-space: pre; }
.spoiler { padding: 0 4px; border-radius: var(--radius-s); background: var(--bg-5); color: transparent; cursor: pointer; user-select: none; }
.spoiler.revealed { background: var(--bg-4); color: var(--text); user-select: text; }
.mention { padding: 0 4px; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent-ink); }
.reply-quote { display: inline-block; max-width: 100%; margin-bottom: 4px; padding: 4px 8px; overflow: hidden; border: 0; border-left: 2px solid var(--accent); border-radius: var(--radius-s); background: var(--bg-3); color: var(--text-2); font-size: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.reply-quote:hover { background: var(--bg-4); }
.message-image { display: block; max-width: min(420px, 100%); max-height: 320px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-m); object-fit: contain; }
.message-video { display: block; width: min(520px, 100%); max-height: 340px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-0); }
.file-attachment { display: flex; align-items: center; gap: 12px; width: min(360px, 100%); margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--bg-3); color: var(--text); text-decoration: none; }
.file-attachment:hover { background: var(--bg-4); }
.file-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-m); background: var(--bg-4); color: var(--text-2); }
.file-attachment > span:last-child { display: grid; min-width: 0; }
.file-attachment strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.file-attachment small, .attachment-unavailable { color: var(--text-3); font-size: 12px; }
.attachment-unavailable { padding: 8px 0; }

/* Hover toolbar: quick reactions, then actions */
.message-actions { position: absolute; top: -16px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--bg-3); opacity: 0; pointer-events: none; transition: opacity var(--fast) var(--ease); }
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; pointer-events: auto; }
.message-actions button { height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text-2); font-size: 12px; font-weight: 500; }
.message-actions button:hover { background: var(--bg-4); color: var(--text); }
.message-actions button.danger:hover { color: var(--danger); }
.quick-reaction-menu { display: flex; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--line-strong); }
.quick-reaction-menu button { width: 28px; padding: 0; font-size: 14px; }
.reaction-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.reaction-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-3); font-size: 13px; }
.reaction-chip:hover { background: var(--bg-4); }
.reaction-chip span { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.reaction-chip.mine { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); }
.message-highlight { background: var(--accent-soft) !important; }
.empty-messages { max-width: 880px; margin: 24px auto; padding: 16px; color: var(--text-3); text-align: center; }

/* Composer */
.composer-wrap { padding: 12px max(24px, calc((100% - 880px) / 2)) 16px; border-top: 1px solid var(--line); background: var(--bg-1); }
.reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 880px; margin: 0 auto 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-3); color: var(--text-2); font-size: 12px; }
.composer { display: flex; align-items: flex-end; gap: 8px; max-width: 880px; margin: 0 auto; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--bg-3); }
.composer:focus-within { border-color: var(--accent); }
.attach-btn, .send-btn { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: var(--radius-m); }
.attach-btn { background: transparent; color: var(--text-2); }
.attach-btn:hover { background: var(--bg-4); color: var(--text); }
.send-btn { background: var(--accent); color: var(--on-accent); }
.send-btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.composer-hint { display: flex; flex-wrap: wrap; gap: 4px 16px; max-width: 880px; margin: 8px auto 0; color: var(--text-3); font-size: 12px; }
.composer-hint kbd { padding: 0 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg-3); color: var(--text-2); font-size: 12px; }

/* Live markdown preview sits behind the transparent textarea.
   Both layers share one font, line height and padding so they stay aligned. */
.composer-editor { position: relative; flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 40px; }
.message-live-preview, #messageInput { padding: 8px 12px; font: 14px/24px "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: normal; overflow-wrap: anywhere; }
.message-live-preview { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; white-space: pre-wrap; color: var(--text); }
#messageInput { position: relative; z-index: 1; display: block; width: 100%; height: 40px; max-height: 152px; border: 0; outline: 0; resize: none; overflow-y: auto; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text); scrollbar-width: none; }
#messageInput::-webkit-scrollbar { display: none; }
#messageInput::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); }
.md-marker { color: var(--text-3); opacity: .8; }
.message-live-preview strong { font-weight: 600; }
.message-live-preview .live-code { padding: 0 4px; border-radius: var(--radius-s); background: var(--bg-0); font-family: var(--mono); font-size: 13px; }
.message-live-preview .live-spoiler { border-radius: var(--radius-s); background: var(--bg-5); color: transparent; }
.preview-placeholder { opacity: 0; }

/* Members */
.members-sidebar { display: flex; flex: 0 0 240px; flex-direction: column; min-width: 0; padding: 0 16px; border-left: 1px solid var(--line); background: var(--bg-2); }
.members-sidebar.is-collapsed { display: none !important; }
.members-heading { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--line); }
.members-heading > div { display: flex; align-items: center; gap: 8px; }
.members-heading-title { font-size: 14px; font-weight: 600; }
.member-count { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.member-list { display: grid; align-content: start; gap: 2px; padding-top: 12px; overflow-y: auto; }
.member-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border-radius: var(--radius-m); }
.member-row:hover { background: var(--hover); }
.member-profile-button { width: 100%; border: 0; background: transparent; text-align: left; }
.member-profile-button:hover { background: var(--hover); }
.member-avatar { width: 32px; height: 32px; font-size: 12px; }
.member-copy { display: grid; flex: 1; min-width: 0; }
.member-copy strong { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.member-copy span, .member-copy small { overflow: hidden; color: var(--text-3); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.role-owner, .role-admin { color: var(--text-2) !important; }
.close-members-btn { display: none; }

/* Modals */
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.modal-card { width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 820px); overflow-y: auto; padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--bg-3); }
.add-member-card { width: min(480px, calc(100vw - 32px)); }
.profile-card { width: min(520px, calc(100vw - 32px)); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-header h2 { font-size: 20px; line-height: 28px; }
.modal-intro { margin: 8px 0 24px; }
.settings-form { display: grid; gap: 16px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal-header + .settings-form { margin-top: 24px; }
.check-row { display: flex; align-items: flex-start; gap: 12px; color: var(--text-2); }
.check-row input { margin-top: 4px; accent-color: var(--accent); }
.check-row span { display: grid; }
.check-row strong { color: var(--text); font-size: 14px; font-weight: 500; }
.check-row small { color: var(--text-3); font-size: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.modal-divider { height: 1px; margin: 24px 0; background: var(--line); }
.member-management-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.member-management-head h3, .password-settings h3 { font-size: 14px; line-height: 20px; }
.member-management-head p, .password-settings > p { margin-top: 4px; font-size: 12px; line-height: 16px; }
.password-settings > p { margin-bottom: 16px; }
.management-list { display: grid; gap: 8px; margin-top: 16px; }
.management-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-2); }
.management-row .member-copy { flex: 1; }
.management-row select { max-width: 112px; height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg-3); font-size: 13px; }
.management-role { color: var(--text-3); font-size: 12px; }
.remove-member { height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: transparent; color: var(--danger); font-size: 13px; }
.remove-member:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.password-choice { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; }
.password-choice label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.password-choice input { width: auto; height: auto; accent-color: var(--accent); }
.credentials-box { display: grid; gap: 8px; margin-top: 16px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--bg-1); font-size: 13px; }
.credentials-box strong { font-size: 14px; font-weight: 600; }
.credentials-box .secondary-btn { justify-self: start; margin-top: 4px; }
.credential-line { color: var(--text-2); }
.credential-line code { margin-left: 4px; overflow-wrap: anywhere; color: var(--text); }

.toast { position: fixed; z-index: 40; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 48px)); padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--bg-4); color: var(--text); font-size: 13px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--enter) var(--ease), transform var(--enter) var(--ease); }
.toast.show { opacity: 1; transform: translateY(0); }

/* Profile */
.profile-hero { display: flex; align-items: center; gap: 16px; margin: 24px 0 12px; }
.profile-avatar-large { display: grid; place-items: center; flex: 0 0 auto; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-5); font-size: 24px; font-weight: 600; }
.profile-hero-copy { display: grid; min-width: 0; }
.profile-hero-copy h3 { font-size: 20px; line-height: 28px; }
.profile-hero-copy span { color: var(--text-3); font-size: 13px; }
.profile-hero-copy .profile-role { color: var(--text-2); }
.profile-status-line { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--text-2); font-size: 13px; }
.profile-bio { min-height: 48px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-edit-actions, .profile-message-action { display: flex; margin-top: 8px; }
.password-settings { margin-top: 16px; }

/* Private messages */
.app-shell.dm-open { display: flex !important; }
.dm-workspace { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--bg-1); }
#chatApp.dm-open > .server-rail,
#chatApp.dm-open > .channel-sidebar,
#chatApp.dm-open > .chat-column,
#chatApp.dm-open > .members-sidebar { display: none !important; }
.dm-topbar { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.dm-topbar h2 { font-size: 16px; }
.dm-layout { display: grid; flex: 1; grid-template-columns: minmax(240px, 288px) minmax(0, 1fr); min-height: 0; }
.dm-list-pane { min-height: 0; padding: 16px 12px; overflow: auto; border-right: 1px solid var(--line); background: var(--bg-2); }
.dm-list-heading { padding: 0 8px 8px; }
.dm-list-heading h3, .dm-chat-heading h3 { font-size: 14px; line-height: 20px; }
.dm-search { width: 100%; height: 36px; margin-bottom: 16px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--bg-3); font-size: 13px; outline: none; }
.dm-conversation-list, .dm-start-members { display: grid; gap: 2px; }
.dm-conversation-item, .dm-member-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius-m); background: transparent; text-align: left; }
.dm-conversation-item:hover, .dm-member-option:hover { background: var(--hover); }
.dm-conversation-item.active { background: var(--bg-4); }
.dm-small-avatar, .dm-peer-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--bg-5); font-weight: 600; }
.dm-small-avatar { width: 32px; height: 32px; font-size: 12px; }
.dm-peer-avatar { width: 40px; height: 40px; font-size: 12px; }
.dm-conversation-copy, .dm-member-option > span:last-child { display: grid; min-width: 0; }
.dm-conversation-copy strong, .dm-member-option strong { font-size: 14px; font-weight: 500; line-height: 20px; }
.dm-conversation-copy small, .dm-member-option small { overflow: hidden; color: var(--text-3); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.dm-start-heading { margin: 24px 8px 8px; color: var(--text-3); font-size: 12px; font-weight: 500; }
.dm-no-members { padding: 8px; color: var(--text-3); font-size: 13px; }
.dm-chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dm-chat-heading { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.dm-chat-heading p { color: var(--text-3); font-size: 12px; line-height: 16px; }
.dm-message-list { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 24px; overflow-y: auto; }
.dm-message { align-self: flex-start; max-width: min(640px, 86%); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--bg-3); overflow-wrap: anywhere; }
.dm-message.mine { align-self: flex-end; background: var(--accent-soft); }
.dm-message strong { margin-right: 8px; font-size: 13px; font-weight: 600; }
.dm-message time { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.dm-message > div { margin-top: 4px; }
.dm-message.pending { opacity: .6; }
.dm-empty-state { max-width: 360px; margin: auto; padding: 24px; color: var(--text-3); text-align: center; }
.dm-composer { display: flex; align-items: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--line); }
.dm-composer textarea { flex: 1; min-height: 40px; max-height: 128px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); outline: none; resize: none; background: var(--bg-3); font-size: 14px; line-height: 24px; }

/* Compact display */
body.compact .message { padding-top: 4px; padding-bottom: 4px; }
body.compact .message-avatar { width: 32px; height: 32px; }

/* Touch: no hover, so the toolbar sits under the message */
@media (hover: none) {
  .message { flex-wrap: wrap; }
  .message-actions { position: static; flex-wrap: wrap; flex: none; width: calc(100% - 48px); margin: 4px 0 0 48px; padding: 0; border: 0; background: transparent; opacity: 1; pointer-events: auto; }
  .message-actions button { height: 32px; }
}

/* Mobile-only controls */
.mobile-dm-btn, .mobile-settings-btn, .mobile-logout-btn { display: none; }

@media (max-width: 1120px) {
  .channel-sidebar, .members-sidebar { flex-basis: 224px; }
}
@media (max-width: 820px) {
  .server-rail { display: none; }
  .channel-sidebar { flex-basis: 200px; }
  .members-sidebar { position: absolute; z-index: 12; top: 0; right: 0; bottom: 0; width: min(280px, 84vw); border-left-color: var(--line-strong); }
  .close-members-btn, .mobile-dm-btn { display: grid; }
  .message-list { padding-right: 16px; padding-left: 16px; }
  .composer-wrap { padding-right: 16px; padding-left: 16px; }
  .chat-header, .message-toolbar { padding-right: 16px; padding-left: 16px; }
  .dm-layout { grid-template-columns: minmax(112px, 38%) minmax(0, 1fr); }
  .dm-topbar, .dm-chat-heading, .dm-composer { padding-right: 16px; padding-left: 16px; }
  .dm-message-list { padding: 16px; }
}
@media (max-width: 560px) {
  .channel-sidebar { display: none; }
  .mobile-settings-btn, .mobile-logout-btn { display: grid; }
  .live-indicator { display: none; }
  .message-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .search-box { width: 100%; }
  .message-filters { justify-content: flex-end; }
  .message-list { padding: 16px 8px 8px; }
  .message { gap: 8px; padding-right: 8px; }
  .message-avatar { width: 32px; height: 32px; }
  .message-actions { width: calc(100% - 40px); margin-left: 40px; }
  .composer-wrap { padding: 8px 8px 12px; }
  .composer-hint { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .modal-card { padding: 16px; }
  .login-card, .setup-card { padding: 24px; }
  .dm-layout { grid-template-columns: 1fr; }
  .dm-list-pane { max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}