/* QEYET Spaces — layout + surfaces (spec §9).
 * Only design tokens from mail/styles.css are used (no new fonts, no framework, no CDN).
 * Themes: light is the :root default; dark comes from html.theme-dark (see styles.css).
 */

/* The workspace tab only exists when the flag is on — 5 icons instead of 4. */
.workspace-icon-nav.nav-has-spaces { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* S2 — S/R seam: the app rail (Lane R) | 72px space rail | the Spaces workspace.
 * The :not(:has(...)) guard only covers a tree where the rail has not landed yet: without it the
 * sidebar and the workspace would be pushed into the rail + strip tracks and the shell collapses.
 * It stops matching the moment .mail-shell carries the rail, so it can stay in the tree. */
/* 96px icon column: 15px/700 "Spaces" is ~64px; 8px pad each side leaves 80px. */
.mail-shell.workspace-spaces { grid-template-columns: var(--rail-width, 72px) 96px minmax(0, 1fr); }
.mail-shell.workspace-spaces:not(:has(.app-rail, .app-rail-nav, .app-rail-account)) {
  grid-template-columns: 96px minmax(0, 1fr);
}
/* The strip's own box (padding, background, centered tiles) lives in the desktop block at the end of
 * this file — the sidebar is the phone folders drawer below 820px and must keep its normal shape. */

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

/* Shared readable focus ring (a11y: focus must be visible on every control). */
.spaces-workspace button:focus-visible,
.spaces-workspace a:focus-visible,
.spaces-msg:focus-visible,
.spaces-dialog button:focus-visible,
.dialog .spaces-invite-result input:focus-visible,
.workspace-icon-nav .icon-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ------------------------------- sidebar: space rail ---------------------------------- */

/* 96px space-icon column, same cream surfaces as Mail/Chat. Width stays 100% so the
 * mobile horizontal strip (.spaces-rail-mobile) is not forced to 96px. */
.spaces-rail {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 8px 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface-soft);
  scrollbar-width: none;
}
.spaces-rail::-webkit-scrollbar { width: 0; height: 0; }

.spaces-rail-button {
  position: relative;
  width: 100%;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.spaces-rail-tile,
.spaces-rail-add {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--line));
  border-radius: var(--radius-md, 10px);
  overflow: visible;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.spaces-rail-button:hover .spaces-rail-tile,
.spaces-rail-add:hover {
  background: var(--row-hover, var(--surface-hover));
}
/* Initials on the white tile. Emoji 26px (~65% of 40) and optically centered. */
.spaces-rail-glyph { font-size: 15px; line-height: 1; font-weight: 650; }
.spaces-rail-button.has-initials .spaces-rail-glyph,
.spaces-rail-button.has-icon .spaces-rail-glyph { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.spaces-rail-button.has-emoji .spaces-rail-glyph {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(1px);
}
.spaces-rail-button.active .spaces-rail-tile,
.spaces-rail-button.is-active .spaces-rail-tile,
.spaces-rail-button[aria-current="true"] .spaces-rail-tile {
  background: var(--row-active, var(--green-soft));
  color: var(--green-dark);
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
}
/* Green bar in the column gutter, like the app rail — not on the tile. */
.spaces-rail-button.active::before,
.spaces-rail-button.is-active::before,
.spaces-rail-button[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.spaces-rail-add { color: var(--green-dark); font-weight: 700; background: var(--surface); cursor: pointer; }
.spaces-rail-add svg { width: 22px; height: 22px; }
.spaces-rail-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--red);
  color: #fff;
  font-size: var(--fs-micro, 11px);
  font-weight: 700;
  line-height: 12px;
  font-style: normal;
  text-align: center;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}
html.theme-dark .spaces-rail-badge {
  border-color: #fff;
}

/* S2: mobile — the strip becomes a horizontal row at the top of the channel pane. */
.spaces-rail-mobile { display: none; }

/* S4: the one honest-copy line on the screen — pinned to the bottom of the channel pane. */
.spaces-rail-note { margin: 8px 0 0; font-size: var(--fs-meta, 12px); line-height: 1.5; color: var(--ink-faint, var(--ink-soft)); }
.spaces-join-pane { min-height: 0; }
.spaces-join-stage { flex: 1; display: grid; place-items: center; padding: 28px 16px; overflow: auto; }
.spaces-join-stack { width: min(440px, 100%); display: grid; gap: 12px; }
.spaces-join-card {
  width: 100%;
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-2, var(--shadow));
  color: var(--ink);
}
.spaces-join-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.spaces-join-badge {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--green-soft); color: var(--green);
}
.spaces-join-badge svg { width: 22px; height: 22px; }
.spaces-join-head h2 { margin: 0; font-size: var(--fs-title, 20px); line-height: 1.25; font-weight: var(--fw-title, 700); letter-spacing: -0.01em; }
.spaces-join-head p { margin: 4px 0 0; font-size: var(--fs-secondary, 13px); line-height: var(--lh-body, 1.45); color: var(--ink-soft); }
.spaces-join-choices { display: grid; gap: 8px; }
.spaces-join-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
  margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
}
.spaces-join-choice:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.spaces-join-choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.spaces-join-choice strong { display: block; font-size: var(--fs-list, 14px); font-weight: 700; }
.spaces-join-choice small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-secondary, 13px); }
.spaces-join-choice.is-quiet strong { font-weight: 600; }
.spaces-join-field { display: grid; gap: 8px; }
.spaces-join-field > span { font-size: var(--fs-meta, 12px); font-weight: var(--fw-strong, 600); color: var(--ink-soft); }
.spaces-join-local {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.spaces-join-local input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--fs-list, 14px); color: var(--ink); }
.spaces-join-local input:focus { outline: none; }
.spaces-join-local em { color: var(--ink-soft); font-style: normal; white-space: nowrap; }
.spaces-join-card .primary, .spaces-join-card .secondary {
  height: 46px; width: 100%; margin: 0; border-radius: 12px; font-size: var(--fs-list, 14px); font-weight: var(--fw-strong, 600);
}
.spaces-join-card .secondary { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.spaces-join-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  font-size: var(--fs-meta, 12px); line-height: 1.4; color: var(--ink-soft); text-align: center;
}
.spaces-join-foot svg { width: 14px; height: 14px; color: var(--green); flex: none; }
.spaces-join-error { margin: 0 0 12px; color: var(--danger, #b42318); font-size: var(--fs-secondary, 13px); }
.spaces-alias-chip {
  flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--green-soft); color: var(--green);
  font-size: var(--fs-micro, 11px); font-weight: 700; letter-spacing: 0.01em;
}
.spaces-alias-posting { margin: 0 0 6px; font-size: var(--fs-meta, 12px); color: var(--ink-soft); }
.spaces-alias-posting strong { color: var(--green); font-weight: 700; }
.spaces-alias-posting span { color: var(--ink-faint, var(--ink-soft)); }
.spaces-alias-mark {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--green-soft); color: var(--green); font-size: var(--fs-micro, 11px); font-style: normal; font-weight: 700;
}
.spaces-pane-head-host > .spaces-rail-note {
  flex: none;
  margin: 0;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------- workspace shell ----------------------------------- */

.spaces-workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--surface);
  color: var(--ink);
}
.spaces-workspace:has(> .spaces-thread-panel) {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(280px, 380px);
}

.spaces-workspace.is-empty { place-items: center; }

.spaces-channel-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  overflow: hidden;
}

.spaces-pane-head-host { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.spaces-pane-head-host > .spaces-rail { flex: none; padding-bottom: 6px; border-bottom: 1px solid var(--line); border-right: 0; }
.spaces-pane-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: var(--pane-header-h, 56px);
  min-height: var(--pane-header-h, 56px);
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface);
}
.spaces-pane-head h2 {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spaces-pane-head-actions { display: flex; gap: 2px; flex: none; }
.spaces-pane-head-actions .icon-button { width: 32px; height: 32px; }

.spaces-channel-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spaces-channel-category,
.spaces-category {
  margin: 16px 0 4px;
  padding: 0 8px;
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-channel-list > li { margin: 0; }
.spaces-channel {
  width: 100%;
  height: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--fs-nav, 14px);
  font-weight: var(--fw-nav, 500);
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.spaces-channel:hover {
  background: var(--row-hover, var(--surface-hover));
  color: var(--ink);
}
.spaces-channel.active,
.spaces-channel.is-active,
.spaces-channel[aria-current="true"] {
  background: var(--row-active, var(--green-soft));
  color: var(--green-dark);
  font-weight: var(--fw-strong, 600);
}
.spaces-channel-glyph { display: inline-flex; flex: none; width: 20px; height: 20px; align-items: center; justify-content: center; color: inherit; }
.spaces-channel-glyph svg { width: 20px; height: 20px; }
.spaces-channel-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-channel-badge {
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: var(--surface);
  font-size: var(--fs-micro, 11px);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-style: normal;
}
/* S4: a voice channel is a normal row — not dimmed. Color comes from the channel row so hover/active can ink it. */
.spaces-channel.is-voice { opacity: 1; }
.spaces-coming-soon {
  font-size: var(--fs-micro, 11px);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 6px;
}

/* ----------------------------------- message pane ------------------------------------- */

.spaces-message-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.spaces-message-pane.is-placeholder { display: grid; place-items: center; }

/* Channel header: same 56px pane header as Mail/Chat. */
.spaces-msg-header {
  flex: none;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--pane-header-h, 56px);
  min-height: var(--pane-header-h, 56px);
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface);
}
.spaces-title {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-height: 0;
}
.spaces-title h2 {
  margin: 0;
  flex: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.spaces-title h2 span[aria-hidden] { color: var(--ink-faint, var(--ink-soft)); font-weight: 500; margin-right: 2px; }
.spaces-title-topic {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-secondary, 13px);
  font-weight: 400;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spaces-title-topic::before {
  content: "";
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0;
  background: var(--line);
}
.spaces-head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.spaces-members-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--fs-list, 14px);
  cursor: pointer;
}
.spaces-members-button:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}
.spaces-members-button svg { width: 17px; height: 17px; }
.spaces-members-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: var(--fs-micro, 11px);
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  text-align: center;
}
.spaces-back { display: none; }

.spaces-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 16px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
.spaces-msg-list { display: flex; flex-direction: column; gap: 0; padding: 0 0 18px; }

/* Day separator: hairline both sides, 12px/600 muted label. */
.spaces-day,
.spaces-day-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 16px 8px;
  color: var(--ink-faint, var(--ink-soft));
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
  letter-spacing: 0;
  text-transform: none;
}
.spaces-day::before,
.spaces-day::after,
.spaces-day-divider::before,
.spaces-day-divider::after { content: ""; height: 1px; background: var(--line); flex: 1 1 auto; }
.spaces-day > span,
.spaces-day-divider > span { flex: none; }

/* Discord row: 72px left pad holds the 40px avatar; continuation rows keep the gutter for hover time. */
.spaces-msg {
  position: relative;
  display: block;
  min-height: 22px;
  margin: 0;
  padding: 2px 48px 2px 72px;
  border-radius: 0;
  outline-offset: -2px;
  transition: background-color 80ms ease-out;
}
.spaces-msg:not(.is-continuation) { margin-top: 17px; padding-top: 2px; }
.spaces-msg:hover,
.spaces-msg:focus-visible { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.spaces-msg-gutter {
  position: absolute;
  left: 16px;
  top: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  min-width: 0;
  pointer-events: none;
}
.spaces-msg.is-continuation .spaces-msg-gutter {
  left: 0;
  top: 0;
  width: 72px;
  height: 100%;
  align-items: center;
}
.spaces-msg-hover-time,
.spaces-msg-hovertime {
  font-size: var(--fs-meta, 12px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint, var(--ink-soft));
  white-space: nowrap;
  opacity: 0;
  transition: opacity 80ms ease-out;
}
.spaces-msg:hover .spaces-msg-hover-time,
.spaces-msg:focus-within .spaces-msg-hover-time,
.spaces-msg:hover .spaces-msg-hovertime,
.spaces-msg:focus-within .spaces-msg-hovertime { opacity: 1; }
.spaces-msg-content { min-width: 0; display: flex; flex-direction: column; }
.spaces-msg-head { display: flex; align-items: baseline; gap: 0; min-width: 0; }
.spaces-msg-author { font-size: var(--fs-body, 15px); font-weight: var(--fw-strong, 600); letter-spacing: -0.01em; color: var(--ink); }
.spaces-msg-head time { margin-left: 8px; font-size: var(--fs-meta, 12px); font-weight: 400; color: var(--ink-faint, var(--ink-soft)); }
.spaces-msg-flag {
  margin-left: 6px;
  font-size: var(--fs-micro, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint, var(--ink-soft));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 6px;
}
.spaces-msg-body {
  font-size: var(--fs-body, 15px);
  line-height: var(--lh-body, 1.45);
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.spaces-msg-body a { color: var(--blue); text-decoration: underline; }
.spaces-msg-body a:hover { color: var(--ink); }
.spaces-msg-tombstone { color: var(--ink-soft); font-style: italic; }
.spaces-msg.deleted .spaces-msg-author { color: var(--ink-soft); }
/* Enter latency: the bubble painted in the same tick as the send, before the engine's own commit
 * lands. Full strength — a faded row reads as "send failed", which is the bug this exists to kill.
 * The flag is the only "still going out" signal. */
.spaces-msg.is-pending .spaces-msg-flag { color: var(--ink-soft); border-color: var(--line); }
.spaces-mention { color: var(--green-dark); background: var(--green-soft); border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* Reply reference sits above the author line, with a short curved spine. */
.spaces-quote {
  order: -1;
  position: relative;
  margin: 0 0 2px;
  padding: 0 0 0 14px;
  max-width: min(640px, 100%);
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: var(--fs-secondary, 13px);
  line-height: var(--lh-tight, 1.3);
  color: var(--ink-faint, var(--ink-soft));
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  min-height: 16px;
}
.spaces-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--line);
  border-left: 2px solid var(--line);
  border-top-left-radius: 6px;
}
.spaces-quote strong { flex: none; white-space: nowrap; font-weight: 600; color: var(--ink-soft); }
.spaces-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hover toolbar: hidden until the row is hovered or focused. The article is tabindex=0, so
 * :focus-within still reveals it for keyboard even while the buttons start at display:none. */
.spaces-msg-actions {
  position: absolute;
  top: -16px;
  right: 16px;
  z-index: 2;
  display: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.spaces-msg:hover .spaces-msg-actions,
.spaces-msg:focus-within .spaces-msg-actions { display: flex; }
.spaces-msg-actions .icon-button,
.spaces-msg-actions .spaces-msg-action,
.spaces-msg-action {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.spaces-msg-actions .icon-button:hover,
.spaces-msg-action:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}
.spaces-msg-actions .icon-button svg { width: 16px; height: 16px; }

/* S6/S12: one person avatar — tone from the address hash, palette from the soft tokens. */
.spaces-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.spaces-member .spaces-avatar,
.spaces-members .spaces-avatar { width: 32px; height: 32px; font-size: 13px; }

.spaces-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.spaces-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.spaces-reaction:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.spaces-reaction.mine,
.spaces-reaction.is-active,
.spaces-reaction[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
}
.spaces-reaction-count { font-size: var(--fs-meta, 12px); font-weight: var(--fw-strong, 600); color: var(--ink-soft); }

.spaces-react-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 6px 0 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  max-width: 340px;
}
.spaces-react-choice {
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 17px;
  padding: 3px 5px;
  cursor: pointer;
}
.spaces-react-choice:hover { background: var(--surface-hover); }

.spaces-typing { margin: 0; padding: 0 16px 6px; font-size: var(--fs-meta, 12px); color: var(--ink-soft); }
.spaces-older { margin: 0 0 6px; font-size: var(--fs-meta, 12px); color: var(--ink-soft); text-align: center; }
.spaces-banner {
  margin: 6px 0 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
}
.spaces-empty-channel,
.spaces-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 20px;
  text-align: center;
  color: var(--ink-soft);
}
.spaces-empty svg { width: 26px; height: 26px; color: var(--green); }
.spaces-empty strong { color: var(--ink); font-size: var(--fs-title, 20px); font-weight: var(--fw-title, 700); }
.spaces-empty span { font-size: var(--fs-secondary, 13px); line-height: var(--lh-body, 1.45); max-width: 420px; }
.spaces-empty-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ------------------------------------- composer --------------------------------------- */

.spaces-composer-host {
  flex: none;
  border-top: 0;
  background: var(--surface);
  padding-top: 0;
}
.spaces-composer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 16px calc(20px + var(--safe-bottom));
  padding: 4px 8px 4px 12px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}
.spaces-composer-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.spaces-composer textarea {
  flex: 1 1 auto;
  min-height: 24px;
  max-height: 180px;
  resize: none;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body, 15px);
  line-height: var(--lh-body, 1.45);
}
.spaces-composer textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.spaces-composer:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.spaces-composer:focus-within,
.spaces-composer *:focus,
.spaces-composer *:focus-visible {
  outline: none !important;
}
.spaces-composer textarea:focus {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.spaces-composer .spaces-attach-pick {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint, var(--ink-soft));
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.spaces-composer .spaces-attach-pick:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}
.spaces-send, .qeyet-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-grid;
  place-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: none;
}
.spaces-send svg, .qeyet-send svg, .qeyet-send-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  display: block;
  color: #fff;
}
.spaces-send:disabled, .qeyet-send:disabled {
  opacity: 0.4;
  background: color-mix(in srgb, var(--ink) 35%, var(--surface));
  color: #fff;
}
/* S10: one short hint, and only while the textarea has focus (it used to run three lines tall). */
.spaces-composer-hint {
  display: none;
  margin: 0;
  padding: 0 2px;
  font-size: var(--fs-micro, 11px);
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-composer:focus-within .spaces-composer-hint { display: block; }
.spaces-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--green);
  background: var(--surface-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-secondary, 13px);
}
.spaces-chip span { flex: 1 1 auto; min-width: 0; display: grid; }
.spaces-chip small { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-mentions {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.spaces-mentions button {
  display: grid;
  gap: 1px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font-size: var(--fs-list, 14px);
}
.spaces-mentions button:hover { background: var(--green-soft); }
.spaces-mentions small, .spaces-mentions span { color: var(--ink-soft); font-size: var(--fs-secondary, 13px); }

/* ---------------------------------- member drawer ------------------------------------- */

.spaces-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 12px;
  border-left: 0;
  background: #f2f3f5;
  background: color-mix(in srgb, var(--surface) 95%, var(--ink) 5%);
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.06);
  z-index: 3;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
.spaces-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 8px 0 16px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.spaces-drawer-head h2 { margin: 0; font-size: var(--fs-pane, 16px); font-weight: var(--fw-strong, 600); letter-spacing: -0.01em; }
.spaces-drawer-head h2 span { color: var(--ink-soft); font-weight: var(--fw-strong, 600); font-size: var(--fs-meta, 12px); }
.spaces-member-role,
.spaces-role-heading,
.spaces-members-heading {
  margin: 16px 16px 4px;
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-member-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.spaces-member {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin: 1px 8px;
  padding: 0 8px;
  border-radius: 6px;
  transition: background-color 120ms ease-out;
}
.spaces-member:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.spaces-member-copy { flex: 1 1 auto; min-width: 0; display: grid; }
.spaces-member-copy strong { font-size: var(--fs-list, 14px); font-weight: var(--fw-strong, 600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-member-copy small { font-size: var(--fs-secondary, 13px); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-role {
  font-style: normal;
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-faint, var(--ink-soft));
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.spaces-member select,
.spaces-add-channel select,
.spaces-channel-input,
.spaces-channel-topic,
.spaces-add-channel input {
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-list, 14px);
  min-width: 0;
}
.spaces-drawer-action { justify-content: center; }

/* ----------------------------------- dialogs ----------------------------------------- */

.spaces-invite-result { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.spaces-invite-actions { display: flex; gap: 8px; }
.spaces-qr:empty { display: none; }
.spaces-qr img { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.spaces-qr-note:empty { display: none; }
.spaces-invites { margin-top: 14px; font-size: var(--fs-meta, 12px); }
.spaces-invites ul, .spaces-settings-invites { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.spaces-invites li, .spaces-settings-invites li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-secondary, 13px);
  color: var(--ink-soft);
}
.spaces-invites li span, .spaces-settings-invites li span { flex: 1 1 auto; }

.spaces-settings-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.spaces-settings-section h3 { margin: 0; font-size: var(--fs-meta, 12px); font-weight: var(--fw-strong, 600); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); display: flex; justify-content: space-between; }
.spaces-settings-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.spaces-settings-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spaces-settings-channels li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.spaces-channel-input { width: 108px; }
.spaces-channel-topic { flex: 1 1 auto; min-width: 90px; }
.spaces-channel-kind { font-size: var(--fs-micro, 11px); color: var(--ink-soft); text-transform: uppercase; }
.spaces-add-channel { display: flex; gap: 6px; flex-wrap: wrap; }
.spaces-add-channel input { flex: 1 1 130px; }
.spaces-settings-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spaces-settings-member { display: flex; align-items: center; gap: 8px; font-size: var(--fs-list, 14px); }
.spaces-settings-member > span { flex: 1 1 auto; min-width: 0; display: grid; }
.spaces-settings-member small { color: var(--ink-soft); }
.spaces-danger .danger { background: var(--red); color: #fff; border-color: var(--red); }

/* ------------------------------------ mobile web -------------------------------------- */

/* S2: 820px is the app's own mobile breakpoint (styles.scss / Lane R's rail) — above it the strip
 * column is visible, below it the strip moves into the channel pane and the shell goes full width. */
@media (max-width: 820px) {
  /* Mirror how the app positions .mail-chat-workspace on mobile: absolute + safe-area
   * inset. A percentage height here resolves against a shell that is display:block
   * height:100dvh on phones, which let the pane grow past the viewport and clip the
   * composer behind the keyboard. */
  .mail-shell.workspace-spaces { position: relative; }
  .spaces-workspace {
    position: absolute;
    inset: var(--safe-top) 0 var(--safe-bottom) 0;
    width: 100%;
    height: auto;
    max-height: none;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .spaces-channel-pane,
  .spaces-message-pane { grid-area: 1 / 1; }
  .spaces-workspace[data-view="channels"] .spaces-message-pane { display: none; }
  .spaces-workspace[data-view="messages"] .spaces-channel-pane { display: none; }
  .spaces-workspace[data-view="messages"] .spaces-channel-pane.spaces-join-pane { display: flex; }
  /* S2: the space strip as a horizontal scroll row at the top of the channel pane. */
  .spaces-rail-mobile {
    display: flex;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    scrollbar-width: none;
  }
  .spaces-rail-mobile::-webkit-scrollbar { height: 0; }
  .spaces-rail-mobile .spaces-rail-button::before,
  .spaces-rail-mobile .spaces-rail-add::before,
  .spaces-rail-mobile .spaces-rail-button.active::before { display: none; }
  .spaces-rail-mobile .spaces-rail-button {
    width: 48px;
    height: 48px;
    flex: none;
  }
  .spaces-back { display: inline-grid; }
  .spaces-drawer { width: min(320px, 92vw); }
  .spaces-msg {
    padding: 2px 12px 2px 56px;
  }
  .spaces-msg-gutter { left: 8px; }
  .spaces-msg.is-continuation .spaces-msg-gutter { width: 56px; }
  .spaces-msg-gutter .spaces-avatar { width: 36px; height: 36px; }
  .spaces-composer { margin: 0 12px calc(16px + var(--safe-bottom)); }
  /* S7: a floating card would cover the text on a phone, so the toolbar becomes a compact row under
   * the message. With a mouse it stays a tap/hover reveal; a real touch device has no hover at all,
   * which the (hover: none) block below turns into the always-visible compact form. */
  .spaces-msg-actions {
    position: static;
    grid-column: 2;
    justify-self: start;
    gap: 0;
    padding: 0;
    margin: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: none;
  }
  .spaces-msg:hover .spaces-msg-actions,
  .spaces-msg:focus-within .spaces-msg-actions { display: flex; opacity: 1; }
  .spaces-msg-actions .icon-button { opacity: 0.75; }
  .spaces-composer textarea { font-size: var(--fs-pane, 16px); }   /* prevent iOS zoom-on-focus */
  .spaces-composer-hint { display: none; }
}

/* S6/S7 with no hover at all (a real phone or tablet): the continuation time is readable at a
 * glance, and below 820px the toolbar is the always-visible compact row — nothing else can reveal
 * it there. A tablet wider than that keeps the tap-to-focus reveal on the floating card. */
@media (hover: none) {
  .spaces-msg-hover-time,
  .spaces-msg-hovertime { opacity: 1; }
}
@media (max-width: 820px) and (hover: none) {
  .spaces-msg-actions { display: flex; opacity: 1; }
}

/* Narrow desktop: give the channel pane a little less, never squeeze the messages. */
@media (min-width: 821px) and (max-width: 1180px) {
  .spaces-workspace { grid-template-columns: minmax(180px, 210px) minmax(0, 1fr); }
}

/* The 72px rail is a desktop shape only — on phones the sidebar is the folders drawer. */
@media (min-width: 821px) {
  .mail-shell.workspace-spaces .mail-sidebar {
    background: var(--surface-soft);
    padding: 0;
    align-items: stretch;
    overflow: hidden;
    border-right: 1px solid var(--line);
  }
  .mail-shell.workspace-spaces .mail-sidebar > .sidebar-pane-header {
    margin: 0;
    width: 100%;
    padding: 0 8px;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
  }
  .mail-shell.workspace-spaces .mail-sidebar > .sidebar-pane-header .sidebar-pane-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* Dark theme: the tokens flip automatically; these are the few surface pins. */
html.theme-dark .spaces-workspace,
html.theme-dark .spaces-message-pane,
html.theme-dark .spaces-drawer,
html.theme-dark .spaces-composer-host,
html.theme-dark .spaces-msg-header,
html.theme-dark .spaces-pane-head { background: var(--surface); }
html.theme-dark .spaces-channel-pane,
html.theme-dark .spaces-drawer { background: var(--surface-soft); }
html.theme-dark .spaces-qr img { background: #fff; }
html.theme-dark .mail-shell.workspace-spaces .mail-sidebar,
html.theme-dark .spaces-rail:not(.spaces-rail-mobile) { background: var(--surface-soft); }
html.theme-dark .spaces-composer:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* T17 attachments: composer chips, received-file tiles/rows, drop overlay. Tokens only. */
.spaces-chips-host { min-width: 0; }
.spaces-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.spaces-chip-file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(432px, 100%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.spaces-chip-file[data-chip-state="failed"] { border-color: var(--danger, #b3261e); }
.spaces-chip-kind {
  flex: none;
  font-size: var(--fs-micro, 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-dark);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 5px;
  background: var(--surface);
}
.spaces-chip-info { display: flex; flex-direction: column; min-width: 0; }
.spaces-chip-info strong {
  font-size: var(--fs-list, 14px);
  font-weight: var(--fw-strong, 600);
  color: var(--green-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 44vw;
}
.spaces-chip-info small { font-size: var(--fs-meta, 12px); color: var(--ink-soft); }
.spaces-chip-progress { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.spaces-chip-progress span { display: block; height: 100%; background: var(--green); }
.spaces-attach-pick { flex: none; }
.spaces-attach-input { display: none; }
.spaces-attachments { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; min-width: 0; }
.spaces-attach-grid { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.spaces-attach-tile {
  margin: 0;
  width: auto;
  max-width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}
.spaces-attach-tile figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; align-items: center; min-width: 0; }
.spaces-attach-open { padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
.spaces-attach-open img {
  display: block;
  width: auto;
  max-width: min(400px, 100%);
  height: auto;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
}
.spaces-attach-name {
  font-size: var(--fs-list, 14px);
  font-weight: var(--fw-strong, 600);
  color: var(--green-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.spaces-attach-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(432px, 100%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.spaces-attach-meta { grid-column: 1 / 2; font-size: var(--fs-meta, 12px); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.spaces-attach-progress { grid-column: 1 / 3; display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.spaces-attach-bar { display: block; height: 100%; width: 0; background: var(--green); }
.spaces-attach-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spaces-attach-row[data-attach-state="failed"] { border-color: var(--danger, #b3261e); }
.spaces-attach-row[data-attach-state="expired"] .spaces-attach-name { color: var(--ink-soft); }
.spaces-attach-kind {
  flex: none;
  width: 40px;
  text-align: center;
  font-size: var(--fs-micro, 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-dark);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 0;
  background: var(--surface);
}
.spaces-attach-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.spaces-attach-info small { font-size: var(--fs-meta, 12px); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-attach-actions { flex: none; display: flex; gap: 4px; }
.spaces-attach-actions .secondary { padding: 4px 10px; font-size: var(--fs-list, 14px); }
.spaces-workspace.spaces-dropping { outline: 2px dashed var(--green); outline-offset: -6px; }
.spaces-workspace.spaces-dropping .spaces-composer-host { background: var(--green-soft); }

@media (max-width: 640px) {
  .spaces-chip-info strong { max-width: 34vw; }
  .spaces-attach-tile { width: 132px; }
  .spaces-attach-actions { flex-direction: column; }
}

/* ------------------------------- T20 voice channels ------------------------------------ */
/* Tokens only, so both themes flip for free. The bar is fixed to the page (it outlives the app's
   shell rebuilds and is visible from any workspace), so it carries its own surface + safe-area pad. */

.spaces-channel.is-voice { opacity: 1; }
.spaces-channel.is-voice.is-joined { background: var(--green-soft); color: var(--green-dark); }
.spaces-voice-presence { flex: none; display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.spaces-voice-count { font-size: var(--fs-micro, 11px); font-weight: 700; color: var(--ink-soft); }
.spaces-channel.is-voice.is-joined .spaces-voice-count { color: inherit; }
.spaces-voice-more { font-size: var(--fs-micro, 11px); font-style: normal; color: var(--ink-soft); }
.spaces-voice-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--surface-hover);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
}
.spaces-voice-avatar.is-speaking { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft); }
.spaces-voice-avatar.is-unverified { border-color: var(--danger, #b3261e); }
.spaces-voice-avatar.is-muted { opacity: 0.65; }
.spaces-voice-initial { line-height: 1; }
.spaces-voice-bar-avatars { display: inline-flex; gap: 3px; }

.spaces-message-pane.is-voice { overflow: hidden; }
/* S12: the voice pane is a flex column too — a 56px header (as S5), then the padded body. */
.spaces-voice-pane { display: flex; flex-direction: column; gap: 14px; padding: 0 18px 22px; min-width: 0; height: 100%; overflow-y: auto; }
.spaces-voice-head {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--pane-header-h, 56px);
  min-height: var(--pane-header-h, 56px);
  margin: 0 -18px;
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface);
}
.spaces-voice-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.spaces-voice-head h2 svg { width: 18px; height: 18px; color: var(--green-dark); }
.spaces-voice-head p {
  margin: 0;
  max-width: 46%;
  font-size: var(--fs-secondary, 13px);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* S12: one control row, every button the same height (the app's primary/secondary styles). */
.spaces-voice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spaces-voice-actions > button { height: 36px; min-height: 36px; padding: 0 14px; font-size: var(--fs-list, 14px); border-radius: 8px; }
.spaces-voice-actions .spaces-voice-primary { min-width: 132px; }
.spaces-voice-quality { font-size: var(--fs-meta, 12px); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.spaces-voice-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.spaces-voice-grid.is-presence { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.spaces-voice-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  text-align: center;
  min-width: 0;
}
.spaces-voice-tile.is-speaking { border-color: var(--green); }
.spaces-voice-tile.is-unverified { border-color: var(--danger, #b3261e); }
.spaces-voice-tile .spaces-voice-avatar { width: 42px; height: 42px; font-size: 17px; background: var(--surface-hover); }
.spaces-voice-name { font-size: var(--fs-list, 14px); font-weight: var(--fw-strong, 600); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-voice-tile-flags { display: inline-flex; align-items: center; gap: 4px; min-height: 14px; }
.spaces-voice-tile-flags svg { width: 13px; height: 13px; }
.spaces-voice-flag { font-size: var(--fs-meta, 12px); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; color: var(--danger, #b3261e); }
.spaces-voice-video, .spaces-voice-screen { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); background: #000; overflow: hidden; }
.spaces-voice-video video, .spaces-voice-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* T20: the peer audio elements' home. Never inside the re-painted bar or pane, never laid out. */
.spaces-voice-media { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.spaces-voice-empty, .spaces-voice-note { margin: 0; font-size: var(--fs-meta, 12px); color: var(--ink-soft); }
.spaces-channel-voice { flex: none; font-size: var(--fs-micro, 11px); font-style: normal; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; }

.spaces-voice-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px calc(8px + var(--safe-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -6px 18px rgb(0 0 0 / 12%);
}
.spaces-voice-bar-state { display: inline-flex; color: var(--green-dark); }
.spaces-voice-bar-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.spaces-voice-bar-copy strong { font-size: var(--fs-list, 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-voice-bar-copy small { font-size: var(--fs-meta, 12px); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-voice-bar-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.spaces-voice-bar-actions .icon-button { width: 34px; height: 34px; }
.spaces-voice-bar-actions .icon-button.active { background: var(--green-soft); color: var(--green-dark); }
.spaces-voice-bar-leave { padding: 7px 12px; font-size: var(--fs-list, 14px); }
html.theme-dark .spaces-voice-bar { background: #141c19; }
html.theme-dark .spaces-voice-tile { background: #131b18; }

@media (max-width: 640px) {
  .spaces-voice-bar { gap: 6px; padding: 6px 8px calc(6px + var(--safe-bottom, 0px)); }
  .spaces-voice-bar-copy small { display: none; }
  .spaces-voice-bar-actions .icon-button { width: 30px; height: 30px; }
  .spaces-voice-bar-leave { padding: 6px 8px; }
  .spaces-voice-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .spaces-voice-pane { padding: 0 12px 18px; }
  .spaces-voice-head { margin: 0 -12px; }
}

/* ------------------- S6/S12: person avatars (message gutter + voice tiles) -------------- */
/* Tone comes from the address hash and is filled from the soft tokens only, so light and dark both
 * read correctly with no per-theme override and no raw colour. Declared last so it wins the
 * equal-specificity ties against the voice rules above. */
.spaces-avatar[data-tone="green"] { background: var(--green-soft); color: var(--green-dark); }
.spaces-avatar[data-tone="blue"] { background: var(--blue-soft); color: var(--blue); }
.spaces-avatar[data-tone="amber"] { background: var(--amber-soft); color: var(--amber); }
.spaces-avatar[data-tone="red"] { background: var(--red-soft); color: var(--red); }

.spaces-channel-list,
.spaces-channel-pane,
.spaces-drawer,
.spaces-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
.spaces-channel-list::-webkit-scrollbar,
.spaces-channel-pane::-webkit-scrollbar,
.spaces-drawer::-webkit-scrollbar,
.spaces-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.spaces-channel-list::-webkit-scrollbar-thumb,
.spaces-channel-pane::-webkit-scrollbar-thumb,
.spaces-drawer::-webkit-scrollbar-thumb,
.spaces-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 8px;
}
.spaces-channel-list::-webkit-scrollbar-track,
.spaces-channel-pane::-webkit-scrollbar-track,
.spaces-drawer::-webkit-scrollbar-track,
.spaces-scroll::-webkit-scrollbar-track { background: transparent; }

@keyframes spaces-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.spaces-msg.is-new { animation: spaces-msg-in 160ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .spaces-workspace,
  .spaces-workspace *,
  .spaces-workspace *::before,
  .spaces-workspace *::after,
  .spaces-rail,
  .spaces-rail *,
  .spaces-rail *::before,
  .spaces-rail *::after,
  .spaces-voice-bar,
  .spaces-voice-bar * {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------- profile card (member list + message author popout) -------------- */

.spaces-member-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spaces-member > .icon-button,
.spaces-member > select,
.spaces-member > .spaces-role { flex: none; }
.spaces-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
}

.spaces-msg-gutter .spaces-msg-avatar-btn {
  pointer-events: auto;
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}
.spaces-msg-author[data-spaces="profile"] { cursor: pointer; }
.spaces-msg-author[data-spaces="profile"]:hover { text-decoration: underline; }
.spaces-msg-author[data-spaces="profile"]:focus-visible,
.spaces-msg-avatar-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.spaces-profile-card {
  position: fixed;
  z-index: 60;
  width: 300px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  overflow: hidden;
  max-height: calc(100dvh - 24px);
  animation: spaces-profile-in 140ms ease-out;
}
@keyframes spaces-profile-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}
.spaces-profile-banner {
  height: 64px;
  background: linear-gradient(180deg, var(--green-soft), color-mix(in srgb, var(--green-soft) 70%, var(--green)));
}
.spaces-profile-banner[data-tone="green"] {
  background: linear-gradient(180deg, var(--green-soft), color-mix(in srgb, var(--green-soft) 70%, var(--green)));
}
.spaces-profile-banner[data-tone="blue"] {
  background: linear-gradient(180deg, var(--blue-soft), color-mix(in srgb, var(--blue-soft) 70%, var(--blue)));
}
.spaces-profile-banner[data-tone="amber"] {
  background: linear-gradient(180deg, var(--amber-soft), color-mix(in srgb, var(--amber-soft) 70%, var(--amber)));
}
.spaces-profile-banner[data-tone="red"] {
  background: linear-gradient(180deg, var(--red-soft), color-mix(in srgb, var(--red-soft) 70%, var(--red)));
}
.spaces-profile-avatar {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  font-size: 30px;
  box-shadow: 0 0 0 6px var(--surface);
  margin-top: -40px;
  margin-left: 16px;
}
.spaces-profile-body {
  padding: 12px 16px 16px;
  max-height: calc(100dvh - 24px - 64px);
  overflow: auto;
}
.spaces-profile-name {
  margin: 0;
  font-size: var(--fs-title, 20px);
  font-weight: var(--fw-title, 700);
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spaces-profile-address {
  margin: 2px 0 0;
  font-size: var(--fs-secondary, 13px);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.spaces-profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.spaces-profile-you,
.spaces-profile-role {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-soft);
  font-size: var(--fs-meta, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.spaces-profile-you { text-transform: none; font-weight: 700; }
.spaces-profile-since {
  margin: 8px 0 0;
  font-size: var(--fs-secondary, 13px);
  color: var(--ink-soft);
}
.spaces-profile-section {
  margin: 14px 0 8px;
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.spaces-profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spaces-profile-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-list, 14px);
  font-weight: var(--fw-strong, 600);
  cursor: pointer;
}
.spaces-profile-chip:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.spaces-profile-empty { margin: 0; font-size: var(--fs-secondary, 13px); color: var(--ink-soft); }
.spaces-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.spaces-profile-actions button {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: var(--fs-list, 14px);
  font-weight: 700;
  cursor: pointer;
}
.spaces-profile-actions .primary {
  background: var(--green);
  color: #fff;
  border: 0;
}
.spaces-profile-actions .primary:hover { background: var(--green-dark); }
.spaces-profile-actions .secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.spaces-profile-actions .secondary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.spaces-profile-card button:focus-visible,
.spaces-profile-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .spaces-profile-card {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: min(88dvh, 100%);
    border-radius: 16px 16px 0 0;
    overflow: auto;
  }
  .spaces-profile-body { padding-bottom: calc(16px + var(--safe-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .spaces-profile-card { animation: none; }
}


/* Self camera reads like a mirror, as in every call app. */
.spaces-voice-video video.is-self-camera { transform: scaleX(-1); }

/* Notification bell + mention highlight. */
.spaces-notify { position: relative; flex: none; display: inline-flex; }
.spaces-notify .icon-button svg { width: 18px; height: 18px; }
.spaces-notify-menu {
  position: absolute;
  top: calc(100% + 6px);
  /* Grow RIGHT from the bell: it sits just after the channel name, near the chat column's left edge,
     so a right-anchored menu ran under the channel sidebar for short names (#general). */
  left: 0;
  right: auto;
  z-index: 30;
  width: 220px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.spaces-notify-menu p {
  margin: 6px 4px 2px;
  font-size: var(--fs-micro, 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.spaces-notify-menu [role="radiogroup"] { display: grid; gap: 2px; }
.spaces-notify-menu button[role="radio"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-secondary, 13px);
  text-align: left;
  cursor: pointer;
}
.spaces-notify-menu button[role="radio"]::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line-strong, var(--line));
  border-radius: 50%;
  box-sizing: border-box;
}
.spaces-notify-menu button[role="radio"][aria-checked="true"] { background: var(--green-soft); }
.spaces-notify-menu button[role="radio"][aria-checked="true"]::before {
  border-color: var(--green);
  background: radial-gradient(circle, var(--green) 0 4px, transparent 5px);
}
.spaces-notify-menu button[role="radio"]:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.spaces-notify-menu button[role="radio"][aria-checked="true"]:hover { background: var(--green-soft); }
.spaces-channel-mute {
  flex: none;
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-channel-mute svg { width: 14px; height: 14px; }
.spaces-channel-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
}
.spaces-msg.is-mention { background: color-mix(in srgb, var(--green) 8%, transparent); }
.spaces-msg.is-mention::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--green);
}
.spaces-msg.is-mention:hover,
.spaces-msg.is-mention:focus-visible { background: color-mix(in srgb, var(--green) 12%, transparent); }

/* -------------------------------- on-device message search ---------------------------- */

.spaces-search-field {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  width: 148px;
  max-width: 34vw;
}
.spaces-search-glyph {
  position: absolute;
  left: 8px;
  display: inline-flex;
  color: var(--ink-faint, var(--ink-soft));
  pointer-events: none;
}
.spaces-search-glyph svg { width: 14px; height: 14px; }
.spaces-search-field input,
.spaces-search-sheet-field input {
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 8px 0 28px;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-secondary, 13px);
}
.spaces-search-field input::placeholder,
.spaces-search-sheet-field input::placeholder { color: var(--ink-faint, var(--ink-soft)); }
.spaces-search-field input:focus,
.spaces-search-sheet-field input:focus { outline: none; }
.spaces-search-field input:focus-visible,
.spaces-search-sheet-field input:focus-visible,
.spaces-search-panel button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.spaces-message-pane.is-voice { position: relative; }
.spaces-voice-search {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
}

.spaces-search-panel {
  top: 48px;
  width: 340px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 4;
}
.spaces-search-head { flex: none; }
.spaces-search-sheet-field {
  display: none;
  position: relative;
  margin: 8px 12px 0;
}
.spaces-search-sheet-field input { padding-left: 10px; }
.spaces-search-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
.spaces-search-scope {
  display: flex;
  gap: 4px;
  margin: 8px 12px;
  padding: 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.spaces-search-scope button {
  flex: 1;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
  cursor: pointer;
}
.spaces-search-scope button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
}
.spaces-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 12px 8px;
}
.spaces-search-chips button {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-meta, 12px);
  cursor: pointer;
}
.spaces-search-chips button:hover { color: var(--ink); border-color: var(--green); }
.spaces-search-count,
.spaces-search-empty,
.spaces-search-privacy {
  margin: 8px 16px;
  font-size: var(--fs-secondary, 13px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.spaces-search-empty { margin-top: 16px; }
.spaces-search-privacy {
  font-size: var(--fs-meta, 12px);
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-search-channel {
  margin: 12px 16px 4px;
  font-size: var(--fs-meta, 12px);
  font-weight: var(--fw-strong, 600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-search-hit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 1px 8px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.spaces-search-hit:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.spaces-search-hit .spaces-avatar,
.spaces-search-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  font-size: var(--fs-secondary, 13px);
}
.spaces-search-hit-copy { min-width: 0; display: grid; gap: 2px; }
.spaces-search-hit-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.spaces-search-hit-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-list, 14px);
  font-weight: var(--fw-strong, 600);
}
.spaces-search-hit-meta time {
  flex: none;
  font-size: var(--fs-meta, 12px);
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-search-snippet {
  display: block;
  font-size: var(--fs-secondary, 13px);
  line-height: 1.35;
  color: var(--ink-soft);
  overflow: hidden;
}
.spaces-search-snippet mark {
  background: var(--green-soft);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 1px;
}

@keyframes spaces-msg-flash {
  0% { background: var(--green-soft); }
  70% { background: color-mix(in srgb, var(--green-soft) 80%, transparent); }
  100% { background: transparent; }
}
.spaces-msg.is-flash { animation: spaces-msg-flash 1.2s ease-out; }

@media (max-width: 820px) {
  .spaces-search-field { width: 112px; }
  .spaces-search-panel {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;
  }
  .spaces-search-sheet-field { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .spaces-msg.is-flash {
    animation: none !important;
    background: var(--green-soft);
  }
}

/* Discord-style markdown, emoji picker, pinned messages. */
.spaces-message-pane { position: relative; }
.spaces-msg-body strong { font-weight: 700; }
.spaces-msg-body em { font-style: italic; }
.spaces-msg-body u { text-decoration: underline; }
.spaces-msg-body s { text-decoration: line-through; }
.spaces-md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}
.spaces-md-quote {
  margin: 4px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--line-strong, var(--line));
  color: var(--ink-soft);
}
.spaces-md-list { margin: 4px 0 4px 1.2em; padding: 0; white-space: normal; }
.spaces-md-p { margin: 4px 0; }
.spaces-msg-jumbo .spaces-msg-body { font-size: 2.2em; line-height: 1.2; }
.spaces-code {
  margin: 6px 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  border: 1px solid var(--line);
  overflow: hidden;
}
.spaces-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  font-size: var(--fs-micro, 11px);
  color: var(--ink-soft);
}
.spaces-code-copy {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}
.spaces-code pre {
  margin: 0;
  padding: 8px 10px 10px;
  overflow-x: auto;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
}
.spaces-spoiler {
  border-radius: 4px;
  background: var(--ink);
  color: transparent;
  cursor: pointer;
  user-select: none;
}
.spaces-spoiler.is-revealed {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: inherit;
  user-select: text;
}
.spaces-pin-glyph {
  display: inline-flex;
  margin-left: 6px;
  color: var(--ink-faint, var(--ink-soft));
  vertical-align: -2px;
}
.spaces-pin-glyph svg { width: 12px; height: 12px; }
.spaces-pins-button { position: relative; }
.spaces-pin-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--green);
  color: var(--surface);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
}
.spaces-pins-panel {
  position: absolute;
  top: 48px;
  right: 12px;
  z-index: 5;
  width: min(420px, calc(100% - 24px));
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.spaces-pins-panel header { padding: 6px 8px 8px; font-size: 14px; }
.spaces-pins-panel ul { list-style: none; margin: 0; padding: 0; }
.spaces-pin-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
}
.spaces-pin-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.spaces-pin-copy { min-width: 0; flex: 1; }
.spaces-pin-copy strong { display: block; font-size: 13px; }
.spaces-pin-copy time { font-size: 11px; color: var(--ink-soft); }
.spaces-pin-copy p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spaces-pin-jump, .spaces-pin-empty {
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.spaces-pin-empty { color: var(--ink-soft); padding: 8px; }
.spaces-composer { position: relative; }
.spaces-composer .spaces-emoji-pick {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint, var(--ink-soft));
}
.spaces-emoji-pop {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 8px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: 352px;
  height: 400px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.spaces-msg .spaces-emoji-pop { left: auto; right: 8px; bottom: auto; top: 28px; }
.spaces-emoji-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink);
  font: inherit;
}
.spaces-emoji-tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.spaces-emoji-tab {
  flex: 1;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.spaces-emoji-tab.is-on { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.spaces-emoji-grid {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  align-content: start;
}
.spaces-emoji-cell {
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}
.spaces-emoji-cell:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.spaces-emoji-empty { grid-column: 1 / -1; color: var(--ink-soft); font-size: 13px; padding: 12px; }
.spaces-emoji-complete {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  z-index: 7;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.spaces-colon-choice {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spaces-colon-choice.is-on, .spaces-colon-choice:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
@media (max-width: 820px) {
  .spaces-emoji-pop {
    left: 0;
    right: 0;
    width: 100%;
    height: min(400px, 70vh);
    border-radius: 16px 16px 0 0;
  }
  .spaces-pins-panel { left: 8px; right: 8px; width: auto; }
}

/* ---------------------------------- threads ------------------------------------------ */

.spaces-thread-panel {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;
  border-left: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface-soft);
}
.spaces-thread-head h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spaces-thread-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0 12px;
}
.spaces-thread-composer {
  position: relative;
  flex: none;
  margin: 0 12px 12px;
}
.spaces-thread-name {
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.spaces-thread-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 6px 0 2px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spaces-thread-chip:hover { background: var(--green-soft); }
.spaces-thread-chip-line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-secondary, 13px);
}
.spaces-thread-avatars { display: inline-flex; flex: none; }
.spaces-thread-avatar {
  width: 18px;
  height: 18px;
  margin-left: -4px;
  font-size: 10px;
  border: 1px solid var(--surface);
}
.spaces-thread-avatar:first-child { margin-left: 0; }
.spaces-thread-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.spaces-thread-list { list-style: none; margin: 8px 0 0; padding: 0; }
.spaces-thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spaces-thread-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.spaces-thread-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-thread-row span { grid-column: 1; color: var(--ink-soft); font-size: var(--fs-meta, 12px); }
.spaces-thread-row .spaces-thread-dot { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.spaces-thread-empty { margin: 16px; color: var(--ink-soft); font-size: var(--fs-secondary, 13px); }
.spaces-search-thread {
  margin-left: 6px;
  color: var(--green-dark);
  font-size: var(--fs-meta, 12px);
  font-weight: 600;
}
@media (max-width: 1100px) {
  .spaces-workspace:has(> .spaces-thread-panel) {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .spaces-thread-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 8;
    background: var(--surface);
    border-left: 0;
  }
}
@media (max-width: 820px) {
  .spaces-thread-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 8;
  }
}

/* Space picture fills the 40×40 tile at the same radius. Clip the image, not the button
   (badge sits at top-right, outside the photo). */
.spaces-rail-img {
  display: block;
  width: 38px;
  height: 38px;
  max-width: 38px;
  max-height: 38px;
  object-fit: cover;
  border-radius: 9px;
  pointer-events: none;
  user-select: none;
}
.spaces-rail-button.has-image .spaces-rail-tile {
  padding: 0;
  background: var(--surface);
  overflow: visible;
}
.spaces-settings-picture { display: grid; gap: 6px; }
.spaces-settings-picture-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spaces-settings-picture-preview {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft, #eef1f0);
  font-size: 24px;
  overflow: hidden;
  flex: 0 0 auto;
}
.spaces-settings-picture small { color: var(--ink-soft); font-size: 11px; }

.spaces-channel-hint:empty { display: none; }
.spaces-channel-hint { margin-top: 4px; color: var(--green-ink, var(--ink-soft)); font-weight: 600; }

/* Discord-style categories (channel.category). Collapse is per-user, stored locally. */
.spaces-channel-list > li.spaces-category {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 14px 0 2px;
}
.spaces-channel-list > li.spaces-category:first-child { margin-top: 4px; }
.spaces-category-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.spaces-category-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-category-toggle:hover { color: var(--ink); }
.spaces-category-toggle svg { width: 12px; height: 12px; flex: none; }
.spaces-category.is-collapsed .spaces-category-toggle svg { transform: rotate(-90deg); }
.spaces-category-add { opacity: 0; }
.spaces-category:hover .spaces-category-add,
.spaces-category-add:focus-visible { opacity: 1; }
@media (hover: none) { .spaces-category-add { opacity: 1; } }

/* Channel icon: owner-set picture or emoji in place of # / speaker. */
.spaces-channel-glyph.has-emoji { font-size: 15px; line-height: 1; }
.spaces-channel-glyph.has-image { border-radius: 6px; overflow: hidden; }
.spaces-channel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spaces-title h2 .spaces-channel-glyph { width: 22px; height: 22px; vertical-align: -4px; margin-right: 2px; }

/* Settings: per-channel category + owner icon controls, categories list. */
.spaces-channel-category { width: 120px; }
.spaces-channel-iconset { display: inline-flex; align-items: center; gap: 2px; }
.spaces-channel-emoji { width: 64px; }
.spaces-add-channel #spacesNewChannelCategory { flex: 1 1 140px; }
.spaces-settings-categories { margin-top: 12px; display: grid; gap: 6px; }
.spaces-settings-categories h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.spaces-settings-categories ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.spaces-settings-categories li { display: flex; align-items: center; gap: 4px; }
.spaces-category-name { flex: 1 1 auto; min-width: 120px; }

/* Profile pictures in the message gutter, voice tiles and member lists. */
.spaces-avatar.has-image { display: block; padding: 0; overflow: hidden; background: transparent; }
.spaces-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }