/* kv2-chat on the Kapable design language (kapable-ui-assets design-language/; recipes checked
 * against 1.14.0, tokens file 1.3.0).
 *
 * Load order (static/index.html): kapable-theme.css (the plain top bar, kapable-bar.css, still
 * reads its --kp-* tokens), kapable-bar.css, kapable-tokens.css (the language), then this file. Every colour, size, radius and shadow below is a language
 * token or a value from DESIGN.md sections 3 to 10; nothing here reads a --kp-* token.
 * Recipes: base page (s3), list row + compact chat rail row, avatar, badge and count,
 * button, icon button, field and textarea, popover and menu, dialog, toast, empty and
 * failed states, prose code (s9). The org accent is set at runtime by kapable-accent.js
 * (DESIGN.md s7). /next's own Chat (kv2-launchpad chat.js) is the model for the room view:
 * rail on --surface-2, thread on --surface, avatars as neutral circles. */

@font-face {
  font-family: 'InterK';
  src: url('kapable-inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Base page (DESIGN.md s3) ── */
html { background: var(--surface); }
html, body { height: 100%; } /* raw: panel geometry, not a density value */
body {
  display: flex; flex-direction: column; min-height: 100vh; /* raw: panel geometry, not a density value */
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: var(--font-ui-features);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { color-scheme: dark; }
}
:root[data-theme="dark"] body { color-scheme: dark; }
a { color: var(--accent-text); }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); color: inherit; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }

main#app {
  flex: 1;
  padding: calc(22px * var(--pad-factor)) calc(26px * var(--pad-factor)) 0;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.kp-loading, .loading { color: var(--text-3); font-size: var(--type-control); padding: calc(60px * var(--pad-factor)) 0; text-align: center; }

/* Room view is an app surface, not a document: full-bleed, no page scroll —
   the stream owns the scroll. */
/* Only the room view is a fixed-height frame. Every other view is a document that grows with
   its content: with `height: 100%` plus `main { min-height: 0 }` the lobby's main stopped at
   the viewport and the room rows spilled past it (live 2026-09-26). The room view drops the
   100vh floor: the top bar and the room share exactly one screen, and the composer sits on its
   bottom edge. */
body:not([data-layout="workspace"]) { height: auto; }
body[data-layout="workspace"] { height: 100dvh; min-height: 0; overflow: clip; } /* raw: panel geometry, not a density value */
body[data-layout="workspace"] main#app { max-width: none; padding: 0; }

/* Compact Chat (CHAT-031): the desktop's chat panel frames this app at about 760 x 770 (and a
   phone at 390). The desktop around it is the top bar and the assistant, so the app's own never
   paint: the server leaves the bar out of a frame and app.js mounts no assistant in one
   (PLAT-853); these rules cover a frame either could not tell apart. */
html.kc-compact #kapable-header,
html.kc-compact .kp-chat-container,
html.kc-compact [data-kpc-launcher],
html.kc-compact .kpc-panel,
html.kx-embedded .kp-chat-container,
html.kx-embedded [data-kpc-launcher],
html.kx-embedded .kpc-panel { display: none !important; }

/* The Concierge's launcher (PLAT-853). The old header's button was the way in; standalone Chat
   (a tab, the phone home-screen app) now shows the assistant's own launcher, which app.js mounts
   for a signed-in member and marks with kc-concierge on <html>. Its home is the foot of the
   conversation list, bottom left, in a band kept free for it: the composer, Send and a thread's
   reply box all sit on the right, so it covers none of them. A document page keeps the same
   room at its end. It sits under menus and dialogs (100), not over them. */
html.kc-concierge .kpc-fab,
html.kc-concierge .kp-chat-toggle { left: 12px; right: auto; bottom: 10px; z-index: 90; }
html.kc-concierge .tc-side-foot { padding-bottom: calc(72px * var(--pad-factor)); }
html.kc-concierge body:not([data-layout="workspace"]) main#app { padding-bottom: calc(80px * var(--pad-factor)); }

/* App-local geometry. */
:root {
  --tc-sidebar-w: 248px;
  --tc-measure: 46rem;
  --tc-gutter: 20px;
}

/* ── Lobby header: a view title (20 px) and one meta line ── */
.kp-masthead { flex-shrink: 0; }
.kp-masthead h1 {
  margin: 0; color: var(--text);
  font-size: calc(var(--type-view-title) * 20 / 22); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); line-height: 1.3;
  font-family: var(--font-display); font-feature-settings: var(--font-display-features);
}
.kp-readout { margin-top: 4px; color: var(--text-3); font-size: var(--type-secondary); font-variant-numeric: tabular-nums; }
.kp-readout::first-letter { text-transform: uppercase; }
.kp-doublerule { margin: 16px 0 0; border: 0; border-top: 1px solid var(--line); }

/* ── Lobby room list: plain rows (List row recipe), hover ground, no card per row ── */
/* The track is minmax(0, 1fr), not auto: an auto track grows to its widest row's
   content, so one long room name made every row 839 px and the phone page 459 px
   wider than the screen (2026-09-28) while the name's own ellipsis never engaged. */
.kp-rows { margin: 8px -10px 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.kp-row {
  display: flex; align-items: center; gap: calc(12px * var(--pad-factor)); min-height: calc(var(--list-row-h) * 46 / 36); min-width: 0;
  padding: calc(6px * var(--pad-factor)) calc(10px * var(--pad-factor)); border-radius: var(--radius-note);
  color: var(--text); text-decoration: none;
}
a.kp-row:hover { text-decoration: none; background: var(--hover); }
.kp-row-name { font-size: var(--type-body); font-weight: var(--control-weight); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-row .grow { flex: 1; }
/* Apps review C09 (2026-09-06): a room row's slug was a 580 px nowrap span
   ("/dm:member:<uuid>:me"), pushing the whole page 111 px past the window's edge.
   The slug shrinks and ellipsises; the name keeps priority. */
.kp-row .kp-chip { display: inline-block; flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.kp-time { color: var(--text-3); font-size: var(--type-meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kp-time::first-letter { text-transform: uppercase; }

/* ── Avatar: a neutral circle with initials (Avatar recipe, Chat variant) ── */
.kp-initial {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; /* raw: size of an icon, avatar, dot or picture, not a density value */
  display: grid; place-items: center;
  font-size: 11px; font-weight: var(--heading-weight); letter-spacing: 0.02em; /* raw: avatar initials, sized to the avatar */
  color: var(--text); background: var(--surface-3);
  user-select: none;
}
.kp-initial.sm { width: 24px; height: 24px; font-size: 10px; } /* raw: avatar initials, sized to the avatar; size of an icon, avatar, dot or picture, not a density value */
.kp-initial.is-room { color: var(--text-2); font-size: 13px; font-weight: var(--control-weight); } /* raw: avatar initials, sized to the avatar */
.kp-initial.is-room.sm { font-size: 12px; } /* raw: avatar initials, sized to the avatar */
.kp-initial.lg { width: 32px; height: 32px; font-size: 12px; } /* raw: avatar initials, sized to the avatar; size of an icon, avatar, dot or picture, not a density value */
.kp-initial.xl { width: 48px; height: 48px; font-size: 16px; } /* raw: avatar initials, sized to the avatar; size of an icon, avatar, dot or picture, not a density value */

/* ── Slug: plain secondary text, not a chip ── */
.kp-chip { display: inline-flex; align-items: center; color: var(--text-3); font-size: var(--type-secondary); white-space: nowrap; }

/* ── Buttons (Button and primary button). .kp-btn is the page's one primary action;
   .quiet and .secondary are the neutral button; .danger is neutral with red text. ── */
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--pad-factor));
  height: var(--control-h); padding: 0 calc(12px * var(--pad-factor)); border: 0; border-radius: var(--radius-button);
  background: var(--accent); color: var(--on-accent, #fff); /* text on the accent fill: white, or a look's own ink (presets D45) */
  font: var(--control-weight) var(--type-control)/1 var(--font-ui); white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: filter 0.15s var(--ease); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.kp-btn:hover { background: var(--accent); filter: brightness(1.07); }
a.kp-btn { text-decoration: none; }
a.kp-btn:hover { text-decoration: none; }
.kp-btn.quiet, .kp-btn.secondary, .kp-btn.danger {
  background: var(--surface-3); color: var(--text); border: 0;
  box-shadow: var(--control-edge);
}
.kp-btn.quiet:hover, .kp-btn.secondary:hover, .kp-btn.danger:hover { background: var(--press); filter: none; }
.kp-btn.danger { color: var(--bad); }

/* ── Field (Field recipe) ── */
.kp-input {
  width: 100%; height: var(--control-h); min-width: 0; padding: 0 calc(10px * var(--pad-factor));
  border: 0; border-radius: var(--radius-field); background: var(--field); box-shadow: var(--control-edge);
  color: var(--text); font: var(--type-control) var(--font-ui); outline: none;
}
/* The field ring is drawn inside the field, 2 px (DESIGN 9 Field, D70): an outside ring is cut off by
   a dialog body that scrolls, and at 3 px in light mode it read as a heavy black frame on a phone. */
.kp-input:focus { outline: none; border: 0; box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.kp-input::placeholder, textarea::placeholder, input::placeholder { color: var(--text-3); }

/* ── Section label: sentence case, 12 px, weight 600, --text-3 ── */
.kp-slabel { display: block; margin: 0 0 10px; color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight); }
.kp-slabel::first-letter { text-transform: uppercase; }

/* ── Panel (sign-in, not a participant): a card inside a page ── */
.kp-panel {
  max-width: 440px; margin-top: 18px; padding: calc(20px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--card-edge);
}
.kp-panel h2 { margin: 0 0 6px; font-size: var(--type-dialog-title); font-weight: var(--title-weight); font-family: var(--font-display); font-feature-settings: var(--font-display-features); }
.kp-field { display: flex; flex-direction: column; gap: calc(6px * var(--pad-factor)); margin-bottom: 12px; }
.kp-field label { color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight); }
.kp-field label::first-letter { text-transform: uppercase; }
.muted, .kp-muted { color: var(--text-2); font-size: var(--type-control); }
/* The join page: sign in first (the primary), then the guest way below a rule. */
.join-guest { margin-top: 20px; padding-top: calc(16px * var(--pad-factor)); border-top: 1px solid var(--line); }
.kp-panel .err-details { margin-top: 12px; }

/* ── Empty state (lobby) ── */
.kp-empty { margin-top: 16px; padding: calc(28px * var(--pad-factor)) calc(16px * var(--pad-factor)); text-align: center; }
.kp-empty h3 { margin: 0 0 6px; color: var(--text); font-size: var(--type-subheading); font-weight: var(--heading-weight); }
.kp-empty p { margin: 0 auto; max-width: 44ch; color: var(--text-3); font-size: var(--type-description); }

/* ── People first (CHAT-019): a filter, then AI colleagues, People and Rooms as plain row
   groups. A person row is a button that opens the direct room; it reads like a phone's
   contacts: a face, a name, the unread count and when the last message came. ── */
.lobby-filter { position: relative; display: flex; align-items: center; margin-top: 16px; }
.lobby-filter svg {
  position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; /* raw: size of an icon, avatar, dot or picture, not a density value */
}
.lobby-filter-input { padding-left: calc(32px * var(--pad-factor)); }
.lobby-filter-input::-webkit-search-decoration { -webkit-appearance: none; }
.lobby-note { padding: calc(8px * var(--pad-factor)) 0 calc(2px * var(--pad-factor)); color: var(--text-2); font-size: var(--type-control); }
/* Inside the rows the note lines up with the names, not with the rows' hover ground. */
.kp-rows > .lobby-note { padding-left: calc(10px * var(--pad-factor)); padding-right: calc(10px * var(--pad-factor)); }
.lobby-failed { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--pad-factor)); }
button.kp-row {
  width: 100%; border: 0; background: transparent; font: inherit; color: var(--text);
  text-align: left; cursor: pointer;
}
button.kp-row:hover { background: var(--hover); }
button.kp-row:focus-visible, button.tc-room-link:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.kp-row[aria-busy="true"], .tc-room-link[aria-busy="true"] { opacity: 0.6; cursor: progress; }
/* "Show 23 more people": a quiet text button under a long list (Quiet button recipe). */
.tc-more {
  display: flex; align-items: center; min-height: var(--list-row-h); padding: 0 calc(10px * var(--pad-factor)); border: 0; border-radius: calc(var(--radius-row) * 8 / 7);
  background: transparent; color: var(--text-2); font: var(--control-weight) var(--type-control) var(--font-ui); cursor: pointer;
}
.tc-more:hover { background: var(--hover); color: var(--text); }
.tc-more.tc-more-rail { width: calc(100% - 12px); margin: 0 6px; padding: 0 calc(8px * var(--pad-factor)); }

/* ═══════════════ ROOM VIEW ═══════════════ */

.tc-workspace {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--tc-sidebar-w) minmax(0, 1fr);
  background: var(--surface);
}

/* Rail: the quiet second level, like /next's Chat rail. */
.tc-sidebar {
  /* The list's ground: what the presence dot's ring is cut from (phone: --surface). */
  --tc-list-bg: var(--surface-2);
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--tc-list-bg);
  border-right: 1px solid var(--line);
}
.tc-sidebar-top { padding: calc(12px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(12px * var(--pad-factor)); display: flex; align-items: center; gap: calc(4px * var(--pad-factor)); }
@media (max-width: 639px) { .tc-sidebar-top { padding-top: calc(8px * var(--pad-factor)); padding-bottom: calc(6px * var(--pad-factor)); } }
.tc-sidebar-top .tc-filter { flex: 1; min-width: 0; }

/* The list's filter (CHAT-019 type-to-filter, at the top of the list at every size). */
.tc-filter { position: relative; display: flex; align-items: center; }
.tc-filter svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-filter-input { padding-left: calc(32px * var(--pad-factor)); }
.tc-filter-input::-webkit-search-decoration { -webkit-appearance: none; }
.tc-search-more { gap: calc(8px * var(--pad-factor)); margin-top: 6px; }
.tc-search-more svg { width: 16px; height: 16px; flex: none; color: var(--text-3); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-search-more span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-kbd {
  padding: calc(3px * var(--pad-factor)) calc(5px * var(--pad-factor)); border-radius: calc(var(--radius-tag) * 5 / 6);
  background: var(--surface); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line); /* raw: a keycap's edge and its lip, no token holds it */
  font: var(--control-weight) var(--type-tag)/1 var(--font-ui);
}

.tc-side-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(8px * var(--pad-factor));
  padding: calc(8px * var(--pad-factor)) calc(14px * var(--pad-factor)) calc(4px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight);
}
.tc-side-heading-label { margin: 0; font: inherit; color: inherit; }
.tc-side-all {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-3); font: var(--control-weight) var(--type-meta) var(--font-ui); text-decoration: none;
}
.tc-side-all:hover { color: var(--text); text-decoration: none; }
/* Rooms' heading holds two quiet ways in (CHAT-039): Browse and New room. */
.tc-side-actions { display: inline-flex; align-items: baseline; gap: calc(12px * var(--pad-factor)); }
a.tc-side-all[aria-current="page"] { color: var(--text); }
.tc-room-muted { display: inline-flex; flex: none; color: var(--text-3); }
.tc-room-muted svg { width: 14px; height: 14px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-room-link.tc-muted .tc-room-name { color: var(--text-3); }
/* CHAT-059: an archived room found by typing its name says so in plain words. */
.tc-conv-archived { flex: none; align-self: center; color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: 500; } /* raw: weight 500, quieter than control text; no weight role holds it */

.tc-rooms { flex: 1; overflow-y: auto; padding: calc(2px * var(--pad-factor)) 0 calc(8px * var(--pad-factor)); min-height: 0; }

/* Compact row (D24): 36 px, margin 0 6px, padding 0 8px, gap 10px, radius 8 px,
   --hover on hover, --accent-soft when selected. Selection is a ground colour, never a stripe. */
.tc-room-link {
  display: flex; align-items: center; gap: calc(10px * var(--pad-factor));
  min-height: var(--list-row-h); margin: 0 6px; padding: 0 calc(8px * var(--pad-factor)); border-radius: calc(var(--radius-row) * 8 / 7);
  color: var(--text-2); text-decoration: none; font-size: var(--type-control); font-weight: var(--control-weight);
}
.tc-room-link:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.tc-room-link[aria-current="page"] { background: var(--accent-soft); color: var(--text); }
.tc-room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; font-family: var(--font-body, var(--font-ui)); font-weight: var(--row-title-weight, var(--control-weight, 600)); } /* a room row's title: the look's body face and row-title weight (PLAT-1280) */
button.tc-room-link { width: calc(100% - 12px); border: 0; background: transparent; text-align: left; cursor: pointer; }
button.tc-room-link:hover { background: var(--hover); }
button.tc-room-link[aria-current="page"] { background: var(--accent-soft); }
.tc-rail-group + .tc-rail-group { margin-top: 8px; }

/* ── Unread count (comms ≥ 0.22 unread_count): the chat-unread recipe ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* raw: a hairline, bar or visually hidden box, not a density value */
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Unread (CHAT-034): the name in bold and the count as a plain bold number, never a pill. */
.tc-room-badge {
  flex: none; margin-left: 4px; color: var(--text);
  font: 700 var(--type-secondary)/1 var(--font-ui); font-variant-numeric: tabular-nums; /* raw: weight 700, heavier than a heading; no weight role holds it */
}
.tc-room-link.tc-unread { color: var(--text); font-weight: var(--heading-weight); }
.tc-room-link.tc-unread .tc-room-name { color: var(--text); font-weight: 700; } /* raw: weight 700, heavier than a heading; no weight role holds it */

/* ── Reply-to (comms ≥ 0.25 annotations.reply_to): a quiet quote, no stripe ── */
.tc-reply-quote {
  display: flex; gap: calc(6px * var(--pad-factor)); align-items: baseline;
  margin: 2px 0 3px; padding: calc(3px * var(--pad-factor)) calc(8px * var(--pad-factor)); max-width: 640px;
  border-radius: var(--radius-tag); background: var(--surface-2);
  font-size: var(--type-secondary); color: var(--text-2);
  cursor: pointer; overflow: hidden;
}
.tc-reply-quote:hover { background: var(--hover); }
.tc-reply-quote:hover .tc-reply-snippet { color: var(--text); }
.tc-reply-name { font-weight: var(--control-weight); color: var(--text); flex: none; }
.tc-reply-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-replychip {
  display: flex; align-items: center; gap: calc(8px * var(--pad-factor));
  margin-bottom: 6px; padding: calc(4px * var(--pad-factor)) calc(4px * var(--pad-factor)) calc(4px * var(--pad-factor)) calc(10px * var(--pad-factor));
  border-radius: var(--radius-button); background: var(--surface-2); box-shadow: var(--control-edge);
  font-size: var(--type-secondary); color: var(--text-2);
}
.tc-replychip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }

/* ── Talk (CHAT-056): one status line above the composer while the microphone is on. The dot
   is static (no pulse): it says the mic is open, the text says what Talk is doing. ── */
.tc-talk {
  display: flex; align-items: center; gap: calc(10px * var(--pad-factor));
  margin-bottom: 6px; padding: calc(4px * var(--pad-factor)) calc(4px * var(--pad-factor)) calc(4px * var(--pad-factor)) calc(10px * var(--pad-factor));
  border-radius: var(--radius-button); background: var(--surface-2); box-shadow: var(--control-edge);
  font-size: var(--type-secondary); color: var(--text-2);
}
.tc-talk[hidden] { display: none; }
.tc-talk-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-talk[data-state="starting"] .tc-talk-dot { background: var(--text-3); }
.tc-talk[data-state="speaking"] .tc-talk-dot { background: var(--accent); }
.tc-talk-state { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-talk-spend { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-talk-stop { flex: none; }
@media (max-width: 520px) { .tc-talk-spend { display: none; } }

/* ── Typing indicator (comms ≥ 0.24 room.typing) — fixed-height slot, no motion ── */
.tc-typing {
  height: 18px; padding: 0 calc(4px * var(--pad-factor)); margin-bottom: 2px; /* raw: panel geometry, not a density value */
  color: var(--text-3); font-size: var(--type-meta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Colleague run state (IMP-3361 colleague.status) — separate slot from
   typing, which is keystrokes; this is a run. No motion. ── */
.tc-working {
  padding: 0 calc(4px * var(--pad-factor)); margin-bottom: 2px;
  color: var(--text-3); font-size: var(--type-meta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-working:empty { display: none; }
.tc-working-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── @ mention picker (IMP-3363): a popover anchored above the composer, never wider
   than it, no animation ── */
.tc-composer-inner { position: relative; }
.tc-mention-pop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  z-index: 60; max-height: 240px; overflow-y: auto; padding: calc(6px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-pop);
}
.tc-mention-row {
  display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); min-height: var(--row-h);
  padding: 0 calc(10px * var(--pad-factor)); border-radius: var(--radius-row); cursor: pointer;
  font-size: var(--type-control); color: var(--text);
}
.tc-mention-row.active { background: var(--hover); }
.tc-mention-row.disabled { cursor: default; color: var(--text-3); }
.tc-mention-name { font-weight: var(--control-weight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-mention-slug { font-size: var(--type-meta); color: var(--text-3); flex-shrink: 0; }
.tc-mention-tag {
  margin-left: auto; flex-shrink: 0; padding: calc(2px * var(--pad-factor)) calc(7px * var(--pad-factor)); border-radius: var(--radius-tag);
  background: var(--surface-3); color: var(--text-2);
  font-size: var(--type-tag); font-weight: var(--heading-weight); white-space: nowrap;
}
.tc-mention-tag.colleague { color: var(--accent-text); }

.tc-side-note { padding: calc(8px * var(--pad-factor)) calc(14px * var(--pad-factor)); font-size: var(--type-secondary); color: var(--text-2); }


/* Message pane */
.tc-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.tc-pane-header {
  display: flex; align-items: center; gap: calc(12px * var(--pad-factor));
  padding: 0 calc(14px * var(--pad-factor)) 0 var(--tc-gutter); height: 52px; flex-shrink: 0; /* raw: the header bar, the same height over the list and the room; not a density value */
  border-bottom: 1px solid var(--line); background: var(--surface);
}
/* Back to the list: one column only (below). The number is how many messages wait elsewhere. */
.tc-ghost-btn.tc-back { display: none; margin-left: -6px; text-decoration: none; }
/* The arrow's own count (how many wait elsewhere): ink, tight to the arrow, so it never reads as a
   step number before the room's name. */
.tc-back-count { margin-left: -2px; color: var(--text); font-weight: var(--heading-weight); font-variant-numeric: tabular-nums; }
.tc-back-count:empty { display: none; }
/* The room's name and one quiet line under it (CHAT-035): the topic, or whether the other person
   is here. */
.tc-pane-title { display: flex; flex-direction: column; justify-content: center; gap: calc(1px * var(--pad-factor)); min-width: 0; }
.tc-title-line { display: flex; align-items: center; gap: calc(6px * var(--pad-factor)); min-width: 0; }
.tc-pane-title h1 {
  margin: 0; font-size: var(--type-subheading); font-weight: var(--heading-weight); color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-title-muted { display: inline-flex; flex: none; color: var(--text-3); }
.tc-title-muted svg { width: 14px; height: 14px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-pane-sub { color: var(--text-2); font-size: var(--type-secondary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-pane-header-right { margin-left: auto; display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); flex-shrink: 0; }

/* Icon button (with an optional word beside the glyph). */
.tc-ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--pad-factor));
  min-width: 30px; height: var(--control-h); padding: 0 calc(8px * var(--pad-factor));
  border: 0; border-radius: var(--radius-icon-button); background: transparent;
  color: var(--text-2); cursor: pointer; font-size: var(--type-control); font-weight: var(--control-weight);
}
.tc-ghost-btn:hover { background: var(--hover); color: var(--text); }
.tc-ghost-btn svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */

/* Who is in the room: up to three faces, those here now with an ok dot; a button that lists
   everyone (CHAT-035). Never an invented state. */
.tc-presence {
  display: inline-flex; align-items: center; gap: calc(6px * var(--pad-factor)); height: var(--control-h); padding: 0 calc(6px * var(--pad-factor)); border: 0; border-radius: var(--radius-button);
  background: transparent; color: var(--text-2); cursor: pointer; font: var(--control-weight) var(--type-secondary) var(--font-ui);
}
.tc-presence:hover { background: var(--hover); color: var(--text); }
.tc-presence-more { font-variant-numeric: tabular-nums; }
.tc-presence-stack { display: inline-flex; gap: calc(3px * var(--pad-factor)); }
/* Side by side, not overlapped: an overlap of 7 px covered the second letter, so "MM" read "MI". */
.tc-presence-stack .kp-initial { position: relative; box-shadow: 0 0 0 2px var(--surface); } /* raw: halo around a dot or avatar, no elevation token holds it */
.tc-presence-stack .kp-initial[data-online="true"]::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); /* raw: halo around a dot or avatar, no elevation token holds it */
}
/* Connection state: shown only while it is not live (CHAT-035), a status dot and a word. */
.tc-live {
  display: inline-flex; align-items: center; gap: calc(6px * var(--pad-factor)); flex-shrink: 0;
  color: var(--text-2); font-size: var(--type-secondary); white-space: nowrap;
}
.tc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: tc-blink 1.1s ease-in-out infinite; } /* raw: size of an icon, avatar, dot or picture, not a density value; no motion token holds it; motion is not a preset dimension (presets D7) */
.tc-live[data-state="down"] .tc-live-dot { background: var(--bad); }

/* Stream */
.tc-stream {
  flex: 1; overflow-y: auto; overflow-x: clip; padding: calc(20px * var(--pad-factor)) 0 calc(8px * var(--pad-factor));
  position: relative; display: flex; flex-direction: column; min-height: 0;
}
/* Messages use the pane's width, left-aligned (CHAT-035): no centred column with empty margins. */
.tc-stream-inner { width: 100%; margin: auto 0 0; padding: 0 var(--tc-gutter); }

.tc-day { display: flex; align-items: center; gap: calc(12px * var(--pad-factor)); margin: 18px 0 8px; color: var(--text-3); }
/* "New since you left" (CHAT-033): the one place colour appears in the stream, a thin rule in the
   org accent with the time the person left at its end. */
.tc-new-line { display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); margin: 14px 0 6px; }
.tc-new-line::before { content: ""; flex: 1; height: 1px; background: var(--accent); } /* raw: a hairline, bar or visually hidden box, not a density value */
.tc-new-line-label { flex: none; color: var(--accent-text); font-size: var(--type-meta); font-weight: var(--heading-weight); }
.tc-day::before, .tc-day::after { content: ""; height: 1px; flex: 1; background: var(--line); } /* raw: a hairline, bar or visually hidden box, not a density value */
.tc-day-label { display: inline-block; font-size: var(--type-meta); font-weight: var(--control-weight); }
.tc-day-label::first-letter { text-transform: uppercase; }

.tc-msg {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: calc(10px * var(--pad-factor));
  padding: calc(3px * var(--pad-factor)) var(--tc-gutter); margin: 0 calc(var(--tc-gutter) * -1);
  position: relative;
}
/* Only rows that arrive live animate in — a history load does not. */
.tc-msg-new { animation: tc-msg-in 0.2s var(--ease-out); } /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
.tc-msg:hover, .tc-msg:focus-within { background: var(--surface-2); }
.tc-msg.tc-msg-lead { margin-top: 12px; }
.tc-msg.tc-msg-lead:first-child { margin-top: 0; }

.tc-msg-gutter { display: flex; align-items: flex-start; justify-content: center; padding-top: calc(2px * var(--pad-factor)); }
.tc-msg-cont .tc-msg-gutter { padding-top: 0; }
/* A follow-on message's time on hover: one short line ("3:56"), so it never makes the row taller
   than its text (it wrapped "3:56 pm" in the gutter and doubled every row, critique 2026-10-03). */
.tc-msg-time-hover {
  color: var(--text-3); font-size: var(--type-tag); font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; line-height: 21px; transition: opacity var(--motion-fast) var(--ease); user-select: none;
}
.tc-msg:hover .tc-msg-time-hover, .tc-msg:focus-within .tc-msg-time-hover { opacity: 1; }

.tc-msg-body { min-width: 0; }
.tc-msg-head { display: flex; align-items: baseline; gap: calc(8px * var(--pad-factor)); margin-bottom: 1px; }
.tc-msg-author { font-weight: var(--heading-weight); font-size: var(--type-body); color: var(--text); }
/* The name and the face open the profile card. */
button.tc-msg-author { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; }
button.tc-msg-author:hover { text-decoration: underline; text-underline-offset: 2px; }
.tc-msg-face { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.tc-msg-face:focus-visible, button.tc-msg-author:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
/* The agent marker is a neutral tag beside the name (no stripe, no accent ground). */
.tc-msg-kind {
  padding: calc(1px * var(--pad-factor)) calc(6px * var(--pad-factor)); border-radius: var(--radius-tag); background: var(--surface-3); color: var(--text-2);
  font-size: var(--type-tag); font-weight: var(--heading-weight);
}
.tc-msg-time { color: var(--text-3); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.tc-msg-text { font-size: var(--type-body); line-height: 1.5; color: var(--text); word-break: break-word; overflow-wrap: anywhere; font-family: var(--font-body, var(--font-ui)); } /* message text: the look's body face (PLAT-1280) */
.tc-msg-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* Hover action bar: a small popover. */
.tc-msg-actions {
  position: absolute; top: -14px; right: 12px;
  display: flex; align-items: center; gap: calc(2px * var(--pad-factor)); padding: calc(3px * var(--pad-factor));
  border-radius: var(--radius-note); background: var(--surface); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(2px); pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  z-index: 5;
}
.tc-msg:hover .tc-msg-actions, .tc-msg:focus-within .tc-msg-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tc-act {
  display: grid; place-items: center;
  width: 30px; height: var(--control-h); border-radius: var(--radius-row);
  border: 0; background: transparent; color: var(--text-2); cursor: pointer;
}
.tc-act:hover { background: var(--hover); color: var(--text); }
.tc-act svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */

/* Touch screens have no hover: a long press opens the action sheet instead (DESIGN 2.16),
   so the bar stays out of the way and a press does not start a text selection. */
@media (hover: none) {
  .tc-msg-actions { display: none; }
  .tc-msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .tc-msg:hover { background: transparent; }
  .tc-msg.is-pressed { background: var(--hover); }
}

/* ── Approval card (annotations.kind = "approval") ──
   A colleague asking for a person's word. The whole point is that it is a CARD
   with something to press: until 2026-09-13 this app rendered only the text, so
   an organisation owner opened the chat, read a card addressed to them, and had
   nothing to click. A card inside a page on the quiet second level, no stripe. */
.tc-approval {
  margin: 6px 0 2px; padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor)); max-width: 640px;
  border-radius: var(--radius-card); background: var(--surface-2); box-shadow: var(--card-edge);
}
/* The request text keeps its own line breaks so a unified diff stays readable
   (the diff is not parsed — only its newlines are respected). A fenced block
   inside it keeps hard wrapping and its own monospace face. */
.tc-approval-text { white-space: pre-wrap; }
.tc-approval-text .md-code-block { white-space: pre; }
.tc-approval-slot:empty { display: none; }

.tc-approval-actions { display: flex; flex-wrap: wrap; gap: calc(8px * var(--pad-factor)); margin-top: 12px; }
.tc-approval-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }

/* Why a viewer cannot answer, and when they were asked — quiet, never a
   disabled button with no explanation beside it. */
.tc-approval-reason,
.tc-approval-asked { margin: 8px 0 0; font-size: var(--type-secondary); color: var(--text-3); }
.tc-approval-asked { font-variant-numeric: tabular-nums; }

.tc-approval-decision { margin: 10px 0 0; font-size: var(--type-control); font-weight: var(--control-weight); color: var(--text); }
.tc-approval-decision[data-decision="approved"] { color: var(--ok); }
.tc-approval-decision[data-decision="declined"] { color: var(--bad); }

.tc-approval-note { display: flex; flex-wrap: wrap; gap: calc(8px * var(--pad-factor)); align-items: flex-end; margin-top: 12px; }
.tc-approval-note-label {
  display: flex; flex-direction: column; gap: calc(6px * var(--pad-factor)); flex: 1 1 200px;
  font-size: var(--type-secondary); font-weight: var(--control-weight); color: var(--text-2);
}
.tc-approval-note-input {
  height: var(--control-h); padding: 0 calc(10px * var(--pad-factor)); border: 0; border-radius: var(--radius-field);
  background: var(--field); box-shadow: var(--control-edge);
  color: var(--text); font: var(--type-control) var(--font-ui);
}
.tc-approval-note-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.tc-approval-note-actions { display: flex; gap: calc(8px * var(--pad-factor)); }

/* Two registers: the plain sentence first, the code behind Details. */
.tc-approval-error { margin-top: 10px; font-size: var(--type-control); }
.tc-approval-error-human { margin: 0; color: var(--bad); }
.tc-approval-error-detail { margin-top: 4px; font-size: var(--type-meta); color: var(--text-3); }
.tc-approval-error-detail summary { cursor: pointer; }
.tc-approval-error-detail code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; word-break: break-word; } /* raw: source code in the monospace face, a source-only face in every look (presets DESIGN 2.1) */

/* Reactions */
.tc-reactions { display: flex; flex-wrap: wrap; gap: calc(6px * var(--pad-factor)); margin-top: 6px; }
.tc-reaction {
  display: inline-flex; align-items: center; gap: calc(5px * var(--pad-factor));
  height: calc(var(--control-h) * 26 / 30); padding: 0 calc(8px * var(--pad-factor)); border: 0; border-radius: var(--radius-button); cursor: pointer;
  background: var(--surface-2); box-shadow: var(--control-edge);
  color: var(--text-2); font-size: var(--type-secondary);
}
.tc-reaction:hover { background: var(--hover); }
.tc-reaction[data-mine="true"] { background: var(--accent-soft); color: var(--text); }
.tc-reaction b { font-weight: var(--heading-weight); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }

/* Empty room */
.tc-empty { max-width: 30rem; margin: 8vh auto 0; padding: 0 var(--tc-gutter); text-align: center; }
.tc-empty h2 { margin: 0 0 6px; font-size: var(--type-dialog-title); font-weight: var(--title-weight); font-family: var(--font-display); font-feature-settings: var(--font-display-features); color: var(--text); text-wrap: balance; }
.tc-empty p { margin: 0; font-size: var(--type-description); line-height: 1.5; color: var(--text-2); text-wrap: pretty; font-family: var(--font-body, var(--font-ui)); } /* an empty state's sentence: prose, the look's body face (PLAT-1280) */

/* Jump to latest: a primary button floating over the stream. */
.tc-jump {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(8px);
  display: inline-flex; align-items: center; gap: calc(6px * var(--pad-factor));
  height: var(--control-h); padding: 0 calc(12px * var(--pad-factor)); border: 0; border-radius: var(--radius-button); cursor: pointer;
  background: var(--accent); color: var(--on-accent, #fff); /* text on the accent fill: white, or a look's own ink (presets D45) */
  font-size: var(--type-control); font-weight: var(--control-weight);
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease-out); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.tc-jump[data-show="true"] { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.tc-jump svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */

/* Composer (DESIGN 9 Composer): one card holding the text area, the formatting toolbar, the
   emoji button and Send. The card, not the text area, takes the focus ring. */
.tc-composer-wrap { flex-shrink: 0; padding: calc(8px * var(--pad-factor)) var(--tc-gutter) calc(16px * var(--pad-factor)); background: var(--surface); }
.tc-composer-inner { margin: 0; }
.tc-composer {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(2px * var(--pad-factor));
  padding: 0 calc(6px * var(--pad-factor)) calc(6px * var(--pad-factor)); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--control-edge);
}
.tc-composer:focus-within { box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.tc-composer textarea {
  display: block; flex: 1 0 100%; width: 100%; border: 0; background: transparent; resize: none;
  color: var(--text); font: var(--type-body)/1.4 var(--font-ui);
  padding: calc(10px * var(--pad-factor)) calc(6px * var(--pad-factor)) calc(4px * var(--pad-factor)); min-height: 36px; max-height: 200px; overflow-y: auto; /* raw: panel geometry, not a density value */
}
.tc-composer textarea:focus, .tc-composer textarea:focus-visible { outline: none; box-shadow: none; }
.tc-fmtbar { display: flex; align-items: center; gap: calc(2px * var(--pad-factor)); }
.tc-fmt {
  display: grid; place-items: center; flex: none;
  width: 30px; height: var(--control-h); padding: 0; border: 0; border-radius: var(--radius-icon-button);
  background: transparent; color: var(--text-2); cursor: pointer;
}
.tc-fmt:hover { background: var(--hover); color: var(--text); }
.tc-fmt svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-fmt[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.tc-fmt-toggle { display: none; }
.tc-fmtbar + .tc-fmt-toggle + .tc-emoji-btn { margin-left: 4px; }
.tc-composer-spacer { flex: 1; }
.tc-composer-count { font-size: var(--type-meta); color: var(--text-3); margin-right: 4px; font-variant-numeric: tabular-nums; }
.tc-composer-count[data-warn="true"] { color: var(--warn); }
.tc-composer-count[data-over="true"] { color: var(--bad); }
.tc-send {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--pad-factor));
  min-width: 36px; height: calc(var(--control-h) * 36 / 30); padding: 0 calc(14px * var(--pad-factor)); border: 0; border-radius: var(--radius-button); cursor: pointer;
  margin-left: auto; /* stays at the right when a narrow composer wraps it onto its own line */
  background: var(--accent); color: var(--on-accent, #fff); font-size: var(--type-control); font-weight: var(--control-weight); /* text on the accent fill: white, or a look's own ink (presets D45) */
  box-shadow: var(--shadow-primary);
}
.tc-send:hover:not(:disabled) { filter: brightness(1.07); }
.tc-send:disabled { background: var(--surface-3); color: var(--text-3); box-shadow: var(--control-edge); cursor: default; }
.tc-send:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* "Also send to the room" under the thread composer. */
.tc-also {
  display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); margin-top: 8px; width: fit-content;
  color: var(--text-2); font-size: var(--type-secondary); cursor: pointer;
}
.tc-also input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-also b { color: var(--text); font-weight: var(--control-weight); }

/* Emoji rows in the composer's suggestion popover. */
.tc-suggest-emoji { flex: none; width: 22px; font-size: 18px; line-height: 1; text-align: center; } /* raw: the size of an emoji glyph, not a type role */
.tc-suggest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tc-suggest-name::first-letter { text-transform: uppercase; }

/* ── Command palette (⌘K room switcher): the launcher's shape ── */
.tc-cmd-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(8 10 16 / 0.36); /* raw: the dim behind a dialog, no token holds it */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh calc(8px * var(--pad-factor)) calc(8px * var(--pad-factor)); animation: tc-fade 0.14s var(--ease); /* raw: a space relative to the viewport or the box, not a density value; no motion token holds it; motion is not a preset dimension (presets D7) */
}
.tc-cmd {
  width: 100%; max-width: 560px; border-radius: var(--radius-card); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-launcher);
  animation: tc-cmd-in 0.18s var(--ease-out); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.tc-cmd-search { display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); padding: calc(14px * var(--pad-factor)) calc(16px * var(--pad-factor)); border-bottom: 1px solid var(--line); }
.tc-cmd-search svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-cmd-search input {
  flex: 1; border: 0; background: transparent; color: var(--text);
  font-size: var(--type-dialog-title); outline: none; min-width: 0;
}
.tc-cmd-list { max-height: 46vh; overflow-y: auto; padding: calc(6px * var(--pad-factor)); }
.tc-cmd-empty { padding: calc(28px * var(--pad-factor)) calc(16px * var(--pad-factor)); text-align: center; color: var(--text-3); font-size: var(--type-description); }
.tc-cmd-group-label { padding: calc(8px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(4px * var(--pad-factor)); color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: var(--control-weight); }
/* A file hit (CHAT-022): the file's type glyph where a person's initials would sit. */
.tc-cmd-file {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--radius-tag); /* raw: size of an icon, avatar, dot or picture, not a density value */
  background: var(--field); box-shadow: var(--card-edge); color: var(--text-2);
}
.tc-cmd-file svg { width: 14px; height: 14px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-cmd-item-file { min-height: 44px; padding-top: calc(5px * var(--pad-factor)); padding-bottom: calc(5px * var(--pad-factor)); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
.tc-cmd-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tc-cmd-item-meta {
  font-size: var(--type-meta); font-weight: 400; color: var(--text-2); /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-cmd-item {
  display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); width: 100%; min-height: var(--list-row-h);
  padding: 0 calc(10px * var(--pad-factor)); border-radius: calc(var(--radius-row) * 8 / 7); border: 0; background: transparent;
  color: var(--text); cursor: pointer; text-align: left; font-size: var(--type-body); font-weight: var(--control-weight);
}
.tc-cmd-item[data-active="true"] { background: var(--accent-soft); }
.tc-cmd-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tc-cmd-item-slug {
  font-size: var(--type-meta); font-weight: 400; color: var(--text-3); /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%;
}
.tc-cmd-foot {
  display: flex; align-items: center; gap: calc(14px * var(--pad-factor)); padding: calc(9px * var(--pad-factor)) calc(14px * var(--pad-factor));
  border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--type-meta); color: var(--text-3);
}
.tc-cmd-foot .tc-kbd { font-size: var(--type-tag); }
.tc-cmd-foot-item { display: inline-flex; align-items: center; gap: calc(6px * var(--pad-factor)); }

/* ── @mention highlighting: mentions take the accent as text ── */
.mention { color: var(--accent-text); font-weight: var(--control-weight); }
.mention-self { color: var(--accent-text); font-weight: var(--control-weight); background: var(--accent-soft); padding: calc(1px * var(--pad-factor)) calc(3px * var(--pad-factor)); border-radius: calc(var(--radius-tag) * 4 / 6); }

/* ── Markdown rendering (prose code from the Prose surface recipe) ── */
.md-body { line-height: 1.5; }
.md-body p.md-para { margin: 2px 0; }
.md-heading { margin: 8px 0 4px; font-size: var(--type-body); color: var(--text); font-weight: var(--heading-weight); font-family: var(--font-ui); } /* a heading inside message text keeps the UI face (PLAT-1280) */
.md-list { margin: 4px 0; padding-left: calc(22px * var(--pad-factor)); }
.md-list li { margin: 2px 0; }
.md-code-block {
  margin: 6px 0; padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor)); overflow-x: auto;
  border-radius: calc(var(--radius-note) * 8 / 10); background: var(--field); box-shadow: var(--card-edge);
  font: var(--type-secondary)/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* raw: source code in the monospace face, a source-only face in every look (presets DESIGN 2.1) */
}
.md-code-block code { color: var(--text); font: inherit; }
code.md-inline-code {
  padding: calc(1px * var(--pad-factor)) calc(4px * var(--pad-factor)); border-radius: calc(var(--radius-tag) * 4 / 6); background: var(--field); color: var(--text);
  font: var(--type-control)/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* raw: source code in the monospace face, a source-only face in every look (presets DESIGN 2.1) */
}

/* ── Toast (Toast recipe): dark in both themes ── */
/* Above dialogs, as in the language (dialog 90, toast 95). Here dialogs and menus sit at 100
   so they cover the top bar, and a toast at 95 landed UNDER an open dialog's scrim: dimmed
   and its Details toggle out of reach (found adding people, CHAT-020). The lightbox (120)
   stays above everything. */
body > .kp-toast {
  position: fixed; z-index: 105; left: 50%; transform: translateX(-50%);
  bottom: 22px;
  max-width: calc(100vw - 16px);
  padding: calc(9px * var(--pad-factor)) calc(14px * var(--pad-factor)); border-radius: var(--radius-note); background: #1d1f25; color: #f2f3f5; /* raw: the always-dark toast, no token holds it */
  font-size: var(--type-control); font-weight: var(--control-weight); box-shadow: var(--shadow-toast);
  animation: toast-in 0.2s var(--ease-out); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
body > .kp-toast.err { color: #ff8b8b; } /* 7.3:1 on the toast background */ /* raw: the always-dark toast, no token holds it */
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }
/* A failed read shown in place (the lobby): the failed-state line with a dot. */
#app .kp-toast {
  display: flex; align-items: baseline; gap: calc(10px * var(--pad-factor)); margin: 12px 0 10px; padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor));
  border-radius: var(--radius-note); background: var(--surface-2); color: var(--text-2); font-size: var(--type-description);
}
#app .kp-toast::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); /* raw: size of an icon, avatar, dot or picture, not a density value */
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); /* raw: halo around a dot or avatar, no elevation token holds it */
}
#app .kp-toast.err::before { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); } /* raw: halo around a dot or avatar, no elevation token holds it */

/* ── Modal (Dialog with backdrop recipe) ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: calc(8px * var(--pad-factor));
  background: rgb(8 10 16 / 0.36); /* raw: the dim behind a dialog, no token holds it */
}
.modal {
  width: min(440px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto;
  padding: calc(24px * var(--pad-factor)); border-radius: var(--radius-card); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-win);
}
.modal h2 { margin: 0 0 12px; font-size: var(--type-dialog-title); font-weight: var(--title-weight); font-family: var(--font-display); font-feature-settings: var(--font-display-features); text-wrap: balance; }
.modal .actions { display: flex; gap: calc(8px * var(--pad-factor)); justify-content: flex-end; margin-top: 20px; }
/* "Add people" (CHAT-020): the lobby's people rows inside the dialog, a filter on top, the
   link as the second way below. One scroller; it is positioned (DESIGN s9, Scrollbar). */
.add-modal { width: min(480px, calc(100vw - 16px)); }
.add-modal .lobby-filter { margin-top: 0; }
.modal .lobby-filter-input { padding-left: calc(32px * var(--pad-factor)); } /* the Field padding above would put the text under the icon */
.add-list { position: relative; max-height: min(46vh, 360px); overflow-y: auto; margin: 8px -10px 0; }
.add-row[aria-disabled="true"] { cursor: default; }
.add-row[aria-disabled="true"]:hover { background: transparent; }
.add-row[aria-disabled="true"] .kp-row-name { color: var(--text-2); }
/* CHAT-109: People and AI colleagues under their own quiet headings; a colleague's row carries
   what it does on a second line, as in the People view. */
.add-group-head { margin: 0; padding: calc(10px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(2px * var(--pad-factor)); color: var(--text-2); font-size: var(--type-control); font-weight: var(--heading-weight); }
.add-group-head:first-child { padding-top: calc(2px * var(--pad-factor)); }
.add-row-main { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.add-row-sub { color: var(--text-3); font-size: var(--type-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-more { margin-top: 10px; }
.add-link { margin-top: 10px; padding-top: calc(14px * var(--pad-factor)); border-top: 1px solid var(--line); }
.add-link .kp-btn { margin-bottom: 4px; }
.add-modal h2 + .add-link { margin-top: 0; padding-top: 0; border-top: 0; } /* link only: not the room admin */
.token-display {
  padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)); border-radius: var(--radius-field); background: var(--field); box-shadow: var(--control-edge);
  color: var(--text); word-break: break-all;
  font: var(--type-secondary)/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* raw: source code in the monospace face, a source-only face in every look (presets DESIGN 2.1) */
}
.modal p { color: var(--text-2); font-size: var(--type-description); line-height: 1.5; }
/* Invite an agent: the line to paste, its Copy, and the shown-once note. */
#agent-result .tc-agent-copy { margin-top: 8px; }
#agent-result .muted { margin: 12px 0 0; }

/* Bare controls inside modals + join view (Field recipe) */
.modal input, .modal select, .modal textarea,
#join-body input, #join-body select {
  width: 100%; min-height: var(--control-h); padding: 0 calc(10px * var(--pad-factor)); border: 0; border-radius: var(--radius-field);
  background: var(--field); box-shadow: var(--control-edge);
  color: var(--text); font: var(--type-control) var(--font-ui);
}
.modal textarea { padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)); font: var(--type-body)/1.4 var(--font-ui); }
.modal input:focus, .modal select:focus, .modal textarea:focus,
#join-body input:focus, #join-body select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.form-row { display: flex; gap: calc(10px * var(--pad-factor)); margin-bottom: 12px; align-items: center; }
.form-row label { flex-shrink: 0; min-width: 110px; color: var(--text); font-size: var(--type-control); font-weight: var(--control-weight); }
.form-row label::first-letter { text-transform: uppercase; }

/* ── Sign-out link (rides the shared header's right cluster) ── */
.signout-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)); /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  border: none; background: none; cursor: pointer;
  color: var(--text-2); font-size: var(--type-control); font-weight: var(--control-weight);
}
.signout-link:hover { color: var(--text); }

/* ═══════════════ CHAT V2: threads, reactions, edit and delete, pins, mute ═══════════════ */

/* A control whose route this comms does not have hides everywhere at once (gap G5). */
body[data-off~="threads"] [data-cap="threads"],
body[data-off~="edit"] [data-cap="edit"],
body[data-off~="delete"] [data-cap="delete"],
body[data-off~="reactions"] [data-cap="reactions"],
body[data-off~="pins"] [data-cap="pins"],
body[data-off~="mute"] [data-cap="mute"] { display: none !important; }

/* Header: pinned list and mute are icon buttons; pressed = the soft accent ground. */
.tc-ghost-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.tc-ghost-btn:disabled { opacity: 0.55; cursor: default; }
.tc-pins-count { font-size: var(--type-secondary); font-weight: var(--heading-weight); font-variant-numeric: tabular-nums; }
.tc-pins-count:empty { display: none; }

/* A leave or delete line in the stream (CHAT-024): the message column, quiet, its time after it. */
.tc-event {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: calc(8px * var(--pad-factor));
  margin: 10px 0 2px; padding: calc(2px * var(--pad-factor)) 0 calc(2px * var(--pad-factor)) calc(42px * var(--pad-factor));   /* 32 px gutter + 10 px gap: under the message text */
  color: var(--text-2); font-size: var(--type-control); line-height: 1.45;
}
.tc-event + .tc-event { margin-top: 0; }
.tc-event-time { color: var(--text-3); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
/* CHAT-044: a run of three or more such lines is one line that opens to show them. */
.tc-event-fold { margin: 10px 0 2px; }
.tc-event-fold > summary { margin: 0; cursor: pointer; list-style: none; }
.tc-event-fold > summary::-webkit-details-marker { display: none; }
.tc-event-fold > summary .tc-event-text { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.tc-event-fold > summary:hover .tc-event-text { color: var(--text); }
.tc-event-fold > summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--radius-tag); }
.tc-event-fold[open] > summary .tc-event-text { text-decoration: none; }
.tc-event-rows > .tc-event { margin: 0; }
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-event-fold > summary { min-height: 44px; align-items: center; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
}

/* The room was deleted (or left elsewhere) while open: one plain line where the composer was. */
.tc-gone {
  display: flex; align-items: center; flex-wrap: wrap; gap: calc(10px * var(--pad-factor)) calc(14px * var(--pad-factor));
  margin: 0; padding: calc(12px * var(--pad-factor)) calc(12px * var(--pad-factor)) calc(12px * var(--pad-factor)) calc(16px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface-2); box-shadow: var(--card-edge);
}
.tc-gone p { flex: 1 1 18rem; margin: 0; color: var(--text); font-size: var(--type-description); line-height: 1.5; }
/* CHAT-059: an archived room keeps its messages readable; the actions that write are gone. */
.tc-workspace[data-archived] .tc-act:is([data-cap="reactions"], [data-cap="edit"]),
.tc-workspace[data-archived] .tc-pin-unpin,
.tc-workspace[data-archived] .tc-reaction-add { display: none !important; }
/* CHAT-061 / CHAT-059: existing reactions stay readable but take no new taps. */
.tc-workspace[data-archived] .tc-reaction { pointer-events: none; }
.tc-workspace[data-gone] .tc-pane-header-right > :not(.tc-room-more):not(.tc-open-full) { display: none !important; }

/* Signed out (CHAT-046): one line where the person was about to act (in a room, where the
   composer was), the same card as the line above. What was on screen stays readable; every
   control that needs the sign-in steps aside until a new one is saved. */
body[data-signed-out] .tc-composer-wrap:not(.tc-signedout-wrap),
body[data-signed-out] .tc-msg-actions,
body[data-signed-out] .tc-pane-header-right > :not(.tc-open-full),
body[data-signed-out] .tc-list-more,
body[data-signed-out] .tc-alerts-offer,
body[data-signed-out] .tc-home-inner,
body[data-signed-out] .tc-new-msg,
body[data-signed-out] .tc-side-actions,
body[data-signed-out] .tc-jump { display: none !important; }
body[data-signed-out] .tc-reaction { pointer-events: none; }
.tc-signedout { row-gap: calc(6px * var(--pad-factor)); }
.tc-signedout .kp-btn { flex: none; }
.tc-home .tc-signedout-wrap { width: min(100%, 34rem); padding: 0; background: none; }
.tc-side-foot .tc-signedout-wrap { padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)) calc(12px * var(--pad-factor)); background: none; border-top: 1px solid var(--line); }
.tc-side-foot .tc-signedout .kp-btn { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
.lobby .tc-signedout-wrap, .ce-body .tc-signedout-wrap { padding: 0; margin-bottom: 18px; background: none; }
/* While signed out a count cannot move, so none is shown (the desktop's bubble does the same). */
body[data-signed-out] .tc-room-badge,
body[data-signed-out] .tc-back-count { display: none; }
/* Phone: a Details toggle is a 44 px target (DESIGN 9 Error details, the language's own rule). */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .err-details > summary { min-height: 44px; padding: 0 calc(8px * var(--pad-factor)); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
}

/* Confirmation dialog: the consequences, one per line, and a long room name in the button. */
.modal .tc-dialog-list { margin: 0; padding: 0 0 0 calc(18px * var(--pad-factor)); color: var(--text-2); font-size: var(--type-description); line-height: 1.5; }
.modal .tc-dialog-list li + li { margin-top: 4px; }
.modal .actions { flex-wrap: wrap; }
.modal .actions .kp-btn { min-width: 0; max-width: 100%; }
.tc-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A message's own marks: pinned, edited, deleted, and the row a jump landed on. */
.tc-pinned-line {
  display: flex; align-items: center; gap: calc(5px * var(--pad-factor)); margin-bottom: 2px;
  color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight);
}
.tc-pinned-line svg { width: 13px; height: 13px; flex: none; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-edited { margin-left: 2px; color: var(--text-3); font-size: var(--type-meta); white-space: nowrap; font-family: var(--font-ui); } /* a label inside message text keeps the UI face (PLAT-1280) */
.tc-tombstone {
  display: flex; align-items: center; gap: calc(6px * var(--pad-factor)); margin: 1px 0 0;
  color: var(--text-3); font-size: var(--type-description); line-height: 1.5;
}
.tc-tombstone svg { width: 14px; height: 14px; flex: none; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-msg.is-target { animation: tc-target 1.8s var(--ease); } /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
.tc-msg.is-thread-open { background: var(--surface-2); }
@keyframes tc-target { 0%, 45% { background: var(--accent-soft); } 100% { background: transparent; } }

/* Under a thread root: the last repliers, the count, when the last reply came. */
.tc-thread-sum {
  display: inline-flex; align-items: center; gap: calc(8px * var(--pad-factor)); max-width: 100%;
  min-height: var(--control-h); margin: 4px 0 0 -4px; padding: calc(3px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(3px * var(--pad-factor)) calc(4px * var(--pad-factor));
  border: 0; border-radius: calc(var(--radius-row) * 8 / 7); background: transparent; cursor: pointer;
  color: var(--text-3); font-size: var(--type-secondary); text-align: left;
}
.tc-thread-sum:hover { background: var(--surface); box-shadow: var(--card-edge); }
.tc-thread-stack { display: inline-flex; flex: none; gap: calc(3px * var(--pad-factor)); }
.tc-thread-stack .kp-initial { box-shadow: 0 0 0 2px var(--surface); } /* raw: halo around a dot or avatar, no elevation token holds it */
.tc-thread-count { color: var(--accent-text); font-weight: var(--heading-weight); white-space: nowrap; }
.tc-thread-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tc-thread-open { display: none; color: var(--text-2); font-weight: var(--control-weight); white-space: nowrap; }
.tc-thread-sum:hover .tc-thread-last { display: none; }
.tc-thread-sum:hover .tc-thread-open { display: inline; }
/* A reply also sent to the room names its thread above its text. */
.tc-thread-context {
  display: inline-flex; align-items: baseline; gap: 0; max-width: 100%; margin: 0 0 2px; padding: 0; white-space: nowrap;
  border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--text-3); font-size: var(--type-secondary); font-weight: var(--control-weight);
}
.tc-thread-context:hover { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.tc-thread-context-snip { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* raw: weight 400, plain text inside a heavier element; no weight role holds it */

/* A GIF (annotations.gif): its own aspect ratio from width and height, so nothing jumps. */
.tc-gif-wrap { margin: 4px 0 2px; }
.tc-gif { display: block; width: auto; max-width: min(320px, 100%); height: auto; border-radius: calc(var(--radius-card) * 8 / 12); background: var(--surface-3); }

/* No grey flash on tap: the row and chip states already show the press. */
.tc-msg, .tc-reaction, .tc-act, .tc-fmt, .tc-send, .menu-item, .kc-emoji-cell, .tc-sheet-emoji, .tc-thread-sum { -webkit-tap-highlight-color: transparent; }

/* Reactions: the chip, the add button beside them, the who-reacted popover. */
.tc-reaction-emoji { font-size: 15px; line-height: 1; } /* raw: the size of an emoji glyph, not a type role */
.tc-reaction-add { color: var(--text-3); opacity: 0; transition: opacity var(--motion-fast) var(--ease); }
.tc-reaction-add svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-msg:hover .tc-reaction-add, .tc-msg:focus-within .tc-reaction-add { opacity: 1; }
.tc-reaction:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
@media (hover: none) { .tc-reaction-add { opacity: 1; } }
.tc-tip {
  position: fixed; z-index: 110; display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); max-width: 280px;
  padding: calc(8px * var(--pad-factor)) calc(10px * var(--pad-factor)); border-radius: var(--radius-note); background: var(--surface); box-shadow: var(--shadow-pop);
  color: var(--text); font-size: var(--type-secondary); font-weight: var(--control-weight); line-height: 1.35; pointer-events: none;
  animation: tc-pop-in var(--motion-fast) var(--ease-out);
}
.tc-tip-emoji { flex: none; font-size: 24px; line-height: 1; } /* raw: the size of an emoji glyph, not a type role */

/* Editing in place: the Composer card around the message's own text. */
.tc-edit {
  margin: 4px 0 2px; padding: calc(6px * var(--pad-factor)); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent-ring); /* raw: focus or drop-target ring, no elevation token holds it */
}
.tc-edit-input {
  display: block; width: 100%; padding: calc(6px * var(--pad-factor)); border: 0; background: transparent; resize: none;
  color: var(--text); font: var(--type-body)/1.4 var(--font-ui); max-height: 200px; overflow-y: auto;
}
.tc-edit-input:focus, .tc-edit-input:focus-visible { outline: none; box-shadow: none; }
.tc-edit-bar { display: flex; align-items: center; justify-content: flex-end; gap: calc(8px * var(--pad-factor)); padding-top: calc(4px * var(--pad-factor)); }
.tc-edit-hint { margin-right: auto; padding-left: calc(6px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-meta); }
.tc-msg.is-editing, .tc-msg.is-editing:hover { background: var(--surface-2); }
.tc-msg.is-editing .tc-msg-actions, .tc-msg.is-editing .tc-reactions { display: none; }

/* Menu (DESIGN 9 Popover and menu, context menu). */
.tc-menu {
  position: fixed; z-index: 100; display: grid; min-width: 220px; max-width: 300px; padding: calc(6px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-pop);
  animation: tc-pop-in var(--motion-enter) var(--ease-out);
}
.menu-item {
  display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); width: 100%; min-height: var(--row-h); padding: 0 calc(10px * var(--pad-factor));
  border: 0; border-radius: var(--radius-row); background: transparent; cursor: pointer;
  color: var(--text); font-size: var(--type-control); font-weight: var(--control-weight); text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); }
.menu-item:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.menu-item svg { width: 16px; height: 16px; flex: none; color: var(--text-2); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.menu-item .kp-initial { flex: none; }
/* A count beside a menu item sits at the right, quiet (Popover recipe hint). */
.menu-hint { margin-left: auto; padding-left: calc(12px * var(--pad-factor)); color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; } /* raw: weight 500, quieter than control text; no weight role holds it */
/* A direct conversation's name opens the other person's card. */
.tc-title-btn { min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.tc-title-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.tc-title-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: calc(var(--radius-tag) * 4 / 6); }
.menu-item.is-danger, .menu-item.is-danger svg { color: var(--bad); }
.menu-sep { height: 1px; margin: 5px 6px; background: var(--line); } /* raw: a hairline, bar or visually hidden box, not a density value */

/* Phone sheet (DESIGN 10 Sheets): at most 520 px, 8 px from the sides and the bottom. */
.tc-sheet-scrim, .kc-emoji-scrim {
  position: fixed; inset: 0; z-index: 99; background: rgb(8 10 16 / 0.36); /* raw: the dim behind a dialog, no token holds it */
  animation: tc-fade 0.14s var(--ease); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.tc-sheet {
  position: fixed; z-index: 100; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  display: grid; max-width: 520px; max-height: 80vh; margin: 0 auto; padding: calc(8px * var(--pad-factor)); overflow-y: auto;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-pop);
  animation: tc-sheet-in 0.2s var(--ease-out); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.tc-sheet .menu-item { min-height: 44px; font-size: var(--type-subheading); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
.tc-sheet .menu-item svg { width: 20px; height: 20px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-sheet-preview {
  display: grid; gap: calc(2px * var(--pad-factor)); margin-bottom: 6px; padding: calc(4px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(10px * var(--pad-factor)); border-bottom: 1px solid var(--line);
}
.tc-sheet-preview-name { font-size: var(--type-control); font-weight: var(--heading-weight); }
.tc-sheet-preview-text {
  color: var(--text-2); font-size: var(--type-control);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-sheet-react {
  display: flex; justify-content: space-between; gap: calc(4px * var(--pad-factor));
  margin-bottom: 6px; padding: calc(2px * var(--pad-factor)) calc(2px * var(--pad-factor)) calc(10px * var(--pad-factor)); border-bottom: 1px solid var(--line);
}
.tc-sheet-emoji {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border: 0; border-radius: var(--radius-note); background: var(--surface-3); cursor: pointer;
  font-size: 22px; line-height: 1; /* raw: the size of an emoji glyph, not a type role */
}
.tc-sheet-emoji[aria-pressed="true"] { background: var(--accent-soft); }
.tc-sheet-emoji-more { color: var(--text-2); }
.tc-sheet-emoji-more svg { width: 20px; height: 20px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-sheet-cancel { justify-content: center; margin-top: 6px; background: var(--surface-3); }
@keyframes tc-sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Emoji picker: the popover on desktop, a sheet on phone. Tabs are glyphs, never emoji. */
.kc-emoji {
  position: fixed; z-index: 100; display: flex; flex-direction: column;
  width: 344px; height: 408px; overflow: hidden; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-pop);
  animation: tc-pop-in var(--motion-enter) var(--ease-out);
}
.kc-emoji-search {
  display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); height: 32px; margin: 10px 10px 6px; padding: 0 calc(10px * var(--pad-factor)); /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-radius: var(--radius-field); background: var(--field); box-shadow: var(--control-edge);
}
.kc-emoji-search:focus-within { box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.kc-emoji-search svg { width: 16px; height: 16px; flex: none; color: var(--text-3); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.kc-emoji-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; /* raw: panel geometry, not a density value */
  color: var(--text); font: 13px var(--font-ui); /* raw: the size of an emoji glyph, not a type role */
}
.kc-emoji-search input::-webkit-search-cancel-button { display: none; }
.kc-emoji-tabs { display: flex; gap: calc(2px * var(--pad-factor)); padding: 0 calc(8px * var(--pad-factor)) calc(6px * var(--pad-factor)); border-bottom: 1px solid var(--line); }
.kc-emoji-tab {
  display: grid; place-items: center; flex: 1; height: 30px; padding: 0; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border: 0; border-radius: var(--radius-row); background: transparent; color: var(--text-3); cursor: pointer;
}
.kc-emoji-tab svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.kc-emoji-tab:hover { background: var(--hover); color: var(--text); }
.kc-emoji-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.kc-emoji-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(2px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(8px * var(--pad-factor)); }
.kc-emoji-sec-h { margin: 8px 4px 4px; color: var(--text-3); font-size: 12px; font-weight: var(--control-weight); } /* raw: the size of an emoji glyph, not a type role */
.kc-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.kc-emoji-cell {
  display: grid; place-items: center; height: 36px; padding: 0; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border: 0; border-radius: var(--radius-icon-button); background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; /* raw: the size of an emoji glyph, not a type role */
}
.kc-emoji-cell:hover, .kc-emoji-cell.is-active { background: var(--hover); }
.kc-emoji-cell:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.kc-emoji-empty { padding: calc(28px * var(--pad-factor)) calc(16px * var(--pad-factor)); text-align: center; color: var(--text-3); font-size: 13px; } /* raw: the size of an emoji glyph, not a type role */
.kc-emoji-foot {
  display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); min-height: 48px; padding: calc(6px * var(--pad-factor)) calc(12px * var(--pad-factor)); /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.kc-emoji-foot-big { width: 32px; flex: none; font-size: 28px; line-height: 1; text-align: center; } /* raw: the size of an emoji glyph, not a type role */
.kc-emoji-foot-text { display: grid; min-width: 0; }
.kc-emoji-foot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: var(--control-weight); } /* raw: the size of an emoji glyph, not a type role */
.kc-emoji-foot-name::first-letter { text-transform: uppercase; }
.kc-emoji-foot-code { color: var(--text-3); font-size: 12px; } /* raw: the size of an emoji glyph, not a type role */
.kc-emoji.is-sheet {
  left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: 520px; height: min(72vh, 480px); margin: 0 auto; /* raw: panel geometry, not a density value; size of an icon, avatar, dot or picture, not a density value */
  animation: tc-sheet-in 0.2s var(--ease-out); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}

/* The side panel: a thread or the pinned list. */
:root { --tc-side-w: 400px; }
.tc-workspace { position: relative; }
.tc-workspace[data-side="open"] { grid-template-columns: var(--tc-sidebar-w) minmax(0, 1fr) var(--tc-side-w); }
.tc-side {
  position: relative;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--line);
}
.tc-side-head {
  display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); flex-shrink: 0;
  height: 52px; padding: 0 calc(8px * var(--pad-factor)) 0 calc(16px * var(--pad-factor)); border-bottom: 1px solid var(--line); /* raw: the header bar, the same height over the list and the room; not a density value */
}
.tc-side-back { display: none; }
.tc-side-title { display: flex; align-items: baseline; gap: calc(8px * var(--pad-factor)); flex: 1; min-width: 0; }
.tc-side-title h2 { margin: 0; flex: none; color: var(--text); font-size: var(--type-subheading); font-weight: var(--heading-weight); }
.tc-side-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text-3); font-size: var(--type-secondary); }
.tc-side-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: clip; padding: calc(18px * var(--pad-factor)) 0 calc(8px * var(--pad-factor)); }
.tc-side-inner { --tc-gutter: 16px; padding: 0 var(--tc-gutter); }
.tc-side .tc-composer-wrap { padding: calc(8px * var(--pad-factor)) calc(16px * var(--pad-factor)) calc(14px * var(--pad-factor)); }
.tc-thread-divider {
  display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); margin: 12px 0 4px;
  color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight);
}
.tc-thread-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* raw: a hairline, bar or visually hidden box, not a density value */
.tc-side-empty { padding: calc(28px * var(--pad-factor)) calc(20px * var(--pad-factor)); text-align: center; color: var(--text-2); font-size: var(--type-description); }
.tc-side-empty p { margin: 0 0 6px; }
.tc-side-empty-h { color: var(--text); font-size: var(--type-body); font-weight: var(--heading-weight); }
.tc-empty-actions { display: flex; justify-content: center; gap: calc(8px * var(--pad-factor)); margin-top: 14px; }

/* The room's to-dos (CHAT-053): an add line, then plain checklist rows with 1 px rules. */
.tc-rtodos { padding-top: calc(12px * var(--pad-factor)); }
.tc-rtodo-add { display: flex; gap: calc(8px * var(--pad-factor)); padding: 0 calc(16px * var(--pad-factor)) calc(12px * var(--pad-factor)); }
.tc-rtodo-input { flex: 1; min-width: 0; }
.tc-rtodo-add-btn { flex: none; height: auto; align-self: stretch; }
.tc-rtodo-list { list-style: none; margin: 0; padding: 0 calc(8px * var(--pad-factor)); }
.tc-rtodo { display: flex; align-items: flex-start; gap: calc(10px * var(--pad-factor)); padding: calc(9px * var(--pad-factor)) calc(8px * var(--pad-factor)); border-radius: var(--radius-note); }
.tc-rtodo + .tc-rtodo { border-top: 1px solid var(--line); }
.tc-rtodo:hover { background: var(--hover); }
.tc-rtodo-box {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px; padding: 0; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border: 1.5px solid var(--text-3); border-radius: var(--radius-tag); background: transparent;
  color: var(--on-accent, #fff); cursor: pointer; /* the tick on the checked box's accent fill: white, or a look's own ink (presets D45) */
}
.tc-rtodo-box:hover { border-color: var(--text); }
.tc-rtodo-box:focus-visible, .tc-rtodo-done-toggle:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.tc-rtodo-box[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.tc-rtodo-box[aria-busy="true"] { opacity: .5; cursor: progress; }
.tc-rtodo-box svg { width: 14px; height: 14px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-rtodo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2px * var(--pad-factor)); }
.tc-rtodo-title { color: var(--text); font-size: var(--type-body); line-height: 1.4; overflow-wrap: anywhere; }
.tc-rtodo-meta { color: var(--text-3); font-size: var(--type-meta); }
.tc-rtodo.is-done .tc-rtodo-title { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }
.tc-rtodo-act { flex: none; margin: -4px -2px 0 0; }
.tc-rtodo-act:disabled { opacity: .5; cursor: progress; }
.tc-rtodo-done-toggle {
  display: flex; align-items: center; gap: calc(6px * var(--pad-factor)); margin: 14px 16px 4px; padding: calc(4px * var(--pad-factor)) 0;
  border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--type-secondary); font-weight: var(--heading-weight); cursor: pointer;
}
.tc-rtodo-done-toggle:hover { color: var(--text); }
.tc-rtodo-done-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; } /* raw: size of an icon, avatar, dot or picture, not a density value; no motion token holds it; motion is not a preset dimension (presets D7) */
.tc-rtodo-done-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tc-rtodo-done-n { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; } /* raw: weight 500, quieter than control text; no weight role holds it */
.tc-todos-btn[aria-pressed="true"] { background: var(--hover); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .tc-rtodo-done-toggle svg { transition: none; } }

/* The room's pinned documents (CHAT-054): a plain list, then one document framed from Folio.
   A document needs room to read, so the panel widens on wide windows. */
.tc-workspace:has(.tc-side[data-mode="docs"]) { --tc-side-w: min(600px, 44vw); }
.tc-rdocs { padding-top: calc(12px * var(--pad-factor)); }
.tc-rdoc-actions { display: flex; gap: calc(8px * var(--pad-factor)); padding: 0 calc(16px * var(--pad-factor)) calc(12px * var(--pad-factor)); }
.tc-rdoc-pin-btn svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-rdoc-list { list-style: none; margin: 0; padding: 0 calc(8px * var(--pad-factor)); }
.tc-rdoc { display: flex; align-items: center; gap: calc(4px * var(--pad-factor)); }
.tc-rdoc + .tc-rdoc { border-top: 1px solid var(--line); }
.tc-rdoc-open:not(.is-locked):hover { background: var(--hover); }
.tc-rdoc-open {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: calc(10px * var(--pad-factor));
  padding: calc(10px * var(--pad-factor)) calc(8px * var(--pad-factor)); border: 0; border-radius: var(--radius-note); background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tc-rdoc-open:focus-visible, .tc-rdoc-unpin:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.tc-rdoc-open > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--text-3); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-rdoc-open.is-locked { cursor: default; }
.tc-rdoc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2px * var(--pad-factor)); }
.tc-rdoc-title { color: var(--text); font-size: var(--type-body); line-height: 1.4; overflow-wrap: anywhere; }
.tc-rdoc-open.is-locked .tc-rdoc-title { color: var(--text-2); }
.tc-rdoc-meta { color: var(--text-3); font-size: var(--type-meta); line-height: 1.4; }
.tc-rdoc-unpin { flex: none; margin-right: 4px; }
.tc-rdoc-picker { display: grid; gap: calc(8px * var(--pad-factor)); padding: 0 calc(16px * var(--pad-factor)) calc(12px * var(--pad-factor)); }
.tc-rdoc-picker .tc-rdoc-list { padding: 0; }
.tc-rdoc-picker .tc-rdoc-actions { padding: 0; }
.tc-rdoc-hint { margin: 0; color: var(--text-3); font-size: var(--type-meta); line-height: 1.45; }
.tc-rdoc-head-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto !important; min-width: 0; }
.tc-rdoc-bar-slot:empty { display: none; }
.tc-rdoc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--pad-factor));
  padding: calc(8px * var(--pad-factor)) calc(12px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(16px * var(--pad-factor)); border-bottom: 1px solid var(--line);
  background: var(--surface-2, var(--hover)); color: var(--text); font-size: var(--type-control);
}
.tc-rdoc-reload { flex: none; }
.tc-rdoc-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--surface); }
.tc-docs-btn[aria-pressed="true"] { background: var(--hover); color: var(--text); }
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-todos-btn .tc-btn-word { display: none; }
  .tc-todos-btn { width: 44px; padding: 0; }
  .tc-docs-btn .tc-btn-word { display: none; }
  .tc-docs-btn { width: 44px; padding: 0; }
  .tc-rdoc-open { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-rdoc-unpin { width: 44px; height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-rtodo { padding: calc(10px * var(--pad-factor)) calc(8px * var(--pad-factor)); }
  .tc-rtodo-box { width: 24px; height: 24px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-rtodo-act { min-height: 44px; margin-top: -12px; margin-bottom: -12px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-rtodo-input, .tc-rtodo-add-btn { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
}

/* Pinned list: plain rows with 1 px rules (DESIGN 9 List row). */
.tc-pins { padding: calc(8px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(12px * var(--pad-factor)); }
.tc-pin { position: relative; display: flex; align-items: flex-start; gap: calc(2px * var(--pad-factor)); border-radius: var(--radius-note); }
.tc-pin + .tc-pin { border-top: 1px solid var(--line); }
.tc-pin:hover { background: var(--hover); }
.tc-pin-open {
  display: grid; gap: calc(4px * var(--pad-factor)); flex: 1; min-width: 0; padding: calc(10px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor));
  border: 0; border-radius: var(--radius-note); background: transparent; cursor: pointer;
  color: var(--text); font: inherit; text-align: left;
}
.tc-pin-open:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.tc-pin-head { display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); min-width: 0; }
.tc-pin-author { font-size: var(--type-description); font-weight: var(--heading-weight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-pin-time { flex: none; color: var(--text-3); font-size: var(--type-meta); }
.tc-pin-time::first-letter { text-transform: uppercase; }
.tc-pin-text {
  color: var(--text); font-size: var(--type-description); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-pin-text .md-code-block { margin: 2px 0; padding: calc(6px * var(--pad-factor)) calc(8px * var(--pad-factor)); }
.tc-pin-meta { color: var(--text-3); font-size: var(--type-meta); }
.tc-pin-unpin { margin: 8px 6px 0 0; opacity: 0; }
.tc-pin:hover .tc-pin-unpin, .tc-pin-unpin:focus-visible { opacity: 1; }
@media (hover: none) { .tc-pin-unpin { opacity: 1; } }

/* Telegram group (the room's "…" menu): what linking does, the link's state, and while a code
   waits, one panel whose hero is the command to send. Status dot from DESIGN 9 Badge and count;
   the command is the Code sample recipe (an always-dark region, data-scheme="dark"), wrapping
   because it is one line to copy, not source to read; the bar is /next's .vd-gauge (4 px track
   on --surface-3, --text-3 fill, --warn near the end). No stripe, no fill, no glow. */
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; /* raw: size of an icon, avatar, dot or picture, not a density value */
       background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } /* raw: halo around a dot or avatar, no elevation token holds it */
.dot.neutral { background: var(--text-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-3) 18%, transparent); } /* raw: halo around a dot or avatar, no elevation token holds it */
.tc-tg { display: grid; align-content: start; gap: calc(18px * var(--pad-factor)); padding: calc(18px * var(--pad-factor)) calc(16px * var(--pad-factor)) calc(24px * var(--pad-factor)); }
.tc-tg-intro { margin: 0; max-width: 60ch; color: var(--text-2); font-size: var(--type-control); line-height: 1.5; }
.tc-tg-state { display: grid; gap: calc(12px * var(--pad-factor)); }
.tc-tg-row { display: flex; align-items: baseline; gap: calc(10px * var(--pad-factor)); border-radius: calc(var(--radius-row) * 8 / 7); }
.tc-tg-row:focus { outline: none; }
.tc-tg-row:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.tc-tg-row .dot { position: relative; top: -1px; }
.tc-tg-row-text { display: grid; gap: calc(2px * var(--pad-factor)); min-width: 0; }
.tc-tg-row strong { color: var(--text); font-size: var(--type-body); font-weight: var(--heading-weight); }
.tc-tg-group { overflow-wrap: anywhere; }
.tc-tg-meta { color: var(--text-3); font-size: var(--type-secondary); font-variant-numeric: tabular-nums; }
.tc-tg-line { margin: 0; color: var(--text-2); font-size: var(--type-control); line-height: 1.5; }
.tc-tg-strong { color: var(--text); font-weight: var(--control-weight); }
.tc-tg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--pad-factor)); }
.tc-tg-failed { display: grid; gap: calc(10px * var(--pad-factor)); }
.tc-tg-note[hidden] { display: none; }
.tc-tg-note { display: grid; gap: calc(4px * var(--pad-factor)); }

.tc-tg-wait { display: grid; gap: calc(12px * var(--pad-factor)); }
.tc-tg-wait-h { margin: 0; color: var(--text); font-size: var(--type-body); font-weight: var(--heading-weight); }
.tc-tg-step { margin: 0; color: var(--text-2); font-size: var(--type-control); line-height: 1.5; }
.tc-tg-open svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
/* The ticket: the command, its life and Copy, with the bar along its bottom edge. */
.tc-tg-cmd { position: relative; display: grid; gap: calc(14px * var(--pad-factor)); overflow: hidden; padding: calc(16px * var(--pad-factor)) calc(18px * var(--pad-factor)) calc(18px * var(--pad-factor));
             border-radius: var(--radius-card); background: var(--bg); color: var(--text); }
.tc-tg-cmd::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
                    box-shadow: var(--card-edge); pointer-events: none; }
.tc-tg-cmd code {
  display: block; color: var(--text);
  font: var(--type-body)/1.6 ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* raw: source code in the monospace face, a source-only face in every look (presets DESIGN 2.1) */
  overflow-wrap: anywhere; user-select: all;
}
.tc-tg-cmd-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--pad-factor)); }
.tc-tg-left { color: var(--text-3); font-size: var(--type-secondary); font-variant-numeric: tabular-nums; }
.tc-tg-gauge { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--surface-3); } /* raw: a hairline, bar or visually hidden box, not a density value */
.tc-tg-gauge i { position: absolute; inset: 0; background: var(--text-3);
                 transform: scaleX(var(--tc-tg-left, 1)); transform-origin: left; }
.tc-tg-wait[data-near] .tc-tg-gauge i { background: var(--warn); }
.tc-tg-copy {
  position: relative; z-index: 2; flex: none;
  height: calc(var(--control-h) * 28 / 30); padding: 0 calc(10px * var(--pad-factor)); border: 0; border-radius: var(--radius-row);
  background: var(--surface-2); box-shadow: var(--control-edge);
  color: var(--text-2); font: var(--control-weight) var(--type-meta)/1 var(--font-ui); cursor: pointer;
}
.tc-tg-copy:hover { background: var(--surface-3); color: var(--text); }
.tc-tg-copy:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
:root[data-theme="dark"] .tc-tg-cmd::after { box-shadow: inset 0 0 0 1px var(--line-strong); } /* raw: an edge with a different weight or colour than --card-edge */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tc-tg-cmd::after { box-shadow: inset 0 0 0 1px var(--line-strong); } /* raw: an edge with a different weight or colour than --card-edge */
}
.tc-tg-foot { padding-top: calc(4px * var(--pad-factor)); }

/* Shared colleagues (CHAT-010): the Telegram panel's rows and lines, one sharing per list item,
   items parted by a hairline rule. The offer list is name-left, Offer-right. */
.tc-sc-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tc-sc-item { display: grid; gap: calc(8px * var(--pad-factor)); padding: calc(14px * var(--pad-factor)) 0; border-top: 1px solid var(--line); }
.tc-sc-item:first-child { border-top: 0; padding-top: 0; }
/* Everything under a sharing's name lines up with the name, past the status dot (8 + 10 px). */
.tc-sc-item > :not(.tc-tg-row) { margin-left: 18px; }
.tc-sc-item > .tc-tg-meta { margin-top: -4px; }
.tc-sc-caprow { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--pad-factor)); max-width: 280px; }
.tc-sc-cap { width: 88px; font-variant-numeric: tabular-nums; }
.tc-sc-offer { display: grid; gap: calc(10px * var(--pad-factor)); padding-top: calc(14px * var(--pad-factor)); border-top: 1px solid var(--line); }
.tc-sc-pick { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--pad-factor)); padding: calc(8px * var(--pad-factor)) 0; }
.tc-sc-pick + .tc-sc-pick { border-top: 1px solid var(--line); }
.tc-sc-pick .tc-tg-row-text strong { font-size: var(--type-body); font-weight: var(--control-weight); color: var(--text); }
.tc-sc-pick .tc-tg-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-tg-link, .tc-tg-open { flex: 1 1 auto; }   /* the one way on fills the row; Unlink and Close keep their size */
  .tc-tg-copy::before { content: ''; position: absolute; inset: -8px; }   /* 44 px target, 28 px look */
}

/* Confirmation dialog extras: the message being deleted, and a refusal in two registers. */
.tc-dialog-quote {
  margin: -6px 0 4px; padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)); max-height: 7.5em; overflow: hidden;
  border-radius: calc(var(--radius-note) * 8 / 10); background: var(--surface-2); color: var(--text-2);
  font-size: var(--type-control); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tc-dialog-error { margin-top: 12px; }
.modal p.tc-dialog-error-line { margin: 0 0 4px; color: var(--bad); }

/* Error details (DESIGN 9 Error details): the plain line first, the detail behind a toggle. */
.err-details { flex-basis: 100%; }
.err-details > summary {
  display: inline-flex; align-items: center; gap: calc(4px * var(--pad-factor)); padding: calc(2px * var(--pad-factor)) calc(4px * var(--pad-factor)); border-radius: var(--radius-tag);
  color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight); list-style: none; cursor: pointer;
}
.err-details > summary::-webkit-details-marker { display: none; }
.err-details > summary:hover { background: var(--hover); color: var(--text); }
.err-details > summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.err-details > summary svg { width: 14px; height: 14px; stroke-width: var(--glyph-stroke); transition: transform var(--motion-fast) var(--ease); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.err-details[open] > summary svg { transform: rotate(90deg); }
.err-details .err-body {
  margin: 8px 0 0; padding-top: calc(8px * var(--pad-factor)); border-top: 1px solid var(--line);
  color: var(--text-2); font: var(--type-meta)/1.45 var(--font-ui); font-variant-numeric: tabular-nums;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
body > .kp-toast .err-details > summary { color: inherit; opacity: 0.78; }
body > .kp-toast .err-details > summary:hover { background: transparent; color: inherit; opacity: 1; text-decoration: underline; }
body > .kp-toast .err-details .err-body { border-top-color: color-mix(in srgb, currentColor 16%, transparent); color: inherit; opacity: 0.85; }
body > .kp-toast { display: grid; gap: calc(4px * var(--pad-factor)); width: max-content; max-width: min(460px, calc(100vw - 16px)); }
.tc-empty .err-details { margin-top: 12px; }
/* Under a colleague's failed job (DESK-220): part of the message, not an alert. The toggle's word
   lines up with the text above (its hover ground hangs into the margin), and the opened error is
   as wide as its words, so the recipe's rule reads as the message's own, not a divider. */
.tc-msg-details { width: fit-content; max-width: 100%; margin-top: 2px; }
.tc-msg-details > summary { margin-left: -4px; }
/* Phone: the toggle keeps its 44 px target, which reaches into the space around it rather than
   pushing the message's next line away. */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-msg-details > summary { margin: -6px 0 -6px -8px; }
}
/* A touch screen makes messages unselectable (a long press opens the action sheet), but the
   original error is there to be handed on: a long press on it selects it, with Copy. */
@media (hover: none) {
  .tc-msg .tc-msg-details .err-body { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }
}

/* Narrow window: the side panel slides over the room instead of taking a column. */
@media (max-width: 1100px) {
  .tc-workspace[data-side="open"] { grid-template-columns: var(--tc-sidebar-w) minmax(0, 1fr); }
  .tc-side {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 40;
    width: min(var(--tc-side-w), 100%); box-shadow: var(--shadow-pop);
  }
}
/* The panel's width (two columns, under 900 px): a thread covers the conversation beside the
   list, not half of each. One column: it is the screen, with a way back (phone rules below). */
@media (min-width: 640px) and (max-width: 899px) {
  .tc-side { left: var(--tc-sidebar-w); width: auto; box-shadow: none; }
  .tc-workspace[data-side="open"] .tc-pane { visibility: hidden; }
}
@media (max-width: 639px) {
  .tc-side { left: 0; width: 100%; border-left: 0; box-shadow: none; }
  .tc-workspace[data-side="open"] .tc-pane { visibility: hidden; }
  .tc-side-back { display: inline-flex; }
  .tc-side-close { display: none; }
}

/* Keyframes (transform/opacity only). tokens.css turns them off under reduced motion. */
@keyframes tc-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tc-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes tc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-cmd-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes tc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── The two sizes (CHAT-031) ──
   From 640 px the list and the conversation sit side by side: the desktop's chat panel
   (about 760 px) keeps the list in view while you reply, so hopping between people who are
   waiting is one click. Below 640 px (a phone, a narrow panel) they take turns on screen:
   the list, a conversation with a way back. The pane adapts to its own width, not the
   window's, so the same rules hold in the panel and in a wide window. */
.tc-pane { container-type: inline-size; container-name: pane; }
@media (max-width: 899px) { :root { --tc-sidebar-w: 232px; } }
@media (max-width: 639px) {
  main#app { padding: calc(18px * var(--pad-factor)) calc(16px * var(--pad-factor)) 0; }
  body[data-layout="workspace"] main#app { padding: 0; }
  .kp-rows { margin-left: -6px; margin-right: -6px; }
  .kp-row, .kp-rows > .lobby-note { padding-left: calc(6px * var(--pad-factor)); padding-right: calc(6px * var(--pad-factor)); }

  .tc-workspace, .tc-workspace[data-side="open"] { grid-template-columns: minmax(0, 1fr); }
  .tc-workspace[data-at="list"] .tc-pane { display: none; }
  .tc-workspace[data-at="list"] .tc-sidebar { --tc-list-bg: var(--surface); border-right: 0; }
  .tc-workspace[data-at="room"] .tc-sidebar { display: none; }
  .tc-ghost-btn.tc-back { display: inline-flex; }
  .tc-presence-stack { display: none; }
  .tc-pane-header { gap: calc(8px * var(--pad-factor)); padding: 0 calc(12px * var(--pad-factor)); }
  .kp-row .kp-chip { display: none; }
}
/* "Open in Chat" in a pane's header: only where the list (and its own link) is off screen. */
.tc-open-full-pane { display: none; }
@media (max-width: 639px) { html.kc-compact .tc-open-full-pane { display: inline-flex; } }
/* A narrow pane (the panel's conversation, about 500 px): the header keeps its icons and drops
   the words beside them, so the room's name always has the room it needs. */
@container pane (max-width: 640px) {
  .tc-pane-header .tc-btn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* raw: a hairline, bar or visually hidden box, not a density value */
  .tc-pane-header-right { gap: calc(2px * var(--pad-factor)); }
}
.tc-pane-title { flex: 1 1 auto; }

/* The list with no conversation open: what to do next, quietly. */
.tc-home { flex: 1; min-height: 0; overflow-y: auto; display: grid; place-items: center; padding: calc(24px * var(--pad-factor)) var(--tc-gutter); }
.tc-home-inner { max-width: 26rem; text-align: center; }
.tc-home-inner h2 { margin: 0 0 6px; color: var(--text); font-size: var(--type-dialog-title); font-weight: var(--title-weight); font-family: var(--font-display); font-feature-settings: var(--font-display-features); }
.tc-home-inner p { margin: 0; color: var(--text-2); font-size: var(--type-description); line-height: 1.5; text-wrap: pretty; font-family: var(--font-body, var(--font-ui)); } /* an empty state's sentence: prose, the look's body face (PLAT-1280) */

/* The list's foot: the one-time offer of alerts, and in compact the way to the full Chat app (the
   desktop already says who you are, and so does the header everywhere else). */
.tc-side-foot { flex: none; }
.tc-alerts-offer { padding: calc(10px * var(--pad-factor)) calc(14px * var(--pad-factor)) calc(8px * var(--pad-factor)); border-top: 1px solid var(--line); }
.tc-alerts-offer[hidden] { display: none; }
/* One column (a phone, the panel's phone sheet): the offer waits at the end of the list, so the
   rooms keep the screen. */
.tc-rooms .tc-alerts-offer { margin-top: 8px; }
.tc-offer-line { margin: 0 0 2px; color: var(--text-2); font-size: var(--type-secondary); line-height: 1.4; }
.tc-offer-actions { display: flex; gap: calc(2px * var(--pad-factor)); margin-left: -8px; }
.tc-ghost-btn.tc-offer-yes { color: var(--accent-text); font-weight: var(--heading-weight); }
.tc-ghost-btn.tc-offer-no { color: var(--text-3); font-weight: 500; } /* raw: weight 500, quieter than control text; no weight role holds it */
/* Compact: "Open in Chat" is an icon beside the list's "…" (its name is the aria-label). */
.tc-ghost-btn.tc-open-full-top { flex: none; text-decoration: none; }
.tc-open-full-top .tc-btn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* raw: a hairline, bar or visually hidden box, not a density value */

/* ── Phone (DESIGN.md s10): 44 px targets, 16 px input text, 16 px gutter ── */
/* ═══════════════ CHAT V2 round 2: GIFs, files, link previews, calls ═══════════════ */

/* A feature the server has not switched on draws no control (config routes, gap G10). */
body:not([data-on~="gifs"]) [data-need="gifs"],
body:not([data-on~="attach"]) [data-need="attach"],
body:not([data-on~="calls"]) [data-need="calls"],
body:not([data-on~="talk"]) [data-need="talk"] { display: none !important; }
body[data-off~="previews"] .tc-preview-slot { display: none; }

/* Composer: the attach and GIF buttons sit with the emoji button; the file input is unseen. */
.tc-file-input { display: none; }
.tc-gif-word { font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: 700; letter-spacing: 0.02em; line-height: 1; } /* raw: weight 700, heavier than a heading; no weight role holds it */
.tc-gif-btn { width: auto; min-width: 30px; padding: 0 calc(6px * var(--pad-factor)); }

/* Files waiting to send: a row of chips above the text, each with its own progress. */
.tc-tray { display: flex; flex-wrap: wrap; gap: calc(6px * var(--pad-factor)); flex: 1 0 100%; order: -2; padding: calc(8px * var(--pad-factor)) calc(2px * var(--pad-factor)) calc(2px * var(--pad-factor)); }
.tc-up {
  position: relative; display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); min-width: 0;
  width: 232px; max-width: 100%; min-height: calc(var(--list-row-h) * 48 / 36); padding: calc(6px * var(--pad-factor)) calc(4px * var(--pad-factor)) calc(6px * var(--pad-factor)) calc(6px * var(--pad-factor)); overflow: hidden;
  border-radius: var(--radius-note); background: var(--surface-2); box-shadow: var(--card-edge);
}
.tc-up-thumb {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; overflow: hidden; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-radius: var(--radius-row); background: var(--surface-3); color: var(--text-2);
}
.tc-up-thumb img { width: 100%; height: 100%; object-fit: cover; } /* raw: panel geometry, not a density value */
.tc-up-thumb svg { width: 18px; height: 18px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-up-text { display: grid; flex: 1; min-width: 0; gap: calc(1px * var(--pad-factor)); }
.tc-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-control); font-weight: var(--control-weight); color: var(--text); }
.tc-up-meta {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--type-meta); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.tc-up[data-state="error"] { box-shadow: inset 0 0 0 1px var(--bad); } /* raw: an edge with a different weight or colour than --card-edge */
.tc-up[data-state="error"] .tc-up-meta { color: var(--bad); white-space: normal; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tc-up-x {
  display: grid; place-items: center; flex: none; width: 28px; height: calc(var(--control-h) * 28 / 30); padding: 0;
  border: 0; border-radius: var(--radius-row); background: transparent; color: var(--text-3); cursor: pointer;
}
.tc-up-x:hover { background: var(--hover); color: var(--text); }
.tc-up-x:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.tc-up-x svg { width: 14px; height: 14px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-up-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); } /* raw: a hairline, bar or visually hidden box, not a density value */
/* The fill grows by transform, not width, so progress never re-lays-out the tray. */
.tc-up-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s var(--ease); } /* raw: panel geometry, not a density value; no motion token holds it; motion is not a preset dimension (presets D7) */
.tc-up[data-state="done"] .tc-up-bar, .tc-up[data-state="error"] .tc-up-bar { display: none; }

/* Drop zone: the whole room (or thread) says where the files will go. */
/* .tc-side sets its own position (relative in a column, absolute over the room when the window
   is narrow). Listing it here too used to cancel the narrow-window rule, which pushed the panel
   into a second grid row under the room on phones and tablets. */
.tc-pane { position: relative; }
.tc-drop {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: calc(16px * var(--pad-factor));
  background: rgb(8 10 16 / 0.36); animation: tc-fade var(--motion-fast) var(--ease); pointer-events: none; /* raw: the dim behind a dialog, no token holds it */
}
.tc-drop-card {
  display: grid; justify-items: center; gap: calc(6px * var(--pad-factor)); width: min(360px, 100%); padding: calc(28px * var(--pad-factor)) calc(24px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-win), inset 0 0 0 2px var(--accent-ring); /* raw: focus or drop-target ring, no elevation token holds it */
  text-align: center; color: var(--text-2); font-size: var(--type-control);
}
.tc-drop-card strong { color: var(--text); font-size: var(--type-subheading); font-weight: var(--heading-weight); }
.tc-drop-ico {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-radius: var(--radius-note); background: var(--accent-soft); color: var(--accent-text);
}
.tc-drop-ico svg { width: 22px; height: 22px; } /* raw: size of an icon, avatar, dot or picture, not a density value */

/* Attachments: one column no wider than the message: an item's own width (a 360 px image, a 340 px file card) may not
   stretch it, or the image runs off a phone screen and the message list scrolls sideways. */
.tc-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(6px * var(--pad-factor)); margin: 6px 0 2px; justify-items: start; }
.tc-files > * { min-width: 0; max-width: 100%; }
/* Images in a message: one keeps its own shape; several make a grid of squares. */
.tc-images { display: grid; grid-template-columns: repeat(auto-fill, 148px); gap: calc(6px * var(--pad-factor)); max-width: 460px; width: 100%; }
.tc-images.is-single { display: block; }
.tc-image {
  position: relative; display: block; width: 148px; aspect-ratio: 1 / 1; max-width: 100%; padding: 0;
  overflow: hidden; border: 0; border-radius: var(--radius-note); cursor: zoom-in;
  background: var(--surface-3); box-shadow: var(--card-edge);
}
.tc-image img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s var(--ease); } /* raw: panel geometry, not a density value; no motion token holds it; motion is not a preset dimension (presets D7) */
.tc-image.is-ready img { opacity: 1; }
.tc-image.is-single, .tc-images.is-single .tc-image { max-width: 100%; }
.tc-image:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.tc-image.is-failed { cursor: default; }
.tc-image-failed {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(4px * var(--pad-factor));
  color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight);
}
.tc-image-failed svg { width: 20px; height: 20px; } /* raw: size of an icon, avatar, dot or picture, not a density value */

/* File card: glyph, name, type and size, and the download mark. The whole card downloads. */
.tc-file {
  display: flex; align-items: center; gap: calc(10px * var(--pad-factor)); width: 340px; max-width: 100%; min-height: 56px; /* raw: panel geometry, not a density value */
  padding: calc(8px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(8px * var(--pad-factor)); border: 0; border-radius: var(--radius-card); cursor: pointer; text-align: left;
  background: var(--surface); box-shadow: var(--card-edge); color: var(--text); font: inherit;
}
.tc-file:hover { background: var(--hover); }
.tc-file:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.tc-file-ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-radius: calc(var(--radius-card) * 8 / 12); background: var(--surface-3); color: var(--text-2);
}
.tc-file-ico svg { width: 20px; height: 20px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-file-text { display: grid; flex: 1; min-width: 0; gap: calc(2px * var(--pad-factor)); }
.tc-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-description); font-weight: var(--control-weight); }
.tc-file-meta { color: var(--text-3); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.tc-file-dl { display: grid; place-items: center; flex: none; width: 32px; height: calc(var(--control-h) * 32 / 30); border-radius: var(--radius-icon-button); color: var(--text-2); }
.tc-file-dl svg { width: 18px; height: 18px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-file:hover .tc-file-dl { color: var(--text); }
.tc-file.is-busy { cursor: progress; }
.tc-file.is-busy .tc-file-dl { animation: tc-pulse 1s var(--ease) infinite alternate; } /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
@keyframes tc-pulse { to { opacity: 0.35; } }

/* Link preview: a card inside the page (DESIGN 9), text on the left, picture on the right. */
.tc-preview-slot:empty { display: none; }
.tc-preview {
  display: flex; align-items: flex-start; gap: calc(12px * var(--pad-factor)); width: 440px; max-width: 100%; margin: 6px 0 2px;
  padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--card-edge);
  color: var(--text); text-decoration: none;
}
a.tc-preview:hover { background: var(--hover); text-decoration: none; }
a.tc-preview:hover .tc-preview-title { text-decoration: underline; text-underline-offset: 2px; }
.tc-preview:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.tc-preview-text { display: grid; flex: 1; min-width: 0; gap: calc(2px * var(--pad-factor)); }
.tc-preview-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight); }
.tc-preview-title {
  color: var(--accent-text); font-size: var(--type-body); font-weight: var(--heading-weight); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-preview-desc {
  color: var(--text-2); font-size: var(--type-control); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-preview-thumb { flex: none; width: 120px; height: 68px; overflow: hidden; border-radius: calc(var(--radius-card) * 8 / 12); background: var(--surface-3); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-preview-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } /* raw: panel geometry, not a density value */

/* Call card: live calls lead with the soft accent and a Join button; ended calls go quiet. */
.tc-call {
  display: flex; align-items: center; gap: calc(12px * var(--pad-factor)); width: 440px; max-width: 100%; margin: 4px 0 2px;
  padding: calc(12px * var(--pad-factor)); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--card-edge);
}
.tc-call-ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-note); /* raw: size of an icon, avatar, dot or picture, not a density value */
  background: var(--surface-3); color: var(--text-2);
}
.tc-call-ico svg { width: 20px; height: 20px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-call.is-live .tc-call-ico { background: var(--accent-soft); color: var(--accent-text); }
.tc-call-text { display: grid; flex: 1; min-width: 0; gap: calc(2px * var(--pad-factor)); }
.tc-call-title { font-size: var(--type-body); font-weight: var(--heading-weight); color: var(--text); }
.tc-call-meta, .tc-call-people { color: var(--text-2); font-size: var(--type-secondary); font-variant-numeric: tabular-nums; }
.tc-call-people { color: var(--text-3); }
.tc-call-live { display: inline-flex; align-items: center; gap: calc(6px * var(--pad-factor)); color: var(--text); font-weight: var(--heading-weight); }
.tc-call-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); /* raw: size of an icon, avatar, dot or picture, not a density value */
  box-shadow: 0 0 0 3px var(--ok-soft); /* raw: halo around a dot or avatar, no elevation token holds it */
}
.tc-call-join { flex: none; }
.tc-call.is-ended .tc-call-title { color: var(--text-2); }

/* Minutes card: the summary, a read-only to-do list, and a way to the full minutes. */
.tc-minutes {
  display: grid; gap: calc(8px * var(--pad-factor)); width: 520px; max-width: 100%; margin: 4px 0 2px; padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor)) calc(14px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--card-edge);
}
.tc-minutes-head { display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); }
.tc-minutes-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: calc(var(--radius-card) * 8 / 12); background: var(--surface-3); color: var(--text-2); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-minutes-ico svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-minutes-title { font-size: var(--type-body); font-weight: var(--heading-weight); }
.tc-minutes-summary { color: var(--text); }
.tc-minutes-label { margin: 4px 0 0; color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight); }
.tc-minutes-empty { margin: 0; color: var(--text-3); font-size: var(--type-control); }
.tc-todos { display: grid; gap: calc(6px * var(--pad-factor)); margin: 0; padding: 0; list-style: none; }
.tc-todo { display: flex; align-items: flex-start; gap: calc(8px * var(--pad-factor)); font-size: var(--type-description); line-height: 1.45; color: var(--text); }
.tc-todo-box {
  flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: calc(var(--radius-tag) * 4 / 6); /* raw: size of an icon, avatar, dot or picture, not a density value */
  box-shadow: inset 0 0 0 1.5px var(--line-strong); /* raw: an edge with a different weight or colour than --card-edge */
}
.tc-todo-owner { color: var(--text-3); }
.tc-minutes-foot { display: flex; padding-top: calc(2px * var(--pad-factor)); }
.tc-minutes-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--pad-factor)) calc(8px * var(--pad-factor)); margin: 2px 0;
  color: var(--text-2); font-size: var(--type-control);
}
.tc-minutes-notice svg { width: 16px; height: 16px; flex: none; color: var(--text-3); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-minutes-notice a { color: var(--accent-text); font-weight: var(--control-weight); }

/* The header Call button: a live call in the room turns it into "Join call". */
/* The word stays full-strength text (accent text on the soft ground is 4.36:1 in light, measured). */
.tc-call-btn.is-live { background: var(--accent-soft); color: var(--text); }
.tc-call-btn.is-live svg { color: var(--accent-text); }
.tc-call-btn[aria-busy="true"] { cursor: progress; }

/* GIF picker: the emoji picker's frame, a search field, two columns of moving pictures. */
.kc-gif {
  position: fixed; z-index: 100; display: flex; flex-direction: column;
  width: 360px; height: 440px; overflow: hidden; /* raw: panel geometry, not a density value */
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-pop);
  animation: tc-pop-in var(--motion-enter) var(--ease-out);
}
.kc-gif:focus { outline: none; }
.kc-gif-search { padding-right: calc(4px * var(--pad-factor)); }
.kc-gif-close {
  display: none; place-items: center; flex: none; width: 28px; height: calc(var(--control-h) * 28 / 30); padding: 0;
  border: 0; border-radius: var(--radius-row); background: transparent; color: var(--text-3); cursor: pointer;
}
.kc-gif-close svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.kc-gif-head { padding: calc(2px * var(--pad-factor)) calc(12px * var(--pad-factor)) calc(6px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-gif-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(10px * var(--pad-factor)) calc(10px * var(--pad-factor)); }
.kc-gif-cols { display: flex; gap: calc(6px * var(--pad-factor)); align-items: flex-start; }
.kc-gif-col { display: grid; gap: calc(6px * var(--pad-factor)); flex: 1; min-width: 0; }
.kc-gif-tile {
  display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: calc(var(--radius-card) * 8 / 12);
  background: var(--surface-3); cursor: pointer;
}
.kc-gif-tile img { display: block; width: 100%; height: auto; }
.kc-gif-tile:hover { box-shadow: 0 0 0 2px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.kc-gif-tile:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.kc-gif-skel { border-radius: calc(var(--radius-card) * 8 / 12); background: var(--surface-3); animation: tc-pulse 0.9s var(--ease) infinite alternate; } /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
.kc-gif-status { padding: calc(12px * var(--pad-factor)) calc(4px * var(--pad-factor)) calc(4px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-secondary); text-align: center; }
.kc-gif-status:empty { display: none; }
.kc-gif-msg { margin: 8px 0 10px; color: var(--text-2); font-size: var(--type-control); }
.kc-gif-retry { margin: 0 auto 6px; }
.kc-gif-status .err-details { text-align: left; }
.kc-gif-sentinel { height: 1px; } /* raw: a hairline, bar or visually hidden box, not a density value */
.kc-gif-foot {
  display: flex; align-items: center; justify-content: flex-end; min-height: 32px; padding: 0 calc(12px * var(--pad-factor)); /* raw: panel geometry, not a density value */
  border-top: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); font-size: var(--type-meta);
}
.kc-gif.is-sheet {
  left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: 520px; height: min(78vh, 560px); margin: 0 auto; /* raw: panel geometry, not a density value */
  animation: tc-sheet-in 0.2s var(--ease-out); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.kc-gif.is-sheet .kc-gif-close { display: grid; width: 44px; height: 44px; margin-right: -4px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */

/* Lightbox: the picture as large as the window allows, its name and a download beside it. */
body.kc-lb-open { overflow: hidden; }
.kc-lb {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: var(--bg); animation: tc-fade 0.14s var(--ease); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.kc-lb:focus { outline: none; }
.kc-lb-bar {
  display: flex; align-items: center; gap: calc(6px * var(--pad-factor)); flex: none; min-height: 52px; padding: 0 calc(10px * var(--pad-factor)) 0 calc(16px * var(--pad-factor)); /* raw: the header bar, the same height over the list and the room; not a density value */
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.kc-lb-title { display: grid; flex: 1; min-width: 0; }
.kc-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-body); font-weight: var(--heading-weight); color: var(--text); }
.kc-lb-meta { color: var(--text-3); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.kc-lb-btn, .kc-lb-nav {
  display: grid; place-items: center; width: 36px; height: calc(var(--control-h) * 36 / 30); padding: 0; flex: none;
  border: 0; border-radius: var(--radius-icon-button); background: transparent; color: var(--text-2); cursor: pointer;
}
.kc-lb-btn:hover { background: var(--hover); color: var(--text); }
.kc-lb-btn svg { width: 18px; height: 18px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.kc-lb-btn:focus-visible, .kc-lb-nav:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.kc-lb-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: calc(24px * var(--pad-factor)) calc(64px * var(--pad-factor)); }
.kc-lb-img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: calc(var(--radius-card) * 8 / 12); box-shadow: var(--shadow-pop); background: var(--surface-3);
}
.kc-lb-img.is-loading { min-width: 200px; min-height: 150px; animation: tc-pulse 0.9s var(--ease) infinite alternate; } /* raw: panel geometry, not a density value; no motion token holds it; motion is not a preset dimension (presets D7) */
.kc-lb-note { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; text-align: center; color: var(--text-2); font-size: var(--type-control); }
.kc-lb-note:empty { display: none; }
.kc-lb-nav {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: 26px; transform: translateY(-50%); /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  border-radius: var(--radius-note); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop);
}
.kc-lb-nav:hover { background: var(--surface-2); }
.kc-lb-nav svg { width: 20px; height: 20px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.kc-lb-prev { left: 12px; }
.kc-lb-next { right: 12px; }

@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-gif-btn { min-width: 44px; }
  /* The room name keeps the header; the Call button says what it does in its label. */
  .tc-call-btn .tc-btn-word { display: none; }
  .tc-call-btn { width: 44px; justify-content: center; padding: 0; }
  .tc-up { width: 100%; min-height: 52px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-up-x { width: 44px; height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-image { width: 100%; }
  .tc-images.is-single .tc-image { width: auto; }
  .tc-file { width: 100%; min-height: 60px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-preview { width: 100%; }
  .tc-preview-thumb { width: 84px; height: 48px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-call { flex-wrap: wrap; width: 100%; }
  .tc-call-join { flex: 1 0 100%; min-height: 44px; justify-content: center; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-minutes { width: 100%; }
  .tc-minutes-foot .kp-btn { flex: 1; min-height: 44px; justify-content: center; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-minutes-notice a { display: inline-flex; align-items: center; min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .kc-gif-tile { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .kc-gif-search input { font-size: 16px; } /* raw: phone input at 16px so iOS does not zoom, explicit in every preset (presets DESIGN 2.1) */
  .kc-lb-bar { min-height: 56px; padding: 0 calc(4px * var(--pad-factor)) 0 calc(12px * var(--pad-factor)); } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .kc-lb-btn { width: 44px; height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .kc-lb-stage { padding: calc(12px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(72px * var(--pad-factor)); }
  .kc-lb-nav { top: auto; bottom: 14px; margin: 0; transform: none; }
  .kc-lb-prev { left: calc(50% - 56px); }
  .kc-lb-next { right: calc(50% - 56px); }
}

@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  :root { --tc-gutter: 16px; }
  .tc-pane-header { height: 54px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .kp-btn, .tc-send, .tc-jump { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-ghost-btn, .tc-act { min-width: 44px; min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-room-link, .tc-cmd-item, .tc-mention-row, .tc-more { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .kp-row { min-height: 52px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .kp-input, .tc-approval-note-input, .modal input, .modal select, #join-body input, #join-body select { min-height: 44px; font-size: 16px; } /* raw: phone input at 16px so iOS does not zoom, explicit in every preset (presets DESIGN 2.1); phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-composer textarea, .modal textarea, .tc-cmd-search input { font-size: 16px; } /* raw: phone input at 16px so iOS does not zoom, explicit in every preset (presets DESIGN 2.1) */
  .tc-reaction { min-height: 44px; min-width: 44px; justify-content: center; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  /* The header keeps the room's name, Call and "…"; the faces yield (the room's people are in
     "…" too) so nothing runs past the screen edge. */
  .tc-presence { display: none; }
  .tc-pane-header-right { gap: calc(4px * var(--pad-factor)); }
  /* "New room" keeps a 44 px target, drawn over the heading's padding so the heading stays one
     line tall and rooms are not pushed off a phone's screen (CHAT-033). */
  .tc-side-all { display: inline-flex; align-items: center; min-height: 44px; margin: -14px -6px -14px 0; padding: 0 calc(6px * var(--pad-factor)); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-side-actions { gap: calc(4px * var(--pad-factor)); }
  .tc-side-actions .tc-side-all:not(:last-child) { margin-right: 0; }

  /* Composer: the formatting toolbar folds behind "Aa" and opens as its own row. */
  .tc-fmt { width: 44px; height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-fmt-toggle { display: grid; }
  .tc-fmtbar { display: none; }
  .tc-composer-wrap[data-fmt="open"] .tc-fmtbar {
    display: flex; order: -1; flex: 1 0 100%; justify-content: space-between;
    padding-top: calc(4px * var(--pad-factor)); border-bottom: 1px solid var(--line); overflow-x: auto;
  }
  .tc-send { min-width: 44px; height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-also { min-height: 44px; margin-top: 2px; font-size: var(--type-body); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-edit-input { font-size: 16px; } /* raw: phone input at 16px so iOS does not zoom, explicit in every preset (presets DESIGN 2.1) */
  .tc-thread-sum { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-thread-context { min-height: 44px; align-items: center; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .menu-item { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */

  /* The side panel fills the chat area, with a back button. The room stays laid out underneath
     (so Back returns to the same scroll position) but is hidden from sight, touch and screen
     readers, so only one composer is ever on screen. */
  .tc-side { width: 100%; border-left: 0; box-shadow: none; }
  .tc-workspace[data-side="open"] .tc-pane { visibility: hidden; }
  .tc-side-head { height: 54px; padding: 0 calc(12px * var(--pad-factor)) 0 calc(4px * var(--pad-factor)); } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-side-back { display: inline-flex; }
  .tc-side-close { display: none; }

  /* Emoji picker as a sheet: 44 px cells and tabs, 16 px search text. */
  .kc-emoji-search { height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .kc-emoji-search input { font-size: 16px; } /* raw: the size of an emoji glyph, not a type role */
  .kc-emoji-tab { height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .kc-emoji-cell { height: 44px; font-size: 24px; } /* raw: the size of an emoji glyph, not a type role; phone target, 44px floor in every preset (presets DESIGN 2.1) */
}

/* ═══════════════ CUSTOM EMOJI (DESIGN 2.18, D36) ═══════════════ */

/* In text: the image sits on the line like a glyph, about one and a third lines of type. */
.tc-cemoji {
  display: inline-block; height: 1.35em; width: auto; max-width: 4em; /* raw: relative to the text it sits in */
  vertical-align: -0.3em; object-fit: contain;
}
.tc-cemoji:not([src]) { width: 1.35em; }
/* A message that is only emoji (custom and standard) is shown large. */
.md-body.md-jumbo { font-size: 28px; line-height: 1.3; } /* raw: the size of an emoji glyph, not a type role */
.md-body.md-jumbo .tc-cemoji { height: 1.2em; vertical-align: -0.2em; } /* raw: relative to the text it sits in */
.md-body.md-jumbo .tc-edited { vertical-align: middle; }
/* Chips, the who-reacted popover, the quick row and ":" suggestions. */
.tc-reaction-emoji .tc-cemoji { height: 18px; vertical-align: middle; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-reaction-emoji.is-text { font-size: 12.5px; font-weight: var(--control-weight); } /* raw: the size of an emoji glyph, not a type role */
.tc-tip-emoji .tc-cemoji { height: 28px; vertical-align: middle; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-sheet-emoji .tc-cemoji { height: 26px; vertical-align: middle; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-suggest-emoji .tc-cemoji { height: 20px; vertical-align: middle; } /* raw: size of an icon, avatar, dot or picture, not a density value */
/* The picker's cells and its preview line. */
.kc-emoji-img { display: block; width: 26px; height: 26px; object-fit: contain; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.kc-emoji-foot-big .kc-emoji-img { width: 28px; height: 28px; } /* raw: size of an icon, avatar, dot or picture, not a density value */


/* The manage screen: a document view like the lobby. */
.ce-back {
  display: inline-flex; align-items: center; gap: calc(6px * var(--pad-factor)); margin: 0 0 10px;
  color: var(--text-3); font-size: var(--type-secondary); font-weight: var(--control-weight); text-decoration: none;
}
.ce-back:hover { color: var(--text); text-decoration: none; }
.ce-back svg { width: 14px; height: 14px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.ce-intro { margin: 14px 0 0; max-width: 60ch; color: var(--text-2); font-size: var(--type-description); line-height: 1.5; }
.ce-token { color: var(--text); font-weight: var(--control-weight); }
.ce-add { max-width: none; }
.ce-add h2 { margin-bottom: 12px; }
.ce-full { margin: 0 0 12px; color: var(--bad); font-size: var(--type-control); }

.ce-drop {
  position: relative; display: flex; align-items: center; gap: calc(14px * var(--pad-factor)); margin-bottom: 14px; padding: calc(12px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface-2); box-shadow: var(--card-edge);
  cursor: pointer; transition: box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.ce-drop:hover { background: var(--hover); }
.ce-drop:focus-within { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 3px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.ce-drop.is-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-text); } /* raw: focus or drop-target ring, no elevation token holds it */
.ce-drop.is-off { cursor: default; opacity: 0.55; }
.ce-well {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; /* raw: panel geometry, not a density value */
  border-radius: var(--radius-note); background: var(--surface); box-shadow: var(--card-edge); color: var(--text-3);
}
.ce-well svg { width: 22px; height: 22px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.ce-well-img { max-width: 44px; max-height: 44px; object-fit: contain; }
.ce-drop-text { display: grid; gap: calc(3px * var(--pad-factor)); min-width: 0; }
.ce-drop-title { color: var(--text); font-size: var(--type-description); font-weight: var(--control-weight); overflow-wrap: anywhere; }
.ce-drop-sub { color: var(--text-3); font-weight: 400; } /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
.ce-drop-choose { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.ce-drop-rule { color: var(--text-3); font-size: var(--type-secondary); }

.ce-name-field { max-width: 420px; }
.ce-name[aria-invalid="true"] { color: var(--bad); }
.ce-hint { margin: 0; color: var(--text-3); font-size: var(--type-secondary); }
.ce-hint.is-bad { color: var(--bad); }
.ce-actions { display: flex; gap: calc(8px * var(--pad-factor)); margin-top: 4px; }

.ce-list { margin-top: 22px; }
.ce-filter { max-width: 320px; margin-bottom: 6px; }
.ce-row { gap: calc(12px * var(--pad-factor)); }
.ce-img {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border-radius: calc(var(--radius-card) * 8 / 12); background: var(--surface-2); box-shadow: var(--card-edge);
}
.ce-img-el { max-width: 28px; max-height: 28px; object-fit: contain; }
.ce-row-body { display: grid; gap: calc(1px * var(--pad-factor)); min-width: 0; }
.ce-row-meta { color: var(--text-3); font-size: var(--type-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-remove { flex: none; }
.ce-none { margin: 12px 0 0; color: var(--text-3); font-size: var(--type-control); }

@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .ce-back { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .ce-drop { padding: calc(12px * var(--pad-factor)); gap: calc(12px * var(--pad-factor)); }
  .ce-name-field { max-width: none; }
  .ce-actions .kp-btn { flex: 1; }
  .ce-filter { max-width: none; }
  .ce-row { min-height: 60px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .kc-emoji-img { width: 28px; height: 28px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
}

/* ═══════════════ CHAT-035: the profile card, and a phone room framed by its own header ═══════════════ */

/* Who someone is and how to reach them: a popover beside the name or face (Popover recipe),
   a sheet on a phone (DESIGN 10). */
.tc-profile {
  position: fixed; z-index: 100; display: grid; gap: calc(14px * var(--pad-factor)); width: 300px; max-width: calc(100vw - 16px); padding: calc(16px * var(--pad-factor));
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-pop); outline: none;
  animation: tc-pop-in var(--motion-enter) var(--ease-out);
}
.tc-profile.is-sheet {
  left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 520px; margin: 0 auto;
  animation: tc-sheet-in 0.2s var(--ease-out); /* raw: no motion token holds it; motion is not a preset dimension (presets D7) */
}
.tc-profile-head { display: flex; align-items: center; gap: calc(12px * var(--pad-factor)); min-width: 0; }
.tc-profile-text { display: grid; gap: calc(2px * var(--pad-factor)); min-width: 0; }
.tc-profile-name { margin: 0; color: var(--text); font-size: var(--type-subheading); font-weight: var(--heading-weight); line-height: 1.3; overflow-wrap: anywhere; }
.tc-profile-kind, .tc-profile-email { margin: 0; color: var(--text-2); font-size: var(--type-control); line-height: 1.35; overflow-wrap: anywhere; }
.tc-profile-status { margin: 0; color: var(--text-2); font-size: var(--type-control); line-height: 1.35; }
.tc-profile-status[data-here="true"] { display: flex; align-items: center; gap: calc(6px * var(--pad-factor)); color: var(--text); }
.tc-profile-status[data-here="true"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-profile-actions { display: flex; gap: calc(8px * var(--pad-factor)); }
.tc-profile-actions .kp-btn { flex: 1; }
.tc-profile-actions .kp-btn svg { width: 15px; height: 15px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-profile-actions .kp-btn { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
}

/* A phone (one column) inside a conversation: only the room's header and the composer frame it.
   The top bar and the Concierge's launcher step aside there, as they do in the desktop's panel;
   the list keeps them (the old header, which held the Concierge's button, did the same).
   People keeps the top bar (PLAT-629): it is the Directory app's own page, opened from its
   desktop tile, so on a phone it must still say which app this is. */
@media (max-width: 639px) {
  body[data-view="room"] #kapable-header,
  body[data-view="browse"] #kapable-header,
  body:is([data-view="room"], [data-view="browse"], [data-view="people"]) :is([data-kpc-launcher], .kp-chat-toggle) { display: none !important; }
}

/* ═══════════════ CHAT-034: the list ═══════════════ */

/* A conversation row: the face (with a presence dot for a person or a colleague), the name and
   the time of the last message, and one line under them: the last message, or what a colleague
   is doing right now. Plain rows on the rail's ground; selection is a ground colour. */
.tc-room-link.tc-conv { align-items: center; gap: calc(10px * var(--pad-factor)); min-height: calc(var(--list-row-h) * 48 / 36); padding: calc(6px * var(--pad-factor)) calc(8px * var(--pad-factor)); -webkit-touch-callout: none; }
.tc-room-link.tc-channel { min-height: var(--list-row-h); padding: 0 calc(8px * var(--pad-factor)); }
.tc-conv-face { position: relative; display: inline-flex; flex: none; }
/* Presence (CHAT-033 polish): an 8 px dot on the face's bottom-right edge, cut out of the face by a
   2 px ring in the list's ground. Online is --ok; away is the quiet idle grey, filled, because a
   hollow ring beside the initials read as a stray letter ("PH o"). */
.tc-dot {
  position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; /* raw: size of an icon, avatar, dot or picture, not a density value */
  background: var(--light-idle); box-shadow: 0 0 0 2px var(--tc-list-bg); /* raw: halo around a dot or avatar, no elevation token holds it */
}
.tc-dot[data-here="true"] { background: var(--ok); }
.tc-room-link[aria-current="page"] .tc-dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-text) 12%, var(--tc-list-bg)); } /* raw: focus or drop-target ring, no elevation token holds it */
.tc-conv-main { display: grid; flex: 1; min-width: 0; gap: calc(1px * var(--pad-factor)); }
.tc-conv-top { display: flex; align-items: baseline; gap: calc(8px * var(--pad-factor)); min-width: 0; }
.tc-conv-top .tc-room-name { flex: 1; }
.tc-conv-time { flex: none; color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: 500; font-variant-numeric: tabular-nums; } /* raw: weight 500, quieter than control text; no weight role holds it */
.tc-conv-bottom { display: flex; align-items: baseline; gap: calc(8px * var(--pad-factor)); min-width: 0; }
.tc-conv-sub {
  flex: 1; min-width: 0;
  color: var(--text-2); font-size: var(--type-secondary); font-weight: 400; line-height: 1.3; /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body, var(--font-ui)); /* the row's second line, the last message: the look's body face (PLAT-1280) */
}
.tc-conv-bottom .tc-room-badge { margin-left: auto; }
.tc-conv-sub:empty { display: none; }
/* A colleague at work: the same size as a preview, in the accent's text colour, so the list reads
   as a glance at the team. */
.tc-conv-sub.is-work { color: var(--accent-text); font-weight: var(--control-weight); }
.tc-room-link.tc-unread .tc-conv-sub:not(.is-work) { color: var(--text); }
.tc-ghost-btn.tc-list-more { flex: none; }
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  /* Two lines of 15 and 13.5 px with 6 px above and below: 52 px. The list on an owner's phone
     then shows its Rooms heading and two rooms on the first screen (CHAT-033). */
  .tc-room-link.tc-conv { min-height: 52px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-room-link.tc-channel { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-conv-sub { font-size: var(--type-description); }
  .tc-conv-time { font-size: var(--type-secondary); }
}
/* "Message someone new": a quiet row under the conversations, its plus where a face would be. */
.tc-more.tc-new-msg { gap: calc(10px * var(--pad-factor)); color: var(--text-3); font-weight: 500; } /* raw: weight 500, quieter than control text; no weight role holds it */
.tc-more.tc-new-msg:hover { color: var(--text); }
.tc-new-msg-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.tc-new-msg-ico svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
/* On a phone inside a room the composer is at the bottom: a toast drops in under the room's header
   instead of covering it (critique 2026-10-03). */
@media (max-width: 639px) {
  body[data-view="room"] > .kp-toast { top: calc(62px + env(safe-area-inset-top, 0px)); bottom: auto; }
  /* Elsewhere on a phone the Concierge's launcher sits bottom left: a toast rises clear of it
     instead of landing on top of it (seen on the WhatsApp page, CHAT-081). */
  html.kc-concierge body:not([data-view="room"]):not([data-view="browse"]):not([data-view="people"]) > .kp-toast { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════ CHAT-039: open rooms ═══════════════ */

/* A labelled choice inside a menu ("Who can join"): the menu heading (DESIGN 9 Popover and menu,
   .menu-h) and items whose check sits where an icon would, in the accent. */
.menu-h { padding: calc(8px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(4px * var(--pad-factor)); color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: var(--control-weight); }
.menu-check { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
.menu-item .menu-check svg { color: var(--accent); }
.tc-sheet .menu-h { padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)) calc(4px * var(--pad-factor)); font-size: var(--type-control); }
.tc-sheet .menu-check { width: 20px; height: 20px; } /* raw: size of an icon, avatar, dot or picture, not a density value */

/* "Who can join" in New room: the Consent form's check rows (DESIGN 9, .check), with radios. The
   whole row is the target; the hint under each choice says what it means. */
.tc-choice { display: grid; gap: calc(2px * var(--pad-factor)); min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.tc-choice legend { margin: 0 0 6px; padding: 0; color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight); }
.tc-check {
  display: flex; align-items: flex-start; gap: calc(10px * var(--pad-factor)); margin: 0 -8px; padding: calc(7px * var(--pad-factor)) calc(8px * var(--pad-factor));
  border-radius: calc(var(--radius-row) * 8 / 7); cursor: pointer;
}
@media (hover: hover) { .tc-check:hover { background: var(--hover); } }
.modal .tc-check input {
  flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border: 0; background: none; box-shadow: none; accent-color: var(--accent); cursor: pointer;
}
.modal .tc-check input:focus { box-shadow: none; }
.modal .tc-check input:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.tc-check-text { display: grid; gap: calc(1px * var(--pad-factor)); min-width: 0; }
.tc-check-title { color: var(--text); font-size: var(--type-description); font-weight: var(--control-weight); line-height: 1.45; }
.tc-check-hint { color: var(--text-3); font-size: var(--type-secondary); line-height: 1.45; }

/* Browse rooms: the org's open rooms you are not in, as plain rows in a reading column with a
   line between them (List row, D7: never a card per row). Join is the neutral button. */
.tc-browse { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.tc-browse-inner { max-width: calc(720px + 2 * var(--tc-gutter)); padding: calc(6px * var(--pad-factor)) var(--tc-gutter) calc(24px * var(--pad-factor)); }
.tc-browse-list { margin: 0; padding: 0; list-style: none; }
.tc-browse-row {
  display: flex; align-items: center; gap: calc(12px * var(--pad-factor)); padding: calc(12px * var(--pad-factor)) 0;
  border-bottom: 1px solid var(--line);
}
.tc-browse-row:last-child { border-bottom: 0; }
.tc-browse-main { display: grid; flex: 1; gap: calc(2px * var(--pad-factor)); min-width: 0; }
.tc-browse-name {
  color: var(--text); font-size: var(--type-body); line-height: 1.35;
  font-family: var(--font-body, var(--font-ui)); font-weight: var(--row-title-weight, var(--control-weight, 600)); /* a room row's title: the look's body face and row-title weight (PLAT-1280) */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-browse-topic {
  color: var(--text-2); font-size: var(--type-control); line-height: 1.4; overflow-wrap: anywhere;
  font-family: var(--font-body, var(--font-ui)); /* the row's second line, the room's topic: the look's body face (PLAT-1280) */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-browse-meta {
  display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); min-width: 0; margin-top: 2px;
  color: var(--text-3); font-size: var(--type-secondary); line-height: 1.4;
}
.tc-browse-meta-text { min-width: 0; }
.tc-browse-when { white-space: nowrap; }
.tc-browse-sep { white-space: pre; }
.tc-browse-faces { display: inline-flex; flex: none; gap: calc(3px * var(--pad-factor)); }
.tc-browse-join { flex: none; }
.tc-browse-join[aria-busy="true"] { cursor: progress; }
.tc-browse-note { margin: 0; padding: calc(12px * var(--pad-factor)) 0; color: var(--text-2); font-size: var(--type-control); }
.tc-browse-failed { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--pad-factor)) calc(14px * var(--pad-factor)); padding: calc(12px * var(--pad-factor)) 0; }
.tc-browse-failed p { flex: 1 1 18rem; margin: 0; color: var(--text); font-size: var(--type-description); line-height: 1.5; }
.tc-browse-inner > .err-details { margin-top: 4px; }
/* CHAT-061: a room protected by an agreement. The door names the agreement the way a document's
   title reads; the grace line sits above the composer without taking its place. */
.tc-agreement-door h2 { margin-bottom: 6px; }
.tc-agreement-door .tc-door-title {
  margin: 0 0 12px; font-size: var(--type-dialog-title); font-weight: var(--control-weight); color: var(--text); line-height: 1.35;
}
.tc-agreement-door p { max-width: 46ch; margin-left: auto; margin-right: auto; }
.tc-door-aside { margin: 0; color: var(--text-2); font-size: var(--type-secondary); line-height: 1.5; }
.tc-agreement-door .tc-empty-actions { margin: 14px 0 12px; }
.tc-agreement-grace {
  display: flex; align-items: center; flex-wrap: wrap; gap: calc(6px * var(--pad-factor)) calc(12px * var(--pad-factor));
  margin: 0 0 8px; padding: calc(8px * var(--pad-factor)) calc(10px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(14px * var(--pad-factor));
  border-radius: var(--radius-note); background: var(--surface-2); box-shadow: var(--card-edge);
}
.tc-agreement-grace p { flex: 1 1 16rem; margin: 0; color: var(--text); font-size: var(--type-control); line-height: 1.45; }
.tc-agreement-modal { width: min(520px, calc(100vw - 32px)); }
.tc-agreement-body { display: grid; gap: calc(12px * var(--pad-factor)); }
.tc-agreement-body > p { margin: 0; }
.tc-agreement-body .tc-empty-actions { display: flex; flex-wrap: wrap; gap: calc(8px * var(--pad-factor)); justify-content: flex-start; margin: 0; }
.tc-agreement-people { max-height: 260px; overflow: auto; }
.tc-agreement-people .kp-row { gap: calc(10px * var(--pad-factor)); }
.tc-agreement-body select { width: 100%; }
/* A link to an open room you are not in: the way in sits in the middle, not where messages start. */
.tc-stream-inner.is-door { margin: auto 0; }
.tc-stream-inner.is-door .tc-empty { margin-top: 0; }
/* The list's way here, beside "Message someone new"; it shows where you are on the Browse page. */
a.tc-more.tc-browse-link { text-decoration: none; }
a.tc-more.tc-browse-link[aria-current="page"] { background: var(--accent-soft); color: var(--text); }
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-check { min-height: 44px; padding: calc(9px * var(--pad-factor)) calc(8px * var(--pad-factor)); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .modal .tc-check input { width: 18px; height: 18px; margin-top: 1px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-check-title { font-size: var(--type-subheading); }
  .tc-check-hint { font-size: var(--type-description); }
  .tc-browse-row { gap: calc(10px * var(--pad-factor)); padding: calc(12px * var(--pad-factor)) 0; }
  .tc-browse-name { font-size: var(--type-subheading); }
  .tc-browse-topic { font-size: var(--type-description); }
  .tc-browse-meta { font-size: var(--type-control); }
  .tc-browse-meta-text { display: flex; flex-wrap: wrap; column-gap: 0; }
  .tc-browse-sep { display: none; }
  .tc-browse-when { flex-basis: 100%; }
  .tc-browse-when::first-letter { text-transform: uppercase; }
  .tc-browse-join { height: 44px; min-width: 64px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .tc-more.tc-more-rail { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
}

/* ═══════════════ CHAT-041: remove someone from a room, and being removed ═══════════════ */

/* A room admin's rows on someone's card (CHAT-041, CHAT-042): "Make room admin" or "Remove
   admin role", then "Remove from room" last, under a line like the end of a menu, so they never
   sit beside Message and Call as equals. */
.tc-profile-room { display: grid; gap: calc(2px * var(--pad-factor)); margin: -4px -10px -10px; padding-top: calc(6px * var(--pad-factor)); border-top: 1px solid var(--line); }
.tc-profile-room .menu-item:disabled { cursor: progress; color: var(--text-2); }
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-profile-room .menu-item { min-height: 44px; font-size: var(--type-subheading); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
}
/* Removed while the room was open: the statement in the middle of the pane, like the door to an
   open room you are not in. */
.tc-removed h2 { overflow-wrap: anywhere; outline: none; }

/* ═══════════════ CHAT-047: People ═══════════════ */

/* Everyone in the organization as one calm directory: two lines a row (the name, then the role
   and whether they are here, or what an AI colleague does), a face with its presence dot, 1 px
   rules between rows (List row, D7: never a card per row), and Message and Call at the end. People
   and AI colleagues share the one row, so the company reads as one team. */
.tc-people { --tc-list-bg: var(--surface); }
.tc-people-inner { padding-top: 0; }
/* The filter stays at the top of the column while the list scrolls under it. */
.tc-people-top { position: sticky; top: 0; z-index: 1; padding: calc(12px * var(--pad-factor)) 0 calc(6px * var(--pad-factor)); background: var(--surface); }
.tc-people-filter { max-width: 360px; }
.tc-people-group + .tc-people-group { margin-top: 14px; }
.tc-people-heading {
  display: flex; align-items: baseline; gap: calc(6px * var(--pad-factor)); margin: 0; padding: calc(12px * var(--pad-factor)) 0 calc(4px * var(--pad-factor));
  color: var(--text-2); font-size: var(--type-control); font-weight: var(--heading-weight);
}
.tc-people-count { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; } /* raw: weight 500, quieter than control text; no weight role holds it */
.tc-people-list { margin: 0; padding: 0; list-style: none; }
.tc-people-row { display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); border-top: 1px solid var(--line); }
.tc-people-row:first-child { border-top: 0; }
.tc-people-who {
  display: flex; align-items: center; gap: calc(12px * var(--pad-factor)); flex: 1; min-width: 0; min-height: calc(var(--list-row-h) * 52 / 36);
  margin: 0 0 0 -8px; padding: calc(6px * var(--pad-factor)) calc(8px * var(--pad-factor)); border: 0; border-radius: calc(var(--radius-row) * 8 / 7);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tc-people-who:hover { background: var(--hover); }
.tc-people-who:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.tc-people-main { display: grid; gap: calc(1px * var(--pad-factor)); min-width: 0; }
.tc-people-name { display: flex; align-items: baseline; gap: calc(8px * var(--pad-factor)); min-width: 0; }
.tc-people-name-text {
  min-width: 0; color: var(--text); font-size: var(--type-body); font-weight: var(--control-weight); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-people-you { flex: none; color: var(--text-3); font-size: var(--type-meta); font-weight: 500; } /* raw: weight 500, quieter than control text; no weight role holds it */
.tc-people-sub {
  color: var(--text-2); font-size: var(--type-secondary); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* An AI colleague at work: the list's own at-work line (CHAT-034). */
.tc-people-sub.is-work { color: var(--accent-text); font-weight: var(--control-weight); }
.tc-people-actions { display: flex; flex: none; align-items: center; gap: calc(2px * var(--pad-factor)); }
.tc-people-actions .tc-ghost-btn[aria-busy="true"] { cursor: progress; }
/* Call has a fixed place (and an empty one on rows without Call), so Message lines up. */
.tc-people-call, .tc-people-slot { flex: none; width: 64px; }
.tc-people-slot { display: block; height: var(--control-h); }
/* A small company (you alone, or you and one other), said plainly with the way to grow it. */
.tc-people-small { padding: calc(14px * var(--pad-factor)) 0 calc(4px * var(--pad-factor)); border-top: 1px solid var(--line); }
.tc-people-small p { margin: 0; color: var(--text); font-size: var(--type-description); line-height: 1.5; text-wrap: pretty; }
.tc-people-small p.tc-people-small-ask { margin-top: 2px; color: var(--text-2); }
.tc-people-small-actions { margin-top: 10px; }
.tc-people-small-actions .kp-btn svg { width: 16px; height: 16px; } /* raw: size of an icon, avatar, dot or picture, not a density value */
/* The People link beside "Message someone new": it shows where you are on the People page. */
a.tc-more.tc-people-link { text-decoration: none; }
a.tc-more.tc-people-link[aria-current="page"] { background: var(--accent-soft); color: var(--text); }
/* A narrow pane (the desktop's panel, a two-column window under 900 px): icons without their words. */
@container pane (max-width: 560px) {
  .tc-people-actions .tc-btn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* raw: a hairline, bar or visually hidden box, not a density value */
  .tc-people-actions .tc-ghost-btn { padding: 0; }
  .tc-people-call, .tc-people-slot { width: 30px; }
}
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .tc-people-filter { max-width: none; }
  .tc-people-who { min-height: 60px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
  .tc-people-name-text { font-size: var(--type-subheading); }
  .tc-people-sub { font-size: var(--type-description); }
  .tc-people-you { font-size: var(--type-control); }
  .tc-people-heading { font-size: var(--type-body); }
  .tc-people-small p { font-size: var(--type-subheading); }
  .tc-people-actions .tc-btn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* raw: a hairline, bar or visually hidden box, not a density value */
  .tc-people-actions .tc-ghost-btn, .tc-people-slot { width: 44px; padding: 0; }
  .tc-people-actions .tc-ghost-btn svg { width: 20px; height: 20px; } /* raw: phone geometry, set explicitly in every preset (presets DESIGN 2.1) */
}

/* ═══════════════ CHAT-060: Chat settings (who may delete, how long archived rooms stay) ═══════════════ */
.cs-form { max-width: 640px; }
.cs-form h2 { margin-bottom: 4px; }
.cs-form .cs-h2 { margin-top: 22px; }
.cs-intro { margin: 0 0 10px; }
.cs-page .tc-check input[type="checkbox"], .cs-page .tc-check input[type="radio"] {
  flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; /* raw: size of an icon, avatar, dot or picture, not a density value */
  border: 0; background: none; box-shadow: none; accent-color: var(--accent); cursor: pointer;
}
.cs-page .tc-check input:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.cs-page .tc-check input:disabled { cursor: default; }
.cs-days-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: calc(6px * var(--pad-factor)); }
.cs-days { width: 5.5em; min-height: calc(var(--control-h) * 32 / 30); padding: calc(4px * var(--pad-factor)) calc(8px * var(--pad-factor)); }
.cs-actions { align-items: center; margin-top: 16px; }
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .cs-days { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .cs-actions .kp-btn { flex: 1; }
}

/* ═══════════════ CHAT-081: WhatsApp, a member links their own number ═══════════════ */
/* One panel on a document page, like Chat settings. The numbers are the things to find: the
   person's own in the field or the linked row, the org's in --text weight wherever it is named. */
.wa-panel { max-width: 480px; }
.wa-panel h2 { margin-bottom: 4px; text-wrap: balance; }
.wa-panel h2:focus { outline: none; }
.wa-line { margin: 0 0 16px; max-width: 54ch; color: var(--text-2); font-size: var(--type-description); line-height: 1.5; }
.wa-num-inline { color: var(--text); font-weight: var(--control-weight); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-signin-line { margin-bottom: 16px; }
.wa-form { display: grid; gap: calc(12px * var(--pad-factor)); }
.wa-field { gap: calc(6px * var(--pad-factor)); margin: 0; }
.wa-field .ce-hint { line-height: 1.45; }
.wa-phone { max-width: 300px; font-variant-numeric: tabular-nums; }
.wa-phone[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad); } /* raw: an invalid field's ring, the level colour all round as Warning in place draws it */
.wa-err { line-height: 1.45; }
.wa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--pad-factor)); }
.wa-panel > .err-details { margin: 0 0 14px; }
.wa-text-btn {
  justify-self: start; padding: 0; border: 0; background: none; color: var(--accent-text);
  font: var(--control-weight) var(--type-control)/1.4 var(--font-ui); cursor: pointer;
}
.wa-text-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.wa-text-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--radius-tag); }
.wa-text-btn:disabled { color: var(--text-3); cursor: default; text-decoration: none; }
.wa-ways { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--pad-factor)) calc(18px * var(--pad-factor)); }

/* WhatsApp lets a business write only after the person wrote first: the step in place, under a
   hairline, the org's number large enough to read across a desk, and Open WhatsApp beside it as
   the one primary until they have written. No box inside the panel's box. */
.wa-first { display: grid; gap: calc(10px * var(--pad-factor)); padding-top: calc(14px * var(--pad-factor)); border-top: 1px solid var(--line); }
.wa-first-line { margin: 0; color: var(--text); font-size: var(--type-description); line-height: 1.5; }
.wa-first-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(10px * var(--pad-factor)); }
.wa-first-num {
  color: var(--text); font-size: var(--type-dialog-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The code entry: six cells, read as two threes, the sixth digit sends it (CHAT-081). */
.wa-code-label { color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight); margin-bottom: calc(-4px * var(--pad-factor)); }
.wa-code { display: flex; gap: calc(8px * var(--pad-factor)); }
.wa-cell {
  flex: none; width: 46px; height: 56px; min-width: 0; padding: 0; border: 0; /* raw: a code cell, sized to one large digit, not a density value */
  border-radius: var(--radius-field); background: var(--field); box-shadow: var(--control-edge); color: var(--text);
  font: var(--title-weight) var(--type-view-title)/1 var(--font-ui); text-align: center;
  font-variant-numeric: tabular-nums; caret-color: var(--accent-text); outline: none;
  transition: box-shadow var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease);
}
.wa-cell:nth-child(3) { margin-right: calc(8px * var(--pad-factor)); }
.wa-cell.is-filled { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); } /* raw: a filled cell's edge, the strong line all round, no elevation token holds it */
.wa-cell:focus { box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus or drop-target ring, no elevation token holds it */
.wa-code.is-bad .wa-cell { box-shadow: inset 0 0 0 1.5px var(--bad); } /* raw: an invalid field's ring, the level colour all round as Warning in place draws it */
.wa-code.is-bad .wa-cell:focus { box-shadow: inset 0 0 0 2px var(--bad); } /* raw: an invalid field's focus ring */
.wa-code.is-busy .wa-cell { color: var(--text-3); cursor: progress; }
.wa-code-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .wa-cell { transition: none; } }

/* Linked: the person's number first, as a title, then when. */
.wa-linked { display: grid; gap: calc(2px * var(--pad-factor)); margin: calc(8px * var(--pad-factor)) 0 calc(10px * var(--pad-factor)); }
.wa-linked-num {
  color: var(--text); font-size: var(--type-view-title); font-weight: var(--title-weight); letter-spacing: var(--title-tracking);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.wa-linked-when { color: var(--text-3); font-size: var(--type-secondary); }

@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .wa-phone { max-width: none; }
  .wa-actions .kp-btn, .wa-first-row .kp-btn { flex: 1 1 auto; }
  .wa-text-btn { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .wa-code { gap: calc(6px * var(--pad-factor)); }
  .wa-cell { width: 44px; height: 54px; font-size: var(--type-view-title); } /* raw: a code cell on a phone, 44px floor in every preset (presets DESIGN 2.1) */
  .wa-cell:nth-child(3) { margin-right: calc(6px * var(--pad-factor)); }
}