/* =========================================================================
   Quedu / Derslik UI — legacy component sheet.

   Slice 0 of the Derslik port moved every colour, radius and shadow out of
   this file. The palette now lives in `/static/dk/tokens.css` as 17 tokens ×
   8 `[data-theme]` blocks (visual-system §1.2, ported from
   `design/Derslik v5.dc.html:17-24`); the new component vocabulary lives in
   `/static/dk/base.css` as the `dk-*` classes.

   Load order — fixed, all three sheets are required:
       /static/dk/tokens.css   variables
       /static/styles.css      THIS FILE: the components slices 1-10 still use
       /static/dk/base.css     the dk-* layer

   What changed here in slice 0:
     * the `:root` / `[data-theme="dark"]` palettes (old lines 9-131) and the
       whole `[data-skin]` system — 4 skin palettes × light/dark plus the
       184-line LMS layout block (old lines 133-549) — are DELETED. The two
       theming axes collapse into one (visual-system §3.1, C2); `theme.js`
       migrates `quedu-skin × quedu-theme` to `derslik-tema` once per user.
     * in their place is the alias block below, which maps every legacy
       variable name this sheet still reads onto the new token, so all ~450
       existing component rules adopt the new palette with no per-rule edits
       (visual-system §3.2, §5.1 "MIGRATION ALIASES").
     * `--font-display` (the kampüs serif) is gone: the new themes are
       palettes only, they change no face, radius or layout (T3).

   Delete this alias block, and then this file, as each slice ports its
   components to `dk-*`.
   ========================================================================= */

:root {
  /* ---- surfaces ------------------------------------------------------- */
  --surface: var(--panel);
  --surface-2: var(--panel2);
  --surface-3: var(--panel2);  /* collapses — the new design has 2 levels */
  --rail: var(--bg);           /* the vertical rail is gone (tab strip now) */
  --card: var(--panel);
  --bg-elevated: var(--panel2);
  /* The v5 backdrop: two accent-tinted radials over --bg (v5:35). Consumed
     by `body { background: var(--bg-grad), var(--bg) }` below. */
  --bg-grad:
    radial-gradient(1100px 500px at 85% -8%, color-mix(in srgb, var(--acc) 6%, transparent), transparent 62%),
    radial-gradient(800px 420px at -10% 108%, color-mix(in srgb, var(--acc) 5%, transparent), transparent 55%);

  /* ---- lines ---------------------------------------------------------- */
  --border: var(--line);
  --border-strong: var(--lineStrong); /* §6.5 — the 3:1 form-control boundary */

  /* ---- text ----------------------------------------------------------- */
  --text: var(--ink);
  --text-strong: var(--ink);   /* collapses — emphasis is weight 800 now */
  --fg: var(--ink);
  --muted: var(--mut);
  --text-muted: var(--mut);

  /* ---- accent --------------------------------------------------------- */
  --accent: var(--acc);
  --accent-hover: var(--acc2);
  --accent-press: var(--acc);
  --accent-contrast: var(--accInk);   /* §6.3 — no longer a hardcoded #fff */
  --accent-text: var(--accInkSoft);   /* §6.3 — accent as text on a tint */
  --accent-soft: var(--accSoft);
  --accent-soft-2: var(--accSoft);
  --brand: var(--acc);
  --brand-2: var(--acc2);
  /* The old 10-step brand ramp only fed --accent* and .tint-N; the four
     steps still referenced by name resolve onto the accent. */
  --brand-400: var(--acc2);
  --brand-500: var(--acc);
  --brand-600: var(--acc);
  --brand-700: var(--acc);
  --brand-800: var(--acc);

  /* ---- status --------------------------------------------------------- */
  --danger: var(--bad);
  --danger-hover: var(--bad);
  --danger-soft: var(--badSoft);
  /* --ok and --warn keep their names in the new token set — no alias. */
  --st-online: var(--ok);
  --st-idle: var(--warn);
  --st-dnd: var(--bad);
  --st-offline: var(--mut);

  /* ---- elevation & shape ---------------------------------------------- */
  --shadow: var(--golge);
  --shadow-sm: var(--shadow-row);
  --shadow-lg: var(--shadow-modal);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-2xl);

  /* ---- app header -----------------------------------------------------
     The new design has no coloured app header (the title bar is --panel and
     the tab strip sits on --bg), but `.shell-header` still renders until
     slice 1 lands, so the five tokens resolve to the panel treatment. */
  --header-bg: var(--panel);
  --header-text: var(--ink);
  --header-text-dim: var(--mut);
  --header-chip: var(--panel2);
  --header-border: var(--line);

  /* ---- legacy --t-* aliases (read by older selectors) ------------------ */
  --t-accent: var(--acc);
  --t-accent-hover: var(--acc2);
  --t-accent-press: var(--acc);
  --t-app-bg: var(--bg);
  --t-rail: var(--bg);
  --t-surface: var(--panel);
  --t-surface-2: var(--panel2);
  --t-border: var(--line);
  --t-text: var(--ink);
  --t-muted: var(--mut);
}

/* ----- base -------------------------------------------------------------
   `* { box-sizing }`, the root font-size, link colour, ::selection and the
   scrollbars now live in tokens.css — the root font-size in particular is
   the UI-scale hook (`html[data-scale]`), so it must not be pinned here. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font: 1rem/1.5 var(--font); /* Figtree (v5:11-12), was system-ui */
  background: var(--bg-grad), var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ----- cards ------------------------------------------------------------ */
.card {
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--text);
}
.card.wide {
  width: min(1240px, 98vw);
  text-align: left;
  padding: 0;
  overflow: hidden;
}

/* =========================================================================
   Discord-style app shell: [ guild rail | secondary sidebar | main ].
   Full-viewport, no centered card. Applied to every in-app screen.
   ========================================================================= */
body:has(.app-root) {
  display: block;
  min-height: 0;
  gap: 0;
  padding: 0;
}
body:has(.app-root) > footer,
body:has(.app-root) > .theme-toggle.floating { display: none; }

.app-root { width: 100vw; height: 100vh; overflow: hidden; }
.app-shell { display: flex; height: 100vh; background: var(--bg); }
.app-shell > .guild-layout,
.app-shell > .dm-layout,
.app-shell > .home-main {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
}
/* The guild layout drops its standalone header-based height in the shell. */
.app-shell > .guild-layout { height: 100vh; }

/* ----- guild rail ------------------------------------------------------- */
.guild-rail {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0;
  background: var(--rail);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}
.guild-rail::-webkit-scrollbar { width: 0; height: 0; }
.rail-home,
.rail-add,
.rail-guild,
.rail-icon-btn {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: border-radius 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rail-home:hover,
.rail-add:hover,
.rail-guild:hover,
.rail-icon-btn:hover,
.rail-home.active,
.rail-guild.active,
.rail-icon-btn.active {
  border-radius: 15px;
  background: var(--accent);
  color: #fff;
}
.rail-logo { font-weight: 800; font-size: 1.25rem; }
.rail-guilds { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.rail-guild { overflow: hidden; padding: 0; }
.rail-guild-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
}
.rail-guild.active .rail-guild-icon,
.rail-guild:hover .rail-guild-icon { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.rail-sep { width: 30px; height: 2px; border-radius: 2px; background: var(--border-strong); }
.rail-add { color: var(--ok); }
.rail-add:hover { background: var(--ok); color: #fff; }
.rail-spacer { flex: 1 1 auto; }
.rail-icon-btn { font-size: 1.05rem; }
.rail-settings .i { opacity: 0.85; }

/* ----- home secondary sidebar ------------------------------------------ */
.home-sidebar {
  flex: 0 0 248px;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  min-height: 0;
}
.home-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0.6rem 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.home-nav-item:hover { background: var(--surface-3); }
.home-nav-item.active { background: var(--accent-soft-2); color: var(--accent-text); }
.home-sidebar-label {
  padding: 0.6rem 1rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-dm-list { flex: 1 1 auto; overflow-y: auto; padding: 0 0.5rem; }
.home-dm-list .dm-item { display: flex; align-items: center; }
.home-dm-list .dm-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dm-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-empty { padding: 0.5rem 1rem; font-size: 0.85rem; }
.user-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--border);
  background: var(--surface-3);
}
.user-panel-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  flex: none;
}
.user-panel-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.user-panel-meta strong { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel-meta .muted { font-size: 0.72rem; }
.user-panel-logout { margin: 0; }

/* ----- home main (friends) --------------------------------------------- */
.home-main {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-width: 0;
}
.home-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  height: 48px;
  flex: none;
  border-bottom: 1px solid var(--border);
}
.home-topbar-title { display: flex; align-items: center; gap: 0.5rem; color: var(--text-strong); }
.friends-content { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.25rem; }
.friends-section {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1.25rem 0 0.4rem;
}
.inline-add { margin-top: 0; }
.inline-add-row { display: flex; gap: 0.5rem; }
.inline-add-row input { flex: 1; }

/* ----- settings page --------------------------------------------------- */
.settings-content { max-width: 720px; }
.settings-card {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.settings-card .friends-section { margin-top: 0; }
.settings-account { display: flex; align-items: center; gap: 0.85rem; }
.settings-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  flex: none;
}
.settings-account-meta { display: flex; flex-direction: column; line-height: 1.2; }
.settings-account-meta strong { font-size: 1.05rem; }
.settings-close { margin-left: auto; }

/* ----- DM chat inside the shell ---------------------------------------- */
.app-shell > .dm-layout { display: flex; flex-direction: column; }
.app-shell > .dm-layout > .dm-chat { flex: 1 1 auto; min-height: 0; }

.brand {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--accent);
}
.hello { font-size: 2rem; font-weight: 800; color: var(--ok); margin-bottom: 0.25rem; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 1.25rem; }
.err { color: var(--danger); font-size: 1.2rem; }
code {
  background: var(--surface-2);
  color: var(--text);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}
.detail {
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface-2);
  padding: 0.75rem;
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 0.8rem;
}
footer { color: var(--muted); font-size: 0.8rem; }

/* ----- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn .i { flex: 0 0 auto; }
.btn:hover { background: var(--accent-hover); }
.btn:active { background: var(--accent-press); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.secondary {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  margin-top: 1.5rem;
}
.btn.secondary:hover { background: var(--surface-2); border-color: var(--accent); }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.danger:hover { background: var(--danger-hover); }
.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.85rem; margin-top: 0; }
.btn-tiny {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  margin-left: 0.35rem;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-tiny:hover { background: var(--accent-soft); border-color: var(--accent); }
.link-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

/* ----- key-value (hello page) ------------------------------------------- */
.kv {
  text-align: left;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }

/* ----- app header ------------------------------------------------------- */
.shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--header-border);
}
.shell-header .brand { font-size: 1.2rem; color: var(--header-text); font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 0.6rem; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--header-text-dim);
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--header-chip);
  color: var(--header-text);
  font-weight: 700;
  font-size: 0.85rem;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.theme-toggle:hover { filter: brightness(1.08); transform: scale(1.05); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On the purple app header the toggle blends with the header chrome. */
.shell-header .theme-toggle {
  border-color: transparent;
  background: var(--header-chip);
  color: var(--header-text);
}
.shell-header .theme-toggle:focus-visible { outline-color: var(--header-text); }
/* A floating toggle for pages without an app header (landing/onboarding). It is
   hidden whenever the in-header toggle is present so there is only ever one. */
.theme-toggle.floating { position: fixed; top: 1rem; right: 1rem; z-index: 100; box-shadow: var(--shadow); }
body:has(.shell-header) .theme-toggle.floating { display: none; }

.welcome { font-size: 1.5rem; margin: 0 0 0.25rem; color: var(--text-strong); }
.shell-placeholder {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.placeholder-title { font-weight: 700; margin: 0 0 0.25rem; }

/* Non-guild app pages need inner padding back (the wide card removed it). */
.shell-main,
.card.wide > h1.welcome,
.card.wide > .section-head,
.card.wide > .form,
.card.wide > p,
.card.wide > form {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.card.wide > h1.welcome { padding-top: 1.25rem; }
.card.wide > form:last-child { padding-bottom: 1.25rem; }

/* ----- forms ------------------------------------------------------------ */
.form { margin-top: 1.25rem; text-align: left; }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; font-size: 0.9rem; }
.field span { color: var(--muted); font-weight: 600; }
/* D-36: the 0.7 opacity dropped "(isteğe bağlı)" to 2.64:1 on every one of
   the eight palettes. --mut is the token that is held at 4.5:1. */
.field .optional { font-weight: 400; color: var(--mut); opacity: 1; }
.field input,
.inline-form input,
.inline-fields input,
.thread-create input,
.poll-question,
.poll-answer,
.edit-input,
.channel-type-select,
.channel-rate-input,
.admin-row select,
.assign-form select,
select {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.field input:focus,
.inline-form input:focus,
.inline-fields input:focus,
.composer-input:focus,
.thread-create input:focus,
.poll-question:focus,
.poll-answer:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft-2);
}
.field-hint { font-size: 0.75rem; color: var(--muted); }
.form-error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  margin: 0.75rem 0;
}
.form .btn { width: 100%; margin-top: 0.5rem; }
.inline-form { display: flex; gap: 0.6rem; align-items: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.inline-form .field { flex: 1; margin-bottom: 0; }
.inline-form input { flex: 1; min-width: 7rem; }
.inline-fields { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.inline-fields input { flex: 1; min-width: 9rem; }
.channel-type-select { font-size: 0.85rem; }
.channel-rate-input { width: 9rem; }
.nsfw-toggle { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--warn); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.subhead {
  font-size: 0.72rem;
  margin: 1.1rem 0 0.45rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}

/* ----- server list ------------------------------------------------------ */
.guild-list { display: flex; flex-direction: column; gap: 0.5rem; }
.guild-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.guild-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.guild-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: 0 0 auto;
}
.guild-name { font-weight: 600; }
.empty-guilds { padding: 1rem 0; }

/* ----- guild workspace -------------------------------------------------- */
.guild-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  align-items: stretch;
  height: calc(100vh - 56px);
  min-height: 520px;
}
.channel-sidebar {
  background: var(--rail);
  border-right: 1px solid var(--border);
  padding: 0.9rem 0.75rem;
  overflow-y: auto;
  min-width: 0;
}
.guild-title { font-size: 1.15rem; margin: 0; color: var(--text-strong); word-break: break-word; }
.guild-bio { font-size: 0.85rem; margin: 0.25rem 0 0.5rem; }

/* ----- channel list ----------------------------------------------------- */
.channel-list { display: flex; flex-direction: column; gap: 0.1rem; }
.channel-row {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.25rem;
}
.channel-row:hover { background: var(--accent-soft); }
.channel-row.active {
  background: var(--accent-soft-2);
  box-shadow: inset 3px 0 0 var(--accent);
}
.channel-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-row.active .channel-name { font-weight: 700; color: var(--accent-press); }
.channel-hash { color: var(--muted); font-weight: 700; }
.channel-type { margin-left: auto; font-size: 0.75rem; }
.channel-empty { padding: 0.25rem 0.45rem; font-size: 0.85rem; }
.channel-del {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.channel-row:hover .channel-del { opacity: 1; }
.channel-del:hover { color: var(--danger); background: var(--danger-soft); }
.channel-del:focus-visible { opacity: 1; outline: 2px solid var(--accent); }

/* ----- invite ----------------------------------------------------------- */
.invite-box {
  margin-top: 1rem;
  padding: 0.85rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.invite-code { display: block; margin-top: 0.5rem; word-break: break-all; }

/* ----- server settings / admin ----------------------------------------- */
.server-settings { margin-top: 1.1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.server-settings summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
}
.server-settings summary::-webkit-details-marker { display: none; }
.server-settings[open] summary { color: var(--accent); margin-bottom: 0.5rem; }
.server-settings .form { gap: 0.5rem; }
.server-settings .form + form { margin-top: 0.75rem; }
.server-settings .btn.btn-sm { width: auto; }
.server-settings .btn.danger.btn-sm { width: auto; }

.admin-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.admin-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.admin-main { min-width: 0; flex: 1; }
.admin-main strong { font-size: 0.9rem; }
/* Reported-message excerpt in the moderation queue. */
.report-snapshot {
  display: block;
  margin: 0.3rem 0 0.2rem;
  padding: 0.25rem 0.5rem;
  border-left: 2px solid var(--border);
  font-size: 0.8rem;
  word-break: break-word;
}
.admin-actions { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; }
.perm-summary { font-size: 0.72rem; line-height: 1.3; margin-top: 0.2rem; word-break: break-word; }

.tag {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.35rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--muted);
  vertical-align: middle;
}

.member-roles { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
}
.role-chip .inline-chip { display: inline; }
.role-chip .inline-chip button {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
}
.role-chip .inline-chip button:hover { color: var(--danger); }

.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.6rem; margin: 0.4rem 0; }
.perm-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.4rem 0; }
.perm-col-head { font-weight: 600; margin-bottom: 0.2rem; }
.perm-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text);
  cursor: pointer;
}
.perm-check input,
.nsfw-toggle input { accent-color: var(--accent); }

/* presence dots */
.presence-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  margin-right: 0.4rem;
  background: var(--st-offline);
  vertical-align: middle;
  flex: none;
}
.presence-dot.online { background: var(--st-online); }
.presence-dot.idle { background: var(--st-idle); }
.presence-dot.dnd { background: var(--st-dnd); }
.presence-dot.offline { background: var(--st-offline); }

/* ----- message panel ---------------------------------------------------- */
.message-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  padding: 0 1rem 0.75rem;
}
.channel-topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0.25rem;
  margin-bottom: 0.5rem;
}
.channel-topic-main { display: flex; align-items: baseline; gap: 0.3rem; min-width: 0; }
.channel-topic-main strong { color: var(--text-strong); }
.channel-topic-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-tools { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.search-box {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
}
.search-box:focus-within { border-color: var(--accent); }
.search-icon { font-size: 0.8rem; opacity: 0.7; }
.search-input {
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
  width: 11rem;
}
.tool-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.tool-btn:hover { background: var(--surface-2); border-color: var(--accent); }

.message-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.25rem;
  min-height: 0;
}
.message {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  position: relative;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
}
.message:hover { background: var(--surface-2); }
.message.flash { animation: t-flash 1.2s ease; }
@keyframes t-flash {
  0% { background: var(--accent-soft-2); }
  100% { background: transparent; }
}
.msg-avatar {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  font-size: 0.85rem;
}
.msg-avatar.sm { width: 1.7rem; height: 1.7rem; font-size: 0.72rem; }
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 0.5rem; }
.msg-author { font-weight: 700; color: var(--text-strong); }
.msg-time { font-size: 0.72rem; color: var(--muted); }
.msg-edited { font-size: 0.68rem; margin-left: 0.35rem; color: var(--muted); }
.msg-content { color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; }

.msg-actions {
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  display: none;
  gap: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 0.15rem;
}
.message:hover .msg-actions { display: flex; }
.msg-act {
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.msg-act:hover { background: var(--surface-2); color: var(--accent); }
.msg-act.danger:hover { background: var(--danger-soft); color: var(--danger); }

.mention {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0 0.15rem;
  font-weight: 500;
}

.msg-reply {
  display: flex;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border-strong);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.msg-reply-author { color: var(--accent); flex: 0 0 auto; }
.msg-reply-preview { overflow: hidden; text-overflow: ellipsis; }

.edit-input { width: 100%; margin-top: 0.15rem; border-color: var(--accent); }

.reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  margin-top: 0.4rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: none;
  font-size: 0.8rem;
  color: var(--muted);
}
.reply-cancel {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.reply-cancel:hover { color: var(--danger); }

/* ----- attachments ------------------------------------------------------ */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.att-image-link { display: inline-block; line-height: 0; }
.att-image {
  max-width: 320px;
  max-height: 240px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: cover;
}
.att-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
}
.att-file:hover { border-color: var(--accent); }

.attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.attach-preview { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.attach-remove {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.attach-remove:hover { color: var(--danger); }

/* ----- typing indicator ------------------------------------------------- */
.typing-indicator {
  padding: 0.15rem 1rem 0.35rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
  min-height: 1rem;
}

/* ----- composer --------------------------------------------------------- */
.composer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.composer-input {
  flex: 1;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.composer .btn { margin-top: 0; }
.composer-tool {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.composer-tool:hover { background: var(--surface-2); }

/* ----- reactions / embeds ---------------------------------------------- */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; align-items: center; }
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.05rem 0.45rem;
  color: var(--text);
  cursor: pointer;
}
.reaction-chip.mine { background: var(--accent-soft-2); border-color: var(--accent); }
.reaction-chip:hover { border-color: var(--accent); }
.reaction-count { font-variant-numeric: tabular-nums; }
.reaction-add {
  font-size: 0.85rem;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 0.05rem 0.4rem;
  cursor: pointer;
}
.reaction-add:hover { color: var(--accent); border-color: var(--accent); }

.msg-embeds { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.msg-embed {
  border-left: 4px solid var(--accent);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  max-width: 440px;
}
.embed-title { color: var(--accent); font-weight: 600; text-decoration: none; }
.embed-title:hover { text-decoration: underline; }
.embed-desc { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.embed-img { max-width: 100%; border-radius: 4px; margin-top: 0.4rem; }

/* ----- drawers (threads / search) -------------------------------------- */
.threads-drawer,
.search-results {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  max-height: 45vh;
  overflow-y: auto;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.drawer-close,
.search-close {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted);
}
.drawer-close:hover,
.search-close:hover { color: var(--danger); }
.thread-list { display: flex; flex-direction: column; gap: 0.25rem; }
.thread-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}
.thread-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.thread-create { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.thread-create input { flex: 1; }
.search-list { display: flex; flex-direction: column; gap: 0.15rem; }
.search-result { display: flex; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; }
.search-result:hover { background: var(--surface); }

/* ----- voice ------------------------------------------------------------ */
.voice-channel { margin-bottom: 0.2rem; }
.voice-channel-list { margin-bottom: 0.5rem; }
.voice-join-btn { padding: 0.1rem 0.5rem; font-size: 0.75rem; }
.voice-participants {
  list-style: none;
  margin: 0.15rem 0 0.4rem 1.6rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.voice-participants li { padding: 0.1rem 0; }
.stage-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 4px;
  padding: 0 0.25rem;
  margin-left: 0.35rem;
}

/* Floating call control bar — a centered, frosted pill with grouped, pill-shaped
   icon controls (mic/cam/screen, then session prefs, then a red Leave). */
.voice-dock {
  position: fixed;
  left: 50%;
  /* How far the pill floats is owned by `dk/base.css` (`--dock-lift`), which
     also re-anchors it inside `.dk-workspace`. The literal here is only the
     fallback for a dock rendered outside the shell. */
  bottom: var(--dock-lift, 1rem);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  max-width: min(980px, 95vw);
  background: var(--surface); /* fallback for no color-mix support */
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.5rem;
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

/* When pinned into the channel sidebar (Discord-style), the dock is a static,
   bottom-anchored panel instead of a pill floating over the chat. */
.voice-dock-pinned {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  max-width: none;
  margin-top: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* Keep it visible at the bottom while the channel list scrolls. */
.channel-sidebar { display: flex; flex-direction: column; }
.channel-sidebar > * { flex: 0 0 auto; }
.channel-sidebar > .voice-dock-pinned {
  margin-top: auto;
  position: sticky;
  bottom: 0.5rem;
  margin-bottom: 0.25rem;
}
.voice-dock-pinned .vd-group { flex-wrap: wrap; gap: 0.3rem; }
.voice-dock-pinned .vd-btn { flex: 1 1 auto; justify-content: center; }
.voice-dock-pinned .vd-volume { width: 100%; }

.vd-status { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.4rem 0 0.55rem; min-width: 0; }
.vd-dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--st-online);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-online) 26%, transparent);
}
.vd-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vd-meta strong {
  font-size: 0.85rem; font-weight: 700; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 168px;
}
.vd-state {
  font-size: 0.72rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 168px;
}
.vd-divider { align-self: stretch; width: 1px; margin: 0.25rem 0.15rem; background: var(--border); }
.vd-group { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

.vd-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 38px; padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.vd-btn .i { opacity: 0.92; }
.vd-btn:hover { background: var(--surface-3); }
.vd-btn:active { transform: translateY(1px); }
.vd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Active toggle (camera on, screen sharing, PTT/noise on, hand/priority). */
.vd-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
  color: var(--accent-text);
}
.vd-btn.active .i { color: var(--accent); }

/* Muted mic — an unmistakable "off" state. */
.vd-btn.danger-active {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.vd-btn.danger-active .i { color: var(--danger); }

/* Board agent: a special, branded action. */
.vd-btn.vd-accent { color: var(--accent-text); }
.vd-btn.vd-accent .i { color: var(--accent); }
.vd-btn.vd-accent:hover { background: var(--accent-soft); }
.vd-btn.vd-accent.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.vd-btn.vd-accent.active .i { color: var(--accent-contrast); }

/* Leave: always the clearest, terminal action. The ink is the palette's own (--badInk): white on the light pink-red --bad of
   koyu / tahta / gece was 3.06:1 (phase-5 ux-dm-dock-a11y). */
.vd-btn.vd-danger { background: var(--danger); color: var(--badInk); }
.vd-btn.vd-danger:hover { background: var(--danger-hover); }
.vd-btn.vd-danger .i { color: var(--badInk); opacity: 1; }

.vd-emoji { font-size: 0.95rem; line-height: 1; }

.vd-volume { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.55rem; color: var(--muted); }
.vd-volume input[type="range"] { width: 84px; accent-color: var(--accent); }

@media (max-width: 680px) {
  .voice-dock {
    left: 0.5rem; right: 0.5rem; transform: none;
    max-width: none; justify-content: center;
    border-radius: var(--radius-lg);
  }
  .vd-divider { display: none; }
  /* The extra lift the wrapped dock needs, and the matching message clearance,
     are `dk/base.css`'s `--dock-lift` — one value for both, in one place. */
}

/* ----- call split view (video pane + chat pane) ------------------------ */
/* The main area is a flex row: [ video pane | gutter | chat panel ]. When no
   one is sharing video the video pane + gutter are hidden and the chat panel
   fills the whole area. When video appears the area splits in two and the
   divider can be dragged to resize each side (width persisted in --voice-w). */
.chat-area {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.chat-area .message-panel { flex: 1 1 0; min-width: 0; }

.voice-stage {
  flex: 0 0 var(--voice-w, 44%);
  min-width: 220px;
  max-width: 80%;
  min-height: 0;
  margin: 0.5rem 0 0.5rem 0.25rem;
  padding: 0.6rem;
  overflow-y: auto;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.voice-stage[hidden] { display: none; }
.voice-stage:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0.6rem;
}
/* The shared screen is the focus of the call: give it the full width. */
.voice-stage .voice-tile[data-kind="screen"] { grid-column: 1 / -1; }

/* Spotlight: a pinned tile takes the full width and jumps to the top; the rest
   stay below as a normal grid. Uses the same span the screen tile uses, so it
   doesn't introduce a new layout mode. */
.voice-stage .voice-tile.pinned {
  grid-column: 1 / -1;
  order: -1;
  min-height: 320px;
}

.call-gutter {
  display: none;
  flex: 0 0 8px;
  position: relative;
  cursor: col-resize;
  touch-action: none;
}
.call-gutter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 40px;
  border-radius: 3px;
  background: var(--border-strong);
  transition: background 0.15s ease;
}
.call-gutter:hover::before { background: var(--accent); }
/* Show the divider only while the video pane is visible. */
.chat-area:has(.voice-stage:not([hidden])) .call-gutter { display: block; }

/* On narrow screens, stack the video above the chat instead of side-by-side. */
@media (max-width: 680px) {
  .chat-area { flex-direction: column; }
  .voice-stage {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    max-height: 38vh;
    margin: 0.5rem 0.25rem 0;
  }
  .call-gutter { display: none !important; }
}

/* ----- Skype-style DM call screen ---------------------------------------- */
.dm-call-banner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  margin: 0.35rem 0.35rem 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid var(--accent-soft-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-text);
}
.dm-call-banner[hidden] { display: none; }
.dm-call-banner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-online);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-online) 30%, transparent);
  animation: dm-call-pulse 1.6s ease-in-out infinite;
}
@keyframes dm-call-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.dm-chat.chat-area { flex-direction: column; }
.dm-chat.chat-area.call-active .dm-call-banner { display: flex; }
.dm-chat.chat-area.call-active .skype-stage {
  flex: 1 1 52%;
  width: 100%;
  max-width: none;
  min-height: 240px;
  margin: 0.35rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 50% 0%, #2a3142 0%, #12151c 55%, #0a0c10 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow);
}
.dm-chat.chat-area.call-active .skype-stage:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 0.5rem;
}
.dm-chat.chat-area.call-active .call-gutter { display: none !important; }
.dm-chat.chat-area.call-active .message-panel {
  flex: 0 1 48%;
  min-height: 180px;
  border-top: 1px solid var(--border);
}
/* The call dock is a pill (~53px tall) that floats just above the composer, and
   the message list is padded to match. Both come off `--dock-lift` in
   `dk/base.css` now: the two rules that used to live here were keyed on
   `.app-shell >`, the wrapper the v5 shell deleted, so they had stopped
   applying and the pill was landing on the composer. */

/* Right-click moderator menu on a voice participant (grant camera/screen). */
.voice-ctx-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  padding: 0.3rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.voice-ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.voice-ctx-item:hover {
  background: var(--accent);
  color: #fff;
}

/* A raised hand in the voice roster — pulled to the top and tinted so a
   moderator notices it during a busy stage/exam. */
li.hand-raised {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--radius-sm);
  padding-left: 0.3rem;
  font-weight: 600;
}

/* Mic/camera device picker — a small popover anchored above the dock button. */
.vd-devices { position: relative; }
.vd-devices-pop {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 240px;
  padding: 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.vd-devices-pop[hidden] { display: none; }
.vd-dev-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.vd-dev-row select {
  width: 100%;
  padding: 0.35rem 0.4rem;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

.dm-call-tools { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.dm-call-btn.active { background: var(--accent-soft-2); color: var(--accent-text); }

/* "Reconnect" stands out from the regular call buttons — it only appears when
   there's a live call to rejoin. */
.dm-reconnect-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dm-reconnect-btn:hover { filter: brightness(1.08); }
.dm-reconnect-btn[hidden] { display: none; }

/* Lone-caller "call ending in Ns" warning. */
.dm-call-warning {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  margin: 0.35rem 0.35rem 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st-dnd, #e0524b) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--st-dnd, #e0524b) 45%, transparent);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--st-dnd, #e0524b);
}
.dm-call-warning[hidden] { display: none; }

/* Large avatar when it's audio-only (Skype voice call look). */
.voice-call-hero {
  aspect-ratio: auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.vch-avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-400), var(--brand-700));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.vch-name { font-size: 1.35rem; font-weight: 700; color: #fff; }
.vch-status { font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }

/* Remote video fills the stage; local camera floats bottom-right (Skype PiP). */
.dm-chat.chat-area.call-active .skype-stage .voice-tile:not(.voice-call-hero):not(.voice-tile-local) {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: auto;
  min-height: 100%;
  border-radius: var(--radius);
}
.dm-chat.chat-area.call-active .skype-stage .voice-tile-local {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: min(28%, 200px);
  aspect-ratio: 4 / 3;
  z-index: 3;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.dm-chat.chat-area.call-active .skype-stage {
  position: relative;
}

@media (max-width: 680px) {
  .dm-chat.chat-area.call-active .skype-stage { min-height: 200px; max-height: 42vh; }
  .friend-quick-actions, .fd-quick-actions { opacity: 1; }
}

.voice-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b0c10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.voice-tile:hover { box-shadow: var(--shadow); }
/* The tile you're controlling gets a clear accent ring. */
.voice-tile.controllable {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft-2), var(--shadow);
}
/* Active speaker: a green ring on the talking person's tile. */
.voice-tile.speaking {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px #22c55e, var(--shadow);
}
.voice-tile.tile-paused video { visibility: hidden; }
.voice-tile.tile-paused::after {
  content: "Camera off";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  background: var(--surface-2);
}
.voice-tile-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.voice-tile-ph {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
}
.voice-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.voice-tile-label {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  pointer-events: none;
}

/* Per-tile fullscreen button (bottom-right, clear of the top-right control bar
   and the bottom-left name label). Hidden until hover/focus to stay unobtrusive. */
.voice-tile-fs {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.voice-tile:hover .voice-tile-fs,
.voice-tile-fs:focus-visible {
  opacity: 1;
}
.voice-tile-fs:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Spotlight toggle — top-left, mirrors the fullscreen button. Stays lit while
   the tile is the active spotlight. */
.voice-tile-pin {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.voice-tile:hover .voice-tile-pin,
.voice-tile-pin:focus-visible {
  opacity: 1;
}
.voice-tile-pin:hover {
  background: rgba(0, 0, 0, 0.8);
}
.voice-tile.pinned .voice-tile-pin {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
}
/* A tile taken fullscreen fills the viewport; keep the video contained and the
   controls visible. :fullscreen overrides the 16/9 grid sizing. */
.voice-tile:fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
}
.voice-tile:fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.voice-tile:fullscreen .voice-tile-fs {
  opacity: 1;
}

/* ----- remote screen control (teacher board) --------------------------- */
/* While we hold control, the screen tile is the input surface: show a
   crosshair and stop the browser from selecting/panning under the pointer. */
.voice-tile.controllable video {
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.voice-control-bar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  z-index: 2;
}
.voice-control-bar:empty { display: none; }
.voice-control-bar .vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--ok); /* green = you're driving */
  border-radius: 999px;
}
.voice-control-bar .vc-badge.muted {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.voice-control-bar .vc-btn {
  padding: 0.26rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
}
.voice-control-bar .vc-btn:hover { background: var(--accent-hover); }
.voice-control-bar .vc-btn:active { transform: translateY(1px); }
.voice-control-bar .vc-btn.danger { background: var(--danger); }
.voice-control-bar .vc-btn.danger:hover { background: var(--danger-hover); }

/* ----- emoji picker / manager ------------------------------------------ */
.emoji-picker {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  width: 240px;
}
.emoji-section { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.emoji-divider { font-size: 0.7rem; color: var(--muted); margin: 0.4rem 0 0.2rem; text-transform: uppercase; }
.emoji-opt {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.emoji-opt:hover { background: var(--surface-2); }
.emoji-opt.custom img { width: 1.3rem; height: 1.3rem; object-fit: contain; display: block; }

.emoji-grid,
.sticker-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.emoji-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 72px;
  padding: 0.4rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.emoji-cell img { width: 2rem; height: 2rem; object-fit: contain; }
.emoji-cell-name {
  font-size: 0.62rem;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--danger);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}
.asset-del:hover { background: var(--danger-hover); }

/* ----- polls ------------------------------------------------------------ */
.poll {
  margin-top: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  max-width: 460px;
}
.poll-q { font-weight: 700; margin-bottom: 0.5rem; color: var(--text); }
.poll-opts { display: flex; flex-direction: column; gap: 0.35rem; }
.poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  text-align: left;
}
.poll-opt:hover { border-color: var(--accent); }
.poll-opt:disabled { cursor: default; }
.poll-opt.voted { border-color: var(--accent); }
.poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent-soft);
  z-index: 0;
  transition: width 0.3s ease;
}
.poll-opt.voted .poll-bar { background: var(--accent-soft-2); }
.poll-opt-text { position: relative; z-index: 1; }
.poll-opt-count { position: relative; z-index: 1; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.poll-foot { margin-top: 0.45rem; font-size: 0.78rem; color: var(--muted); }
.poll-composer {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.poll-answers { display: flex; flex-direction: column; gap: 0.35rem; }
.poll-actions { display: flex; justify-content: flex-end; }

/* =========================================================================
   Full-window workspace: the guild page is an app, not a centered card.
   Login/landing keep the centered card; pages with .guild-layout go edge to
   edge with internally-scrolling panels.
   ========================================================================= */
/* These overrides target the legacy standalone guild page (rendered inside a
   centered .card.wide). The Discord-style .app-shell now owns layout/height for
   in-app pages, so scope these out of the shell — otherwise they out-specify the
   shell's `height: 100vh` and force `height: auto`, collapsing the internal
   scroll containers (page scrolls instead of the panels; left bar top clipped). */
body:has(.guild-layout):not(:has(.app-shell)) {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}
body:has(.guild-layout):not(:has(.app-shell)) > footer { display: none; }
body:has(.guild-layout):not(:has(.app-shell)) > .card.wide {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
body:has(.guild-layout):not(:has(.app-shell)) .guild-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
body:has(.guild-layout):not(:has(.app-shell)) .channel-sidebar { height: auto; }
body:has(.guild-layout):not(:has(.app-shell)) .message-panel { height: auto; min-height: 0; }

/* ----- responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .guild-layout { grid-template-columns: 240px 1fr; }
}
@media (max-width: 680px) {
  .guild-layout { grid-template-columns: 1fr; height: auto; }
  .channel-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 42vh;
  }
  body:has(.guild-layout) .channel-sidebar { max-height: 42vh; }
  .search-input { width: 7rem; }
  .shell-header .brand { font-size: 1.05rem; }
  .user-chip .user-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ----- friends / DMs ---------------------------------------------------- */
.friend-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.friend-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}
.friend-row:hover { background: var(--accent-soft); }
.friend-avatar {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: var(--accent);
}
.friend-avatar.tint-0 { background: #385eff; }
.friend-avatar.tint-1 { background: #7c3aed; }
.friend-avatar.tint-2 { background: #0891b2; }
.friend-avatar.tint-3 { background: #059669; }
.friend-avatar.tint-4 { background: #d97706; }
.friend-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.friend-meta .friend-name { font-weight: 600; color: var(--text-strong); }
.friend-quick-actions, .fd-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.friend-row:hover .friend-quick-actions,
.fd-row:hover .fd-quick-actions { opacity: 1; }
.friend-manage { display: flex; gap: 0.25rem; margin-left: auto; }
.fq-btn {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  transition: background 0.15s ease, transform 0.08s ease;
}
.fq-btn:hover { background: var(--accent-soft-2); transform: translateY(-1px); }
.fq-btn:active { transform: translateY(0); }

/* Right-click friend menu */
.friend-ctx-menu {
  position: fixed;
  z-index: 400;
  min-width: 190px;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.friend-ctx-menu[hidden] { display: none; }
.friend-ctx-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.friend-ctx-item:hover { background: var(--accent-soft); }
.friend-ctx-icon { width: 1.25rem; text-align: center; }
.inline-form { display: inline; margin: 0; }
.dm-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 50vh;
}
.dm-sidebar { border-right: 1px solid var(--border); padding-right: 0.75rem; }
.dm-list { display: flex; flex-direction: column; gap: 0.25rem; }
.dm-item {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
}
.dm-item:hover { background: var(--accent-soft); }
.dm-item.active {
  background: var(--accent-soft-2);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}
.dm-preview { font-size: 0.8rem; display: block; }
.call-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.call-modal[hidden] { display: none; }
.call-modal-card {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  min-width: 300px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.call-modal-title { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.35rem; }
.call-modal-from { font-size: 1.35rem; font-weight: 700; color: var(--text-strong); margin: 0; }
.call-modal-actions { display: flex; gap: 0.65rem; justify-content: center; margin-top: 1.25rem; }
.call-modal-actions .btn { min-width: 6.5rem; border-radius: 999px; }

.new-group { margin: 0 0 1rem; }
.new-group summary { cursor: pointer; font-weight: 600; }
.new-group-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; max-width: 360px; }
.group-friends { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; }
.group-friends legend { font-size: 0.8rem; color: var(--muted); padding: 0 0.25rem; }
.group-friend { display: block; font-size: 0.9rem; padding: 0.15rem 0; }

.dm-members {
  margin: 0.5rem 1rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.dm-member-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dm-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.dm-member-remove { display: inline; margin: 0; }
.dm-member-remove button {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
}
.dm-member-remove button:hover { color: #d9534f; }
.dm-member-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.dm-add-member, .dm-rename { display: flex; gap: 0.35rem; }
.dm-add-member select,
.dm-rename input {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.dm-add-member select:focus,
.dm-rename input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.dm-add-member button,
.dm-rename button {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.dm-add-member button:hover,
.dm-rename button:hover { background: var(--accent-hover); }

.e2ee-badge { font-size: 0.75rem; margin-left: 0.4rem; }
.e2ee-verify {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
}
.e2ee-verify[hidden] { display: none; }
.e2ee-warning {
  margin: 0.5rem 1rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  background: rgba(240, 173, 78, 0.15);
  border: 1px solid rgba(240, 173, 78, 0.5);
  color: #b8860b;
  font-size: 0.8rem;
}
.e2ee-warning[hidden] { display: none; }
.e2ee-safety {
  margin: 0.5rem 1rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.e2ee-safety[hidden] { display: none; }
.e2ee-safety-label { margin: 0 0 0.35rem; font-size: 0.75rem; color: var(--muted); }
.e2ee-safety-code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  word-spacing: 0.2em;
  line-height: 1.5;
}
/* Persistent composer hint in E2EE (1:1) DMs: uploads bypass encryption. */
.e2ee-attach-hint {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.35rem 1rem 0;
  font-size: 0.72rem;
}

/* ----- header icon buttons --------------------------------------------- */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.icon-btn:hover { filter: brightness(1.08); transform: scale(1.05); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shell-header .icon-btn {
  border-color: transparent;
  background: var(--header-chip);
  color: var(--header-text);
}
.shell-header .icon-btn:focus-visible { outline-color: var(--header-text); }
.friends-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  box-shadow: 0 0 0 2px var(--header-bg);
}

/* ----- sliding friends drawer ------------------------------------------ */
.friends-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 40, 0.42);
  z-index: 200;
  animation: fd-fade 0.2s ease;
}
.friends-scrim[hidden] { display: none; }
@keyframes fd-fade { from { opacity: 0; } to { opacity: 1; } }
.friends-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 210;
  width: min(340px, 86vw);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.friends-drawer.open { transform: translateX(0); }
.friends-drawer-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.friends-drawer-head strong { font-size: 1rem; color: var(--text-strong); }
.friends-drawer-manage {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--accent-text);
  text-decoration: none;
}
.friends-drawer-manage:hover { text-decoration: underline; }
.friends-drawer-close { width: 1.8rem; height: 1.8rem; font-size: 1.15rem; }
.social-tabs { display: flex; gap: 0.25rem; margin-right: auto; }
.social-tab {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.social-tab:hover { color: var(--text); background: var(--accent-soft); }
.social-tab.active { color: var(--accent-text); background: var(--accent-soft-2); }
.social-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.friends-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.friends-pane[hidden] { display: none; }
.friends-drawer-body { flex: 1; overflow-y: auto; padding: 0.25rem 0.75rem 1rem; }
.fd-owner {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-text);
  background: var(--accent-soft-2);
  border-radius: 999px;
  padding: 0 0.35rem;
  margin-left: 0.25rem;
}
.fd-section {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.9rem 0.25rem 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.fd-count {
  background: var(--accent-soft-2);
  color: var(--accent-text);
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.fd-status { padding: 0.5rem 0.25rem; }
.fd-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.3rem;
  border-radius: var(--radius-sm);
}
.fd-row:hover { background: var(--accent-soft); }
.fd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: var(--accent);
  object-fit: cover;
}
.fd-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fd-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-handle {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-actions { display: flex; gap: 0.3rem; flex: 0 0 auto; }
.fd-actions form { display: inline; margin: 0; }
body.friends-drawer-lock { overflow: hidden; }

/* ----- sidebar polish (thin themed scrollbars) ------------------------- */
.channel-sidebar,
.dm-sidebar,
.friends-drawer-body {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.channel-sidebar::-webkit-scrollbar,
.dm-sidebar::-webkit-scrollbar,
.friends-drawer-body::-webkit-scrollbar { width: 8px; }
.channel-sidebar::-webkit-scrollbar-thumb,
.dm-sidebar::-webkit-scrollbar-thumb,
.friends-drawer-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.channel-sidebar::-webkit-scrollbar-thumb:hover,
.dm-sidebar::-webkit-scrollbar-thumb:hover,
.friends-drawer-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Deterministic per-entity tints from the Arkon brand family (avatars, guild
   icons). Defined last so they win over the base `--accent` background by
   source order. White initials stay legible on every shade. */
/* Phase-5 ux-accent-contrast: the ink is the palette's own accent ink (white on a dark accent, dark on the light accents of
   koyu / tahta / gece - white on mint was 2.32:1) and the same scrim as the other accent surfaces sits under it. */
.tint-0, .tint-1, .tint-2, .tint-3, .tint-4 {
  color: var(--accInk);
  background-image: linear-gradient(0deg, var(--heroScrim), var(--heroScrim));
}
.tint-0 { background-color: var(--brand-400); }
.tint-1 { background-color: var(--brand-500); }
.tint-2 { background-color: var(--brand-600); }
.tint-3 { background-color: var(--brand-700); }
.tint-4 { background-color: var(--brand-800); }

/* =========================================================================
   Modern polish (2026 refresh): a crisp line-icon system, a focused channel
   sidebar, and a single sliding "Server settings" panel that replaces the old
   stack of inline collapsibles.
   ========================================================================= */

/* ----- icon system ------------------------------------------------------ */
.i {
  display: inline-block;
  vertical-align: -0.18em;
  flex: 0 0 auto;
  stroke: currentColor;
}
/* Buttons/links that pair an icon with a text label sit on one baseline. */
.tool-btn,
.composer-send,
.voice-dock .btn,
.add-channel > summary,
.settings-title,
.dm-name,
.channel-tools .tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.search-icon .i { display: block; opacity: 0.75; }
.channel-hash .i { vertical-align: -0.2em; color: var(--muted); }
.e2ee-badge { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ----- ghost icon buttons (sidebar head, settings) ---------------------- */
.icon-btn.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.icon-btn.ghost:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
  transform: none;
  filter: none;
}

/* ----- refreshed channel sidebar --------------------------------------- */
.sidebar-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-head .guild-title {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-group { margin-bottom: 0.35rem; }

.add-channel {
  margin-top: 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}
.add-channel > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
}
.add-channel > summary::-webkit-details-marker { display: none; }
.add-channel > summary:hover { color: var(--accent-text); background: var(--accent-soft); }
.add-channel[open] > summary { color: var(--accent-text); }

/* ----- sliding "Server settings" panel --------------------------------- */
.settings-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 40, 0.42);
  z-index: 200;
  animation: fd-fade 0.2s ease;
}
.settings-scrim[hidden] { display: none; }
.settings-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 210;
  width: min(420px, 92vw);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(-102%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.settings-drawer.open { transform: translateX(0); }
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.settings-title { font-size: 1rem; color: var(--text-strong); }
.settings-title strong { font-weight: 700; }
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem 1.5rem;
}
.settings-body .server-settings:first-child { border-top: none; margin-top: 0.5rem; }
.settings-body .admin-sections { margin-top: 0; }
body.settings-drawer-lock { overflow: hidden; }

/* ----- Dedicated guild settings page ------------------------------------ */
.guild-settings {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
}
.gs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.gs-topbar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--text-strong);
}
.gs-topbar-title strong { font-weight: 700; }
.gs-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.gs-tabs {
  flex: 0 0 220px;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  padding: 0.9rem 0.6rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gs-tab {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.gs-tab:hover { background: var(--surface-3, rgba(127, 127, 127, 0.12)); }
.gs-tab.active {
  background: var(--accent-soft-2);
  color: var(--accent-text);
}
.gs-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.3rem clamp(1rem, 4vw, 2.5rem);
  max-width: 900px;
}
.gs-section { margin-bottom: 2rem; }
.gs-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 0.4rem;
}
.gs-hint { margin: 0 0 0.9rem; font-size: 0.85rem; }
.gs-danger .gs-section-title { color: var(--st-dnd, #e0524b); }

.gs-list { display: flex; flex-direction: column; gap: 0.5rem; }
.gs-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 0.6rem 0.8rem;
}
.gs-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.gs-card-head::-webkit-details-marker { display: none; }
.gs-card-del { margin-left: auto; }
.gs-card-body { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.gs-role-edit .inline-fields { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Attendance tab: filter bar + register table. */
.attendance-filter {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.attendance-filter label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted, #949ba4);
}
.attendance-filter select,
.attendance-filter input[type="date"] {
  background: var(--surface-2);
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.9rem;
}
.attendance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.attendance-table th,
.attendance-table td {
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
}
.attendance-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #949ba4);
}
/* .attendance-absent is marked by the Yok badge and an edge bar (dk/classroom.css): fading the row broke contrast (phase-5) */
.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-ok { background: rgba(35, 165, 90, 0.18); color: var(--st-online, #23a55a); }
.badge-danger { background: rgba(224, 82, 75, 0.18); color: var(--st-dnd, #e0524b); }

/* Materials page (course files + lesson recordings per class). */
.materials-page { max-width: 760px; }
.material-section { margin-bottom: 1.1rem; }
.material-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.material-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  flex: 1;
}
.material-link:hover .material-title { text-decoration: underline; }
.material-meta { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.materials-upload { margin-top: 1rem; max-width: 480px; }
.recording-row { padding: 0.45rem 0.2rem; border-bottom: 1px solid var(--border); }
.recording-row summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.recording-player { width: 100%; max-height: 420px; margin-top: 0.6rem; border-radius: 8px; background: #000; }

/* Quizzes & exams. */
.quiz-page { max-width: 760px; }
.quiz-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.quiz-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.quiz-meta { font-size: 0.8rem; }
.quiz-create, .quiz-add-question { margin-top: 1rem; max-width: 560px; }
.quiz-q { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.quiz-q-head { display: flex; align-items: baseline; gap: 0.6rem; }
.quiz-q-options { margin: 0.35rem 0 0 1.2rem; padding: 0; list-style: none; }
.quiz-q-options li { padding: 0.1rem 0; }
.quiz-q-options li.correct { color: var(--st-online, #23a55a); font-weight: 600; }
.quiz-take-q { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.quiz-take-q legend { font-weight: 600; padding: 0 0.3rem; }
.quiz-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; cursor: pointer; }
.quiz-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.quiz-countdown-low { color: #fff; background: var(--st-dnd, #e0524b); border-color: transparent; }
.quiz-results-table td strong { font-variant-numeric: tabular-nums; }

/* Weekly lesson schedule page + sidebar next-lesson widget. */
.schedule-page { max-width: 720px; }
.schedule-day { margin-bottom: 1.1rem; }
.lesson-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.lesson-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.2rem; }
.lesson-main { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; flex: 1; }
.lesson-channel { font-size: 0.8rem; text-decoration: none; }
.lesson-channel:hover { text-decoration: underline; }
.lesson-duration { font-size: 0.8rem; white-space: nowrap; }
.schedule-add { margin-top: 1rem; max-width: 560px; }
.next-lesson {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0.75rem 0.55rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}
.next-lesson:hover { background: var(--bg-hover, rgba(128, 128, 128, 0.08)); }
.next-lesson-body { display: flex; flex-direction: column; min-width: 0; }
.next-lesson-body .muted { font-size: 0.75rem; }

/* KVKK recording indicator in the voice dock: visible to everyone in the call. */
.vd-rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--st-dnd, #e0524b);
  animation: rec-pulse 1.6s ease-in-out infinite;
}
.vd-rec-indicator svg { fill: currentColor; }
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Channels tab: picker + detail split. */
.gs-channels-layout { display: flex; gap: 1.1rem; align-items: flex-start; }
.gs-channel-picker {
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 70vh;
  overflow-y: auto;
}
.gs-channel-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
}
.gs-channel-pick:hover { background: var(--surface-3, rgba(127, 127, 127, 0.12)); }
.gs-channel-pick.active { background: var(--accent-soft-2); color: var(--accent-text); }
.gs-channel-pick-name { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.gs-channel-pick-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-channel-pick-count {
  flex: 0 0 auto;
  min-width: 1.4rem;
  text-align: center;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
}
.gs-channel-detail {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1rem 1.1rem;
}
.gs-detail-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.05rem;
  color: var(--text-strong);
  margin: 0 0 0.9rem;
}

/* "Who can access this channel" audit. */
.gs-access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.gs-access-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem 0.2rem 0.25rem;
  margin: 0 0.3rem 0.3rem 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.82rem;
}
.gs-access-pill .msg-avatar { width: 20px; height: 20px; font-size: 0.7rem; }
.gs-access-pill.can { border-color: color-mix(in srgb, var(--st-online, #3ba55d) 50%, var(--border)); }
.gs-access-pill.cannot { opacity: 0.7; }

@media (max-width: 720px) {
  .gs-body { flex-direction: column; }
  .gs-tabs { flex: none; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
  .gs-channels-layout { flex-direction: column; }
  .gs-channel-picker { flex: none; width: 100%; max-height: none; }
  .gs-access-grid { grid-template-columns: 1fr; }
}

/* Settings sections read as clean cards inside the drawer. */
.settings-body .server-settings,
.settings-body .admin-sections .server-settings {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 0.75rem 0.85rem;
  margin-top: 0.6rem;
}
.settings-body .server-settings > summary {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-strong);
}
.settings-body .server-settings[open] > summary {
  color: var(--accent-text);
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* ----- component polish ------------------------------------------------- */
/* Glassy, slightly translucent app header. */
.shell-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: saturate(1.4) blur(8px);
}
.tool-btn { font-weight: 600; }
.tool-btn .i { opacity: 0.85; }

/* Pill-shaped composer that floats above the channel background. */
.composer {
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.composer-input { border: none; background: transparent; box-shadow: none !important; }
.composer-input:focus { outline: none; }
.composer-tool { display: inline-flex; align-items: center; justify-content: center; }
.composer-send { padding: 0.42rem 0.9rem; }

/* Channel rows: a touch more breathing room + smooth active rail. */
.channel-item { padding: 0.4rem 0.5rem; }
.channel-row { padding: 0.05rem 0.2rem; transition: background-color 0.12s ease; }
.channel-row.active { box-shadow: inset 3px 0 0 var(--accent); border-radius: var(--radius-sm); }

/* Voice join button as a subtle pill that only pops on hover/active. */
.voice-join-btn {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
}
.voice-join-btn:hover { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }

/* Messages: rounder avatars, clearer hover. */
.message { transition: background-color 0.12s ease; }
.msg-avatar { border-radius: 28%; }

/* Guild icons in the home grid pick up the rounded-square app look. */
.guild-icon { border-radius: 30%; }

/* Slightly larger, friendlier radii on inputs. */
.field input,
.composer-input,
.search-box { border-radius: var(--radius); }

/* ----- floating social button (hovers over the chat box) ---------------- */
.friends-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 5.5rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform 0.14s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.friends-fab:hover { background: var(--accent-hover); transform: translateY(-2px) scale(1.04); }
.friends-fab:active { transform: translateY(0) scale(0.98); }
.friends-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.friends-fab .friends-badge {
  top: -2px;
  right: -2px;
  box-shadow: 0 0 0 2px var(--surface);
}
/* When the drawer is open the FAB would sit beneath the panel/scrim; nudge it
   out of the way so it never looks half-covered. */
body.friends-drawer-lock .friends-fab { opacity: 0; pointer-events: none; }
@media (max-width: 680px) {
  .friends-fab { bottom: 4.75rem; right: 1rem; }
}

@media (max-width: 680px) {
  .settings-drawer { width: 100vw; }
}

/* Transient call notices (e.g. "Call declined"), bottom-center. */
.call-toast:not(.toast) {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  z-index: 1200;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--surface-raised, var(--surface));
  color: var(--fg);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.call-toast.show:not(.toast) {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ----- sidebar unread indicators (notify.js) ----------------------------- */
.unread-badge {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
.channel-row .unread-badge { margin-left: 0.25rem; }
.home-dm-list .dm-item .unread-badge { margin-left: auto; }
.dm-item .unread-badge { float: right; }

/* ---- Settings: theme picker -------------------------------------------------
   Slice 0 note: the layout rules below are kept so the Ayarlar picker does not
   fall apart mid-migration, but the skin system they were written for is gone.
   `theme.js` no longer answers `[data-skin-pick]` — the settings grid becomes
   `.dk-swatchgrid` + `.dk-swatch[data-theme-pick]` (visual-system §2.6) when the
   markup builder ports that page, and everything from `.skin-picker` down here
   goes with it. The hardcoded `.skin-swatch-*` previews below are the OLD skin
   colours and no longer match any shipped theme. */
.skin-picker-title {
  margin: 1rem 0 0.15rem;
  font-size: 0.95rem;
}
.skin-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.skin-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.skin-option:hover { border-color: var(--border-strong); }
.skin-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.skin-name { font-weight: 600; }
.skin-desc { font-size: 0.8rem; }
.skin-swatch {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.skin-swatch i { flex: 1; }
/* Swatches are hard-coded previews of each skin's header/bg/accent. */
.skin-swatch-default i:nth-child(1) { background: #385eff; }
.skin-swatch-default i:nth-child(2) { background: #eaeffc; }
.skin-swatch-default i:nth-child(3) { background: #ffffff; }
.skin-swatch-kampus i:nth-child(1) { background: #16294b; }
.skin-swatch-kampus i:nth-child(2) { background: #d9a441; }
.skin-swatch-kampus i:nth-child(3) { background: #eef0f6; }
.skin-swatch-tahta i:nth-child(1) { background: #29513f; }
.skin-swatch-tahta i:nth-child(2) { background: #4caf82; }
.skin-swatch-tahta i:nth-child(3) { background: #edf2ee; }
.skin-swatch-pano i:nth-child(1) { background: #e2643c; }
.skin-swatch-pano i:nth-child(2) { background: #faf3ea; }
.skin-swatch-pano i:nth-child(3) { background: #fffdf9; }
.skin-swatch-kagit i:nth-child(1) { background: #0f766e; }
.skin-swatch-kagit i:nth-child(2) { background: #f7f8f8; }
.skin-swatch-kagit i:nth-child(3) { background: #ffffff; }

/* ---- KVKK: consent gate + settings privacy actions -------------------------- */
.consent-card {
  max-width: 640px;
  margin: 3rem auto;
}
.consent-card h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
}
.consent-text {
  margin: 1rem 0;
  line-height: 1.55;
}
.consent-text ul {
  padding-left: 1.2rem;
}
.consent-text li {
  margin-bottom: 0.5rem;
}
.consent-card form {
  margin-top: 0.75rem;
}
.settings-kvkk-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}