/* The Messages LAYER (F47, the comms integration law L6 — "Messages is
   a layer, not a page"): the slide-over shell on every non-hub page and
   the P10 density pass over the hub's own components rendered inside
   it. Tokens come from django.css (--bg-surface, --border-default, …);
   the hub's classes (.cl-hub__main / .cl-hub__pane / .cl-home / .cl-act
   / .cl-msg / .cl-pane) are the SAME rules the full page uses — this
   file only sizes them for 420px (Slack/Linear density: header ≤40px,
   one 28px strip, 13px bodies, 20px avatars, 4/8px rhythm).

   The layer OVERLAYS (fixed, right, below the 50px topbar) — a layer,
   not a column: the page never reflows, ⌘J/Esc toggle it, the discuss
   drawer (a column, INV-487) stays the in-place datum surface. */

:root { --cl-msgs-w: 420px; }

.cl-msgs {
  position: fixed; top: 50px; right: 0; bottom: 0;
  width: var(--cl-msgs-w); max-width: 100vw; z-index: 45;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: -12px 0 32px rgb(0 0 0 / 0.10);
  outline: none;
}
.cl-msgs[hidden] { display: none; }
[data-theme='dark'] .cl-msgs, .dark .cl-msgs { box-shadow: -12px 0 32px rgb(0 0 0 / 0.45); }
@media (max-width: 560px) { .cl-msgs { width: 100vw; } }

/* ── Header (≤40px) ──────────────────────────────────────────────── */
.cl-msgs__head {
  display: flex; align-items: center; gap: 6px; height: 40px; flex: none;
  padding: 0 6px 0 10px; border-bottom: 1px solid var(--border-default); background: var(--bg-surface);
}
.cl-msgs__glyph {
  display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 6px; background: var(--accent-brief-soft); color: var(--accent-brief);
}
.cl-msgs__title {
  min-width: 0; font: 600 12.5px/1.2 var(--font-sans, system-ui); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-msgs__btn {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 7px; color: var(--text-muted); background: none; border: 0; cursor: pointer;
}
@media (hover: hover) {
  .cl-msgs__btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-msgs__btn:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: 1px; }
.cl-msgs__back { display: none; }
.cl-msgs.cl-hub--pane-open .cl-msgs__back { display: inline-grid; }

/* ── The view strip (28px) ───────────────────────────────────────── */
.cl-msgs__tabs {
  display: flex; align-items: flex-end; gap: 2px; height: 28px; flex: none;
  padding: 0 6px; border-bottom: 1px solid var(--border-default); background: var(--bg-surface);
}
.cl-msgs__tab {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
  border-radius: 6px 6px 0 0; font-size: 11.5px; font-weight: 500; color: var(--text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
@media (hover: hover) {
  .cl-msgs__tab:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-msgs__tab--on { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent-brief); }
.cl-msgs__count {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent-brief); color: var(--text-on-accent-brief, #fff);
  font: 600 9.5px/1 var(--font-mono, ui-monospace);
}
.cl-msgs__count.hidden { display: none; }

/* ── The body: the hub's centre, or the pane as a drill-in ───────── */
.cl-msgs__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cl-msgs__body > .cl-hub__main { flex: 1; min-height: 0; }
.cl-msgs__body > .cl-hub__pane { display: none; }
.cl-msgs.cl-hub--pane-open .cl-msgs__body > .cl-hub__main { display: none; }
/* Beats django.css's ≤1100px fixed-pane rule (.cl-hub--pane-open .cl-hub__pane). */
.cl-msgs.cl-hub--pane-open .cl-msgs__body > .cl-hub__pane {
  display: block; flex: 1; min-height: 0; position: static; width: auto; border-left: 0; box-shadow: none; z-index: auto;
}
.cl-msgs__loading { padding: 18px 12px; font-size: 11.5px; color: var(--text-muted); }
.cl-msgs .cl-hub__main[aria-busy='true'] { opacity: 0.6; }

/* ── P10 density over the hub's components ───────────────────────── */
.cl-msgs .cl-hub__crumbs { display: none; }
.cl-msgs .cl-hub__head { padding: 6px 10px; gap: 8px; align-items: center; }
.cl-msgs .cl-hub__head--conv { padding: 6px 10px; }
.cl-msgs .cl-hub__title { font-size: 14px; line-height: 1.2; }
.cl-msgs .cl-hub__title--conv { font-size: 13.5px; }
.cl-msgs .cl-hub__head .text-\[10\.5px\] { display: none; } /* the one-line view blurbs — the strip already names the view */
.cl-msgs .cl-hub__subline { font-size: 10.5px; }
.cl-msgs .cl-hub__intro { padding: 12px 10px 8px; gap: 8px; }
.cl-msgs .cl-hub__intro-glyph { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.cl-msgs .cl-hub__tabs .cl-hub__tab { padding: 2px 8px; font-size: 10.5px; }

/* The strip already names the list views — their inner h1 goes; the
   head row keeps its ACTIONS (New message, the filters, Mark all read). */
.cl-msgs [data-hub-view='home'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='activity'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='threads'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='tasks'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='saved'] .cl-hub__head > .min-w-0 > .cl-hub__title { display: none; }
.cl-msgs [data-hub-view='home'] .cl-hub__head, .cl-msgs [data-hub-view='threads'] .cl-hub__head { padding: 4px 8px; min-height: 0; }
.cl-msgs [data-hub-view='threads'] .cl-hub__head { display: none; }

/* F62: the hub does NOT re-lay-out the composer at all — not while it
   is idle, not by two pixels. A focus-keyed fold here gave the island a
   second silhouette (a pill with its verbs hidden, which became a card
   the moment the caret landed), and the 2px foot trim that outlived it
   made the hub's card a different card from the dock's. The composer is
   ONE shape on every mount (INV-654): the island owns its states and its
   measurements; the hub only sets the rhythm around it. */

/* Home — one column, tight rows */
.cl-msgs .cl-home { padding: 6px 8px 14px; max-width: none; }
.cl-msgs .cl-home__section { margin-bottom: 10px; }
.cl-msgs .cl-home__label { padding: 0 2px 4px; }
.cl-msgs .cl-home__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cl-msgs .cl-home__row { padding: 4px 6px; gap: 8px; border-radius: 8px; }
.cl-msgs .cl-home__row-glyph { width: 24px; height: 24px; border-radius: 7px; }
.cl-msgs .cl-home__row .cl-avatar--lg { width: 24px; height: 24px; font-size: 9px; }
.cl-msgs .cl-home__row-head { font-size: 12px; }
.cl-msgs .cl-home__row-line { font-size: 11px; }
.cl-msgs .cl-home__clear { padding: 8px 10px; font-size: 11.5px; border-radius: 8px; }
.cl-msgs .cl-home__doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cl-msgs .cl-home__doorcard { padding: 6px 8px; gap: 6px; border-radius: 8px; }
.cl-msgs .cl-home__doorcard small { display: none; }

/* Activity groups */
.cl-msgs .cl-act { padding: 5px 8px; border-radius: 8px; }
.cl-msgs .cl-act__line { gap: 6px; }
.cl-msgs .cl-act__who, .cl-msgs .cl-act__snippet { font-size: 11.5px; }
.cl-msgs .cl-act__meta { font-size: 10px; padding-left: 24px; }
.cl-msgs .cl-hub__cols { grid-template-columns: minmax(0, 1fr); padding: 6px 8px 16px; gap: 8px; }
.cl-msgs .cl-hub__side { display: none; } /* the asks rails ride Home / Threads at 420px */

/* The pane head at 420px: title + quote clamp to two lines; the pane's
   own ✕ hides (the layer header's ← is the one back door). */
.cl-msgs .cl-pane__head [data-pane-close] { display: none; }
.cl-msgs .cl-pane__title, .cl-msgs .cl-pane__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cl-msgs .cl-pane__trail { font-size: 10.5px; }

/* Messages + the pane */
.cl-msgs .cl-msg { padding: 4px 10px; gap: 8px; contain-intrinsic-size: 0 44px; }
.cl-msgs .cl-msg > .cl-avatar--lg { width: 20px; height: 20px; font-size: 8px; margin-top: 1px; }
.cl-msgs .cl-msg__body { font-size: 12.5px; line-height: 1.4; }
.cl-msgs .cl-msg__name { font-size: 12px; }
.cl-msgs .cl-pane__head { padding: 6px 10px; gap: 8px; }
.cl-msgs .cl-pane__title { font-size: 13px; }
.cl-msgs .cl-pane__quote { font-size: 11px; }
.cl-msgs .cl-pane__foot { padding: 6px 8px 8px; }
.cl-msgs .cl-hub__composer { padding: 6px 8px 8px; }
.cl-msgs .cl-hub__pins { padding: 4px 10px; }
.cl-msgs .cl-hub__empty { padding: 18px 12px; }
.cl-msgs .cl-hub__empty-art { font-size: 20px; }
.cl-msgs .cl-hub__more, .cl-msgs .cl-hub__earlier { padding: 6px; }

/* Streams + scope + thread cards at 420px */
.cl-msgs .cl-scope-tabs { padding: 4px 8px; gap: 3px; }
.cl-msgs .cl-scope-tab { font-size: 10.5px; padding: 2px 7px; }
.cl-msgs .cl-stream-row { padding-left: 0; padding-right: 0; }
.cl-msgs .cl-stream-row__foot { padding-left: 38px; font-size: 11px; }
/* 2026-09-10: the cards are separated by the list's own gap + gutters
   (discuss.css), so the per-card margin is gone; the layer keeps a
   tighter rhythm at 420px. */
.cl-msgs .cl-tcard { margin: 0; padding: 0 10px 10px; }
.cl-msgs .cl-hub__scroll:has(> .cl-tcard) { gap: 10px; padding: 10px 8px 14px; }
.cl-msgs .cl-tcard__eyebrow { padding: 7px 0 6px; margin-bottom: 6px; }
.cl-msgs .cl-tcard__head, .cl-msgs .cl-tcard__foot { padding: 6px 8px; }

/* The hub-page-side door (L9b): ⇤ back to the origin page. */
[data-hub-collapse].hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════
   Home (specs/121 §11) — three cards, two grammars
   ────────────────────────────────────────────────────────────────────
   The comms Home is triage, not a feed: MENTIONS AND DMS (the message grammar
   — the shared Activity rows, .cl-act from django.css), YOUR TASKS (the
   task grammar — a checkbox glyph, the amber/red due palette — around
   the shared _today.html rows, never a forked row) and CONVERSATIONS
   (glyph · name · last line · stamp · face). Tokens only (tokens.css),
   so dark mode holds by construction. Card chrome mirrors .cl-tcard on
   the tinted canvas (discuss.css). This block belongs to the Home wave
   (W4); everything above it is the 420px layer's density pass. NOT
   .cl-msgs-scoped: the full page and the layer share one grammar (the
   layer's density overrides sit at the end of the block).
   ════════════════════════════════════════════════════════════════════ */

/* The canvas + the stack */
.cl-hub__scroll:has(> .cl-home--triage) { background: var(--bg-canvas); }
.cl-home--triage { display: flex; flex-direction: column; gap: 14px; max-width: 920px; padding: 14px 18px 24px; }

/* Card chrome — bordered, rounded, surface on the tinted canvas */
.cl-hcard { min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-surface); }
.cl-hcard__head {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 14px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
}
.cl-hcard__glyph { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; }
.cl-hcard__glyph--needs { background: color-mix(in srgb, var(--accent-brief) 14%, transparent); color: var(--accent-brief); }
.cl-hcard__glyph--tasks { background: var(--status-warning-soft); color: var(--status-warning); }
.cl-hcard__glyph--conv { background: color-mix(in srgb, var(--accent-source) 14%, transparent); color: var(--accent-source); }
.cl-hcard__title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); }
.cl-hcard__pill {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: var(--status-error); color: var(--on-accent-brief); font: 600 9.5px/1 var(--font-mono);
}
.cl-hcard__rows { padding: 6px 8px 8px; }
.cl-hcard__more { display: block; padding: 4px 14px 10px; font: 600 11px/1.4 var(--font-sans, system-ui); color: var(--accent-brief); text-decoration: none; }
@media (hover: hover) {
  .cl-hcard__more:hover { }
}
.cl-hcard__clear { padding: 10px 14px 12px; }

/* 1 · Mentions and DMs — the message grammar IS the shared Activity row
   (.cl-act: avatar · who · snippet · navy count); the card only sets
   its rhythm. */
.cl-hcard__rows--msgs { display: flex; flex-direction: column; gap: 2px; }
.cl-hcard__rows--msgs .cl-act { border-radius: 8px; }

/* 2 · Your tasks — the TASK grammar: never an avatar, never a speech
   bubble. A checkbox leads every task row (a hollow ring leads a
   deadline row); the due palette is amber (today / this week) and red
   (late); the header counts are pills in the same palette. */
.cl-tcounts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 4px; }
.cl-tcount {
  display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bg-surface-2); color: var(--text-secondary);
}
.cl-tcount--overdue { background: var(--status-error-soft); color: var(--status-error); }
.cl-tcount--today { background: var(--status-warning-soft); color: var(--status-warning); }
.cl-hcard__rows--tasks .cl-today { padding: 0 2px; }
.cl-hcard__rows--tasks .cl-home__band { padding: 1px 4px 3px; }
.cl-hcard__rows--tasks .cl-home__bandlabel { padding: 6px 6px 3px; }
.cl-hcard__rows--tasks .cl-home__row--slim { gap: 8px; padding: 4px 8px; }
.cl-hcard__rows--tasks .cl-home__row--slim::before {
  content: ""; flex: none; box-sizing: border-box; width: 13px; height: 13px; border-radius: 3.5px;
  border: 1.5px solid var(--status-warning); background: var(--status-warning-soft);
}
.cl-hcard__rows--tasks a.cl-home__row--slim::before { border-radius: 999px; }
.cl-hcard__rows--tasks .cl-home__row--late::before { border-color: var(--status-error); background: var(--status-error-soft); }
.cl-hcard__rows--tasks .cl-home__row--late { border-radius: 8px; box-shadow: none; }
@media (hover: hover) {
  .cl-hcard__rows--tasks .cl-home__row--late:hover { box-shadow: inset 0 0 0 1px var(--border-default); }
}
.cl-hcard__rows--tasks .cl-home__row--slim .cl-home__row-when {
  flex: none; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--status-warning-soft); color: var(--status-warning);
}
.cl-hcard__rows--tasks .cl-home__row--late .cl-home__row-when { padding: 0; background: transparent; color: var(--text-faint); font-weight: 500; }
.cl-hcard__rows--tasks .cl-home__banddoors { padding: 6px 8px 2px; }

/* 3 · Conversations — glyph · name · last line · stamp · face */
.cl-hcard__rows--conv { padding: 4px 8px 6px; }
.cl-conv__group + .cl-conv__group { margin-top: 6px; }
.cl-conv__label {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 3px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.cl-conv__label-door { margin-left: auto; }
.cl-conv { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 8px; border-radius: 8px; text-decoration: none; color: var(--text-secondary); }
@media (hover: hover) {
  .cl-conv:hover { background: var(--bg-surface-2); }
}
.cl-conv__glyph { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-surface-2); color: var(--text-muted); }
.cl-conv__glyph--hash { font: 600 14px/1 var(--font-mono); }
.cl-conv__glyph--avatars { width: auto; min-width: 28px; background: none; display: inline-flex; }
.cl-conv__avatar { position: relative; display: inline-grid; }
.cl-conv__avatar + .cl-conv__avatar { margin-left: -8px; }
.cl-conv__avatar .cl-avatar--lg { width: 28px; height: 28px; font-size: 10px; outline: 2px solid var(--bg-surface); }
/* Presence: the realtime contract (.cl-presence[data-user], flipped by
   realtime.js refreshPresence) drawn as a corner dot — realtime.css's
   initials-circle shape is overridden here by the two-class selector
   (realtime.css loads later, at lower specificity). */
.cl-conv .cl-presence {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; margin: 0;
  border: 2px solid var(--bg-surface); border-radius: 999px; background: var(--status-muted); font-size: 0;
}
.cl-conv .cl-presence::after { content: none; }
.cl-conv .cl-presence[data-online] { background: var(--status-verified); }
.cl-conv__main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.cl-conv__head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cl-conv__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.cl-conv__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-muted); }
.cl-conv__who { font-weight: 600; color: var(--text-secondary); }
.cl-conv__stamp { flex: none; white-space: nowrap; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-faint); }
.cl-conv__face { display: inline-flex; align-items: center; justify-content: flex-end; flex: none; min-width: 18px; }
/* the faces (specs/121 §1): count = red number · dot = bold row + dot ·
   muted = dimmed + bell-slash · nothing = read */
.cl-conv--dot .cl-conv__name, .cl-conv--count .cl-conv__name { font-weight: 700; }
.cl-conv--dot .cl-conv__line, .cl-conv--count .cl-conv__line { color: var(--text-secondary); }
.cl-conv--dot .cl-conv__stamp, .cl-conv--count .cl-conv__stamp { color: var(--accent-brief); font-weight: 600; }
.cl-conv__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: var(--status-error); color: var(--on-accent-brief); font: 600 9.5px/1 var(--font-mono);
}
.cl-conv__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-brief); }
.cl-conv--muted { opacity: 0.55; }
@media (hover: hover) {
  .cl-conv--muted:hover { opacity: 0.85; }
}
.cl-conv__mute { display: inline-grid; place-items: center; color: var(--text-faint); }
.cl-conv__empty { padding: 4px 8px 6px; font-size: 11.5px; color: var(--text-muted); }
.cl-home__links {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
  font-size: 11px; color: var(--text-faint);
}
.cl-home__links a { color: var(--text-muted); font-weight: 600; text-decoration: none; }
@media (hover: hover) {
  .cl-home__links a:hover { color: var(--accent-brief); }
}

/* The 420px layer: tighter rhythm, the same grammar. */
.cl-msgs .cl-home--triage { gap: 10px; padding: 8px 8px 14px; }
.cl-msgs .cl-hcard__head { padding: 7px 10px 6px; }
.cl-msgs .cl-hcard__rows { padding: 4px 6px 6px; }
.cl-msgs .cl-tcounts { gap: 4px; }
.cl-msgs .cl-tcount { height: 16px; padding: 0 6px; font-size: 10px; }
.cl-msgs .cl-conv { gap: 8px; padding: 4px 6px; }
.cl-msgs .cl-conv__glyph { width: 24px; height: 24px; }
.cl-msgs .cl-conv__avatar .cl-avatar--lg { width: 24px; height: 24px; font-size: 9px; }
.cl-msgs .cl-home__links { padding: 6px 10px 8px; }

/* 2026-09-12 — the task rows carry the board tile's REAL completion circle now
   (cl-card-check in _today.html); the drawn checkbox glyph retires on those rows. */
.cl-hcard__rows--tasks .cl-home__row--task::before { display: none; content: none; }
.cl-hcard__rows--tasks .cl-home__row--task { padding-left: 8px; }

/* The drawer uses the current Activity row anatomy, with room for its controls. */
.cl-msgs .cl-act { padding: 0; }
.cl-msgs .cl-act__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.cl-msgs .cl-act__who { font-size: 12.5px; }
.cl-msgs .cl-act__stamp { grid-column: 2; grid-row: 1; }
.cl-msgs .cl-act__src { grid-column: 1 / -1; }
.cl-msgs .cl-act__tools { top: 0; right: 8px; transform: translateY(-100%); }
.cl-msgs .cl-hcard__rows--msgs { gap: 16px; padding-top: 32px; }
.cl-hcard__head { flex-wrap: wrap; }
.cl-hcard__title, .cl-home__door { flex-shrink: 0; }
.cl-hcard__head > .cl-tcounts { min-width: 0; }
@media (max-width: 360px) {
  .cl-msgs .cl-act__top { grid-template-columns: minmax(0, 1fr); }
  .cl-msgs .cl-act__stamp { grid-column: 1; grid-row: auto; margin-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   KAICES (the iPhone app) — Messages, specs/157 §4.4 (lane M2).
   Page rules only. The components (.k-header .k-group .k-row .k-segment .k-btn .k-menu
   .k-search .k-empty .k-badge .k-dot .k-avatar .k-reaction .k-composer .k-swipe) and the
   gestures are kaices.css / kaices.js. Everything is under body.cl-kaices — desktop untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* — The hub on a phone: one column, no sidebar, no crumbs, no context strip — */
body.cl-kaices.cl-hub-page .cl-hub { display: flex; flex-direction: column; height: 100%; min-height: 0; }
body.cl-kaices .cl-hub__nav,
body.cl-kaices .cl-hub__crumbs,
body.cl-kaices .cl-hub__tasksbar,
body.cl-kaices [data-test-id='context-strip'] { display: none !important; }
body.cl-kaices .cl-hub__main { flex: 1 1 auto; min-height: 0; background: var(--k-canvas, var(--bg-canvas)); }
body.cl-kaices .cl-hub__scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* — Home + Activity: grouped lists — */
body.cl-kaices .k-msgs { padding: var(--k-space-2) var(--k-gutter-r) var(--k-space-5) var(--k-gutter); }
body.cl-kaices .k-group__head + .k-group, body.cl-kaices .k-group + .k-group { }
body.cl-kaices .k-msgs .k-group__head:not(:first-child) { margin-top: var(--k-space-4); }
body.cl-kaices .k-msgs .k-row--note { color: var(--k-label-3); font: var(--k-subhead); }
body.cl-kaices .k-row__star { display: inline-flex; margin-left: 6px; color: var(--k-amber); vertical-align: -2px; }
body.cl-kaices .k-row__mute { display: inline-flex; color: var(--k-label-3); }
body.cl-kaices .k-row__face { display: inline-flex; align-items: center; min-height: 20px; }
body.cl-kaices .k-row__face:empty { display: none; }
body.cl-kaices .k-row.is-muted .k-row__title, body.cl-kaices .k-row.is-muted .k-row__sub { color: var(--k-label-3); }
body.cl-kaices .k-row__icon.is-muted { background: var(--k-surface-2); color: var(--k-label-3); }
body.cl-kaices .k-act .k-act__line { font: var(--k-subhead); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.cl-kaices .k-act .k-act__line.k-row__title--strong { font-weight: 600; }
body.cl-kaices .k-act:not(.k-act--unread) .k-act__who { font-weight: 400; }
body.cl-kaices .k-act .k-row__sub { display: block; }
body.cl-kaices .k-swipe > .k-act { position: relative; z-index: 1; touch-action: pan-y; will-change: transform; background: var(--k-surface); }
body.cl-kaices .k-act { display: block; padding: 0; margin: 0; border: 0; }
body.cl-kaices .k-act .k-row { align-items: flex-start; }
body.cl-kaices .k-actv { display: block; flex: none; padding: 0; min-height: 0; }
body.cl-kaices .k-actv .cl-actv__rows { padding: 0; min-height: 0; flex: none; display: block; overflow: visible; }
body.cl-kaices .cl-actv__status:empty { display: none; }

/* — The search screen — */
body.cl-kaices .k-searchscreen { position: fixed; inset: 0; z-index: 80; background: var(--k-canvas, var(--bg-canvas)); display: flex; flex-direction: column; padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
body.cl-kaices .k-searchscreen[hidden] { display: none; }
body.cl-kaices .k-searchscreen__body { flex: 1; overflow-y: auto; padding: 12px var(--k-gutter-r) 24px var(--k-gutter); overscroll-behavior: contain; }
body.cl-kaices .k-group__action { margin-left: auto; }

/* — A channel / DM: the page's own title row (hidden in the native shell, where the bar says it) — */
body.cl-kaices .k-chanhead { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; min-height: 56px; background: var(--k-surface); border-bottom: var(--k-hairline, 1px) solid var(--k-separator); flex: none; }
body.cl-kaices .k-chanhead__main { flex: 1; min-width: 0; }
body.cl-kaices .k-chanhead__title { margin: 0; font: var(--k-headline); color: var(--k-label-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
body.cl-kaices .k-chanhead__hash { color: var(--k-label-3); font-weight: 400; }
body.cl-kaices .k-chanhead__lock { display: inline-flex; color: var(--k-label-3); }
body.cl-kaices .k-chanhead__sub { font: var(--k-footnote); color: var(--k-label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
body.cl-kaices .k-chanhead__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-label-4); flex: none; }
body.cl-kaices .k-chanhead__dot.is-on { background: var(--k-green); }
body.cl-kaices .cl-hub__members, body.cl-kaices .cl-hub__invite { margin: 0; padding: 12px 16px; background: var(--k-surface); border-bottom: var(--k-hairline, 1px) solid var(--k-separator); }
body.cl-kaices .cl-hub__pins { padding: 8px 16px; background: var(--k-surface); border-bottom: var(--k-hairline, 1px) solid var(--k-separator); font: var(--k-subhead); display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; }
body.cl-kaices .cl-hub__pinlabel { display: inline-flex; align-items: center; gap: 4px; font: var(--k-footnote); font-weight: 600; color: var(--k-label-3); }
body.cl-kaices .cl-hub__pin { font: var(--k-subhead); color: var(--k-label-1); max-width: 80%; overflow: hidden; text-overflow: ellipsis; }

/* — The message list: bubble-less, Slack's grammar (frame 23) — */
body.cl-kaices #comms-stream, body.cl-kaices .cl-pane__scroll { background: var(--k-canvas, var(--bg-canvas)); padding: 8px 0 12px; scroll-behavior: auto; }
body.cl-kaices .cl-hub__intro { padding: 24px 16px 8px; }
body.cl-kaices .cl-hub__intro-title { font: var(--k-headline); }
body.cl-kaices .cl-hub__intro-sub { font: var(--k-subhead); color: var(--k-label-3); }
body.cl-kaices .cl-hub__earlier { font: var(--k-footnote); color: var(--k-label-3); text-align: center; padding: 8px; }
body.cl-kaices .cl-stream-row { padding: 0; margin: 0; border: 0; background: transparent; }
body.cl-kaices .cl-stream-row__anchor { padding: 8px 16px 0 64px; }
body.cl-kaices .cl-msg { position: relative; display: flex; gap: 12px; padding: 8px 16px; margin: 0; border: 0 !important; border-radius: 0; background: transparent; -webkit-touch-callout: none; box-shadow: none !important; }
body.cl-kaices .cl-msg.cl-msg--hot, body.cl-kaices .cl-msg:focus { outline: 0; background: transparent; }
body.cl-kaices .cl-msg:active { background: var(--k-pressed); transition: background 100ms; }
body.cl-kaices .cl-msg > .cl-avatar { width: 36px; height: 36px; flex: none; font: 600 15px/1 var(--k-font, system-ui); margin-top: 2px; }
body.cl-kaices .cl-msg__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; line-height: 20px; }
body.cl-kaices .cl-msg__name { font: 600 15px/20px var(--k-font, system-ui); color: var(--k-label-1); padding: 0; min-height: 0; background: none; border: 0; }
body.cl-kaices .cl-msg__time { font: var(--k-footnote); color: var(--k-label-3); font-variant-numeric: tabular-nums; text-decoration: none; }
body.cl-kaices .cl-msg__body { font: var(--k-body); color: var(--k-label-1); overflow-wrap: anywhere; margin-top: 2px; }
body.cl-kaices .cl-msg__body p { margin: 0; }
body.cl-kaices .cl-msg__body--tomb { color: var(--k-label-3); }
body.cl-kaices .cl-msg .cl-pill, body.cl-kaices .cl-msg .cl-echip { font-size: 13px !important; }
body.cl-kaices .cl-msg .text-\[10px\] { font-size: 13px; color: var(--k-label-3); }
body.cl-kaices .cl-msg__quote { font: var(--k-subhead); color: var(--k-label-3); }
body.cl-kaices .cl-msg__body .cl-mention, body.cl-kaices .cl-msg__body [data-mention] { background: var(--k-accent-soft); color: var(--k-accent); border-radius: 6px; padding: 0 4px; }
/* consecutive messages by one person within five minutes: no avatar, no name, the time on the left at 11 */
body.cl-kaices .cl-msg--cont, body.cl-kaices .k-msg--cont { padding: 0 16px 4px 64px; margin-top: -2px; }
body.cl-kaices .cl-msg--cont > .cl-avatar, body.cl-kaices .k-msg--cont > .cl-avatar { position: absolute; visibility: hidden; height: 0; }
body.cl-kaices .cl-msg--cont .cl-msg__name, body.cl-kaices .k-msg--cont .cl-msg__name { display: none; }
body.cl-kaices .cl-msg--cont .cl-msg__head, body.cl-kaices .k-msg--cont .cl-msg__head { position: absolute; left: 4px; width: 56px; top: 4px; display: block; text-align: center; opacity: 0; transition: opacity 150ms; }
body.cl-kaices .cl-msg--cont .cl-msg__time, body.cl-kaices .k-msg--cont .cl-msg__time { font: var(--k-caption-2, 600 11px/13px var(--k-font)); font-weight: 400; line-height: 22px; }
body.cl-kaices .cl-msg--cont:active .cl-msg__head, body.cl-kaices .k-msg--cont:active .cl-msg__head { opacity: 1; }
body.cl-kaices .cl-msg--cont > .min-w-0, body.cl-kaices .k-msg--cont > .min-w-0 { flex: 1; }
body.cl-kaices .cl-msg__tools, body.cl-kaices .cl-msg-tools { display: none !important; } /* long-press carries every verb */
body.cl-kaices .cl-msg--new { border-left: 0 !important; box-shadow: none !important; }
body.cl-kaices .k-msg--flash { animation: k-msg-flash 500ms ease-out 1; }
@keyframes k-msg-flash { 0% { background: var(--k-accent-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { body.cl-kaices .k-msg--flash { animation: none; } }

/* — Reactions are DS .k-reaction chips (the server markup adds the class in Kaices mode) — */
body.cl-kaices .cl-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
body.cl-kaices .cl-margin-reaction-details { display: none; }

/* — "3 replies" + "Last reply 8:52 AM" — */
body.cl-kaices .cl-stream-row__foot { display: flex; align-items: center; gap: 10px; padding: 0 16px 8px 64px; margin: 0; min-height: 44px; }
body.cl-kaices .cl-stream-row__foot .cl-hub__faces { display: inline-flex; }
body.cl-kaices .cl-stream-row__foot .cl-avatar--xs { width: 24px; height: 24px; font-size: 11px; margin-left: -4px; border: 2px solid var(--k-canvas, var(--bg-canvas)); box-sizing: content-box; }
body.cl-kaices .cl-stream-row__foot .cl-avatar--xs:first-child { margin-left: 0; }
body.cl-kaices .cl-stream-row__foot .text-text-faint, body.cl-kaices .cl-stream-row__foot [data-cl-tip^='You follow'] { display: none; }
body.cl-kaices .k-replies { display: inline-flex; align-items: center; min-height: 44px; color: var(--k-accent); font: var(--k-subhead); font-weight: 400; text-decoration: none; }
body.cl-kaices .k-replies:active { opacity: .6; }
body.cl-kaices .k-replies__when { font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .cl-stream-replies { display: none !important; }

/* — Day dividers + the New messages line — */
body.cl-kaices .cl-hub .cl-hub__divider--day, body.cl-kaices .cl-hub__divider--day { margin: 16px 16px 8px; gap: 12px; }
body.cl-kaices .cl-hub__divider--day > span { border: 0; background: transparent; padding: 0; font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .cl-hub__divider--day::before, body.cl-kaices .cl-hub__divider--day::after { background: var(--k-separator); }
body.cl-kaices .cl-hub__divider:not(.cl-hub__divider--day) { display: flex; align-items: center; gap: 12px; margin: 8px 16px; font: var(--k-footnote); font-weight: 600; color: var(--k-accent); text-transform: none; letter-spacing: 0; }
body.cl-kaices .cl-hub__divider:not(.cl-hub__divider--day)::before, body.cl-kaices .cl-hub__divider:not(.cl-hub__divider--day)::after { content: ''; flex: 1; height: 1px; background: var(--k-accent); }
body.cl-kaices .cl-hub__divider:not(.cl-hub__divider--day) > span { background: transparent; border: 0; padding: 0; color: var(--k-accent); }
body.cl-kaices .cl-hub__empty { padding: 48px 32px; text-align: center; }
body.cl-kaices .cl-hub__empty p { font: var(--k-subhead); color: var(--k-label-3); }
body.cl-kaices .cl-hub__empty p:first-of-type { font: var(--k-headline); color: var(--k-label-1); }
body.cl-kaices .cl-hub__empty-art { color: var(--k-label-3); display: grid; place-items: center; margin-bottom: 8px; }

/* — Jump chips + the scroll-to-bottom pill — */
body.cl-kaices .cl-jump { position: sticky; top: 8px; z-index: 4; display: inline-flex; align-items: center; height: 32px; margin: 0 auto; padding: 0 12px; border-radius: 999px; border: 0; background: var(--k-accent); color: var(--k-on-accent); font: var(--k-footnote); font-weight: 600; }
body.cl-kaices .cl-jump[hidden] { display: none; }
body.cl-kaices .k-tobottom { position: fixed; right: 16px; bottom: calc(96px + var(--k-dock, 0px)); z-index: 30; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--k-surface); color: var(--k-label-1); display: grid; place-items: center; box-shadow: var(--shadow-pop); }
body.cl-kaices .k-tobottom[hidden] { display: none; }
body.cl-kaices .k-tobottom:active { transform: scale(.96); }

/* — The composer: the island's DOM styled as the capsule inside DS's .k-composer dock —
   THE KEYBOARD LAW (messages-design §0.1): the dock never moves by transform inside the page column;
   the column itself loses --k-kb at the bottom, so the list shrinks and the dock sits on its edge. */
body.cl-kaices .cl-hub__main, body.cl-kaices .cl-hub--pane-open .cl-hub__pane { padding-bottom: var(--k-kb, 0px); }
body.cl-kaices .cl-hub__main > .k-composer, body.cl-kaices #comms-pane .k-composer { transform: none; }
html.k-kb-up body.cl-kaices .k-composer { padding-bottom: 8px; }
body.cl-kaices .cl-hub__composer.k-composer, body.cl-kaices .cl-pane__foot.k-composer { flex: none; }
body.cl-kaices .cl-hub__typing, body.cl-kaices .cl-pane__typing { font: var(--k-footnote); color: var(--k-label-3); padding: 0 16px 4px; min-height: 0; }
body.cl-kaices .cl-composer { margin: 0; padding: 0; border: 0; background: transparent; }
body.cl-kaices .cl-composer__box { position: relative; display: flex; flex-direction: column; border: 0; padding: 0; background: transparent; box-shadow: none; }
/* the rows (formatting · tools) take real height inside the dock while it is open, so the list above shrinks with them */
body.cl-kaices .k-composer.is-open .cl-composer__box { padding-top: 44px; }
body.cl-kaices .cl-composer__row { min-height: var(--k-tap); border-radius: 22px; background: var(--k-fill); padding: 0 48px 0 48px; display: flex; align-items: center; border: 0; }
body.cl-kaices .cl-composer__box:focus-within .cl-composer__row { box-shadow: inset 0 0 0 1px var(--k-accent); }
body.cl-kaices .cl-composer__editor { flex: 1; min-width: 0; max-height: 132px; overflow-y: auto; }
body.cl-kaices .cl-composer__pm, body.cl-kaices .cl-composer__pm p { font: var(--k-body) !important; margin: 0; padding: 0; min-height: 22px; }
body.cl-kaices .cl-composer__pm { padding: 11px 0 !important; outline: 0; }
body.cl-kaices .cl-composer__pm p.is-empty::before { color: var(--k-label-3); }
body.cl-kaices .cl-composer__foot { position: static; display: block; padding: 0; margin: 0; border: 0; min-height: 0; order: -1; }
/* row 1: the formatting bar (Aa on) */
body.cl-kaices .cl-composer__toolbar { display: none !important; }
body.cl-kaices .k-composer.is-open .cl-composer__toolbar { display: flex !important; position: absolute; left: -16px; right: -16px; top: 0; height: 40px; padding: 0 12px 0 60px; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; background: none; border: 0; box-shadow: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
body.cl-kaices .cl-composer__toolbar::-webkit-scrollbar { display: none; }
body.cl-kaices .cl-composer__fbtn { flex: none; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--k-label-2); display: grid; place-items: center; padding: 0; }
body.cl-kaices .cl-composer__fbtn svg { width: 20px; height: 20px; }
body.cl-kaices .cl-composer__fbtn.is-active { background: var(--k-accent-soft); color: var(--k-accent); }
body.cl-kaices .cl-composer__fbtn:active { background: var(--k-surface-2); transform: scale(.96); }
body.cl-kaices .cl-composer__tbsep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--k-separator); }
/* row 1 (Aa off): the tools; every button is a 44 x 40 cell on the same rail as the formatting bar */
body.cl-kaices .cl-composer__btn { position: absolute; width: 44px; height: 40px; border-radius: 8px; border: 0; background: transparent; color: var(--k-label-2); display: grid; place-items: center; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; top: 0; z-index: 3; }
body.cl-kaices .cl-composer__btn svg { width: 20px; height: 20px; }
body.cl-kaices .cl-composer__btn[data-test-id='composer-plus'] { left: 4px; top: auto; bottom: 4px; width: 36px; height: 36px; border-radius: 50%; background: var(--k-surface); color: var(--k-label-1); opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
body.cl-kaices .cl-composer__btn[data-test-id='composer-plus'] svg { width: 18px; height: 18px; }
body.cl-kaices .k-composer.is-open .cl-composer__btn[data-test-id='composer-aa'] { left: 0; opacity: 1; visibility: visible; pointer-events: auto; font-weight: 600; }
body.cl-kaices .cl-composer__btn[data-test-id='composer-aa'].is-on { background: var(--k-accent-soft); color: var(--k-accent); }
body.cl-kaices .cl-composer__btn[data-test-id='composer-aa'] svg { width: 22px; height: 22px; }
body.cl-kaices .k-composer.is-open .cl-composer__box[data-rest='1'] .cl-composer__btn:not([data-test-id='composer-plus']):not([data-test-id='composer-aa']) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 150ms; }
body.cl-kaices .cl-composer__btn[aria-label='Attach a file'] { left: 48px; }
body.cl-kaices .cl-composer__btn[data-test-id='composer-emoji'] { left: 92px; }
body.cl-kaices .cl-composer__btn[data-test-id='composer-at'] { left: 136px; }
body.cl-kaices .cl-composer__btn[data-test-id='composer-cite'] { left: 180px; }
body.cl-kaices .cl-composer__btn[aria-label='Ask someone'] { left: 224px; }
body.cl-kaices .cl-composer__btn[data-test-id='composer-suggest'] { left: 268px; }
body.cl-kaices .cl-composer__btn:active { background: var(--k-surface-2); transform: scale(.96); }
body.cl-kaices .cl-composer__send { position: absolute; right: 2px; bottom: 2px; width: 40px; height: 40px; border-radius: 50%; padding: 0; background: var(--k-accent); color: var(--k-on-accent); border: 0; display: grid; place-items: center; transform: scale(0); transition: transform 150ms cubic-bezier(.2, 0, .38, .9); }
body.cl-kaices .cl-composer__send svg { width: 20px; height: 20px; }
body.cl-kaices .cl-composer__send::after { content: ""; position: absolute; inset: -3px; } /* a 46 px target for one thumb */
body.cl-kaices .cl-composer__box:has(.cl-composer__pm p:not(.is-empty)) .cl-composer__send,
body.cl-kaices .cl-composer__box:has(.cl-composer__pm :not(p)) .cl-composer__send,
body.cl-kaices .cl-composer__send.is-armed { transform: scale(1); }
body.cl-kaices .cl-composer__box:has(.cl-composer__pm p.is-empty:only-child):not(:has(.cl-composer__tile)) .cl-composer__send:not(.is-armed) { transform: scale(0); }
body.cl-kaices .cl-composer__hint { display: none !important; }
/* the status line: ONE 13/18 line above the capsule (uploading · failed · reason · counter · external audience) */
body.cl-kaices .cl-composer__status { display: flex; align-items: center; gap: 8px; min-height: 18px; margin: 0 0 6px; padding: 0 4px; font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .cl-composer__status[hidden] { display: none; }
body.cl-kaices .cl-composer__status-text { flex: 1 1 auto; min-width: 0; }
body.cl-kaices .cl-composer__status.is-error { color: var(--k-red); }
body.cl-kaices .cl-composer__status-btn { position: relative; flex: none; border: 0; background: none; color: var(--k-accent); font: var(--k-footnote); font-weight: 600; padding: 0 4px; min-height: 18px; }
body.cl-kaices .cl-composer__status-btn::after { content: ''; position: absolute; inset: -13px -8px; }
body.cl-kaices .cl-composer__counter { flex: none; margin-left: auto; color: var(--k-amber); font-variant-numeric: tabular-nums; }
body.cl-kaices .cl-composer__counter.is-over { color: var(--k-red); }
/* composer pops (plus · emoji · link · attach) are half sheets on the phone; the scrim is the pop's own spread shadow */
body.cl-kaices .cl-composer__pop { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; max-height: min(72dvh, calc(100dvh - var(--k-kb, 0px) - 64px)) !important; margin: 0 !important; overflow-y: auto; padding: 22px 16px calc(12px + var(--kaices-safe-bottom)); border: 0; border-radius: var(--k-r-sheet, 24px) var(--k-r-sheet, 24px) 0 0; background: var(--k-surface); color: var(--k-label-1); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4), 0 -8px 32px rgba(0, 0, 0, .16); z-index: 90; animation: k-pop-up 340ms cubic-bezier(.05, .7, .1, 1) 1; }
body.cl-kaices .cl-composer__pop::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--k-label-4); }
@keyframes k-pop-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { body.cl-kaices .cl-composer__pop { animation: none; } }
body.cl-kaices .cl-composer__pop--menu { padding-top: 24px; }
body.cl-kaices .cl-composer__mrow { min-height: 56px; padding: 0 12px; gap: 14px; font: var(--k-body); border-radius: 12px; color: var(--k-label-1); }
body.cl-kaices .cl-composer__mrow svg { width: 22px; height: 22px; color: var(--k-accent); flex: none; }
body.cl-kaices .cl-composer__mrow:active { background: var(--k-pressed); }
body.cl-kaices .cl-composer__mrow.is-on { color: var(--k-accent); font-weight: 600; }
body.cl-kaices .cl-composer__mkbd, body.cl-kaices .cl-composer__mhint { display: none; }
body.cl-kaices .cl-composer__emojipop .cl-input, body.cl-kaices .cl-composer__linkpop .cl-input { min-height: 44px; font-size: 17px; border-radius: 12px; background: var(--k-fill); border: 0; padding: 0 12px; }
body.cl-kaices .cl-composer__emojipop .cl-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; margin-top: 12px; }
body.cl-kaices .cl-composer__emojipop .cl-emoji { width: 100%; height: 44px; font-size: 28px; line-height: 44px; border-radius: 10px; }
body.cl-kaices .cl-composer__linkpop { gap: 12px; }
body.cl-kaices .cl-composer__linktext { font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .cl-composer__linkrow { gap: 8px; }
body.cl-kaices .cl-composer__linkrow .cl-btn { min-height: 48px; flex: 1 1 0; border-radius: 12px; font: var(--k-headline); }
body.cl-kaices .cl-composer__linkrow .cl-btn--primary { background: var(--k-accent); color: var(--k-on-accent); border: 0; }
body.cl-kaices .cl-composer__linkrow .cl-btn:not(.cl-btn--primary) { background: var(--k-fill); color: var(--k-label-1); border: 0; }
/* @ / # // suggestions: a panel docked on top of the dock, the keyboard stays up */
body.cl-kaices .cl-suggest { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; max-width: none !important; bottom: calc(var(--k-dock, 0px) + var(--k-kb, 0px)) !important; max-height: 40dvh; overflow-y: auto; padding: 6px 8px; border: 0; border-top: var(--k-hairline) solid var(--k-separator); border-radius: 16px 16px 0 0; background: var(--k-surface); box-shadow: var(--shadow-pop); z-index: 40; transform: none !important; }
body.cl-kaices .cl-suggest__item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px; border-radius: 12px; font: var(--k-body); color: var(--k-label-1); }
body.cl-kaices .cl-suggest__item:active, body.cl-kaices .cl-suggest__item[aria-selected='true'] { background: var(--k-pressed); }
body.cl-kaices .cl-suggest__meta { font: var(--k-subhead); color: var(--k-label-3); margin-left: auto; }
body.cl-kaices .cl-suggest__empty { padding: 14px 12px; font: var(--k-subhead); color: var(--k-label-3); }
/* the quote pill and the ask / task pills over the capsule */
body.cl-kaices .cl-composer__box > .cl-composer__foot:has(.cl-composer__ask) { display: flex; gap: 8px; margin: 0 0 6px; padding: 0 !important; flex-wrap: wrap; }
body.cl-kaices .cl-composer__ask { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--k-accent-soft); color: var(--k-accent); font: var(--k-footnote); font-weight: 600; }
body.cl-kaices .cl-composer__tile-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: inherit; font-size: 18px; display: grid; place-items: center; position: relative; }
body.cl-kaices .cl-composer__tile-x::after { content: ''; position: absolute; inset: -8px; }
body.cl-kaices .cl-composer__tiles, body.cl-kaices [data-test-id='composer-tiles'] { display: flex; gap: 8px; margin: 0 0 8px; overflow-x: auto; }
body.cl-kaices .cl-composer__fallback textarea { font-size: 17px; border-radius: 22px; padding: 10px 14px; }
body.cl-kaices .cl-composer__fallback .cl-btn { min-height: 44px; }
body.cl-kaices .cl-discussion-audience { font: var(--k-subhead); }

/* — The pushed thread (frame 23's push) — */
body.cl-kaices .cl-hub--pane-open .cl-hub__pane { position: fixed; inset: 0; width: 100vw; max-width: 100vw; z-index: 60; box-shadow: none; border: 0; background: var(--k-canvas, var(--bg-canvas)); animation: k-push 340ms cubic-bezier(.05, .7, .1, 1) 1; }
@keyframes k-push { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { body.cl-kaices .cl-hub--pane-open .cl-hub__pane { animation: none; } }
body.cl-kaices .cl-pane { height: 100%; display: flex; flex-direction: column; background: var(--k-canvas, var(--bg-canvas)); padding-top: env(safe-area-inset-top, 0px); }
/* the thread PAGE (messages-design §1.7): the pane IS the page column; the native bar is the only header */
body.cl-kaices .cl-hub--pane-open .cl-hub__pane.k-threadpage { position: static; inset: auto; width: 100%; max-width: 100%; flex: 1; min-height: 0; z-index: auto; animation: none; display: flex; flex-direction: column; padding-bottom: 0; }
body.cl-kaices .k-threadpage .cl-pane { padding-top: 0; flex: 1; min-height: 0; }
body.cl-kaices .k-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 8px 16px; background: var(--k-surface); border-bottom: var(--k-hairline, 1px) solid var(--k-separator); font: var(--k-footnote); font-weight: 600; color: var(--k-accent); flex: none; }
body.cl-kaices .k-eyebrow a { color: var(--k-accent); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
body.cl-kaices .k-eyebrow__sep { color: var(--k-label-3); }
body.cl-kaices .k-eyebrow__seg--leaf { color: var(--k-label-2); }
body.cl-kaices .k-eyebrow__quote { flex-basis: 100%; font: var(--k-subhead); font-weight: 400; font-style: italic; color: var(--k-label-2); }
body.cl-kaices .k-parent__foot { margin-top: 8px; font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .k-row--earlier { width: 100%; justify-content: center; color: var(--k-accent); font: var(--k-body); background: transparent; border: 0; min-height: 44px; }
body.cl-kaices .k-row--note { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 56px; background: var(--k-warn-soft, var(--k-fill)); }
body.cl-kaices .k-row--note .k-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.cl-kaices .k-row--note .k-row__sub { font: var(--k-footnote); color: var(--k-label-3); }
/* the pane's own header stays in the DOM only as the doors the thread menu clicks (resolve, mute, archive, copy link) */
body.cl-kaices .cl-pane__head { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; padding: 0; border: 0; min-height: 0; }
body.cl-kaices .cl-pane__head > .min-w-0 { flex: 1; min-width: 0; }
body.cl-kaices .cl-pane__head .cl-section-label { font: var(--k-headline); letter-spacing: 0; text-transform: none; color: var(--k-label-1); }
body.cl-kaices .cl-pane__head > .flex.items-start { align-items: center; }
body.cl-kaices .cl-pane__trail, body.cl-kaices .cl-pane__title, body.cl-kaices .cl-pane__quote, body.cl-kaices .cl-pane__head .cl-hub__faces, body.cl-kaices .cl-pane__head .mt-0\.5 { display: none !important; }
body.cl-kaices .cl-pane__head [data-pane-close]:not(.k-pane-back) { display: none; }
body.cl-kaices .cl-pane__scroll { flex: 1; min-height: 0; overflow-y: auto; }
body.cl-kaices #comms-pane-rows > .k-parent { position: sticky; top: 0; z-index: 2; background: var(--k-surface); border-bottom: var(--k-hairline, 1px) solid var(--k-separator); max-height: 38vh; overflow-y: auto; margin-bottom: 8px; padding: 8px 16px; }
/* the emoji grid is a bottom sheet on a phone */
body.cl-kaices #comms-emoji, body.cl-kaices [data-emoji-pop] { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-height: 60vh; border-radius: var(--k-r-sheet, 24px) var(--k-r-sheet, 24px) 0 0; }

/* ═══ The EMBEDDED discussion panel (_thread_panel / _thread_list) in Kaices mode: the channel grammar ═══ */
body.cl-kaices .cl-thread-panel { background: transparent; }
body.cl-kaices .cl-thread-scroll { max-height: none !important; overflow: visible !important; }
body.cl-kaices .cl-thread-row, body.cl-kaices .cl-thread-row--compact { padding: 0; margin: 0; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; }
body.cl-kaices .cl-thread-row .cl-thread-glyphs, body.cl-kaices .cl-thread-row .cl-thread-hovergo { display: none; }
body.cl-kaices .cl-thread-row .cl-msg-tools { display: none !important; }
body.cl-kaices .cl-thread-row--compact .cl-msg, body.cl-kaices .cl-thread-panel .cl-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 8px 16px; border-radius: 0; background: transparent; align-items: start; }
body.cl-kaices .cl-thread-panel .cl-msg-avatar { width: 36px; height: 36px; font: 600 15px/1 var(--k-font, system-ui); }
body.cl-kaices .cl-thread-panel .cl-msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
body.cl-kaices .cl-thread-panel .cl-msg-name { font: 600 15px/20px var(--k-font, system-ui); color: var(--k-label-1); }
body.cl-kaices .cl-thread-panel .cl-msg-when { font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .cl-thread-panel .cl-msg-body { font: var(--k-body); color: var(--k-label-1); -webkit-line-clamp: unset; display: block; overflow: visible; }
body.cl-kaices .cl-thread-panel .cl-msg-body p { margin: 0; }
body.cl-kaices .cl-thread-panel .cl-pill, body.cl-kaices .cl-thread-panel .cl-msg-pill { font-size: 13px !important; }
body.cl-kaices .cl-thread-panel .k-msg--cont, body.cl-kaices .cl-thread-panel .cl-msg.k-msg--cont { padding-top: 0; padding-bottom: 4px; margin-top: -2px; }
body.cl-kaices .cl-thread-panel .k-msg--cont .cl-msg-avatar { visibility: hidden; height: 0; }
body.cl-kaices .cl-thread-panel .k-msg--cont .cl-msg-name { display: none; }
body.cl-kaices .cl-thread-panel .k-msg--cont .cl-msg-head { position: absolute; left: 4px; width: 56px; text-align: center; opacity: 0; }
body.cl-kaices .cl-thread-panel .k-msg--cont { position: relative; }
body.cl-kaices .cl-thread-foot { padding: 0 16px 8px 64px; display: flex; align-items: center; gap: 12px; min-height: 44px; }
body.cl-kaices .cl-thread-meta { color: var(--k-accent); font: var(--k-subhead); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
body.cl-kaices .cl-thread-replybtn { color: var(--k-accent); font: var(--k-subhead); min-height: 44px; padding: 0 8px; background: none; border: 0; }
body.cl-kaices .cl-thread-panel .cl-thread-at, body.cl-kaices .cl-thread-panel .cl-thread-ctx { padding: 8px 16px 0 64px; font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .cl-thread-panel .cl-thread-dot { background: var(--k-accent); width: 8px; height: 8px; }
body.cl-kaices .cl-thread-empty.k-empty { padding: 24px 16px; }
body.cl-kaices .cl-thread-panel > .k-composer { position: sticky; bottom: 0; }
body.cl-kaices .cl-thread-panel .cl-panel-filters { padding: 8px 16px; }
body.cl-kaices .cl-thread-panel .cl-reactions { margin-top: 6px; }

body.cl-kaices .k-conv .k-row__trail { flex-direction: column; align-items: flex-end; gap: 6px; }
body.cl-kaices .k-conv .k-row__face:empty { display: none; }
body.cl-kaices .cl-thread-panel .cl-msg-replies { grid-column: 1 / -1; margin: 0 -16px; padding: 0; border: 0; }
body.cl-kaices .cl-thread-panel .cl-msg-avatar--sm { width: 36px; height: 36px; font-size: 15px; }
body.cl-kaices .cl-thread-panel .cl-msg--reply { grid-template-columns: 36px minmax(0, 1fr); }
body.cl-kaices .cl-thread-panel .cl-thread-more { min-height: 44px; padding: 0 16px 0 64px; color: var(--k-accent); font: var(--k-subhead); background: none; border: 0; text-align: left; }
body.cl-kaices .cl-thread-panel .cl-msg-replyform { padding: 0 16px; }
body.cl-kaices .cl-thread-panel .cl-msg.k-msg--cont { padding-left: 16px; }
body.cl-kaices .cl-thread-panel .cl-msg.k-msg--cont > .cl-msg-main { grid-column: 2; }
body.cl-kaices .cl-thread-panel .cl-msg.k-msg--cont > .cl-avatar { position: static; }

/* ═══ M3b · 1.4 remainder: the pinned strip, tap-fallback rows, attachments, ONE scroll pill ═══ */
body.cl-kaices .k-pinstrip { width: 100%; text-align: left; background: var(--k-surface); border: 0; border-bottom: var(--k-hairline, 1px) solid var(--k-separator); min-height: 56px; flex: none; cursor: pointer; }
body.cl-kaices .k-pinstrip .k-row__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.cl-kaices .k-earlier { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--k-accent); font: var(--k-body); }
body.cl-kaices .cl-hub__earlier[role="button"] { cursor: pointer; padding: 0; }
body.cl-kaices .cl-hub__earlier[role="button"]:active { background: var(--k-fill); }
body.cl-kaices .cl-jump { display: flex; width: max-content; }
body.cl-kaices .cl-newpill { display: none !important; }
body.cl-kaices .k-tobottom { overflow: visible; }
body.cl-kaices .k-tobottom__count { position: absolute; top: -6px; right: -6px; }
/* attachments sized to the row: never wider than the message column, never taller than 240 */
body.cl-kaices .cl-msg > .min-w-0, body.cl-kaices .cl-msg__attachments, body.cl-kaices .cl-attach { min-width: 0; }
body.cl-kaices .cl-msg__attachments { max-width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
body.cl-kaices .cl-attach--img { display: block; max-width: 100%; width: auto; max-height: 240px; border-radius: 12px; overflow: hidden; background: var(--k-fill); }
body.cl-kaices .cl-attach--img img { width: 100%; height: 100%; max-height: 240px; object-fit: cover; }
body.cl-kaices .cl-attach--file { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 12px; background: var(--k-surface); border: var(--k-hairline, 1px) solid var(--k-separator); }
body.cl-kaices .cl-attach__main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; }
body.cl-kaices .cl-attach__ext { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--k-accent-soft); color: var(--k-accent); font: var(--k-caption); font-weight: 600; }
body.cl-kaices .cl-attach__main .text-\[12px\] { font: var(--k-subhead); font-weight: 600; color: var(--k-label-1); }
body.cl-kaices .cl-attach__main .text-\[10px\] { font: var(--k-footnote); color: var(--k-label-3); }

/* ═══ M3b · 1.2 / 1.3: the Compose sheet, the New channel sheet, the person card (F10 F11 F12) ═══ */
body.cl-kaices .k-avatar.k-avatar--presence { position: relative; overflow: visible; }
body.cl-kaices .k-presence { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--k-label-4); border: 2px solid var(--k-surface); box-sizing: border-box; }
body.cl-kaices .k-presence--on { background: var(--k-green); }
body.cl-kaices .k-presence--l { width: 16px; height: 16px; right: 0; bottom: 0; }
body.cl-kaices .k-avatar--xl { width: 56px; height: 56px; font-size: 20px; line-height: 25px; }
body.cl-kaices .k-search--sheet { margin-top: 8px; margin-bottom: 8px; }
body.cl-kaices .k-search--sheet .k-search__input { font-size: 16px; }
body.cl-kaices .k-chips--picked { margin: 0 var(--k-gutter-r) 8px var(--k-gutter); flex-wrap: wrap; overflow: visible; }
body.cl-kaices .k-chips--picked[hidden] { display: none; }
body.cl-kaices .k-chips--picked .k-chip { gap: 6px; }
body.cl-kaices .k-group--spaced { margin-top: 16px; }
body.cl-kaices .k-row__title--accent { color: var(--k-accent); }
body.cl-kaices .k-btn--strong { font-weight: 600; }
body.cl-kaices .k-btn:disabled { opacity: .4; }
body.cl-kaices .k-note { margin: 8px var(--k-gutter-r) 0 var(--k-gutter); font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .k-note--faint { color: var(--k-label-3); }
body.cl-kaices .k-note[role="alert"] { font: var(--k-subhead); color: var(--k-red); }
body.cl-kaices .k-note[hidden] { display: none; }
body.cl-kaices .k-row--toggle { justify-content: space-between; }
body.cl-kaices .k-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 16px 8px; background: var(--k-surface); border-radius: var(--k-r); margin: 0 var(--k-gutter-r) 12px var(--k-gutter); }
body.cl-kaices .k-person__name { margin: 8px 0 0; font: var(--k-title-2); color: var(--k-label-1); }
body.cl-kaices .k-person__role { margin: 0; font: var(--k-subhead); color: var(--k-label-2); }
body.cl-kaices .k-person__presence { margin: 0; font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .k-person__presence.is-on { color: var(--k-green); }
body.cl-kaices .k-actions--sheet { margin: 0 var(--k-gutter-r) 12px var(--k-gutter); }
body.cl-kaices .k-row--pick { gap: 12px; }
body.cl-kaices .k-row--pick > .k-check { flex: none; pointer-events: none; }
body.cl-kaices .k-chips--picked + .k-group__head, body.cl-kaices .k-chips--picked { margin-bottom: 12px; }

/* ═══ M3b · 1.1 Home: fold rows, the DM facepile, the empty DM group ═══ */
body.cl-kaices .k-row--fold { width: 100%; text-align: left; background: transparent; border: 0; }
body.cl-kaices .k-facepile { position: relative; display: block; width: 40px; height: 40px; }
body.cl-kaices .k-facepile .k-avatar { position: absolute; width: 26px; height: 26px; font-size: 10px; line-height: 12px; border: 2px solid var(--k-surface); box-sizing: content-box; }
body.cl-kaices .k-facepile .k-avatar:nth-child(1) { left: -2px; top: -2px; padding: 0 9px 9px 0; box-sizing: border-box; width: 30px; height: 30px; } /* the back face's initials sit clear of the front one */
body.cl-kaices .k-facepile .k-avatar:nth-child(2) { left: 12px; top: 12px; }
body.cl-kaices .k-facepile .k-presence { right: -4px; bottom: -4px; }
body.cl-kaices .k-empty--inline { background: transparent; padding: 24px 16px; }
body.cl-kaices .k-group__head .k-group__action { margin-left: auto; }
body.cl-kaices .k-group__head .k-group__count { margin-left: 8px; }

/* ═══ M3b · 1.9–1.14: the list pages (DMs, Saved, Files, Drafts, Threads, Browse) ═══ */
body.cl-kaices .k-roster { display: flex; gap: 16px; overflow-x: auto; padding: 8px var(--k-gutter-r) 12px var(--k-gutter); scrollbar-width: none; }
body.cl-kaices .k-roster::-webkit-scrollbar { display: none; }
body.cl-kaices .k-roster__item { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--k-label-1); font: var(--k-caption); padding: 0; }
body.cl-kaices .k-roster__name { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.cl-kaices .k-file__ext { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--k-accent-soft); color: var(--k-accent); font: var(--k-caption-strong); letter-spacing: .02em; flex: none; }
body.cl-kaices .k-conv { position: relative; }
body.cl-kaices .k-conv[hidden] { display: none; }
body.cl-kaices .k-row__title--wrap { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
body.cl-kaices .k-chipbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--k-fill); color: var(--k-label-1); font: var(--k-footnote); font-weight: 600; text-decoration: none; position: relative; }
body.cl-kaices .k-chipbtn::after { content: ''; position: absolute; inset: -6px -4px; }
body.cl-kaices .k-chipbtn--navy { background: var(--k-accent-soft); color: var(--k-accent); }
body.cl-kaices .k-chipbtn--float { position: absolute; right: var(--k-gutter-r, 16px); top: 50%; transform: translateY(-50%); z-index: 2; }
body.cl-kaices .k-chipbtn:active { opacity: .6; }
body.cl-kaices .k-segmented a.k-segmented__item { text-decoration: none; }
body.cl-kaices .k-msgs .k-search__input { font-size: 16px; text-overflow: ellipsis; }

/* ═══ M3b · 1.8: the channel / DM info page and its sheets (F20 F21 F9) ═══ */
body.cl-kaices .k-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px var(--k-gutter-r) 8px var(--k-gutter); }
body.cl-kaices .k-hero__glyph { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--k-accent-soft); color: var(--k-accent); }
body.cl-kaices .k-hero__title { margin: 8px 0 0; font: var(--k-title-1); color: var(--k-label-1); max-width: 100%; overflow-wrap: anywhere; }
body.cl-kaices .k-hero__sub { margin: 0; font: var(--k-subhead); color: var(--k-label-3); }
body.cl-kaices .k-presence-inline { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k-green); vertical-align: 1px; }
body.cl-kaices .k-facepile--hero { width: 56px; height: 56px; }
body.cl-kaices .k-actions--page { margin: 12px var(--k-gutter-r) 8px var(--k-gutter); }
body.cl-kaices .k-action.is-on { background: var(--k-accent); color: var(--k-on-accent); }
body.cl-kaices .k-row__title--danger { color: var(--k-red); }
body.cl-kaices .k-info [data-info-topic].is-saved { animation: k-msg-flash 600ms ease-out 1; }
body.cl-kaices .k-info__topic-input { width: 100%; font: 16px/22px var(--k-font); border: 0; background: var(--k-fill); border-radius: 8px; padding: 6px 10px; color: var(--k-label-1); }
body.cl-kaices .k-info__join { padding: 8px 16px; }
body.cl-kaices .k-row--pick { text-align: left; }

/* ═══ M3b · 1.8: the channel / DM info page and its sheets (F20 F21 F9) ═══ */
body.cl-kaices .k-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px var(--k-gutter-r) 8px var(--k-gutter); }
body.cl-kaices .k-hero__glyph { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--k-accent-soft); color: var(--k-accent); }
body.cl-kaices .k-hero__title { margin: 8px 0 0; font: var(--k-title-1); color: var(--k-label-1); max-width: 100%; overflow-wrap: anywhere; }
body.cl-kaices .k-hero__sub { margin: 0; font: var(--k-subhead); color: var(--k-label-3); }
body.cl-kaices .k-presence-inline { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k-green); vertical-align: 1px; }
body.cl-kaices .k-facepile--hero { width: 56px; height: 56px; }
body.cl-kaices .k-actions--page { margin: 12px var(--k-gutter-r) 8px var(--k-gutter); }
body.cl-kaices .k-action.is-on { background: var(--k-accent); color: var(--k-on-accent); }
body.cl-kaices .k-row__title--danger { color: var(--k-red); }
body.cl-kaices .k-info [data-info-topic].is-saved { animation: k-msg-flash 600ms ease-out 1; }
body.cl-kaices .k-info__topic-input { width: 100%; font: 16px/22px var(--k-font); border: 0; background: var(--k-fill); border-radius: 8px; padding: 6px 10px; color: var(--k-label-1); }
body.cl-kaices .k-info__join { padding: 8px 16px; }
body.cl-kaices .k-row--pick { text-align: left; }
body.cl-kaices .k-info > .k-hero { background: var(--k-surface); border-radius: var(--k-r); margin: 8px var(--k-gutter-r) 0 var(--k-gutter); padding-bottom: 4px; }
body.cl-kaices .k-info > .k-actions--page { margin-top: 8px; }
body.cl-kaices .k-info .k-row--value .k-row__value { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.cl-kaices .k-info__topic-input { text-align: left; }

/* ═══ M3b · 1.15/1.16: Activity complete (F25 F26) ═══ */
body.cl-kaices .k-act { position: relative; display: flex; align-items: stretch; background: var(--k-surface); }
body.cl-kaices .k-act > .k-row { flex: 1; min-width: 0; }
body.cl-kaices .k-act__check { flex: none; align-self: center; width: 0; margin: 0; opacity: 0; border-width: 0; overflow: hidden; transition: width 220ms var(--k-ease-state, ease), margin 220ms var(--k-ease-state, ease), opacity 150ms linear; pointer-events: none; }
body.cl-kaices .k-actv--selecting .k-act__check { width: var(--k-check, 24px); margin: 0 0 0 16px; opacity: 1; border-width: 1.5px; pointer-events: auto; }
body.cl-kaices .k-act__lead { position: relative; overflow: visible; }
/* specs/169 §5 (lane CALN): an alert row leads with the bell, not a person (an alert has no sender). */
body.cl-kaices .k-act__alert { display: inline-grid; place-items: center; background: var(--k-accent-soft); color: var(--k-accent); }
body.cl-kaices .k-kbadge { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--k-surface); color: var(--k-accent); box-shadow: 0 0 0 2px var(--k-surface); }
body.cl-kaices .k-kbadge > svg { width: 12px; height: 12px; }
body.cl-kaices .k-act__third { font: var(--k-footnote); color: var(--k-label-3); }
body.cl-kaices .k-row--compact { min-height: 56px; }
body.cl-kaices .k-bulk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 16px calc(8px + var(--kaices-safe-bottom, 0px)); background: color-mix(in srgb, var(--k-surface) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: var(--k-hairline, 1px) solid var(--k-separator); }
body.cl-kaices .k-bulk[hidden] { display: none; }
body.cl-kaices .k-bulk__count { flex: 1; font: var(--k-subhead); font-weight: 600; color: var(--k-label-1); }
body.cl-kaices .k-bulk .k-btn { min-width: 96px; height: 44px; }
body.cl-kaices [data-k-activity-select].is-done { width: auto; padding: 0 14px; border-radius: 22px; }
body.cl-kaices [data-k-activity-select].is-done > svg { display: none; }
body.cl-kaices [data-k-activity-select].is-done::after { content: attr(data-label); font: var(--k-subhead); font-weight: 600; color: var(--k-accent); }
body.cl-kaices .k-search--activity[hidden] { display: none; }
html.k-selecting body.cl-kaices .cl-hub__scroll { padding-bottom: 72px; }
body.cl-kaices .k-actv--selecting .cl-act--selected, body.cl-kaices .k-actv--selecting .k-act { background: var(--k-surface); }

/* ═══ M3b · 1.17: the case channel / object scope and Case details (F22 F23) ═══ */
body.cl-kaices .k-chips.k-chips--scope { flex: none; margin-top: calc(var(--k-head-gap) - var(--k-chips-band)); padding: var(--k-chips-band) var(--k-gutter-r) var(--k-chips-band) var(--k-gutter); background: var(--k-canvas); } /* the first thing under the native bar: its chips 16 under it (§RHYTHM) */
body.cl-kaices .k-chip.is-here { background: var(--k-accent); color: var(--k-on-accent); }
body.cl-kaices .k-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
body.cl-kaices .k-segments--scope { flex: none; padding-top: 4px; padding-bottom: 6px; }
body.cl-kaices .k-row--indent { padding-left: calc(var(--k-row-pad-x, 16px) + 40px); }
body.cl-kaices [data-scope-chat] .cl-stream-row__anchor { padding: 0 16px; margin: 8px 0 0; }
body.cl-kaices [data-scope-chat] .cl-stream-row__anchor .cl-echip { background: transparent; border: 0; padding: 0; box-shadow: none; font: var(--k-footnote); font-weight: 600; color: var(--k-accent); height: auto; min-height: 20px; }
body.cl-kaices [data-scope-chat] .cl-stream-row__anchor .cl-echip__kind { background: transparent; color: inherit; padding: 0; border: 0; font: inherit; text-transform: none; letter-spacing: 0; }
body.cl-kaices [data-scope-chat] .cl-stream-row__anchor .cl-echip__kind::after { content: ' \00b7'; }
body.cl-kaices .cl-composer__hint--external { display: none; } /* the status line already says who can read */
body.cl-kaices [data-scope-chat] .cl-stream-row__anchor .cl-echip__kind { border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0; }
body.cl-kaices [data-scope-chat] .cl-stream-row__anchor .cl-echip { border: 0; background: transparent; padding: 0; }

/* ═══ M3b · 1.18: the discussion drawer is a real sheet with a real head ═══ */
body.cl-kaices #cl-discuss .cl-discuss-bar { display: grid; grid-template-columns: 72px 1fr 56px; align-items: center; min-height: 56px; padding: 0 8px; background: transparent; border-bottom: var(--k-hairline, 1px) solid var(--k-separator); }
body.cl-kaices #cl-discuss .cl-discuss-symbol { display: none; }
body.cl-kaices #cl-discuss .cl-discuss-title { grid-column: 2; text-align: center; font: var(--k-headline); color: var(--k-label-1); }
body.cl-kaices #cl-discuss [data-discuss-close] { grid-column: 1; grid-row: 1; justify-self: start; font: var(--k-body); color: var(--k-accent); min-height: 44px; padding: 0 12px; background: none; }
body.cl-kaices #cl-discuss [data-discuss-more] { grid-column: 3; grid-row: 1; justify-self: end; min-width: 44px; min-height: 44px; font-size: 22px; color: var(--k-accent); }
body.cl-kaices #cl-discuss .cl-discuss-body { padding-top: 0; }

/* ═══ M3b · 1.19: the Claude DM and the AI settings read as phone pages ═══ */
body.cl-kaices [data-test-id="claude-head"] { display: flex; align-items: center; gap: 12px; padding: 4px var(--k-gutter-r) 8px var(--k-gutter); background: transparent; border: 0; min-height: 0; }
body.cl-kaices [data-test-id="claude-head"] .cl-avatar, body.cl-kaices [data-test-id="claude-head"] .cl-hub__title { display: none; }
body.cl-kaices [data-test-id="claude-head"] .cl-hub__subline { font: var(--k-subhead); color: var(--k-label-3); }
body.cl-kaices [data-test-id="claude-open-assistant"] { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 22px; background: var(--k-accent-soft); color: var(--k-accent); font: var(--k-footnote); font-weight: 600; text-decoration: none; }
body.cl-kaices [data-test-id="claude-notice"], body.cl-kaices .cl-claude-notice { display: flex; gap: 12px; align-items: center; margin: 0 var(--k-gutter-r) 8px var(--k-gutter); padding: 12px 16px; border-radius: var(--k-r); background: var(--k-amber-soft); color: var(--k-amber); font: var(--k-subhead); }
body.cl-kaices .cl-ai-settings { padding: 8px 0 32px; }
body.cl-kaices .cl-ai-settings .cl-hub__head, body.cl-kaices [data-ai-settings-head] { display: none; }
body.cl-kaices .cl-ai-settings__section { background: var(--k-surface); border-radius: var(--k-r); margin: 12px var(--k-gutter-r) 0 var(--k-gutter); padding: 16px; font: var(--k-subhead); }
body.cl-kaices .cl-ai-settings__section h2, body.cl-kaices .cl-ai-settings__section legend { font: var(--k-headline); color: var(--k-label-1); margin: 0 0 8px; padding: 0; }
body.cl-kaices .cl-ai-settings__notice { border: 0; background: var(--k-fill); border-radius: var(--k-r); margin: 12px var(--k-gutter-r) 0 var(--k-gutter); padding: 12px 16px; font: var(--k-subhead); }
body.cl-kaices .cl-ai-settings input[type="checkbox"], body.cl-kaices .cl-ai-check input { width: 24px; height: 24px; }
body.cl-kaices .cl-ai-settings :is(.cl-select, .cl-input, select, input[type="search"], input[type="text"], textarea) { font-size: 16px; min-height: 44px; border-radius: 8px; width: 100%; }
body.cl-kaices .cl-ai-settings .cl-btn { min-height: 44px; }
body.cl-kaices .cl-ai-settings__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: var(--k-hairline, 1px) solid var(--k-separator); }
body.cl-kaices [data-ai-settings] { padding: 0 var(--k-gutter-r) 32px var(--k-gutter); }
body.cl-kaices [data-ai-settings] .cl-ai-settings__section, body.cl-kaices [data-ai-settings] .cl-ai-settings__notice { margin-left: 0; margin-right: 0; }
body.cl-kaices [data-ai-settings] > .cl-ai-settings > p, body.cl-kaices [data-ai-settings] p { font: var(--k-subhead); color: var(--k-label-2); margin: 12px 0 0; }
/* staged attachment tiles ride ABOVE the capsule so "+" and Send stay on the capsule's own row */
body.cl-kaices .cl-composer__box > .cl-composer__tiles, body.cl-kaices .cl-composer__box > [data-test-id='composer-tiles'] { order: -1; }

/* a long-press opens the message menu: the OS text-selection callout (Copy · Look Up · Translate) must not fight it */
body.cl-kaices .cl-msg[data-k-menu], body.cl-kaices .cl-msg[data-k-menu] *, body.cl-kaices .k-act, body.cl-kaices .k-row[data-k-menu] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.cl-kaices .cl-composer__pm, body.cl-kaices .cl-composer__pm *, body.cl-kaices input, body.cl-kaices textarea, body.cl-kaices [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* HOME: the four shortcuts are one compact chip row under the title; DMs lead the list (Bennett 2026-10-09) */
body.cl-kaices .k-chips.k-msgs__shortcuts { max-width: none; scroll-padding-inline: var(--k-gutter); margin-inline: calc(-1 * var(--k-gutter)) calc(-1 * var(--k-gutter-r)); padding-inline: var(--k-gutter) var(--k-gutter-r); scrollbar-width: none; }
body.cl-kaices .k-msgs__shortcuts::-webkit-scrollbar { display: none; }
body.cl-kaices .k-msgs__shortcuts .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kaices M4: the New channel form is the sheet's column so its footer (Create channel) stays above the keyboard */
body.cl-kaices .k-sheet > form[data-compose-channel-form] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Kaices M4: the DMs page's first group head sits 24 under the All | Unreads control, like every other head */
body.cl-kaices .k-msgs > [data-dms-main] > .k-group__head:first-child { margin-top: var(--k-space-4); }
/* Kaices M4: the Activity select check takes NO room until Select mode (it kept 24px + the row pad = an avatar indented 40px) */
body.cl-kaices .k-act > .k-act__check { width: 0; min-width: 0; height: 0; border-width: 0; padding: 0; }
body.cl-kaices .k-actv--selecting .k-act > .k-act__check { width: var(--k-check, 24px); height: var(--k-check, 24px); border-width: 1.5px; }
/* Kaices M4: an Activity row's hairline is hidden on the LAST row of its card (the hidden .k-act__forms span after the row defeated :last-child) */
body.cl-kaices .k-group > .k-act:last-child > .k-row::after,
body.cl-kaices .k-group > .k-swipe:last-child .k-act > .k-row::after { display: none; }
/* Kaices M4: the composer's lists wear their markers (the reset left a bare indent: a bulleted or numbered line looked like a stray gap) */
body.cl-kaices .cl-composer__pm ul { list-style: disc outside; padding-left: 22px; }
body.cl-kaices .cl-composer__pm ol { list-style: decimal outside; padding-left: 22px; }
body.cl-kaices .cl-composer__pm li { display: list-item; }

/* ── Lane M5 · Messages pass 2 (INV-2214…2091): pinned avatars, the row sheet, density, the bar's counted bell ── */
body.cl-kaices .k-conv .k-row, body.cl-kaices .k-pin { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
body.cl-kaices .k-pins {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-space-4) var(--k-space-2);
  margin: var(--k-space-2) 0 var(--k-space-4); padding: var(--k-space-4) var(--k-space-2) var(--k-space-3);
  background: var(--k-surface); border-radius: var(--k-r-l);
}
body.cl-kaices .k-pin {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; min-width: 0;
  color: var(--k-label-1); text-decoration: none; transition: transform var(--k-dur-press, 100ms) ease;
}
body.cl-kaices .k-pin:active, body.cl-kaices .k-pin.is-held { transform: scale(.94); }
body.cl-kaices .k-pin__face { position: relative; display: block; width: 72px; height: 72px; }
body.cl-kaices .k-pins .k-avatar--pin { width: 72px; height: 72px; font-size: 26px; line-height: 32px; font-weight: 600; }
body.cl-kaices .k-pins .k-avatar--tile { border-radius: 20px; background: var(--k-accent-soft); color: var(--k-accent); }
body.cl-kaices .k-facepile--l { width: 72px; height: 72px; }
body.cl-kaices .k-pins .k-facepile--l .k-avatar { position: absolute; width: 48px; height: 48px; font-size: 17px; line-height: 20px; border: 2px solid var(--k-surface); box-sizing: border-box; padding: 0; }
body.cl-kaices .k-pins .k-facepile--l .k-avatar:nth-child(1) { left: 0; top: 0; width: 48px; height: 48px; padding: 0; }
body.cl-kaices .k-pins .k-facepile--l .k-avatar:nth-child(2) { left: 24px; top: 24px; width: 48px; height: 48px; }
body.cl-kaices .k-pin__presence { right: 0; bottom: 2px; width: 16px; height: 16px; }
body.cl-kaices .k-pin__badge { position: absolute; top: -4px; right: -4px; box-shadow: 0 0 0 2px var(--k-surface); }
body.cl-kaices .k-pin__dot { width: 16px; height: 16px; top: 0; right: 0; box-sizing: border-box; }
body.cl-kaices .k-pin__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--k-footnote); color: var(--k-label-2); }
body.cl-kaices .k-pin__name.is-unread { color: var(--k-label-1); font-weight: 600; }
body.cl-kaices .k-pin.is-muted .k-pin__face { opacity: .55; }
body.cl-kaices .k-btn--counted { position: relative; }
body.cl-kaices .k-btn__count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--k-red); color: var(--k-on-red); font: 600 11px/18px var(--k-font); text-align: center; font-variant-numeric: tabular-nums;
}
/* compact rows: a 36px avatar and a tighter row, the preview kept */
body.cl-kaices .k-msgs--compact { --k-avatar: 36px; --k-row-pad-y: 8px; }
body.cl-kaices .k-msgs--compact .k-conv .k-row { min-height: 52px; }
body.cl-kaices .k-msgs--compact .k-row__sub { font-size: 13px; line-height: 17px; }
/* the long-press sheet: the last messages as small bubbles above the actions */
body.cl-kaices .k-preview { display: flex; flex-direction: column; gap: 6px; padding: var(--k-space-2) var(--k-gutter) var(--k-space-4); }
body.cl-kaices .k-preview__name { margin: 0 0 var(--k-space-2); font: var(--k-title-3, 600 20px/25px var(--k-font)); text-align: center; color: var(--k-label-1); }
body.cl-kaices .k-preview__msg { display: flex; justify-content: flex-start; }
body.cl-kaices .k-preview__msg.is-mine { justify-content: flex-end; }
body.cl-kaices .k-preview__bubble {
  max-width: 82%; padding: 8px 12px; border-radius: 18px; background: var(--k-surface-2, var(--k-surface)); color: var(--k-label-1);
  font: var(--k-subhead); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word;
}
body.cl-kaices .k-preview__msg.is-mine .k-preview__bubble { background: var(--k-accent); color: var(--k-on-accent); }
body.cl-kaices .k-preview__none { margin: 0; text-align: center; color: var(--k-label-3); font: var(--k-subhead); }
body.cl-kaices .k-row--pinedit .k-row__trail { flex-direction: row; gap: 0; }
body.cl-kaices .k-row--pinedit [data-k-pin-move="-1"] svg { transform: rotate(180deg); }
body.cl-kaices .k-row--pinedit .k-btn:disabled { opacity: .3; }
/* the Compose sheet: the four starters are slim, so Recent people sit on the first screen (one tap to a DM) */
body.cl-kaices [data-compose-actions] .k-row { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
body.cl-kaices [data-compose-actions] .k-row__icon { --k-avatar: 32px; width: 32px; height: 32px; flex-basis: 32px; }

/* ── Lane MX · Messages pass 3 (INV-2206…2215): the AI conversation, AI settings, the case channel, the fold ── */
/* a list page's large title folds into the bar on the inner scroll (comms-kaices.js §7a) */
body.cl-kaices .k-header__large { transition: min-height var(--k-dur-fold, 220ms) ease, max-height var(--k-dur-fold, 220ms) ease, margin var(--k-dur-fold, 220ms) ease, opacity 140ms linear; }
body.cl-kaices .k-header.k-mx-folded .k-header__large { min-height: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.cl-kaices .k-header__large { transition: none; } }

/* one pinned avatar (or two) sits left-aligned at its natural width, not alone in a full-width card */
body.cl-kaices .k-pins[data-count="1"], body.cl-kaices .k-pins[data-count="2"] { width: fit-content; max-width: 100%; grid-template-columns: repeat(var(--k-pins-n, 1), 88px); padding-left: var(--k-space-3); padding-right: var(--k-space-3); }
body.cl-kaices .k-pins[data-count="2"] { --k-pins-n: 2; }

/* the AI DM: the account notice is ONE line with a door */
body.cl-kaices .cl-claude-notice--k { display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px; margin: 0 var(--k-gutter-r) var(--k-space-2) var(--k-gutter); padding: 0 4px 0 16px; border-radius: var(--k-r); background: var(--k-amber-soft); color: var(--k-amber); font: var(--k-subhead); }
body.cl-kaices .cl-claude-notice--k::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
body.cl-kaices .cl-claude-notice__text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.cl-kaices .cl-claude-notice__door { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: var(--k-subhead); font-weight: 600; color: var(--k-accent); text-decoration: none; }
body.cl-kaices .cl-claude-notice__door:active { opacity: .6; }
body.cl-kaices .cl-claude-notice--blocked { background: var(--k-red-soft, var(--k-amber-soft)); color: var(--k-red, var(--k-amber)); }
/* the duplicate "Connect an AI account" line under the capsule goes while the notice says it */
body.cl-kaices #comms-hub:has(.cl-claude-notice--k) p:has(> [data-assistant-account]) { display: none; }
body.cl-kaices [data-claude-dock] { background: transparent; }
body.cl-kaices .cl-composer--assistant { padding: 4px var(--k-gutter-r) calc(8px + var(--kaices-safe-bottom, 0px)) var(--k-gutter); }
/* the composer's top row: the model and reasoning chip (opens a sheet); the ⓘ sentence is the bar's subtitle now */
body.cl-kaices .cl-composer--assistant .cl-composer__foot { display: flex; align-items: center; gap: 8px; min-height: 0; margin: 0; padding: 0 0 4px; }
body.cl-kaices .cl-composer__model { position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 100%; min-height: var(--k-tap); height: var(--k-tap); padding: 0 8px 0 4px; border: 0; border-radius: 12px; background: transparent; color: var(--k-accent); font: 600 15px/20px var(--k-font, system-ui); letter-spacing: 0; white-space: nowrap; overflow: hidden; }
body.cl-kaices .cl-composer__model svg { flex: none; width: 16px; height: 16px; opacity: .8; }
body.cl-kaices .cl-composer__model:active { background: var(--k-fill); }
body.cl-kaices .cl-composer__model.is-locked { opacity: .6; }
body.cl-kaices .cl-composer--assistant .cl-composer__info { display: none; }
/* the model / reasoning sheet's rows */
body.cl-kaices .k-assistant-pop { display: block; width: 100%; }
body.cl-kaices .k-assistant-pop .k-group__head:first-child { margin-top: var(--k-space-2); }
body.cl-kaices .k-assistant-pop .k-row { width: 100%; text-align: left; }
body.cl-kaices .k-assistant-pop .k-row__tick { display: inline-flex; color: var(--k-accent); }
body.cl-kaices .k-assistant-pop .k-row.is-blocked { opacity: .5; }
body.cl-kaices .k-assistant-pop .k-row__sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.cl-kaices .k-assistant-pop .k-note { margin: var(--k-space-2) var(--k-gutter-r) 0 var(--k-gutter); }
/* the case channel's state chips start 16 in (the snap point was the scroller's edge, so the strip rested at scrollLeft 16 = chip at x 0) */
body.cl-kaices .k-chips--scope { scroll-padding-inline: var(--k-gutter); }

/* AI settings pages (a conversation's and the workspace's): grouped lists inside the Messages scroller */
body.cl-kaices .k-ai .k-note { margin-left: 0; margin-right: 0; }
body.cl-kaices .k-ai { padding-bottom: calc(var(--k-space-6, 32px) + var(--kaices-safe-bottom, 0px)); }
body.cl-kaices main.k-ai { padding: var(--k-head-gap) var(--k-gutter-r) var(--k-space-6) var(--k-gutter); }
body.cl-kaices .k-ai__fs { border: 0; margin: 0; padding: 0; min-width: 0; }
body.cl-kaices .k-ai__fs:disabled .k-toggle, body.cl-kaices .k-ai__fs:disabled select { opacity: .45; }
body.cl-kaices .k-ai [data-k-ai-people][hidden], body.cl-kaices .k-ai [data-k-ai-hits][hidden] { display: none; }
body.cl-kaices .k-ai__scope { margin-top: var(--k-space-2); font: var(--k-subhead); color: var(--k-label-2); }
body.cl-kaices .k-ai__warn { color: var(--k-amber); }
body.cl-kaices .k-ai__long { white-space: normal; display: block; -webkit-line-clamp: unset; overflow: visible; }
body.cl-kaices .k-ai .k-row__sub { white-space: normal; }
body.cl-kaices .k-ai .k-row--toggle .k-row__sub, body.cl-kaices .k-ai .k-row--note { font: var(--k-footnote); }
body.cl-kaices .k-ai__search { margin: var(--k-space-2) 0 0; }
body.cl-kaices .k-ai .k-group__head { margin-top: var(--k-space-4); }
body.cl-kaices .k-ai > .k-group__head:first-of-type { margin-top: 0; }
body.cl-kaices .k-ai__scope { margin-bottom: 0; }
body.cl-kaices .k-ai .k-row--fold { min-height: 56px !important; }
/* the AI conversation list (the clock): the panel's own history view with phone-size controls */
body.cl-kaices [data-assistant-history-view] > div:first-child { padding: var(--k-space-2) var(--k-gutter-r) var(--k-space-2) var(--k-gutter); gap: 8px; }
body.cl-kaices [data-assistant-history-view] input[type="search"] { min-height: 44px; font-size: 17px; border-radius: 12px; }
body.cl-kaices [data-assistant-history-view] [data-assistant-new-chat] { min-height: 44px; border-radius: 12px; font-size: 15px; }
/* the folded list title sits LEFT in the bar (Messages has four bar buttons: a centred title would run under them) */
body.cl-kaices .k-header.k-mx-folded .k-header__bar { grid-template-columns: minmax(0, 1fr) auto; }
body.cl-kaices .k-header.k-mx-folded .k-header__lead { display: none; }
body.cl-kaices .k-header.k-mx-folded :is(.k-header__compact, .k-header__compact-title) { grid-column: 1; justify-self: start; text-align: left; max-width: none; }
body.cl-kaices .k-header.k-mx-folded .k-header__actions { grid-column: 2; }
/* the AI conversation reads as every other Messages stream: flat rows (avatar, name, time, 17 px body), no bubbles */
body.cl-kaices #cl-assistant-panel [data-assistant-thread] { padding: var(--k-space-2) 0 var(--k-space-3); gap: 0; }
body.cl-kaices #cl-assistant-panel .cl-assistant-message, body.cl-kaices #cl-assistant-panel .cl-assistant-message--ai, body.cl-kaices #cl-assistant-panel .cl-assistant-message--user { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 8px 16px; max-width: none; width: 100%; gap: 12px; }
body.cl-kaices #cl-assistant-panel .cl-assistant-message:active { background: var(--k-pressed); }

/* ── Lane MSGA · Messages, the list (INV-2326…2335): the iPhone Messages grammar on Home ─────────────── */
/* rows: the unread dot rides the leading edge (not the trailing corner), the preview reads two lines, a muted row wears a crossed bell */
body.cl-kaices .k-conv .k-row { padding-left: calc(var(--k-row-pad-x) + 2px); }
body.cl-kaices .k-conv__dot { position: absolute; left: 3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--k-accent); transition: opacity var(--k-dur-fade) linear, transform var(--k-dur-state) var(--k-ease-state); }
body.cl-kaices .k-conv .k-row__title--strong { font-weight: 600; }
body.cl-kaices .k-conv .k-row__sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: break-word; }
body.cl-kaices .k-msgs--compact .k-conv .k-row__sub { -webkit-line-clamp: 1; line-clamp: 1; }
body.cl-kaices .k-conv .k-row__meta { font: var(--k-subhead); color: var(--k-label-3); }
body.cl-kaices .k-conv .k-row__trail { align-self: flex-start; padding-top: 2px; min-width: 0; }
body.cl-kaices .k-conv .k-row__mute { display: inline-grid; place-items: center; color: var(--k-label-3); }
body.cl-kaices .k-conv .k-row.is-muted .k-row__title { color: var(--k-label-2); }

/* Filters: one chip row; a filter is a toggle (the selected one fills navy), the doors after the rule are links */
body.cl-kaices .k-chip--filter.is-on, body.cl-kaices .k-msgs__shortcuts .k-chip.is-selected { background: var(--k-accent); color: var(--k-on-accent); } /* a home view the row swapped in (Threads · Saved, lane SWAP) is lit like a filter */
body.cl-kaices .k-chip--filter.is-on .k-chip__count { opacity: .85; }
body.cl-kaices .k-chip--filter { transition: background-color var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state); }
body.cl-kaices .k-chip--filter:active { transform: scale(.96); }
body.cl-kaices .k-chips__rule { flex: 0 0 1px; width: 1px; height: 20px; align-self: center; background: var(--k-separator); margin: 0 2px; }

/* the search field that pulls down from the title: rests above the first row, a pull reveals it, a tap opens Search */
body.cl-kaices .k-searchpull { display: flex; align-items: center; gap: 6px; width: 100%; height: 44px; flex: none; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 12px; background: var(--k-fill); color: var(--k-label-3); font: var(--k-body); text-align: left; scroll-snap-align: start; }
body.cl-kaices .k-searchpull:active { opacity: .7; }
body.cl-kaices .k-searchpull svg { flex: none; }

/* pinned conversations: the iPhone's big avatars, bare on the canvas (no card), three to a row */
body.cl-kaices .k-pins { background: transparent; border-radius: 0; padding: var(--k-space-2) 0 0; margin: 0 0 var(--k-space-4); gap: var(--k-space-5) var(--k-space-2); }
body.cl-kaices .k-pin__face, body.cl-kaices .k-pins .k-avatar--pin { width: 84px; height: 84px; }
body.cl-kaices .k-pins .k-avatar--pin { font-size: 30px; line-height: 36px; }
body.cl-kaices .k-pins .k-avatar--tile { border-radius: 50%; }
body.cl-kaices .k-facepile--l { width: 84px; height: 84px; }
body.cl-kaices .k-pins .k-facepile--l .k-avatar, body.cl-kaices .k-pins .k-facepile--l .k-avatar:nth-child(1), body.cl-kaices .k-pins .k-facepile--l .k-avatar:nth-child(2) { width: 56px; height: 56px; font-size: 20px; line-height: 24px; border-color: var(--k-canvas); }
body.cl-kaices .k-pins .k-facepile--l .k-avatar:nth-child(2) { left: 28px; top: 28px; }
body.cl-kaices .k-pin__name { font: var(--k-footnote); font-weight: 500; color: var(--k-label-1); }
body.cl-kaices .k-pin__badge { top: -2px; right: -2px; box-shadow: 0 0 0 2px var(--k-canvas); }
body.cl-kaices .k-pin__dot { top: 2px; left: -2px; right: auto; width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--k-canvas); }
body.cl-kaices .k-pins[data-count="1"], body.cl-kaices .k-pins[data-count="2"] { grid-template-columns: repeat(var(--k-pins-n, 1), 104px); padding-left: 0; padding-right: 0; }
body.cl-kaices .k-pin { transition: transform var(--k-dur-state) var(--k-ease-enter); }
body.cl-kaices .k-pin.is-held { transform: scale(1.06); }

/* ── the context menu (a conversation's long press): blurred scrim, the preview card, the verbs ── */
body.cl-kaices .k-scrim.k-cx-scrim { -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); background: rgba(10, 12, 20, .32); }
body.cl-kaices .k-cx { position: fixed; inset: 0; z-index: 121; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: calc(var(--kaices-safe-top, 0px) + 20px) 20px calc(var(--kaices-safe-bottom, 0px) + 20px); box-sizing: border-box; overflow: auto; pointer-events: auto; }
body.cl-kaices .k-cx__card, body.cl-kaices .k-cx__menu { opacity: 0; transform: scale(.88); transition: opacity var(--k-dur-fade) linear, transform var(--k-dur-enter) cubic-bezier(.2, 1.1, .3, 1); }
body.cl-kaices .k-cx__card { transform-origin: 50% 100%; }
body.cl-kaices .k-cx__menu { transform-origin: 0 0; transition-delay: 40ms; }
body.cl-kaices .k-cx.is-open .k-cx__card, body.cl-kaices .k-cx.is-open .k-cx__menu { opacity: 1; transform: none; }
body.cl-kaices .k-cx.is-leaving .k-cx__card, body.cl-kaices .k-cx.is-leaving .k-cx__menu { opacity: 0; transform: scale(.94); transition-duration: var(--k-dur-exit), var(--k-dur-exit); transition-timing-function: ease-in; transition-delay: 0s; }
body.cl-kaices .k-cx__card { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; box-sizing: border-box; padding: 14px 14px 16px; border-radius: 22px; background: var(--k-surface); color: var(--k-label-1); text-decoration: none; box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .06); }
body.cl-kaices .k-cx__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.cl-kaices .k-cx__face { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--k-accent-soft); color: var(--k-accent); overflow: hidden; }
body.cl-kaices .k-cx__face .k-avatar, body.cl-kaices .k-cx__face .k-facepile { transform: none; }
body.cl-kaices .k-cx__face .k-row__lead { display: contents; }
body.cl-kaices .k-cx__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--k-headline, 600 17px/22px var(--k-font)); }
body.cl-kaices .k-cx__chev { flex: none; color: var(--k-label-3); display: grid; }
body.cl-kaices .k-cx__msgs { display: flex; flex-direction: column; gap: 4px; }
body.cl-kaices .k-cx__msg { display: flex; justify-content: flex-start; }
body.cl-kaices .k-cx__msg.is-mine { justify-content: flex-end; }
body.cl-kaices .k-cx__bubble { max-width: 84%; padding: 7px 12px; border-radius: 18px; background: var(--k-fill); color: var(--k-label-1); font: var(--k-subhead); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
body.cl-kaices .k-cx__msg.is-mine .k-cx__bubble { background: var(--k-accent); color: var(--k-on-accent); }
body.cl-kaices .k-cx__none { color: var(--k-label-3); font: var(--k-subhead); text-align: center; padding: 12px 0; }
body.cl-kaices .k-cx__menu { width: 264px; max-width: 100%; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--k-surface) 88%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4); box-shadow: 0 14px 40px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .06); }
body.cl-kaices .k-cx__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; box-sizing: border-box; border: 0; background: transparent; color: var(--k-label-1); font: var(--k-body); text-align: left; text-decoration: none; }
body.cl-kaices .k-cx__item + .k-cx__item { border-top: var(--k-hairline, 1px) solid var(--k-separator); }
body.cl-kaices .k-cx__item:active { background: var(--k-fill); }
body.cl-kaices .k-cx__item svg { flex: none; color: var(--k-label-1); }
body.cl-kaices .k-cx__item--destructive, body.cl-kaices .k-cx__item--destructive svg { color: var(--k-red); }
body.cl-kaices .k-cx__item.is-note { color: var(--k-label-3); font: var(--k-subhead); min-height: 44px; }
@media (prefers-reduced-motion: reduce) { body.cl-kaices .k-cx__card, body.cl-kaices .k-cx__menu { transition: opacity 1ms; transform: none; } }

/* Edit mode: select circles slide in, a top strip says Done, a bottom bar holds the bulk verbs */
body.cl-kaices .k-conv__sel { flex: none; width: 0; height: 24px; margin-right: calc(-1 * var(--k-space-3)); border-radius: 50%; box-sizing: border-box; border: 0 solid var(--k-label-4); display: grid; place-items: center; overflow: hidden; opacity: 0; color: transparent; transition: width var(--k-dur-state) var(--k-ease-state), margin var(--k-dur-state) var(--k-ease-state), opacity var(--k-dur-fade) linear, background-color var(--k-dur-fade) linear; }
body.cl-kaices .k-editing .k-conv__sel { width: 24px; margin-right: 0; opacity: 1; border-width: 1.5px; }
body.cl-kaices .k-editing .k-conv.is-sel .k-conv__sel { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-on-accent); }
body.cl-kaices .k-editing .k-conv__dot { opacity: 0; transform: scale(.4); }
body.cl-kaices .k-editing .k-conv.is-sel .k-row { background: var(--k-accent-soft); }
body.cl-kaices .k-editstrip { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 calc(-1 * var(--k-gutter-r)) var(--k-space-2) calc(-1 * var(--k-gutter)); padding: 0 var(--k-gutter-r) 0 var(--k-gutter); background: var(--k-canvas); }
body.cl-kaices .k-editstrip[hidden] { display: none; }
body.cl-kaices .k-editstrip__title { font: var(--k-headline, 600 17px/22px var(--k-font)); color: var(--k-label-1); }
body.cl-kaices .k-editstrip button { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--k-accent); font: var(--k-body); }
body.cl-kaices .k-editstrip [data-k-edit-done] { font-weight: 600; }
body.cl-kaices .k-editfoot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; padding: 8px 12px calc(var(--kaices-safe-bottom, 0px) + 8px); background: color-mix(in srgb, var(--k-surface) 96%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); border-top: var(--k-hairline, 1px) solid var(--k-separator); transform: translateY(110%); transition: transform var(--k-dur-enter) var(--k-ease-enter); }
body.cl-kaices .k-editfoot[hidden] { display: none; }
body.cl-kaices.k-editing-on .k-editfoot { transform: none; }
body.cl-kaices .k-editfoot button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 52px; padding: 4px 8px; border: 0; background: transparent; color: var(--k-accent); font: var(--k-caption); font-weight: 500; }
body.cl-kaices .k-editfoot button:disabled { opacity: .35; }
body.cl-kaices .k-editfoot button:active:not(:disabled) { opacity: .6; }
body.cl-kaices .k-editing [data-k-searchpull] { display: none; }
body.cl-kaices .k-msgs.k-fadein [data-test-id="home-conversations"] { animation: k-msga-in var(--k-dur-state) var(--k-ease-enter); }
@keyframes k-msga-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.cl-kaices .k-conv .k-row { transition: background-color var(--k-dur-press) var(--k-ease-press), transform 320ms var(--k-ease-enter); }
body.cl-kaices .k-conv .k-row.is-pressing, body.cl-kaices .k-pin.is-pressing { transform: scale(.965); background: var(--k-fill); }
body.cl-kaices .k-pin.is-pressing { background: transparent; transform: scale(.92); }
body.cl-kaices .k-editing .k-pin__face::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid transparent; transition: border-color var(--k-dur-fade) linear; pointer-events: none; }
body.cl-kaices .k-editing .k-pin.is-sel .k-pin__face::after { border-color: var(--k-accent); }
body.cl-kaices .k-editing .k-pin:not(.is-sel) .k-pin__face { opacity: .7; }
body.cl-kaices .k-msgs.is-loading [data-test-id="home-conversations"] { opacity: .45; transition: opacity var(--k-dur-fade) linear; pointer-events: none; }
/* the New message sheet: its groups sit inset on the canvas like every list, never edge to edge */
body.cl-kaices .k-sheet[data-compose] .k-group { margin-left: var(--k-gutter); margin-right: var(--k-gutter-r); }
body.cl-kaices .k-sheet[data-compose] .k-group__head { padding-left: calc(var(--k-gutter) + var(--k-space-4)); }
body.cl-kaices .k-cx, body.cl-kaices .k-cx * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.cl-kaices .k-cx__item { -webkit-tap-highlight-color: transparent; }
body.cl-kaices .k-sheet[data-k-prefs-url] .k-group { margin-left: var(--k-gutter); margin-right: var(--k-gutter-r); }
body.cl-kaices .k-sheet[data-k-prefs-url] .k-group__head { padding-left: calc(var(--k-gutter) + var(--k-space-4)); }

/* ── Lane MSGL2 · Messages, the list pass 2 (INV-2373…2382): typography, drag-to-reorder pins, in-place search, round swipes, threads ── */
/* rows (the rubric): avatar 48, name 17/22 (600 unread), preview 15/20 two lines, time 15 on one line, the dot 10 px on the leading edge */
body.cl-kaices .k-msgs { --k-avatar: 48px; }
body.cl-kaices .k-msgs--compact { --k-avatar: 36px; }
body.cl-kaices .k-msgs .k-conv .k-row { min-height: 72px; }
body.cl-kaices .k-msgs .k-conv .k-row__title { font-size: 17px; line-height: 22px; }
body.cl-kaices .k-msgs .k-conv .k-row__sub { font-size: 15px; line-height: 20px; }
body.cl-kaices .k-msgs .k-conv .k-row__meta { font-size: 15px; line-height: 22px; white-space: nowrap; flex: none; }
body.cl-kaices .k-msgs .k-conv .k-row__trail { flex: none; }
body.cl-kaices .k-msgs .k-facepile .k-avatar--s { width: 32px; height: 32px; font-size: 12px; line-height: 16px; }
/* Threads: parent · replies · new · last reply time */
body.cl-kaices .k-thread__facts { display: flex; flex-direction: column; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
body.cl-kaices .k-thread__who { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.cl-kaices .k-thread__counts { display: flex; gap: 0; white-space: nowrap; }
body.cl-kaices .k-thread__counts > span + span::before { content: "\00a0\00b7\00a0"; color: var(--k-label-3); font-weight: 400; }
body.cl-kaices .k-thread__new { color: var(--k-accent); font-weight: 600; }
body.cl-kaices .k-thread__n { white-space: nowrap; }
/* pinned grid: a pin lifts under a long hold, follows the finger, the others slide aside */
body.cl-kaices .k-pins { position: relative; }
body.cl-kaices .k-pin { position: relative; }
body.cl-kaices .k-pin.is-lifted { z-index: 6; transition: none; will-change: transform; }
body.cl-kaices .k-pin.is-lifted .k-pin__face { box-shadow: 0 16px 32px rgba(0, 0, 0, .3); border-radius: 50%; }
body.cl-kaices .k-pin.is-lifted .k-pin__name { opacity: .6; }
body.cl-kaices .k-pin.is-dropping { transition: transform 240ms cubic-bezier(.2, 1.1, .3, 1); }
body.cl-kaices .k-pin.is-dropping .k-pin__face { box-shadow: none; transition: box-shadow 240ms linear; }
body.cl-kaices .k-pins.is-dragging .k-pin:not(.is-lifted) { transition: transform 220ms var(--k-ease-enter); }
body.cl-kaices .k-pins.is-dragging { user-select: none; -webkit-user-select: none; touch-action: none; }
/* search in place: the field is a real input; Cancel slides in; the results replace the list */
body.cl-kaices .k-searchpull { display: flex; align-items: center; gap: 0; height: 44px; padding: 0; background: transparent; border-radius: 0; }
body.cl-kaices .k-searchpull__field { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 12px; box-sizing: border-box; border-radius: 12px; background: var(--k-fill); color: var(--k-label-3); }
body.cl-kaices .k-searchpull__input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--k-label-1); font: var(--k-body); -webkit-appearance: none; appearance: none; }
body.cl-kaices .k-searchpull__input::placeholder { color: var(--k-label-3); }
body.cl-kaices .k-searchpull__input::-webkit-search-cancel-button { display: none; }
body.cl-kaices .k-searchpull__clear { flex: none; width: 28px; height: 28px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--k-label-3); display: grid; place-items: center; }
body.cl-kaices .k-searchpull__clear[hidden], body.cl-kaices .k-searchpull__cancel[hidden] { display: none; }
body.cl-kaices .k-searchpull__cancel { flex: none; height: 44px; max-width: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--k-accent); font: var(--k-body); opacity: 0; transition: max-width var(--k-dur-state) var(--k-ease-state), padding var(--k-dur-state) var(--k-ease-state), opacity var(--k-dur-fade) linear; }
body.cl-kaices .is-searching .k-searchpull__cancel { max-width: 90px; padding-left: 12px; opacity: 1; }
body.cl-kaices .k-msgs.is-searching [data-test-id="home-conversations"], body.cl-kaices .k-msgs.is-searching > #k-home-shortcuts { display: none; } /* the list and its chip row (above the region since lane SWAP) give way to the results */
body.cl-kaices .k-hsearch[hidden] { display: none; }
body.cl-kaices .k-hsearch .k-group__head { padding-top: var(--k-space-3); }
body.cl-kaices .k-hsearch .k-group:empty { display: none; }
body.cl-kaices .k-hsearch .k-conv__dot { display: block; }
body.cl-kaices .k-hsearch__deep { color: var(--k-accent); }
/* the alerts durations: the context menu swaps to its own short list */
body.cl-kaices .k-cx__menu[hidden] { display: none; }
body.cl-kaices .k-cx.is-alerts .k-cx__menu:not(.k-cx__menu--alerts) { display: none; }
body.cl-kaices .k-cx__item--head { color: var(--k-label-3); font: var(--k-subhead); min-height: 44px; }
body.cl-kaices .k-cx__item--head svg { transform: rotate(90deg); color: var(--k-label-3); }
/* swipes: the iPhone's round glyph buttons (56 px) on a 64 px slot; past halfway the outer one stretches into a pill with its label */
body.cl-kaices .k-swipe--round { background: var(--k-surface); }
body.cl-kaices .k-swipe--round .k-swipe__actions { align-items: stretch; background: var(--k-canvas); }
body.cl-kaices .k-swipe--round .k-swipe__action { background: transparent; color: inherit; min-width: 0; width: 68px; flex: 0 0 68px; padding: 0 6px; box-sizing: border-box; transition: flex-grow var(--k-dur-state) var(--k-ease-state); }
body.cl-kaices .k-swipe--round .k-swipe__action:active { filter: none; }
body.cl-kaices .k-swipe__disc { display: flex; align-items: center; justify-content: center; gap: 8px; width: 56px; height: 56px; border-radius: 28px; overflow: hidden; background: var(--k-muted); color: #fff; transition: transform 120ms var(--k-ease-state); }
body.cl-kaices .k-swipe__action:active .k-swipe__disc { transform: scale(.92); }
body.cl-kaices .k-swipe__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.cl-kaices .k-swipe__action--navy .k-swipe__disc { background: var(--k-accent); color: var(--k-on-accent); }
body.cl-kaices .k-swipe__action--amber .k-swipe__disc { background: var(--k-amber); color: var(--on-status-warning); }
body.cl-kaices .k-swipe__action--red .k-swipe__disc { background: var(--k-red); color: var(--k-on-red); }
body.cl-kaices .k-swipe__action--plum .k-swipe__disc { background: var(--k-source); color: var(--on-accent-source); }
body.cl-kaices .k-swipe__action--grey .k-swipe__disc { background: var(--k-muted); color: var(--on-status-muted); }
body.cl-kaices .k-swipe__action--green .k-swipe__disc { background: var(--k-green); color: var(--on-status-verified); }
body.cl-kaices .k-swipe--round.is-armed .k-swipe__actions:not(.k-swipe__actions--trailing) .k-swipe__action:first-child,
body.cl-kaices .k-swipe--round.is-armed .k-swipe__actions--trailing .k-swipe__action:last-child { flex: 1 1 auto; }
body.cl-kaices .k-swipe--round.is-armed .k-swipe__actions:not(.k-swipe__actions--trailing) .k-swipe__action:first-child .k-swipe__disc,
body.cl-kaices .k-swipe--round.is-armed .k-swipe__actions--trailing .k-swipe__action:last-child .k-swipe__disc { width: 100%; }
body.cl-kaices .k-swipe--round.is-armed .k-swipe__actions:not(.k-swipe__actions--trailing) .k-swipe__action:first-child .k-swipe__label,
body.cl-kaices .k-swipe--round.is-armed .k-swipe__actions--trailing .k-swipe__action:last-child .k-swipe__label { position: static; width: auto; height: auto; clip: auto; font: var(--k-subhead); font-weight: 600; }
body.cl-kaices .k-swipe--round .k-swipe__action > svg, body.cl-kaices .k-swipe__disc > svg { flex: none; }
@media (prefers-reduced-motion: reduce) { body.cl-kaices .k-pin.is-dropping, body.cl-kaices .k-pins.is-dragging .k-pin { transition: none; } }
body.cl-kaices .k-hsearch__deep .k-row__title { color: var(--k-accent); }

body.cl-kaices .k-chip--icon { padding: 0 8px; min-width: 32px; justify-content: center; }
/* the home's list (and a view the chip row swapped in) is at least the scroller's height, so the search field always rests tucked above
   the chip row and the row never moves on a filter or a view switch (lane SWAP, INV-2476) */
body.cl-kaices .k-msgs > .k-msgs__region { min-height: 100%; }

/* the home's first block under the chip row keeps the head rhythm (16) inside the swapped view wrapper too — lane SWAP wraps the views in one more div, which the rhythm's sibling rule does not see (K51) */
html[data-kaices] body.cl-kaices .k-msgs__region > :not(.k-group, .k-card, .k-row) > :is(.k-pins, .k-group, .k-group__head, .k-section, .k-card, .k-empty):first-child,
html[data-kaices] body.cl-kaices .k-msgs__region > :is(.k-pins, .k-group, .k-group__head, .k-section, .k-card, .k-empty):first-child { margin-top: var(--k-head-gap); }
/* Activity's tabs ride the sticky under-slot, whose 16 px bottom padding IS the head gap: the list's own 8 px top padding under it
   made the first day head 24 (K51; lane POLISH) — the scroller starts flush and the slot's 16 stands */
html[data-kaices] body.cl-kaices .k-msgs.cl-hub__scroll--top:has(> .k-actv) { padding-top: 0; }
/* Lane MSGFLOW: the pinned avatars under the chip row keep the head rhythm's 16 (§RHYTHM; K51 measured 0 with pins on) */
body.cl-kaices .k-msgs [data-test-id="home-conversations"] > .k-pins:first-child { margin-top: var(--k-space-4); }
/* Lane MSGFLOW pass 2 (specs/165 §MSGFLOW, INV-2557): an EMPTY conversation shows ONE intro, at the top under the bar —
   iMessage's new-conversation header (the person's face, centred, their name) in Slack's words (who sees this). The
   stream's bottom anchor (the first child's auto margin) resumes the moment a row exists: the first bubble lands over the
   composer and the intro rides above the history, as Slack's does. */
html[data-kaices] body.cl-kaices #comms-stream:not(:has(#comms-stream-rows > :not(script, template))) > .cl-hub__intro {
  margin-top: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--k-space-3);
  padding: var(--k-space-6, 32px) var(--k-space-6, 32px) var(--k-space-2);
}
html[data-kaices] body.cl-kaices #comms-stream:not(:has(#comms-stream-rows > :not(script, template))) > .cl-hub__intro .cl-avatar--lg { width: 64px; height: 64px; font-size: 24px; }
html[data-kaices] body.cl-kaices #comms-stream:not(:has(#comms-stream-rows > :not(script, template))) > .cl-hub__intro .cl-hub__intro-glyph { width: 64px; height: 64px; font-size: 28px; border-radius: 16px; }
/* lane LIVE2: Saved opened on its own (a deep link, no chip row above it) — the region already sits 16 under the title, so
   its first head adds none (K51: title → group 16); swapped in under the home's chip row it keeps the head gap */
html[data-kaices] body.cl-kaices:not(:has(.k-msgs__shortcuts)) #saved-region > .k-group__head:first-child { margin-top: 0; }

/* ── Across your work (INV-2704, specs/174) — the Messages home's one
   row per sister surface. Cells, not lists: each is a door wearing the
   surface's counts and next item. ─────────────────────────────────── */
.cl-workstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cl-workstrip__cell {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px;
  text-decoration: none; color: var(--text-primary); transition: background 120ms ease;
}
.cl-workstrip__cell + .cl-workstrip__cell { border-left: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent); }
.cl-workstrip__glyph { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; }
.cl-workstrip__glyph--tasks { background: var(--status-warning-soft); color: var(--status-warning); }
.cl-workstrip__glyph--calendar { background: color-mix(in srgb, var(--accent-brief) 13%, transparent); color: var(--accent-brief); }
.cl-workstrip__glyph--campaigns { background: color-mix(in srgb, var(--accent-source) 13%, transparent); color: var(--accent-source); }
.cl-workstrip__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cl-workstrip__head { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.cl-workstrip__head b { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.cl-workstrip__counts { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-workstrip__cell[data-tone="overdue"] .cl-workstrip__counts { color: var(--status-error); font-weight: 600; }
.cl-workstrip__cell[data-tone="today"] .cl-workstrip__counts { color: var(--status-warning); font-weight: 600; }
.cl-workstrip__next { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11px; color: var(--text-secondary); }
.cl-workstrip__next .truncate { min-width: 0; }
.cl-workstrip__when { flex: none; font: 500 10px/1.2 var(--font-mono); color: var(--text-faint); }
.cl-workstrip__arrow { flex: none; font-size: 11px; color: var(--text-faint); transition: transform 120ms ease, color 120ms ease; }
@media (hover: hover) {
  .cl-workstrip__cell:hover { background: var(--bg-surface-2); }
  .cl-workstrip__cell:hover .cl-workstrip__arrow { color: var(--text-secondary); transform: translateX(2px); }
}
@media (max-width: 760px) {
  .cl-workstrip { grid-template-columns: 1fr; }
  .cl-workstrip__cell + .cl-workstrip__cell { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent); }
}