/* Discussions in place (comms W1) — the message renderer, the docked
   side thread, the hover pill, badges, and the drawer column.
   Tokens come from django.css (--bg-surface, --border-default, …).
   Dedicated [data-discuss-dock] slots remain part of their host layout.
   Floating contextual discussions fit their content without moving page chrome. */

:root {
  --cl-discuss-w: 380px;
  --cl-hue-0: 210; --cl-hue-1: 30; --cl-hue-2: 150; --cl-hue-3: 280;
  --cl-hue-4: 0; --cl-hue-5: 190; --cl-hue-6: 50; --cl-hue-7: 320;
}

/* ── Messages ─────────────────────────────────────────────────────── */
.cl-msg {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 10px;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}

@media (hover: hover) { .cl-msg:hover { background: color-mix(in srgb, var(--bg-surface-2, #f4f4f2) 70%, transparent); } }
.cl-msg--new { box-shadow: inset 2px 0 0 var(--accent-brief, #4f6bed); }
.cl-msg--reply { grid-template-columns: 22px minmax(0, 1fr); padding: 6px 8px 6px 0; }
/* Avatars are the GLOBAL circle system (.cl-avatar --hue, django.css)
   so one person wears one color on every surface; this hook keeps only
   the grid placement. */
.cl-msg-avatar { align-self: start; margin-top: 1px; user-select: none; }
.cl-msg-avatar--sm { width: 22px; height: 22px; font-size: 8.5px; }
.cl-msg-main { min-width: 0; }
.cl-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; line-height: 1.3; }
.cl-msg-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #1a1a1a); }
.cl-msg-when { font-size: 10.5px; color: var(--text-faint, #9a9a96); }
.cl-msg-pill { font-size: 9px; }
.cl-msg-quote {
  display: block; margin: 3px 0 2px; padding: 2px 8px;
  border-left: 2px solid var(--border-default, #ddd);
  font-size: 11px; color: var(--text-muted, #6b6b68); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (hover: hover) { .cl-msg-quote:hover { color: var(--text-primary, #1a1a1a); border-left-color: var(--accent-brief, #4f6bed); } }
.cl-msg-body { font-size: 13px; line-height: 1.55; color: var(--text-primary, #1a1a1a); overflow-wrap: anywhere; }
.cl-msg-body p { margin: 0 0 4px; } .cl-msg-body p:last-child { margin-bottom: 0; }
.cl-msg-body code { font: 12px/1.4 var(--font-mono, ui-monospace, monospace); background: var(--bg-surface-2, #f1f1ef); padding: 1px 4px; border-radius: 4px; }
.cl-msg-body pre { margin: 4px 0; padding: 8px 10px; background: var(--bg-surface-2, #f1f1ef); border-radius: 6px; overflow-x: auto; }
.cl-msg-body pre code { background: none; padding: 0; }
.cl-msg-body blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid var(--border-default, #ddd); color: var(--text-muted, #6b6b68); }
.cl-msg-body ul, .cl-msg-body ol { margin: 2px 0 4px; padding-left: 20px; }
/* F14: the preflight strips list-style app-wide — restore real markers. */
.cl-msg-body ul { list-style: disc; }
.cl-msg-body ol { list-style: decimal; }
.cl-msg-body a.cl-link { color: var(--accent-brief, #4f6bed); text-decoration: underline; text-underline-offset: 2px; }
.cl-mention { background: color-mix(in srgb, var(--accent-brief, #4f6bed) 14%, transparent); color: var(--accent-brief, #4f6bed); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.cl-msg-tools {
  /* F36b: on hover frame.js PROMOTES this bar to <body> and hangs it
     above the row's top edge (the Slack anchor grammar — never on the
     author line). It cannot be done here: .cl-msg rows carry
     content-visibility:auto (django.css, F14) whose paint containment
     clips any overhang to a dead sliver. This rule is the JS-off /
     keyboard fallback — INSIDE the row box, containment-safe (the old
     top:-10px overhang was silently clipped too). */
  position: absolute; top: 2px; right: 10px; display: none; gap: 2px;
  padding: 2px; background: var(--bg-surface, #fff);
  border: 1px solid var(--border-default, #ddd); border-radius: 7px;
  box-shadow: var(--shadow-pop, 0 4px 14px rgba(0,0,0,.08));
}
.cl-msg:focus-within > .cl-msg-tools { display: flex; }
@media (hover: hover) { .cl-msg:hover > .cl-msg-tools { display: flex; } }
/* T1-9: an OPEN ⋯ menu must not vanish with the hover that revealed it. */
.cl-msg:has(details[data-cl-menu][open]) > .cl-msg-tools { display: flex; }
.cl-msg:has(.cl-msg:focus-within) > .cl-msg-tools { display: none; }
@media (hover: hover) { .cl-msg:has(.cl-msg:hover) > .cl-msg-tools { display: none; } }
.cl-msg:has(> .cl-msg-tools details[data-cl-menu][open]) > .cl-msg-tools { display: flex; }
.cl-msg-tool {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 500 10.5px/1 var(--font-sans, system-ui); color: var(--text-secondary, #444);
  padding: 5px 7px; border-radius: 5px;
}

@media (hover: hover) { .cl-msg-tool:hover { background: var(--bg-surface-2, #f1f1ef); color: var(--text-primary, #111); } }
.cl-msg-tool--accent { color: var(--accent-brief, #4f6bed); }
.cl-msg-replies { grid-column: 2; margin-top: 4px; padding-left: 6px; border-left: 2px solid var(--border-default, #e6e6e3); }
.cl-msg-replyform { grid-column: 2; margin-top: 6px; }

/* ── Thread rows (the stream) ──────────────────────────────────────── */
.cl-thread-row { padding: 4px 4px; border-bottom: 1px solid var(--border-default, #eee); }
.cl-thread-row:last-child { border-bottom: 0; }
.cl-thread-row--resolved .cl-msg { opacity: .78; }
.cl-thread-at { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 6px 12px 0 52px; font-size: 10.5px; }
.cl-thread-at-link { color: var(--accent-brief, #4f6bed); text-decoration: none; font-weight: 600; }

@media (hover: hover) { .cl-thread-at-link:hover { } }
.cl-thread-at-dead { color: var(--text-faint, #9a9a96); font-style: italic; }
/* The same anchored quote, non-door mount — roman for the same reason. */
.cl-thread-quote { color: var(--text-muted, #6b6b68); font-family: var(--font-serif, Georgia, serif); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cl-thread-resolved { display: flex; align-items: center; gap: 8px; padding: 2px 12px 6px 52px; font-size: 10px; color: var(--text-faint, #9a9a96); }
.cl-thread-empty { padding: 22px 16px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--text-muted, #6b6b68); }
.cl-thread-panel { display: flex; flex-direction: column; }
.cl-composer { padding: 10px 12px 12px; border-top: 1px solid var(--border-default, #eee); }

/* ── Compact thread cards (2026-08-31 redesign — Bennett: "Slack-thread
   quality", one grammar for every mount). A PANEL row is an index card:
   eyebrow · avatar + short name + first line · one muted meta line.
   The full back-and-forth is one click away (drawer / hub pane); the
   full renderer inside keeps every behavior (tools, reactions, edit,
   reply) — this layer only disciplines the geometry. */
.cl-thread-row--compact { position: relative; padding: 10px 14px 8px; }
/* 2026-09-10 (Bennett, with Slack's Threads view as the reference:
   "the threads need to be more visually separated"): every panel row
   is an unmistakable CARD — one bordered, rounded surface on a tinted
   canvas with clear air between cards. Tokens only; the list that
   holds the cards is the tinted canvas (the :has() hook keeps the
   template untouched — side mode, the flat renderer, is not a list
   of cards and never matches). */
.cl-thread-row--compact {
  border: 1px solid var(--border-default, #e7e5e1);
  border-radius: 10px;
  background: var(--bg-surface, #fff);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, .05));
}
.cl-thread-row--compact:last-child { border-bottom: 1px solid var(--border-default, #e7e5e1); }
div:has(> .cl-thread-row--compact) {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 10px 14px;
  background: var(--bg-canvas, #f7f6f4);
}

@media (hover: hover) { .cl-thread-row--compact:hover { background: color-mix(in srgb, var(--bg-surface-2, #f4f4f2) 70%, var(--bg-surface, #fff)); } }
.cl-thread-row--compact .cl-thread-at {
  padding: 0 64px 4px 0; gap: 6px;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
  font-size: 11px; line-height: 1.4; color: var(--text-muted, #6b6b68);
}
.cl-thread-row--compact .cl-thread-at-link { flex: none; }
.cl-thread-row--compact .cl-thread-quote { flex: 0 1 auto; min-width: 0; }
/* ── The context line (2026-08-31): the quoted passage itself, or
   "label — kind", above the message — the proven .cl-side-quote idiom.
   THE EDGE-ACCENT LAW: an edge accent may only exist where ≥8px of
   reserved padding separates it from the first glyph — here the 2px
   bar reserves 10px of padding. (Compact message rows reserve none,
   which is why their .cl-msg--new inset bar is dead below.) */
.cl-thread-ctx { border-left: 2px solid var(--accent-brief, #4f6bed); padding-left: 10px; margin-bottom: 4px; }
/* The compact row's own .cl-thread-at shorthand (below) must not zero
   the reserved padding — the accent law's ≥8px lives on this rule. */
.cl-thread-row--compact .cl-thread-at.cl-thread-ctx { padding-left: 10px; }
.cl-thread-ctx .cl-thread-at-link {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-muted, #6b6b68); font-weight: 500; font-size: 11px; text-decoration: none;
}
/* ROMAN (P8: "the anchored quote in roman"; the taste law: no italic
   chrome). The quote voice is the serif face + the quote marks + the
   edge bar — exactly the ratified .cl-side-quote idiom below, which has
   never been italic. Round-1 row 15 took the slant off the editor
   drawer; the hub card kept it until critic round-3 row 9. */
.cl-thread-ctx--quote .cl-thread-at-link {
  font-family: var(--font-serif, Georgia, serif); font-style: normal; font-size: 11.5px;
}

@media (hover: hover) { .cl-thread-ctx .cl-thread-at-link:hover { color: var(--text-primary, #1a1a1a); } }
.cl-thread-ctx-kind { color: var(--text-faint, #9a9a96); font-style: normal; font-family: var(--font-sans, system-ui); font-size: 10.5px; }
.cl-thread-ctx-go { flex: none; color: var(--text-faint, #9a9a96); font-size: 10px; }
/* The case-rollup host line: same quiet register, no bar, no arrow. */
.cl-thread-host { border-left: 0; padding-left: 0; }
.cl-thread-host .cl-thread-at-link { color: var(--text-muted, #6b6b68); font-weight: 500; font-size: 10.5px; }

@media (hover: hover) { .cl-thread-host .cl-thread-at-link:hover { color: var(--text-primary, #1a1a1a); } }
/* Grouped eyebrows: a repeat row keeps the link in the DOM (whole-row
   locator click-through) but paints nothing. */
.cl-thread-at--repeat { display: none; }
.cl-thread-row--compact .cl-msg { padding: 0; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; border-radius: 6px; }

@media (hover: hover) { .cl-thread-row--compact .cl-msg:hover { background: none; } }
/* THE CLIP FIX (edge-accent law): compact rows have zero left padding,
   so the inset unread bar drew a dark crescent across the avatar —
   unread state lives in the glyph cluster's dot instead. The side/full
   renderer keeps its bar (it reserves padding). */
.cl-thread-row--compact .cl-msg--new { box-shadow: none; }
.cl-thread-row--compact .cl-msg-avatar { width: 24px; height: 24px; font-size: 9px; }
.cl-thread-row--compact .cl-msg-body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: 12.5px; line-height: 1.5;
}
.cl-thread-row--compact .cl-msg-body p { margin: 0; }
.cl-thread-row--compact .cl-msg-body pre,
.cl-thread-row--compact .cl-msg-body blockquote { margin: 0; }
.cl-thread-row--compact .cl-msg-tools { top: 0; right: 0; }
.cl-thread-meta {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 3px 0 0 34px; padding: 0; border: 0; background: none;
  font: 500 10.5px/1.4 var(--font-sans, system-ui);
  color: var(--text-muted, #6b6b68); text-decoration: none; cursor: pointer;
}

@media (hover: hover) { .cl-thread-meta:hover { color: var(--accent-brief, #4f6bed); text-decoration: none; } }
.cl-thread-glyphs {
  position: absolute; top: 9px; right: 12px; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text-faint, #9a9a96);
}
.cl-thread-glyph { cursor: default; }
/* Unread = a server-rendered accent dot (house law: neutral row,
   status dot) — atomic under the 12s morph. */
.cl-thread-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-brief, #4f6bed); }
/* "This row goes somewhere": the ↗ cue appears with the row hover. */
.cl-thread-hovergo { visibility: hidden; }

@media (hover: hover) { .cl-thread-row--compact:hover .cl-thread-hovergo { visibility: visible; } }
/* Bounded stream (redesign): the list scrolls inside ~40vh so a
   thread-heavy subject can't outgrow its page column; the composer
   stays put below. */
.cl-thread-scroll { max-height: 40vh; overflow-y: auto; }
.cl-thread-reopen {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: 500 10px/1.2 var(--font-sans, system-ui); color: var(--text-faint, #9a9a96);
}

@media (hover: hover) { .cl-thread-reopen:hover { color: var(--accent-brief, #4f6bed); } }
.cl-thread-glyph--ok { color: var(--status-verified, #2e7d4f); }
.cl-thread-glyph--warn { color: var(--status-warning, #b45309); }
/* An open row menu must outlive the hover that revealed the toolbar. */
.cl-thread-row--compact .cl-msg:has(details[data-cl-menu][open]) .cl-msg-tools { display: flex; }
/* The hub's subject stream wears the same eyebrow over its own row
   geometry (T1-7): align with the stream row's avatar column. */
.cl-stream-row .cl-thread-at { padding: 7px 14px 0 16px; font-size: 11px; }
/* The hub stream's context line keeps the accent law's reserved 10px —
   the 16px column indent moves to margin so the shorthand can't zero it. */
.cl-stream-row .cl-thread-at.cl-thread-ctx { padding-left: 10px; margin-left: 16px; }
.cl-stream-row .cl-thread-glyph { font-size: 10px; color: var(--text-faint, #9a9a96); }
.cl-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cl-composer-ask { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-muted, #6b6b68); }
.cl-composer-hint { font-size: 9.5px; color: var(--text-faint, #9a9a96); }

/* ── The mount grammar (the comms integration law, 2026-08-31) ─────
   Filter strip, resolved fold, the row foot's reply affordance, and
   the mount's middle-elision button. */
.cl-panel-filters { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--border-default, #eee); }
.cl-thread-fold { padding: 0; }
.cl-thread-fold__line {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none;
  padding: 7px 14px; font-size: 11px; color: var(--text-muted, #6b6b68);
}
.cl-thread-fold__line::-webkit-details-marker { display: none; }

@media (hover: hover) { .cl-thread-fold__line:hover { background: color-mix(in srgb, var(--bg-surface-2, #f4f4f2) 70%, transparent); } }
.cl-thread-fold__snippet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary, #444); }
.cl-thread-fold__meta { flex: none; font-size: 10px; color: var(--text-faint, #9a9a96); }
.cl-thread-fold[open] .cl-thread-fold__line { border-bottom: 1px dashed var(--border-default, #eee); }
.cl-thread-fold__body { position: relative; padding: 8px 14px 8px; }
.cl-thread-foot { display: flex; align-items: center; gap: 10px; margin: 3px 0 0 34px; }
.cl-thread-foot .cl-thread-meta { margin: 0; }
.cl-thread-replybtn {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: 600 10.5px/1.4 var(--font-sans, system-ui); color: var(--accent-brief, #4f6bed);
}

@media (hover: hover) { .cl-thread-replybtn:hover { } }
.cl-thread-more {
  display: block; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 2px 0; font: 600 11px/1.4 var(--font-sans, system-ui); color: var(--accent-brief, #4f6bed);
}

@media (hover: hover) { .cl-thread-more:hover { } }
/* Compact mount rows: the inline replies keep the compact clamp via the
   row's descendant rules; give them the root's grid rhythm. */
.cl-thread-row--compact .cl-msg-replies { margin-top: 2px; }

/* ── The L4 thread card (the comms integration law, 2026-08-31) ─────
   ONE participatory card grammar for the hub's thread lists (Threads,
   the case channel, the subject scope): eyebrow · full root · elided
   middle · latest replies · inline reply composer · quiet foot. The
   unread state is a background wash (no edge accent — the card's rows
   reserve no left padding, the edge-accent law). */
.cl-tcard { position: relative; border-bottom: 1px solid var(--border-default, #eee); padding: 10px 18px 12px; }
.cl-tcard:last-child { border-bottom: 0; }
.cl-tcard--unread { background: color-mix(in srgb, var(--accent-brief, #4f6bed) 5%, transparent); }
.cl-tcard--resolved .cl-msg { opacity: .8; }
.cl-tcard__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 4px; font-size: 10.5px; color: var(--text-muted, #6b6b68); }
.cl-tcard__where { color: var(--text-muted, #6b6b68); text-decoration: none; font-weight: 600; }

@media (hover: hover) { .cl-tcard__where:hover { color: var(--text-primary, #1a1a1a); } }
.cl-tcard__people { color: var(--text-faint, #9a9a96); }
/* F30: the little page-door beside the eyebrow pill (the pill = the
   scope door; this ↗ = the object itself, L2's visible-but-secondary). */
.cl-tcard__pagego {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  margin-left: -4px; border-radius: 4px; font-size: 10px;
  color: var(--text-faint, #9a9a96); text-decoration: none;
}

@media (hover: hover) { .cl-tcard__pagego:hover { background: var(--bg-surface-2, #f1f1ef); color: var(--text-primary, #111); } }
.cl-tcard__menu { cursor: pointer; padding: 2px 5px; border-radius: 5px; color: var(--text-faint, #9a9a96); visibility: hidden; }

@media (hover: hover) { .cl-tcard:hover .cl-tcard__menu { visibility: visible; } }
.cl-tcard:has(details[data-cl-menu][open]) .cl-tcard__menu { visibility: visible; }

@media (hover: hover) { .cl-tcard__menu:hover { background: var(--bg-surface-2, #f1f1ef); color: var(--text-primary, #111); } }
.cl-tcard__more {
  display: block; margin: 2px 0 2px 54px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 600 11px/1.4 var(--font-sans, system-ui); color: var(--accent-brief, #4f6bed); text-align: left;
}

@media (hover: hover) { .cl-tcard__more:hover { color: var(--text-primary, #1a1a1a); } }
.cl-tcard__replies { margin-left: 40px; padding-left: 4px; border-left: 2px solid var(--border-default, #e6e6e3); }
.cl-tcard__foot { display: flex; align-items: center; gap: 8px; margin: 3px 0 0 54px; }
.cl-tcard__open {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 10.5px/1.4 var(--font-sans, system-ui); color: var(--text-muted, #6b6b68);
}

@media (hover: hover) { .cl-tcard__open:hover { color: var(--accent-brief, #4f6bed); } }
.cl-tcard__go { visibility: hidden; font-size: 10px; color: var(--text-faint, #9a9a96); }

@media (hover: hover) { .cl-tcard:hover .cl-tcard__go { visibility: visible; } }
.cl-tcard__locked { margin: 6px 0 0 54px; font-size: 10.5px; color: var(--text-faint, #9a9a96); }
.cl-tcard__composer { margin: 6px 0 0 54px; }
.cl-tcard__composer .cl-composer { padding: 0; border-top: 0; }
/* The layer's folded reply door (round-3 row 27): one 20px row in the
   card's own quiet register, at message indent, opening the SAME
   composer in place. The marker is ours, never the browser's triangle. */
.cl-tcard__replybox > .cl-tcard__replydoor {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 4px 0 0 54px; cursor: pointer;
  font: 500 10.5px/1.4 var(--font-sans, system-ui); color: var(--text-muted, #6b6b68);
}
.cl-tcard__replybox > .cl-tcard__replydoor::-webkit-details-marker { display: none; }
.cl-tcard__replybox > .cl-tcard__replydoor::before { content: "\21A9"; font-size: 11px; }

@media (hover: hover) { .cl-tcard__replybox > .cl-tcard__replydoor:hover { color: var(--accent-brief, #4f6bed); } }
.cl-tcard__replybox[open] > .cl-tcard__replydoor { color: var(--text-secondary, #444); }
/* F62: the card's reply box is the SAME composer as every other mount —
   it no longer hides its action row until focus lands (that was F14's
   second silhouette, and one control may not have two; INV-654). */
/* The card wears the ONE fine-anchor context line at message indent. */
.cl-tcard .cl-thread-at { padding: 0 0 4px 54px; }
.cl-tcard .cl-thread-at.cl-thread-ctx { padding-left: 10px; margin-left: 54px; }

/* 2026-09-10 (Bennett, with Slack's Threads view as the reference: "the
   threads need to be more visually separated"): every thread is an
   unmistakable CARD — a bordered, rounded surface on a tinted canvas with
   clear air between cards; the eyebrow (#channel · who) is the card's
   header row with its own hairline; the reply box lives inside the card's
   foot. Tokens only, so dark mode rides the same variables. The canvas is
   the list that holds the cards (Threads, the case channel, the subject
   view): the :has() hook keeps the templates untouched, and a scroll with
   no cards (the stream) never matches. */
.cl-tcard {
  border: 1px solid var(--border-default, #e6e6e3);
  border-radius: 10px;
  background: var(--bg-surface, #fff);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, .04));
  padding: 0 18px 12px;
}
.cl-tcard:last-child { border-bottom: 1px solid var(--border-default, #e6e6e3); }
.cl-tcard--unread {
  background: color-mix(in srgb, var(--accent-brief, #4f6bed) 5%, var(--bg-surface, #fff));
  border-color: color-mix(in srgb, var(--accent-brief, #4f6bed) 35%, var(--border-default, #e6e6e3));
}
.cl-tcard__eyebrow {
  padding: 10px 0 8px; margin: 0 0 10px;
  border-bottom: 1px solid var(--border-default, #e6e6e3);
  font-size: 12px;
}
/* Slack's card header: the channel is a real TITLE ("# all-brainstorming"),
   the people line sits beside it in the quiet register. */
.cl-tcard__eyebrow .cl-tcard__where {
  font-size: 13.5px; font-weight: 700; color: var(--text-primary, #1a1a1a);
  letter-spacing: -.01em;
}

@media (hover: hover) { .cl-tcard__eyebrow .cl-tcard__where:hover { color: var(--accent-brief, #4f6bed); } }
.cl-tcard__eyebrow .cl-tcard__people { font-size: 12px; }
.cl-hub__scroll:has(> .cl-tcard) {
  gap: 14px; padding: 14px 18px 22px;
  background: var(--bg-canvas, #f7f6f4);
}
.cl-tcard__composer { margin-top: 10px; }

/* The CASES nav row: click = the case channel (in the hub); the case
   page is the hover ↗ — visible-but-secondary (L2). */
.cl-hub__navrow { position: relative; display: flex; align-items: center; min-width: 0; }
.cl-hub__navrow > .cl-hub__navitem { flex: 1; min-width: 0; }

/* THE NESTED TREE (F30, Bennett: "nested hierarchy and utter
   navigability"): the chevron + child rows under a CASES/Starred case —
   the case's discussed objects, each a door to its object scope. The
   kind tag keeps the entity-kind chip so a brief reads as a brief. */
.cl-hub__twist {
  appearance: none; border: 0; background: none;
  flex: none; display: grid; place-items: center;
  width: 15px; height: 18px; margin-right: 1px; border-radius: 4px;
  color: var(--hub-rail-ink-faint, #9a9a96); cursor: pointer;
}

@media (hover: hover) { .cl-hub__twist:hover { background: var(--hub-rail-hover, rgba(255,255,255,.09)); color: var(--hub-rail-ink, #fff); } }
.cl-hub__twist svg { transition: transform 100ms ease; }
.cl-hub__twist--open svg { transform: rotate(90deg); }
.cl-hub__twist--none { pointer-events: none; }
.cl-hub__navkids {
  display: flex; flex-direction: column; gap: 1px;
  margin: 0 0 3px 17px; padding-left: 7px;
  border-left: 1px solid var(--hub-rail-line, rgba(255,255,255,.14));
}
.cl-hub__navkids.hidden { display: none; }
.cl-hub__navkid { font-size: 11.5px; padding: 3px 6px; gap: 6px; }
.cl-hub__kidkind { flex: none; display: inline-flex; }
.cl-hub__navkid .cl-crumb__kind { font-size: 8px; padding: 1px 4px; }
.cl-hub__navrow .cl-hub__navgo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; padding: 2px 6px; border-radius: 5px;
  background: var(--bg-surface-2, #f1f1ef); color: var(--text-secondary, #444);
  font-size: 11px; text-decoration: none; line-height: 1.2;
}

@media (hover: hover) { .cl-hub__navrow:hover .cl-hub__navgo { display: inline-flex; } }

@media (hover: hover) { .cl-hub__navrow .cl-hub__navgo:hover { color: var(--text-primary, #111); background: var(--border-default, #ddd); } }

/* The scoped view's object-type tabs (L3). */
.cl-scope-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 18px; border-bottom: 1px solid var(--border-default, #eee); background: var(--bg-surface, #fff); }
.cl-scope-tab { padding: 3px 9px; border-radius: 999px; font-size: 11px; color: var(--text-secondary, #444); text-decoration: none; border: 1px solid transparent; }

@media (hover: hover) { .cl-scope-tab:hover { background: var(--bg-surface-2, #f1f1ef); } }
.cl-scope-tab--on { background: var(--bg-surface-2, #f1f1ef); border-color: var(--border-default, #ddd); color: var(--text-primary, #111); font-weight: 600; }
.cl-scope-tab__n { color: var(--text-faint, #9a9a96); font-size: 10px; }

/* ── The side thread (drawer content) ──────────────────────────────── */
.cl-side { display: flex; flex-direction: column; min-height: 100%; }
.cl-side-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border-default, #eee); }
.cl-side-chip { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* F36 — ONE context block: the entity chip row (the echip grammar,
   replacing the uppercase "KIND · label" eyebrow), then the quote (a
   block-level jump link now), then the action row. */
.cl-side-entity { display: flex; align-items: center; min-width: 0; }
.cl-side-at { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #111); text-decoration: none; }

@media (hover: hover) { a.cl-side-at:hover { color: var(--accent-brief, #4f6bed); } }
.cl-side-at--dead { color: var(--text-faint, #9a9a96); font-style: italic; font-weight: 500; }
/* P8 + the taste law (the critic's row 15): the anchored quote is
   ROMAN with a quiet left rule — italic serif read as decorative chrome
   in the "Comments › <thread>" drill-in, where the quote IS the datum. */
.cl-side-quote { display: block; font: 12px/1.45 var(--font-serif, Georgia, serif); color: var(--text-secondary, #444); text-decoration: none; border-left: 3px solid var(--accent-brief, #4f6bed); padding: 2px 8px; margin-top: 2px; }

@media (hover: hover) { a.cl-side-quote:hover { color: var(--text-primary, #1a1a1a); background: color-mix(in srgb, var(--accent-brief, #4f6bed) 8%, transparent); } }
.cl-side-quote-state { font-size: 10px; color: #b45309; margin-top: 2px; }
.cl-side-new { font-size: 11px; color: var(--text-muted, #6b6b68); margin-top: 2px; }
.cl-side-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.cl-side-siblings { position: relative; }
.cl-side-siblings summary { list-style: none; cursor: pointer; }
.cl-side-siblings-menu { position: absolute; z-index: 5; right: 0; min-width: 240px; background: var(--bg-surface, #fff); border: 1px solid var(--border-default, #ddd); border-radius: 8px; box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.12)); padding: 4px; }
.cl-side-sibling, .cl-side-sibling-inline { appearance: none; border: 0; background: none; text-align: left; cursor: pointer; font: 500 11.5px/1.3 var(--font-sans, system-ui); color: var(--text-primary, #111); }
.cl-side-sibling { display: block; width: 100%; padding: 6px 8px; border-radius: 6px; }
.cl-side-sibling span { display: block; font-size: 9.5px; color: var(--text-faint, #9a9a96); }

@media (hover: hover) { .cl-side-sibling:hover { background: var(--bg-surface-2, #f1f1ef); } }
.cl-side-sibling-inline { color: var(--accent-brief, #4f6bed); padding: 0; }
.cl-side .cl-thread-row { padding: 6px 4px; }
.cl-side .cl-msg { padding-left: 8px; padding-right: 8px; }
.cl-side .cl-thread-resolved, .cl-side .cl-thread-at { padding-left: 46px; }
.cl-composer--side { margin-top: auto; position: sticky; bottom: 0; background: var(--bg-surface, #fff); }
/* P-8 (round 2): an EMPTY thread has nothing to pin the composer under —
   it sits directly beneath the anchor chip instead of the drawer floor
   (the ~450px fresh-thread void). The flat renderer is untouched. */
.cl-side--empty .cl-composer--side { margin-top: 0; position: static; }
.cl-side-locked { padding: 10px 12px; font-size: 11px; color: var(--text-muted, #6b6b68); border-top: 1px solid var(--border-default, #eee); }
.cl-side-changed { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #fef3c7; color: #92400e; }

/* ── The drawer column ─────────────────────────────────────────────── */
.cl-discuss {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-surface, #fff);
  border-left: 1px solid var(--border-default, #e6e6e3);
}
.cl-discuss[hidden] { display: none; }
.cl-discuss--floating {
  position: fixed; top: var(--topbar-h, 48px); right: 0; bottom: 0; z-index: 30;
  width: var(--cl-discuss-w);
  box-shadow: -8px 0 24px rgba(0,0,0,.05);
}
.cl-discuss--docked { position: relative; width: 100%; height: 100%; border-left: 0; }
[data-discuss-dock] { display: none; flex: 0 0 var(--cl-discuss-w); min-width: 0; max-width: 60%; }
[data-discuss-dock].cl-discuss-dock--active { display: flex; }
.cl-discuss-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--border-default, #eee); font-size: 11px; color: var(--text-muted, #6b6b68);
}
.cl-discuss-title { flex: 1; min-width: 0; font-weight: 600; color: var(--text-primary, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-discuss-body { flex: 1; min-height: 0; overflow: auto; }
.cl-discuss-resize { position: absolute; top: 0; left: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 2; }
.cl-discuss--resizing .cl-discuss-resize { background: color-mix(in srgb, var(--accent-brief, #4f6bed) 35%, transparent); }
@media (hover: hover) { .cl-discuss-resize:hover { background: color-mix(in srgb, var(--accent-brief, #4f6bed) 35%, transparent); } }
.cl-discuss-btn { appearance: none; border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 5px; font: 500 11px/1 var(--font-sans, system-ui); color: var(--text-secondary, #444); }

@media (hover: hover) { .cl-discuss-btn:hover { background: var(--bg-surface-2, #f1f1ef); color: var(--text-primary, #111); } }
.cl-discuss-loading { padding: 18px; font-size: 11.5px; color: var(--text-faint, #9a9a96); text-align: center; }

/* ── The hover pill + badges ───────────────────────────────────────── */
.cl-discuss-pill {
  position: absolute; z-index: 40; display: none; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 999px; cursor: pointer; user-select: none;
  background: var(--text-primary, #111); color: #fff; font: 600 10.5px/1 var(--font-sans, system-ui);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); white-space: nowrap;
}
.cl-discuss-pill[data-show] { display: inline-flex; }
.cl-discuss-pill kbd { font: 600 9px/1 var(--font-mono, monospace); opacity: .7; }
.cl-discuss-host { position: relative; }
.cl-discuss-badge {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  height: 16px; padding: 0 5px; border-radius: 999px; font: 600 9.5px/1 var(--font-sans, system-ui);
  background: var(--bg-surface-2, #ececea); color: var(--text-secondary, #444); cursor: pointer;
}

@media (hover: hover) { .cl-discuss-badge:hover { background: var(--border-default, #ddd); color: var(--text-primary, #111); } }
.cl-discuss-badge[data-unread="1"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-brief, #4f6bed); }
.cl-discuss-badge--abs { position: absolute; top: 4px; right: 4px; }
.cl-discuss-badge:empty { display: none; }
.cl-discuss-flash { animation: cl-discuss-flash 1.6s ease-out 1; }
@keyframes cl-discuss-flash { 0% { background: color-mix(in srgb, var(--accent-brief, #4f6bed) 22%, transparent); } 100% { background: transparent; } }
.cl-discuss-menu {
  position: absolute; z-index: 60; min-width: 170px; padding: 4px;
  background: var(--bg-surface, #fff); border: 1px solid var(--border-default, #ddd); border-radius: 8px;
  box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.12));
}
.cl-discuss-menu button { display: block; width: 100%; text-align: left; appearance: none; border: 0; background: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; font: 500 12px/1.2 var(--font-sans, system-ui); color: var(--text-primary, #111); }

@media (hover: hover) { .cl-discuss-menu button:hover { background: var(--bg-surface-2, #f1f1ef); } }

/* System lines (a re-pin): one quiet row, no toolbar. */
.cl-msg--system { grid-template-columns: 18px minmax(0, 1fr); padding: 3px 12px; font-size: 11px; color: var(--text-muted, #6b6b68); }

@media (hover: hover) { .cl-msg--system:hover { background: none; } }
.cl-msg-sysdot { color: var(--text-faint, #9a9a96); text-align: center; }
.cl-msg-body--inline { display: inline; font-size: 11px; color: var(--text-muted, #6b6b68); }
.cl-msg-body--inline p { display: inline; margin: 0; }

/* A VERTICAL dock slot (the viewer's inspector column, the editor's
   gutter column): the drawer takes the lower part of the column and
   the pane above shrinks — content reflows, nothing is covered. */
.cl-discuss-dock--v[data-discuss-dock] { flex: 0 0 auto; max-width: none; width: 100%; }
.cl-discuss-dock--v[data-discuss-dock].cl-discuss-dock--active { display: flex; flex: 0 0 46%; min-height: 220px; max-height: 60%; border-top: 1px solid var(--border-default, #e6e6e3); }
.cl-discuss-dock--v .cl-discuss--docked { height: 100%; }
.cl-discuss-dock--v .cl-discuss-resize { display: none; }

/* ── The ONE message row, in the assistant panel too (F48, INV-647) ──
   Bennett, 2026-09-02: his own message in the Claude DM rendered as a
   dark RIGHT-ALIGNED bubble with the literal ``` fences showing, while
   Claude's answers rendered as left bubbles — two visual languages in
   one conversation, neither of them the hub's. assistant.js now emits
   the hub's `.cl-msg` rows (avatar · name · time over the body), so the
   rules below only have to make the panel's scroller stop adding
   chat-bubble spacing around them. */
.cl-msg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; line-height: 1.3; }

/* A CONTINUATION row — same author, inside five minutes (Slack's rule).
   The header goes, the avatar's column stays so bodies stay aligned. */
.cl-msg--cont { padding-top: 1px; padding-bottom: 1px; }
.cl-msg--cont > .cl-avatar { visibility: hidden; height: 0; min-height: 0; }
.cl-msg--cont .cl-msg__head { display: none; }

/* The panel's scroller: rows own their own spacing and bleed to the
   panel edge so the hover band is full-width, the way it is in the hub.
   Everything that is NOT a row (notices, cards, the empty state) keeps
   the container's own padding and gap. */
[data-assistant-thread] { gap: 8px; }
/* A transcript is rebuilt after streaming and during reconnect. Estimated
   offscreen row heights discard long replies and destabilize scroll anchoring.
   Keep these bounded transcript rows laid out at their real heights. */
[data-assistant-thread] .cl-msg,
#comms-hub .cl-msg,
[data-comms-layer-root] .cl-msg { content-visibility: visible; contain-intrinsic-size: none; }
[data-assistant-thread] > .cl-msg { margin-inline: -16px; padding-inline: 16px; }
[data-assistant-thread] > .cl-msg + .cl-msg { margin-top: -8px; }

/* Critic row 28 (the hover toolbar over the row's header) is ALREADY
   solved, and not with CSS: `.cl-msg` carries content-visibility:auto,
   whose paint containment clips and kills hit-testing on anything
   outside the row box, so frame.js PROMOTES the bar to <body> as
   position:fixed above the row's top edge on pointerover (see the F36b
   rationale on `.cl-msg__tools` in django.css). A `top:-10px` here
   reproduced exactly the click-dead sliver that comment warns about —
   measured: the stream row's "reply in thread" button resolved but
   could not be clicked, so no thread pane would open at all. Do not
   re-add an offset here. */

/* An inline NOTICE — one quiet line and a single door, never a filled
   card with a button in it (the banner law, P10 density). Bennett,
   2026-09-02: a fat amber "Connect your Claude account" card, repeated
   per blocked turn, was the loudest thing in the conversation. */
.cl-inotice {
  display: flex; align-items: baseline; gap: 8px;
  margin: 2px 0; padding: 3px 0 3px 9px;
  border-left: 2px solid var(--border-strong, #ddd);
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted, #6b6b68);
}
.cl-inotice--warn { border-left-color: var(--status-warning, #b8860b); }
.cl-inotice__text { min-width: 0; }
.cl-inotice__door {
  flex: none; font-weight: 600; color: var(--accent-brief, #4f6bed);
  text-decoration: underline; text-underline-offset: 2px;
}

/* The DOCKED assistant panel (the hub's Claude DM) already sits under
   the hub's own "Claude · Private — runs on your account" header, so its
   private navy title bar is a SECOND header for the same conversation —
   ~48px of duplicate chrome above a void. It goes when docked; the
   floating widget keeps it. (Bennett, 2026-09-02.) */
[data-claude-dock] [data-test-id='assistant-header'] { display: none; }
/* Docked, the panel is the pane: no rounded floating-card chrome. */
[data-claude-dock] .cl-assistant-panel { border: 0; border-radius: 0; box-shadow: none; }

/* Docked, a short conversation starts at the TOP. The floating widget
   pins its messages to the composer with a margin-top:auto spacer; in a
   ~950px-wide pane that same spacer is a ~700px VOID above the first
   message, which is what Bennett saw on 2026-09-02. */
[data-claude-dock] [data-assistant-spacer] { display: none; }
[data-claude-dock] [data-assistant-thread] { padding-top: 10px; }

/* A tombstone is quiet TEXT, not italic chrome (INV-653). */
.cl-msg__body--tomb { color: var(--text-faint, #9a9a96); }

/* A DM stream groups the same way a thread does: consecutive roots by
   one person drop the repeated identity line. */
.cl-stream-row--cont > .cl-msg > .cl-avatar { visibility: hidden; height: 0; min-height: 0; }
.cl-stream-row--cont > .cl-msg .cl-msg__head { display: none; }

/* ── The three faces (specs/121 §8) ──────────────────────────────────
   One unread thing, one of three faces, the same face everywhere:
   `count` = bold row + a red number; `dot` = bold row + a disc; `none`
   with unread = dimmed row + a bell-slash. comms-hub.js hydrate() and
   _nav.html set the same classes (data-face carries the word). Tokens
   only; the dark hub rail (.cl-hub__nav) re-tints the disc like it does
   the accent pill. */
.cl-hub__navitem--count { font-weight: 600; }
.cl-hub__navitem--muted { opacity: 0.62; font-weight: 400; }
.cl-hub__navitem--muted.cl-hub__navitem--active { opacity: 0.85; }
.cl-hub__count--dot {
  min-width: 0; width: 7px; height: 7px; padding: 0; margin-right: 4px;
  border-radius: 999px; background: var(--accent-brief, #4f6bed); color: transparent;
}
.cl-hub__nav .cl-hub__count--dot { background: #fff; }
.cl-hub__muted[data-nav-slash] { color: var(--text-faint, #9a9a96); }

/* Presence on an avatar (specs/121 §9): the realtime chip's box reset
   so the hub's own .cl-avatar renders unchanged, with the live dot
   riding the chip's ::after (green = a subscribed socket, or the
   last_seen seed while the socket is off). */
.cl-presence--avatar {
  width: auto; height: auto; margin-left: 0; border: 0; background: none;
  font: inherit; color: inherit; display: inline-flex;
}
.cl-presence--avatar::after { right: -2px; bottom: -2px; width: 7px; height: 7px; display: none; }
.cl-presence--avatar[data-online]::after { display: block; }
.cl-hub__faces .cl-presence--avatar + .cl-presence--avatar { margin-left: -4px; }

/* The bell while notifications are paused (specs/121 §2): a moon rides
   the icon; the ⋯ chevron beside it opens Pause / Resume / Settings. */
.cl-bell__moon {
  position: absolute; right: -4px; bottom: -3px; display: none;
  width: 13px; height: 13px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--bg-surface, #fff); color: var(--text-secondary, #555);
  border: 1px solid var(--border-default, #ddd);
}
[data-comms-paused="1"] .cl-bell__moon { display: inline-flex; }
[data-comms-paused="1"] [data-comms-badge] { right: -6px; top: -6px; }
.cl-bell__menu { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); }
.cl-bell__more {
  display: inline-flex; width: 12px; height: 16px; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-faint, #9a9a96); border-radius: 4px;
}
.cl-bell__more::-webkit-details-marker { display: none; }

@media (hover: hover) { .cl-bell__more:hover { color: var(--text-primary, #1a1a1a); background: var(--bg-surface-2, #f4f4f2); } }
.cl-bell__menuhead {
  padding: 6px 10px 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint, #9a9a96);
}
.cl-bell__menu .cl-menu-item { width: 100%; text-align: left; }

/* ═══════════════════════════════════════════════════════════════════════
   Activity (specs/121 §10) — Slack's Activity view in kaices's grammar.
   The two-pane split (the list ≥380px, the shell's thread pane flex once
   a row is selected), the header's tabs + toggles, and THE row grammar
   (.cl-act) that the Messages home's "Mentions and DMs" mounts too: hover wash, selected
   state, unread bold + dot, the red count pill, the dense variant.
   Tokens only — dark mode rides the same variables. discuss.css loads
   after django.css, so these .cl-act rules supersede the built F30 ones.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the split ──────────────────────────────────────────────────────── */
.cl-actv { display: flex; flex: 1; min-height: 0; container-type: inline-size; }
.cl-actv__split {
  /* Slack's proportions (punch list #33): the list is the page; the
     detail pane is the narrow third on the right. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 32%);
  flex: 1; min-height: 0; width: 100%;
}
.cl-actv__list {
  min-width: 0; min-height: 0; overflow: auto;
  border-right: 1px solid var(--border-default, #ddd);
  background: var(--bg-canvas, #fafaf8);
}
.cl-actv__rows { padding: 6px 8px 24px; }
.cl-actv__pane { display: grid; place-items: center; min-height: 0; background: var(--bg-surface, #fff); }
.cl-actv__pane-empty { text-align: center; color: var(--text-muted, #6b6b68); max-width: 36ch; padding: 24px; }
.cl-actv__pane-art {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px;
  border-radius: 999px; background: var(--bg-surface-2, #f4f4f2); color: var(--text-faint, #9a9a96);
}
.cl-actv__pane-title { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--text-secondary, #444); }
.cl-actv__pane-hint { margin: 6px 0 0; font-size: 10.5px; color: var(--text-faint, #9a9a96); }
/* A selected row opens the shell's own pane on the right: the
   placeholder yields, the list keeps its width, the pane takes the flex
   column (the hub grid's third track). Under 1100px the shell already
   overlays the pane, so only the placeholder changes there. */
.cl-hub--pane-open .cl-actv__split { grid-template-columns: minmax(0, 1fr); }
.cl-hub--pane-open .cl-actv__pane { display: none; }
.cl-hub--pane-open .cl-actv__list { border-right: 0; }
@media (min-width: 1101px) {
  .cl-hub--pane-open[data-hub-view='activity'] { grid-template-columns: 232px minmax(0, 1fr) minmax(380px, 36%); }
}
/* Narrow mounts (the 420px layer, a phone): one column, no placeholder. */
@container (max-width: 720px) {
  .cl-actv__split { grid-template-columns: minmax(0, 1fr); }
  .cl-actv__pane { display: none; }
  .cl-actv__list { border-right: 0; }
}

/* ── the header ─────────────────────────────────────────────────────── */
.cl-actv__chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; text-decoration: none;
  color: var(--accent-brief, #4f6bed); background: var(--accent-brief-soft, #e8ecfd);
}

@media (hover: hover) { .cl-actv__chip:hover { background: var(--accent-brief-softer, var(--accent-brief-soft, #e8ecfd)); } }
.cl-actv__status { font-size: 11px; color: var(--status-error, #b3261e); }
.cl-actv__status:empty { display: none; }
.cl-actv__banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 6px 18px; border-bottom: 1px solid var(--border-default, #ddd);
  background: var(--bg-surface, #fff); font-size: 11.5px; color: var(--text-secondary, #444);
}
.cl-actv__asks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
  padding: 10px 12px 6px; border-bottom: 1px solid var(--border-default, #ddd);
}

/* ── the row (one grammar for messages; Home mounts it too) ──────────── */
.cl-act {
  position: relative; display: block; margin: 0 0 2px; padding: 0;
  border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none;
}
.cl-act__main {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
  padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none;
}
.cl-act:focus-within { background: color-mix(in srgb, var(--bg-surface-2, #f4f4f2) 70%, transparent); border-color: transparent; }
@media (hover: hover) { .cl-act:hover { background: color-mix(in srgb, var(--bg-surface-2, #f4f4f2) 70%, transparent); border-color: transparent; } }
.cl-act--unread { background: var(--bg-surface, #fff); border-color: var(--border-default, #ddd); box-shadow: none; }

@media (hover: hover) { .cl-act--unread:hover { background: var(--bg-surface, #fff); border-color: var(--border-strong, #ccc); } }
.cl-act--unread .cl-act__who, .cl-act--unread .cl-act__snip { color: var(--text-primary, #1a1a1a); font-weight: 600; }
.cl-act--selected, .cl-act[aria-selected='true'] {
  background: var(--accent-brief-soft, #e8ecfd); border-color: var(--accent-brief, #4f6bed);
}

@media (hover: hover) { .cl-act--selected:hover, .cl-act[aria-selected='true']:hover { background: var(--accent-brief-soft, #e8ecfd); } }
.cl-act:focus-visible { outline: 2px solid var(--accent-brief, #4f6bed); outline-offset: -2px; }
.cl-act--muted { opacity: 0.7; }
.cl-act__avatar { width: 28px; height: 28px; font-size: 11px; margin-top: 1px; }
.cl-act__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-act__top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cl-act__who { flex: none; font-size: 12.5px; font-weight: 500; color: var(--text-secondary, #444); }
.cl-act__src {
  display: inline-flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0;
  font-size: 11px; color: var(--text-muted, #6b6b68); white-space: nowrap; overflow: hidden;
}
.cl-act__where { flex: none; white-space: nowrap; }
/* The verb ("in" · "asked you" · "assigned you a task") and the object chip never shrink —
   a crowded top line ellipsizes the thread's title, never the grammar (Bennett 2026-09-12: "i."). */
.cl-act__where--title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-act__src > .cl-echip { flex: none; }
.cl-act__glyph {
  display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 4px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--text-faint, #9a9a96); background: var(--bg-surface-2, #f4f4f2);
}
.cl-act__glyph--at { color: var(--accent-brief, #4f6bed); background: var(--accent-brief-soft, #e8ecfd); }
.cl-act__glyph--ask { color: var(--status-warning, #92400e); }
.cl-act__glyph--done { color: var(--status-success, var(--done, #15803d)); }
.cl-act__glyph--partner { color: var(--accent-source, #7a5af5); }
.cl-act__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cl-act__stamp { flex: none; margin-left: auto; font-size: 10.5px; color: var(--text-faint, #9a9a96); font-variant-numeric: tabular-nums; }
.cl-act__snip {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 12px; line-height: 1.4; color: var(--text-muted, #6b6b68); white-space: normal; font-weight: 400;
}
.cl-act__more { font-size: 10.5px; color: var(--text-faint, #9a9a96); }
.cl-act__face { align-self: center; display: grid; place-items: center; min-width: 18px; }
.cl-act__pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--status-error, #b3261e); color: var(--color-white, #fff);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700; line-height: 1;
}
.cl-act__udot { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--accent-brief, #4f6bed); }
.cl-act__mutedglyph { font-size: 11px; color: var(--text-faint, #9a9a96); }
/* hover verbs — the toolbar floats over the stamp corner while the row
   is hovered, focused or selected; the stamp steps aside. */
.cl-act__tools {
  /* Slack's hover chip: floats ABOVE the row's top-right corner, never over
     the words — the row's own click target stays clean. */
  position: absolute; top: -13px; right: 10px; z-index: 2; display: none; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--border-default, #ddd); border-radius: 8px; background: var(--bg-surface, #fff);
  box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.08));
}
.cl-act:focus-within .cl-act__tools, .cl-act[aria-selected='true'] .cl-act__tools { display: inline-flex; }
@media (hover: hover) { .cl-act:hover .cl-act__tools { display: inline-flex; } }
.cl-act__tool {
  appearance: none; border: 0; background: transparent; width: 26px; height: 26px; padding: 0; border-radius: 6px;
  display: inline-grid; place-items: center; color: var(--text-secondary, #444);
  text-decoration: none; cursor: pointer; line-height: 1;
}

@media (hover: hover) { .cl-act__tool:hover { background: var(--bg-surface-2, #f4f4f2); color: var(--text-primary, #1a1a1a); } }
.cl-act__tools form[aria-busy='true'] .cl-act__tool { opacity: 0.5; cursor: progress; }

/* ── dense: one line per group ─────────────────────────────────────── */
.cl-act--dense { margin-bottom: 0; }
.cl-act--dense .cl-act__main { grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 4px 10px; }
.cl-act--dense .cl-act__avatar { width: 18px; height: 18px; font-size: 8px; margin: 0; }
.cl-act--dense .cl-act__body { flex-direction: row; align-items: baseline; gap: 6px; }
.cl-act--dense .cl-act__top { display: contents; }
.cl-act--dense .cl-act__who { font-size: 12px; }
.cl-act--dense .cl-act__src { flex: 0 1 auto; max-width: 42%; }
.cl-act--dense .cl-act__snip {
  display: block; flex: 1 1 auto; min-width: 0; order: 4; -webkit-line-clamp: unset;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; line-height: 1.3;
}
.cl-act--dense .cl-act__stamp { order: 5; }
.cl-act--dense .cl-act__tools { top: -13px; }

/* specs/121 §2 — the channel notify menu: two-line items (title + a
   quiet explainer) and one note under the levels. */
.cl-menu-item--two { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.cl-menu-item--two .cl-menu-sub { font-size: 10.5px; color: var(--text-faint, #9a9a96); font-weight: 400; }
.cl-menu-note { padding: 4px 10px 8px; font-size: 10.5px; line-height: 1.4; color: var(--text-faint, #9a9a96); max-width: 260px; }
.cl-bell__menu-moved .cl-menu-item { width: 100%; text-align: left; }

/* specs/121 — Slack's attention to detail: everything clickable in the
   hub is a pointer with a hover state; names underline like a link. */
#comms-nav a, #comms-nav button, #comms-main a, #comms-main button, #comms-pane a, #comms-pane button,
#comms-layer-doc a, #comms-layer-doc button, .cl-hub [role="button"], .cl-hub [data-comms-open-thread],
.cl-hub summary, .cl-act, .cl-tcard__open, .cl-hub__navitem, .cl-home__row, .cl-conv, [data-person],
.cl-msg__name, .cl-msg-name, .cl-msg__time, .cl-tcard__where, .cl-notify button, .cl-notify a { cursor: pointer; }

@media (hover: hover) { .cl-msg__time:hover { color: var(--text-primary, #1a1a1a); } }

@media (hover: hover) { .cl-hub__navitem:hover, .cl-home__row:hover, .cl-conv:hover, .cl-act:hover { background: color-mix(in srgb, var(--bg-surface-2, #f4f4f2) 70%, transparent); } }

@media (hover: hover) { .cl-btn:hover, .cl-hub summary:hover { filter: brightness(0.97); } }

@media (hover: hover) { [data-person] .cl-avatar:hover, .cl-avatar[data-person]:hover { outline: 2px solid color-mix(in srgb, var(--accent-brief, #4f6bed) 40%, transparent); outline-offset: 1px; } }

/* Activity header — Slack's two flat rows (specs/121 §10, 2026-09-11):
   title + Unreads switch + three quiet icons, then plain-text tabs on one
   hairline. The shared .cl-hub__tabs pill bar is switched OFF here. */
.cl-actv__head { display: block; padding: 10px 18px 0; }
.cl-actv__row--title { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.cl-actv__row--title .cl-hub__title { margin-right: 4px; }
.cl-actv__iconbtn[disabled] { opacity: 0.35; cursor: default; }

@media (hover: hover) { .cl-actv__iconbtn[disabled]:hover { background: transparent; color: var(--text-muted, #6b6b68); } }
.cl-actv__sep { width: 1px; height: 16px; margin: 0 4px; background: var(--border-default, #e6e6e3); }
.cl-actv__tabs { display: flex; gap: 0; margin: 4px 0 0; padding: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border-default, #e6e6e3); }
.cl-actv__tabs .cl-hub__tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px 9px; border-radius: 0; background: transparent; box-shadow: none; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #444); border-bottom: 2px solid transparent; margin-bottom: -1px; }

@media (hover: hover) { .cl-actv__tabs .cl-hub__tab:hover { color: var(--text-primary, #1a1a1a); border-bottom-color: var(--border-strong, #cfcfcb); } }
.cl-actv__tabs .cl-hub__tab--on { background: transparent; box-shadow: none; color: var(--text-primary, #1a1a1a); border-bottom-color: var(--text-primary, #1a1a1a); }
@media (hover: hover) { .cl-actv__tabs .cl-hub__tab--on:hover { background: transparent; box-shadow: none; color: var(--text-primary, #1a1a1a); border-bottom-color: var(--text-primary, #1a1a1a); } }
.cl-actv__at, .cl-actv__hash { font-weight: 700; font-size: 12px; opacity: 0.8; }
.cl-actv__switch { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 6px; border-radius: 8px; border: 0; background: transparent; font: 600 12px/1 var(--font-sans, system-ui); color: var(--text-secondary, #444); cursor: pointer; }

@media (hover: hover) { .cl-actv__switch:hover { background: var(--bg-surface-2, #f4f4f2); color: var(--text-primary, #1a1a1a); } }
.cl-actv__knob { position: relative; display: inline-block; flex: none; width: 26px; height: 16px; border-radius: 999px; background: var(--border-strong, #cfcfcb); transition: background 120ms; }
.cl-actv__knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 120ms; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); }
.cl-actv__switch--on { color: var(--text-primary, #1a1a1a); }
.cl-actv__switch--on .cl-actv__knob { background: var(--accent-brief, #4f6bed); }
.cl-actv__switch--on .cl-actv__knob::after { transform: translateX(10px); }
.cl-actv__layout[aria-pressed="true"] { color: var(--text-primary, #1a1a1a); }
.cl-actv__status:empty { display: none; }

/* Sidebar hover flyouts (specs/121 punch list #20 — Slack's rail preview):
   resting on Activity / Threads / Saved opens that page's list beside the
   sidebar; leaving both closes it. The flyout is a card, never a page. */
.cl-flyout { position: fixed; z-index: 60; width: 400px; max-height: 72vh; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-default, #e6e6e3); border-radius: 12px; background: var(--bg-surface, #fff);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.18), 0 1px 3px rgb(0 0 0 / 0.08); animation: cl-flyout-in 120ms ease-out; }
@keyframes cl-flyout-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.cl-flyout__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-default, #e6e6e3); font: 700 14px/1.2 var(--font-sans, system-ui); color: var(--text-primary, #1a1a1a); }
.cl-flyout__head a { margin-left: auto; font: 500 11px/1 var(--font-sans, system-ui); color: var(--text-muted, #6b6b68); text-decoration: none; }

@media (hover: hover) { .cl-flyout__head a:hover { color: var(--text-primary, #1a1a1a); } }
.cl-flyout__body { overflow: auto; min-height: 0; }
.cl-flyout .cl-hub__head, .cl-flyout .cl-actv__row--title { display: none; }
.cl-flyout .cl-actv__split { display: block; }
.cl-flyout #activity-pane, .cl-flyout .cl-actv__pane { display: none; }
.cl-flyout .cl-hub__scroll { max-height: none; }

/* Direct messages view (specs/121 §16 — Slack's DMs page, punch list #13):
   the list beside the conversation; the rows are Home's .cl-conv grammar,
   the conversation is the stream partial laid out exactly as in #comms-main. */
.cl-dms__head { align-items: center; padding: 10px 18px; }
.cl-dms { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cl-dms__split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
.cl-dms__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-default, #e6e6e3); background: var(--bg-surface, #fff); }
.cl-dms__find { display: flex; align-items: center; gap: 8px; margin: 10px 12px 6px; padding: 0 10px; height: 30px; border-radius: 8px; border: 1px solid var(--border-default, #e6e6e3); background: var(--bg-canvas, #f8f8f6); color: var(--text-muted, #6b6b68); cursor: text; }
.cl-dms__find:focus-within { border-color: var(--border-strong, #cfcfcb); background: var(--bg-surface, #fff); }
.cl-dms__findicon { display: inline-grid; flex: none; }
.cl-dms__findinput { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 12px/1 var(--font-sans, system-ui); color: var(--text-primary, #1a1a1a); outline: none; }
.cl-dms__findinput::placeholder { color: var(--text-faint, #9a9a96); }
.cl-dms__rows { flex: 1; min-height: 0; overflow: auto; padding: 2px 8px 16px; }
.cl-dms__rows .cl-conv { padding: 8px 10px; border-radius: 8px; gap: 12px; }
.cl-dms__rows .cl-conv__avatar .cl-avatar--lg { width: 34px; height: 34px; font-size: 12px; }
.cl-dms__rows .cl-conv__name { font-size: 13px; }
.cl-dms__rows .cl-conv__line { font-size: 12px; }
.cl-dms__rows .cl-conv__nothing { color: var(--text-faint, #9a9a96); font-style: italic; }
.cl-dms__rows .cl-conv__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; min-width: 44px; }
.cl-dms__rows .cl-conv__side .cl-conv__face { min-height: 14px; }
.cl-dms__rows .cl-conv--on { background: var(--accent-brief-soft, #e8ecfd); }
@media (hover: hover) { .cl-dms__rows .cl-conv--on:hover { background: var(--accent-brief-soft, #e8ecfd); } }
.cl-dms__rows .cl-conv--on .cl-conv__name { color: var(--text-primary, #1a1a1a); }
.cl-dms__rows .cl-conv[hidden] { display: none; }
.cl-dms__empty { padding: 28px 18px; text-align: center; }
.cl-dms__none { padding: 18px 12px; font-size: 12px; color: var(--text-muted, #6b6b68); text-align: center; }
.cl-dms__conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-canvas, #f8f8f6); }
.cl-dms__conv:has(> .cl-actv__pane-empty) { display: grid; place-items: center; }
.cl-dms__conv > .cl-hub__head { border-top: 0; }
@media (max-width: 900px) {
  .cl-dms__split { grid-template-columns: minmax(0, 1fr); }
  .cl-dms[data-selected]:not([data-selected=""]) .cl-dms__list { display: none; }
  .cl-dms[data-selected=""] .cl-dms__conv { display: none; }
}
/* In the sidebar flyout, only the list shows — the conversation stays on the page. */
.cl-flyout .cl-dms__split { display: block; }
.cl-flyout .cl-dms__conv, .cl-flyout .cl-dms__find { display: none; }
.cl-flyout .cl-dms__rows { overflow: visible; }
/* The DMs label in the rail is a door now (Slack's "DMs" item). */
.cl-hub__navlabel--link { display: flex; align-items: center; }
.cl-hub__navlabel-a { color: inherit; text-decoration: none; border-radius: 4px; padding: 1px 4px; margin-left: -4px; }

@media (hover: hover) { .cl-hub__navlabel-a:hover { color: var(--hub-rail-ink, #fff); background: rgb(255 255 255 / 0.08); text-decoration: none; } }
.cl-hub__navlabel--active .cl-hub__navlabel-a { color: var(--hub-rail-ink, #fff); }

/* ── Slack's button grammar in the hub (punch list #23, 2026-09-11) ──────
   Bennett: "everything on the page needs to be designed like slack or
   google". Actions are 6px-radius outlined buttons (filled when primary),
   never pills; header actions are ghost icon buttons; the members chip is
   a chip. Scoped to the hub, the layer and the flyout — the app's own
   surfaces keep their look. */
.cl-hub .cl-btn, .cl-msgs .cl-btn, .cl-flyout .cl-btn {
  height: 30px; padding: 0 12px; border-radius: 6px; gap: 6px;
  border: 1px solid var(--border-strong, #cfcfcb); background: var(--bg-surface, #fff);
  color: var(--text-primary, #1a1a1a); font-size: 13px; font-weight: 700; line-height: 1;
}

@media (hover: hover) { .cl-hub .cl-btn:hover, .cl-msgs .cl-btn:hover, .cl-flyout .cl-btn:hover { background: var(--bg-surface-2, #f4f4f2); border-color: var(--text-faint, #9a9a96); } }
/* No solid accent fill anywhere (Bennett 2026-09-17, INV-1170): the hub's primary is the quiet pill with a stronger ring. */
.cl-hub .cl-btn--primary, .cl-msgs .cl-btn--primary { border-color: var(--text-faint, #9a9a96); background: var(--bg-surface, #fff); color: var(--text-primary, #1a1a1a); font-weight: 600; }

@media (hover: hover) { .cl-hub .cl-btn--primary:hover, .cl-msgs .cl-btn--primary:hover { border-color: var(--text-primary, #1a1a1a); background: color-mix(in srgb, var(--text-primary, #1a1a1a) 12%, var(--bg-surface, #fff)); } }
.cl-hub .cl-btn--ghost, .cl-msgs .cl-btn--ghost { border-color: transparent; background: transparent; color: var(--text-secondary, #444); }

@media (hover: hover) { .cl-hub .cl-btn--ghost:hover, .cl-msgs .cl-btn--ghost:hover { background: var(--bg-surface-2, #f4f4f2); border-color: transparent; color: var(--text-primary, #1a1a1a); } }
.cl-hub .cl-btn--sm, .cl-msgs .cl-btn--sm { height: 28px; padding: 0 11px; font-size: 12.5px; }
.cl-hub .cl-btn--xs, .cl-msgs .cl-btn--xs { height: 26px; padding: 0 10px; font-size: 12px; }
.cl-hub .cl-btn--icon, .cl-msgs .cl-btn--icon { width: 30px; padding: 0; }
.cl-iconbtn, .cl-actv__iconbtn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 0; background: transparent; color: var(--text-muted, #6b6b68); cursor: pointer; text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
}
details[open] > summary.cl-iconbtn { background: var(--bg-surface-2, #f4f4f2); color: var(--text-primary, #1a1a1a); }
@media (hover: hover) { .cl-iconbtn:hover, .cl-actv__iconbtn:hover { background: var(--bg-surface-2, #f4f4f2); color: var(--text-primary, #1a1a1a); } }
.cl-iconbtn::-webkit-details-marker { display: none; }
.cl-iconbtn--rail { color: var(--hub-rail-ink-2, rgb(255 255 255 / 0.72)); }
details[open] > summary.cl-iconbtn--rail { background: rgb(255 255 255 / 0.12); color: #fff; }
@media (hover: hover) { .cl-iconbtn--rail:hover { background: rgb(255 255 255 / 0.12); color: #fff; } }
.cl-hub .cl-hub__faces--btn { padding: 3px 8px 3px 3px; border-radius: 6px; border: 1px solid var(--border-strong, #cfcfcb); background: var(--bg-surface, #fff); cursor: pointer; }

@media (hover: hover) { .cl-hub .cl-hub__faces--btn:hover { background: var(--bg-surface-2, #f4f4f2); } }
.cl-hub .cl-hub__faces--btn > span:last-child { font-size: 12px; font-weight: 600; color: var(--text-secondary, #444); }

/* ── Slack's Create menu (punch list #22) ───────────────────────────────── */
.cl-menu-pop.cl-create { width: 360px; min-width: 360px; padding: 12px 8px 8px; border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / 0.18), 0 1px 3px rgb(0 0 0 / 0.08); }
.cl-create__title { padding: 2px 12px 10px; font: 700 16px/1.2 var(--font-sans, system-ui); color: var(--text-primary, #1a1a1a); }
.cl-create__row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary, #1a1a1a); text-align: left; text-decoration: none; cursor: pointer; }

@media (hover: hover) { .cl-create__row:hover { background: var(--bg-surface-2, #f4f4f2); text-decoration: none; } }
.cl-create__tile { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; font: 700 20px/1 var(--font-sans, system-ui); }
.cl-create__tile--message { background: color-mix(in srgb, #7c3aed 14%, var(--bg-surface, #fff)); color: #6d28d9; }
.cl-create__tile--channel { background: var(--bg-surface-2, #f1f1ef); color: var(--text-secondary, #444); }
.cl-create__tile--case { background: color-mix(in srgb, #2563eb 14%, var(--bg-surface, #fff)); color: #1d4ed8; }
.cl-create__tile--plain { width: 40px; height: 40px; background: transparent; color: var(--text-secondary, #444); }
.cl-create__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-create__name { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--text-primary, #1a1a1a); }
.cl-create__desc { font-size: 13px; line-height: 1.3; color: var(--text-muted, #6b6b68); }
.cl-create__kbd { margin-left: auto; flex: none; font: 500 12px/1 var(--font-mono, ui-monospace); color: var(--text-faint, #9a9a96); }
.cl-create__sep { height: 1px; margin: 6px 4px; background: var(--border-default, #e6e6e3); }
.cl-create__row--plain .cl-create__name { font-size: 15px; }
:root[data-theme="dark"] .cl-create__tile--message { background: color-mix(in srgb, #a78bfa 22%, var(--bg-surface, #1a1d21)); color: #c4b5fd; }
:root[data-theme="dark"] .cl-create__tile--case { background: color-mix(in srgb, #60a5fa 22%, var(--bg-surface, #1a1d21)); color: #93c5fd; }

/* ── DMs page options (punch list #26): row actions on rest, pin, search hits, Unreads ── */
.cl-dms__rows .cl-dmrow { position: relative; }
.cl-dms__rows .cl-dmrow[hidden] { display: none; }
.cl-dms__rows .cl-dmrow .cl-conv { padding-right: 12px; }
.cl-dm__tools { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto 0; height: 34px; display: none; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--border-default, #e6e6e3); background: var(--bg-surface, #fff); box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); }
.cl-dmrow:focus-within .cl-dm__tools, .cl-dmrow:has(details[open]) .cl-dm__tools { display: flex; }
@media (hover: hover) { .cl-dmrow:hover .cl-dm__tools { display: flex; } }
.cl-dmrow:has(details[open]) .cl-conv__side { visibility: hidden; }
@media (hover: hover) { .cl-dmrow:hover .cl-conv__side { visibility: hidden; } }
.cl-iconbtn--sm { width: 28px; height: 28px; border-radius: 6px; }
.cl-iconbtn--sm svg { width: 16px; height: 16px; }
.cl-iconbtn--on { color: var(--accent-brief, #4f6bed); }
.cl-conv__pin { display: inline-grid; place-items: center; color: var(--text-faint, #9a9a96); }
.cl-dms--unreads .cl-dmrow:not([data-face="count"]):not([data-face="dot"]) { display: none; }
.cl-dms__results { margin: 0 12px 6px; border: 1px solid var(--border-default, #e6e6e3); border-radius: 10px; background: var(--bg-surface, #fff); box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); overflow: hidden; }
.cl-dms__rlabel { padding: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint, #9a9a96); }
.cl-dms__hit { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; background: transparent; color: var(--text-primary, #1a1a1a); text-align: left; text-decoration: none; cursor: pointer; }

@media (hover: hover) { .cl-dms__hit:hover { background: var(--bg-surface-2, #f4f4f2); text-decoration: none; } }
.cl-dms__hitavatar { width: 28px; height: 28px; font-size: 10.5px; flex: none; }
.cl-dms__hitmain { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cl-dms__hitname { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; }
.cl-dms__hitstamp { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-faint, #9a9a96); }
.cl-dms__hitsub { font-size: 12.5px; color: var(--text-muted, #6b6b68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-dms__hitsub b { color: var(--text-secondary, #444); font-weight: 600; }
.cl-dms__online { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--status-verified, #2e9e5b); }

/* ── The conversation sheet is ONE white surface (punch list #25) ────────
   Bennett: "something about this top matter looks choppy … I don't know
   that we need a separate background color for where the '#general' lies".
   The channel/DM view is white edge to edge; the header sits on it with a
   single hairline; messages carry no dividers — rest tints the row. */
.cl-hub .cl-hub__main[data-hub-view="channel"], .cl-hub .cl-dms__conv { background: var(--bg-surface, #fff); }
.cl-hub .cl-hub__head--conv { background: transparent; border-bottom: 1px solid var(--border-default, #e6e6e3); padding: 12px 20px; }
.cl-hub .cl-hub__main[data-hub-view="channel"] .cl-stream-row, .cl-hub .cl-dms__conv .cl-stream-row { border-bottom: 0; padding: 1px 0; }
.cl-hub .cl-hub__main[data-hub-view="channel"] .cl-hub__pins, .cl-hub .cl-dms__conv .cl-hub__pins { background: transparent; }

/* ── Slack's scale (punch list #24) ───────────────────────────────────────
   Bennett: "a lot of icons and badges and page links are sort of just
   small … scale things to around the size that slack has" (the Create
   menu is the reference). The hub page only — the layer stays compact. */
.cl-hub .cl-hub__navhead .cl-section-label { font-size: 11.5px; letter-spacing: 0.12em; }
.cl-hub .cl-hub__navlabel { padding: 12px 10px 4px; font-size: 11.5px; }
.cl-hub .cl-hub__navplus { width: 22px; height: 22px; border-radius: 6px; }
.cl-hub .cl-hub__navplus svg { width: 12px; height: 12px; }
.cl-hub .cl-hub__navitem { gap: 10px; min-height: 32px; padding: 5px 10px; font-size: 14.5px; }
.cl-hub .cl-hub__navitem > svg, .cl-hub .cl-hub__navitem > .cl-hub__hash { width: 18px; height: 18px; font-size: 16px; text-align: center; }
.cl-hub .cl-hub__navitem .cl-avatar--xs { width: 22px; height: 22px; font-size: 9.5px; }
.cl-hub .cl-hub__navitem--sub { padding-left: 38px; font-size: 13.5px; }
.cl-hub .cl-hub__count { min-width: 20px; height: 18px; padding: 0 6px; font-family: var(--font-sans, system-ui); font-size: 11px; font-weight: 700; }
.cl-hub .cl-hub__title { font-size: 24px; }
.cl-hub .cl-hub__title--conv { font-size: 21px; }
.cl-hub .cl-hub__subline { margin-top: 2px; font-size: 13px; }
.cl-hub .cl-hub__faces--head .cl-avatar--lg { width: 36px; height: 36px; font-size: 13px; }
.cl-hub .cl-hub__faces--btn .cl-avatar--xs { width: 22px; height: 22px; font-size: 9px; }
.cl-iconbtn, .cl-actv__iconbtn { width: 32px; height: 32px; }
.cl-iconbtn > svg, .cl-actv__iconbtn > svg { width: 18px; height: 18px; }
.cl-hub .cl-msg { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 8px 20px; }
.cl-hub .cl-msg > .cl-msg-avatar { width: 36px; height: 36px; font-size: 13px; }
.cl-hub .cl-msg--reply { grid-template-columns: 28px minmax(0, 1fr); }
.cl-hub .cl-msg-avatar--sm { width: 28px; height: 28px; font-size: 10.5px; }
.cl-hub .cl-msg-name { font-size: 15px; font-weight: 700; }
.cl-hub .cl-msg-when { font-size: 12px; }
.cl-hub .cl-msg-body { font-size: 15px; line-height: 1.5; }
.cl-hub .cl-msg-body code { font-size: 13px; }
.cl-hub .cl-msg-body .cl-echip { font-size: 14px; }
.cl-hub .cl-thread-at { padding-left: 68px; font-size: 13px; }
.cl-hub .cl-stream-row__foot { font-size: 13px; }
.cl-hub .cl-stream-row__foot .cl-avatar--xs { width: 20px; height: 20px; font-size: 8.5px; }
.cl-hub .cl-hub__divider { font-size: 11px; }
.cl-hub .cl-composer textarea, .cl-hub .cl-composer [contenteditable="true"], .cl-hub .cl-composer .cl-input { font-size: 15px; line-height: 1.45; }
.cl-hub .cl-composer button svg { width: 18px; height: 18px; }
.cl-hub .cl-actv__tabs .cl-hub__tab, .cl-hub .cl-hub__lens { padding: 9px 12px 10px; font-size: 14px; }
.cl-hub .cl-actv__tabs .cl-hub__tab svg { width: 14px; height: 14px; }
.cl-hub .cl-actv__switch { font-size: 13px; height: 32px; }
.cl-hub .cl-actv__knob { width: 30px; height: 18px; }
.cl-hub .cl-actv__knob::after { width: 14px; height: 14px; }
.cl-hub .cl-actv__switch--on .cl-actv__knob::after { transform: translateX(12px); }
.cl-hub .cl-dms__find { height: 34px; }
.cl-hub .cl-dms__findinput { font-size: 14px; }
.cl-hub .cl-dms__rows .cl-conv__avatar .cl-avatar--lg { width: 36px; height: 36px; font-size: 12.5px; }
.cl-hub .cl-dms__rows .cl-conv__name { font-size: 15px; }
.cl-hub .cl-dms__rows .cl-conv__line { font-size: 13.5px; }
.cl-hub .cl-dms__rows .cl-conv__stamp { font-size: 12px; }
.cl-hub .cl-act__who { font-size: 14.5px; }
.cl-hub .cl-act__snip { font-size: 14px; }
.cl-hub .cl-act__src, .cl-hub .cl-act__where { font-size: 12.5px; }
.cl-hub .cl-act__stamp { font-size: 12px; }
.cl-hub .cl-menu-item { font-size: 13.5px; padding: 8px 12px; }
.cl-hub .cl-menu-label { font-size: 10.5px; }

@media (hover: hover) { .cl-hub .cl-dms__rows .cl-conv:hover, .cl-hub .cl-dms__rows .cl-conv:hover *, .cl-hub .cl-dms__rows .cl-conv:hover .cl-conv__name { text-decoration: none; } }

/* ── Files view (specs/121 §17 — Slack's Files; the Comms↔Drive link) ── */
.cl-files__head { align-items: center; padding: 10px 20px; }
.cl-files__find { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; width: 280px; border-radius: 8px; border: 1px solid var(--border-default, #e6e6e3); background: var(--bg-canvas, #f8f8f6); }
.cl-files__find:focus-within { border-color: var(--border-strong, #cfcfcb); background: var(--bg-surface, #fff); }
.cl-files { padding: 6px 12px 24px; }
.cl-file { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 8px; }

@media (hover: hover) { .cl-file:hover { background: var(--bg-surface-2, #f4f4f2); } }
.cl-file__tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--bg-surface-2, #f1f1ef); color: var(--text-secondary, #444); font: 700 10.5px/1 var(--font-sans, system-ui); letter-spacing: 0.04em; text-decoration: none; }
.cl-file__tile[data-format="pdf"] { background: #fde8e8; color: #b42318; }
.cl-file__tile[data-format="doc"], .cl-file__tile[data-format="docx"] { background: #e3eefc; color: #1d4ed8; }
.cl-file__tile[data-format="xls"], .cl-file__tile[data-format="xlsx"], .cl-file__tile[data-format="csv"] { background: #e3f6ea; color: #15803d; }
.cl-file__tile[data-format="png"], .cl-file__tile[data-format="jpg"], .cl-file__tile[data-format="jpeg"], .cl-file__tile[data-format="gif"] { background: #f3e8fd; color: #6d28d9; }
.cl-file__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cl-file__name { font-size: 15px; font-weight: 600; color: var(--text-primary, #1a1a1a); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: hover) { .cl-file__name:hover { color: var(--accent-brief, #4f6bed); } }
.cl-file__meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--text-muted, #6b6b68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-file__where { color: var(--text-secondary, #444); font-weight: 600; text-decoration: none; }

@media (hover: hover) { .cl-file__where:hover { color: var(--text-primary, #1a1a1a); } }
.cl-file__tools { display: none; align-items: center; gap: 2px; flex: none; }
.cl-file:focus-within .cl-file__tools { display: flex; }
@media (hover: hover) { .cl-file:hover .cl-file__tools { display: flex; } }

/* ── Activity toolbar, Slack's (punch list #33) ──────────────────────────── */
.cl-actv__toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 0 10px; }
.cl-actv__select { display: inline-flex; align-items: stretch; height: 32px; border: 1px solid var(--border-strong, #cfcfcb); border-radius: 8px; background: var(--bg-surface, #fff); overflow: hidden; }
.cl-actv__selectbox { display: grid; place-items: center; padding: 0 8px 0 9px; cursor: pointer; }
.cl-actv__selectcaret { display: grid; place-items: center; width: 24px; border-left: 1px solid var(--border-default, #e6e6e3); color: var(--text-secondary, #444); cursor: pointer; }
details[open] > .cl-actv__selectcaret { background: var(--bg-surface-2, #f4f4f2); }
@media (hover: hover) { .cl-actv__selectcaret:hover { background: var(--bg-surface-2, #f4f4f2); } }
.cl-actv__selectcaret::-webkit-details-marker { display: none; }
.cl-actv__checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-brief, #4f6bed); cursor: pointer; }
.cl-actv__pillbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong, #cfcfcb); background: var(--bg-surface, #fff); color: var(--text-primary, #1a1a1a); font: 700 13px/1 var(--font-sans, system-ui); cursor: pointer; }
details[open] > .cl-actv__pillbtn { background: var(--bg-surface-2, #f4f4f2); }
@media (hover: hover) { .cl-actv__pillbtn:hover { background: var(--bg-surface-2, #f4f4f2); } }
.cl-actv__pillbtn--on { background: var(--accent-brief-soft, #e8ecfd); border-color: color-mix(in srgb, var(--accent-brief, #4f6bed) 45%, transparent); color: var(--accent-brief, #4f6bed); }
.cl-actv__pillbtn--icon { padding: 0 9px; }
.cl-actv__pillbtn::-webkit-details-marker { display: none; }
.cl-actv__search { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong, #cfcfcb); background: var(--bg-surface, #fff); min-width: 220px; }
.cl-actv__searchinput { border: 0; outline: 0; background: transparent; font: 500 13px/1 var(--font-sans, system-ui); color: var(--text-primary, #1a1a1a); width: 100%; }
.cl-actv__layout { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--border-strong, #cfcfcb); background: var(--bg-surface, #fff); cursor: pointer; }
.cl-actv__lay { display: inline-grid; place-items: center; width: 28px; height: 24px; border-radius: 6px; color: var(--text-faint, #9a9a96); }
.cl-actv__lay--on { background: var(--bg-surface-2, #f1f1ef); color: var(--text-primary, #1a1a1a); }
.cl-actv__bulk { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--accent-brief-soft, #e8ecfd); color: var(--text-primary, #1a1a1a); font-size: 13px; }
.cl-actv__bulk[hidden] { display: none; }
.cl-actv__bulkcount { font-weight: 700; }
.cl-act { position: relative; }
.cl-act__pick { position: absolute; left: 8px; top: 0; bottom: 0; margin: auto 0; height: 28px; display: grid; place-items: center; z-index: 1; padding: 6px; opacity: 0; }
.cl-actv--selecting .cl-act__pick, .cl-act__pick:has(:checked), .cl-act__pick:focus-within { opacity: 1; }
@media (hover: hover) { .cl-act:hover .cl-act__pick { opacity: 1; } }
.cl-hub .cl-act { padding-left: 38px; }
.cl-act:has(.cl-act__pick :checked) { background: var(--accent-brief-soft, #e8ecfd); }
/* Object chips in rows (punch list #34): the app's entity chip, small. */
.cl-echip--obj { height: 20px; padding: 0 7px 0 3px; margin: 0 2px; vertical-align: middle; text-decoration: none; color: var(--text-primary, #1a1a1a); background: var(--bg-surface, #fff); }
.cl-echip--obj .cl-echip__kind { display: inline-grid; place-items: center; min-width: 16px; height: 14px; padding: 0 3px; font-size: 10px; }
.cl-echip--obj .cl-echip__label { font-size: 12px; font-weight: 600; }
.cl-echip--channel .cl-echip__kind { background: var(--bg-surface-2, #f1f1ef); color: var(--text-secondary, #444); }
.cl-echip--case .cl-echip__kind { background: color-mix(in srgb, #2563eb 14%, var(--bg-surface, #fff)); color: #1d4ed8; }
.cl-echip--dm .cl-echip__kind { background: color-mix(in srgb, #7c3aed 14%, var(--bg-surface, #fff)); color: #6d28d9; }

@media (hover: hover) { a.cl-echip--obj:hover { border-color: var(--border-strong, #cfcfcb); background: var(--bg-surface-2, #f4f4f2); text-decoration: none; } }
.cl-act__where--title { color: var(--text-muted, #6b6b68); }
/* The promoted Create menu paints above every hub surface, the Claude dock included. */
.cl-menu-pop.cl-create { z-index: 90; }

/* ── The Claude page (Bennett 2026-09-11: "it all feels choppy") ──────────
   The docked panel is the page: flat, full width and height, no card
   chrome; its rows wear the hub's scale so Claude reads like every other
   conversation here. */
.cl-hub #claude-dm-dock { background: var(--bg-surface, #fff); }
.cl-hub #claude-dm-dock .cl-assistant-panel { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.cl-hub #claude-dm-dock .cl-assistant-panel > button.absolute { display: none; }
.cl-hub #claude-dm-dock .cl-msg__name { font-size: 15px; font-weight: 700; }
.cl-hub #claude-dm-dock .cl-msg__time { font-size: 12px; }
.cl-hub #claude-dm-dock .cl-msg__body { font-size: 15px; line-height: 1.5; }
.cl-hub #claude-dm-dock .cl-msg { padding: 8px 20px; }
.cl-hub #claude-dm-dock .cl-composer--assistant { padding: 10px 16px 14px; }
.cl-hub #claude-dm-dock .cl-composer--assistant .ProseMirror, .cl-hub #claude-dm-dock .cl-composer--assistant textarea { font-size: 15px; }
.cl-claude-notice { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--border-default, #e6e6e3); background: var(--bg-canvas, #f8f8f6); font-size: 13px; color: var(--text-secondary, #444); }
.cl-claude-notice--blocked { color: var(--status-warning, #b7791f); background: color-mix(in srgb, var(--status-warning, #b7791f) 8%, var(--bg-surface, #fff)); }
.cl-hub #claude-dm-dock [class*="max-w-"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.cl-hub #claude-dm-dock .cl-msg__body { max-width: none; }
/* People are doors everywhere (Slack): a name with a person card on rest. */
.cl-person-door { cursor: pointer; border-radius: 4px; }

@media (hover: hover) { .cl-person-door:hover { background: var(--bg-surface-2, #f4f4f2); } }

@media (hover: hover) { .cl-hub .cl-act__main:hover, .cl-hub .cl-act__main:hover * { text-decoration: none; } }


@media (hover: hover) { .cl-hub a:hover, .cl-hub a:hover *, .cl-hub .cl-msg__name:hover, .cl-hub .cl-msg-name:hover, .cl-hub .cl-msg__time:hover, .cl-hub .cl-hcard__more:hover { text-decoration: none; } }
.cl-hub .cl-msg-body a.cl-link, .cl-hub .cl-msg__body a { text-decoration: underline; }

@media (hover: hover) { .cl-hub *:hover { transition-duration: 80ms; } }
.cl-flyout { animation: none; }
.cl-hub .cl-hub__navitem, .cl-hub .cl-btn, .cl-hub .cl-iconbtn, .cl-hub .cl-conv, .cl-hub .cl-act, .cl-hub .cl-file, .cl-hub .cl-dmrow, .cl-hub .cl-tcard { transform: none !important; }

/* The rail's unread DOT stays a dot under the scale block (Bennett: "blank white box next to general"). */
.cl-hub .cl-hub__count--dot { min-width: 0; width: 8px; height: 8px; padding: 0; margin-right: 4px; }
.cl-hub .cl-hub__count:empty:not(.cl-hub__count--dot) { display: none; }
/* Slack's in-place replies under a channel root (punch list #38). */
.cl-stream-row__show { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; margin-left: -6px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-brief, #4f6bed); font: 600 13px/1.3 var(--font-sans, system-ui); cursor: pointer; }

@media (hover: hover) { .cl-stream-row__show:hover { background: var(--bg-surface-2, #f4f4f2); } }
.cl-stream-row__foot--toggle { display: flex; align-items: center; gap: 8px; padding: 2px 20px 6px 68px; font-size: 13px; color: var(--text-faint, #9a9a96); }
.cl-stream-replies { margin: 0 20px 8px 68px; padding: 4px 0 0 12px; border-left: 2px solid var(--border-default, #e6e6e3); }
.cl-stream-replies[hidden] { display: none; }
.cl-stream-replies .cl-msg { padding: 6px 8px; grid-template-columns: 28px minmax(0, 1fr); }
.cl-stream-replies .cl-msg > .cl-msg-avatar { width: 28px; height: 28px; font-size: 10.5px; }
.cl-stream-replies__composer { margin-top: 6px; }
.cl-stream-replies__composer .cl-composer { padding: 0; border-top: 0; }

/* The rail's "open the case page" door (Bennett 2026-09-12: "this icon is so weird"):
   a ghost icon button that appears on rest — the external-link glyph, never a text arrow in a bubble. */
.cl-hub .cl-hub__nav .cl-hub__navrow .cl-hub__navgo { display: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border-radius: 6px; background: transparent; color: var(--hub-rail-ink-2, rgb(255 255 255 / 0.72)); font-size: 0; line-height: 0; flex: none; }
.cl-hub .cl-hub__nav .cl-hub__navrow:focus-within .cl-hub__navgo { display: inline-flex; }
@media (hover: hover) { .cl-hub .cl-hub__nav .cl-hub__navrow:hover .cl-hub__navgo { display: inline-flex; } }

@media (hover: hover) { .cl-hub .cl-hub__nav .cl-hub__navrow .cl-hub__navgo:hover { background: rgb(255 255 255 / 0.14); color: #fff; } }
.cl-hub .cl-hub__nav .cl-hub__navrow .cl-hub__navgo svg { width: 14px; height: 14px; }
.cl-hub .cl-hub__nav .cl-hub__navrow:has(.cl-hub__navgo):focus-within .cl-hub__count { display: none; }
@media (hover: hover) { .cl-hub .cl-hub__nav .cl-hub__navrow:has(.cl-hub__navgo):hover .cl-hub__count { display: none; } }
/* Channels share one navigation group; case is a type, never an unread count. */
.cl-hub__channel-kind{font-size:9px;line-height:1.4;padding:1px 4px;border:1px solid currentColor;border-radius:4px;opacity:.65;flex:none;margin-left:auto}

/* Keep the conversation identity readable in a phone or a narrow split pane.
   Controls wrap together below it instead of squeezing names into one word per line. */
.cl-hub__head--conv { flex-wrap: wrap; }
.cl-hub__identity { flex: 1 1 240px; }
.cl-hub__head-actions { flex: 0 0 auto; max-width: 100%; margin-left: auto; flex-wrap: wrap; }

/* A thread owns the right edge, including its Allow/Decline controls. The
   floating private launcher returns when the thread or Messages drawer closes. */
body:has(#comms-hub.cl-hub--pane-open) #cl-assistant-launcher,
body:has(#cl-msgs.cl-hub--pane-open:not([hidden])) #cl-assistant-launcher { display: none !important; }

/* Shared Claude: inspectable configuration and durable request state. */
.cl-ai-settings { max-width: 780px; margin: 0 auto; padding: 24px; font-size: 13px; line-height: 1.55; }
.cl-ai-settings p { margin: 10px 0; }
.cl-ai-settings__section { border-top: 1px solid var(--border, #ddd); margin-top: 24px; padding-top: 20px; }
.cl-ai-settings h2, .cl-ai-settings legend { font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.cl-ai-settings label { display: block; margin: 12px 0; }
.cl-ai-settings select, .cl-ai-settings .cl-dd, .cl-ai-settings textarea, .cl-ai-settings input[type=search] { width: 100%; margin: 5px 0; }
.cl-ai-settings textarea, .cl-ai-settings input[type=search] { display: block; }
.cl-ai-settings .cl-ai-check { display: flex; align-items: center; gap: 8px; }
.cl-ai-settings__people { display: flex; flex-wrap: wrap; gap: 0 20px; }
.cl-ai-settings__item { padding: 12px 0; border-bottom: 1px solid var(--border, #eee); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-ai-settings__item > :first-child { flex: 1; min-width: 160px; }
.cl-ai-settings__notice { padding: 12px; border: 1px solid var(--border, #bbb); border-radius: 8px; }
.cl-ai-run { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; font-size: 11px; color: var(--text-muted, #667); }
.cl-ai-run__error { flex-basis: 100%; color: var(--status-warning, #99631c); }
.cl-ai-run__identity { font-weight: 600; color: var(--text-primary); }
.cl-ai-run__progress { flex-basis: 100%; min-width: 0; padding: 10px 12px; border-left: 2px solid var(--accent-brief, #242e60); }
.cl-ai-run__activity { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cl-claude-tool { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--border-default, #ddd); border-radius: 999px; padding: 4px 12px; font-size: 11px; color: var(--text-secondary); }
.cl-claude-tool .cl-spin { width: 12px; height: 12px; }
.cl-ai-run__text { color: var(--text-primary); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.cl-ai-run__scope { display: block; margin-top: 8px; font-size: 11px; }

/* Active subject and composition controls are shared by every Discuss door. */
.cl-discuss-active { outline: 2px solid color-mix(in srgb, var(--accent-brief) 40%, transparent); outline-offset: -2px; }
.document-row.cl-discuss-active { outline: 0; background: var(--bg-selected, var(--bg-surface-2)); box-shadow: inset 3px 0 0 var(--accent-brief); }
.cl-discuss-bar { min-height: 40px; padding: 5px 12px; font-size: 12px; gap: 8px; }
.cl-discuss-symbol { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--accent-brief); background: var(--accent-brief-soft); }
.cl-discuss-bar [data-discuss-close] { width: 30px; height: 30px; font-size: 15px; }
.cl-side-head { padding: 14px 16px; }
.cl-side-entity .cl-echip { max-width: 100%; }
.cl-side-entity .cl-echip__label { font-size: 13px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.cl-side-new { margin-top: 6px; }
.cl-discussion-audience { border: 0; padding: 0 0 12px; margin: 0; min-width: 0; font-size: 12px; }
.cl-discussion-audience > label { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--text-muted); }
.cl-discussion-audience select { flex: 1; min-width: 0; width: auto; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-surface); color: var(--text-primary); font: inherit; font-weight: 400; }
.cl-discussion-recipients { display: flex; gap: 10px; margin-top: 12px; }
.cl-discussion-recipients[hidden] { display: none; }
.cl-discussion-recipient-label { padding-top: 7px; color: var(--text-muted); }
.cl-discussion-people { display: flex; flex: 1; flex-direction: column; gap: 2px; max-height: 180px; overflow: auto; }
.cl-discussion-people label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.cl-discussion-people label:has(input:checked) { background: var(--bg-surface-2); }
@media (hover: hover) { .cl-discussion-people label:hover { background: var(--bg-surface-2); } }
.cl-discussion-help { margin: 8px 0 0; font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.cl-discuss-menu button:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: -2px; }

.cl-side--empty .cl-side-head { border-bottom: 0; padding-bottom: 10px; }
.cl-side--empty .cl-composer--side { border-top: 0; padding: 2px 16px 16px; }
.cl-discussion-people { border: 1px solid var(--border-default); padding: 4px; border-radius: 8px; }
.cl-discussion-people input { accent-color: var(--accent-brief); }
.cl-side-entity .cl-echip { height: auto; min-height: 24px; padding: 4px 6px; align-items: flex-start; }
.cl-side-entity .cl-echip__kind { flex: none; margin-top: 2px; }
.cl-discussion-people .cl-avatar { width: 24px; height: 24px; font-size: 9px; flex: none; }
@media (max-width: 650px) {
  .cl-discuss--floating { left: 0; width: 100%; border-left: 0; }
  html.cl-discuss-open .cl-topbar, html.cl-discuss-open [data-cl-topbar] { padding-right: 0; }
}

/* Opening or posting in a contextual discussion never moves the page chrome. */
html.cl-discuss-open body { padding-right: 0; }
html.cl-discuss-open .cl-topbar,
html.cl-discuss-open [data-cl-topbar] { padding-right: 0; }
/* Short conversations stay compact; longer ones scroll within the viewport. */
.cl-discuss--floating {
  inset: calc(var(--topbar-h, 50px) + 12px) 16px auto auto;
  width: min(var(--cl-discuss-w), calc(100vw - 32px));
  max-height: calc(100dvh - var(--topbar-h, 50px) - 28px);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: 0 8px 32px #00000016;
  overflow: visible;
}
.cl-discuss--floating .cl-discuss-bar { border-radius: 14px 14px 0 0; }
.cl-discuss--floating .cl-discuss-body { border-radius: 0 0 14px 14px; }
.cl-discuss--floating .cl-side { min-height: 0; }
.cl-discuss--floating .cl-composer--side { margin-top: 0; }
.cl-discuss--floating .cl-echip__kind { white-space: nowrap; }
@media (max-width: 650px) {
  .cl-discuss--floating { left: auto; }
}

.cl-object-conversation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-surface); scroll-margin-top: 64px; }
.cl-object-conversation-copy h2 { margin: 0; font-size: 13px; font-weight: 600; }
.cl-object-conversation-copy p { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; }
.cl-object-conversation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.cl-object-conversation-actions > a:last-child { font-size: 11px; color: var(--text-muted); text-decoration: none; }

@media (hover: hover) { .cl-object-conversation-actions > a:last-child:hover { color: var(--accent-brief); } }

/* ── Tasks ⇄ Comms, one grammar (2026-09-12; Bennett: "the card preview
   should resemble the actual card", "make it feel linked") ─────────────
   The task pane's top is THE CARD — the board tile's own parts (cl-label,
   cl-card-check, cl-tile-badge, cl-avatar) — and every task row (the hub
   Home's "Your tasks", the Tasks page) wears the tile's completion circle,
   always visible, completing in place. */
.cl-task-pane__head { padding: 8px 12px 6px; }
.cl-task-pane__eyebrow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-task-pane__trail { margin: 0; }
.cl-task-card {
  margin: 4px 0 0; padding: 12px 12px 10px; border-radius: 10px;
  border: 1px solid var(--border-default, #e6e6e3); background: var(--bg-surface, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.06));
}
.cl-task-card--archived { opacity: 0.7; }
.cl-task-card__labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cl-task-card__row { display: flex; align-items: flex-start; gap: 9px; }
.cl-task-card__checkform { flex: none; margin-top: 2px; }
.cl-task-card__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text-primary, #1a1a1a); min-width: 0; }
.cl-task-card__title--done { color: var(--text-muted, #6b6b68); text-decoration: line-through; }
.cl-task-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cl-task-card__meta .cl-tile-badge { height: 22px; font-size: 11.5px; }
.cl-task-card__people { margin-left: auto; display: inline-flex; }
.cl-task-card__people .cl-avatar { margin-left: -4px; box-shadow: 0 0 0 2px var(--bg-surface, #fff); cursor: pointer; }
.cl-task-card__people .cl-avatar:first-child { margin-left: 0; }
.cl-task-card__priority { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--status-warning, #92400e); }
.cl-task-card__priority--urgent { color: var(--status-error, #c0392b); }
.cl-task-card__origin {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; margin-top: 10px; padding: 7px 8px;
  border: 0; border-top: 1px solid var(--border-default, #e6e6e3); border-radius: 0 0 8px 8px;
  background: transparent; text-align: left; font-size: 11.5px; color: var(--text-muted, #6b6b68); cursor: pointer;
}

@media (hover: hover) { .cl-task-card__origin:hover { background: var(--bg-surface-2, #f4f4f2); color: var(--text-primary, #1a1a1a); } }
.cl-task-card__origin-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-task-card__origin-text b { font-weight: 600; color: var(--text-secondary, #444); }
.cl-task-pane__verbs { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.cl-task-pane__verbs .cl-btn { gap: 6px; }
.cl-task-pane .cl-task-facts { margin-top: 12px; }
.cl-task-pane .cl-task-facts dd .cl-echip .cl-avatar--xs { margin-right: 4px; }
.cl-task-checklist { margin-top: 12px; }
.cl-task-checklist__head { display: flex; align-items: center; gap: 6px; }
.cl-task-checklist__count { margin-left: auto; font-size: 10.5px; color: var(--text-faint, #9a9a96); font-variant-numeric: tabular-nums; }
.cl-task-checklist__bar { display: block; margin: 4px 0 6px; }
.cl-task-checklist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-task-checkitem { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; font-size: 12px; color: var(--text-secondary, #444); }

@media (hover: hover) { .cl-task-checkitem:hover { background: var(--bg-surface-2, #f4f4f2); } }
.cl-task-checkitem--done .cl-task-checkitem__text { color: var(--text-faint, #9a9a96); text-decoration: line-through; }
.cl-task-checkitem__text { min-width: 0; }
/* The circle lives in normal flow here (the tile positions it absolutely and hides it until hover). */
.cl-task-pane .cl-card-check, .cl-task-row .cl-card-check, .cl-home__row .cl-card-check {
  position: static; opacity: 1; flex: none; width: 17px; height: 17px;
}

@media (hover: hover) { .cl-task-pane .cl-card-check:not(.cl-card-check--done):hover, .cl-task-row .cl-card-check:not(.cl-card-check--done):hover, .cl-home__row .cl-card-check:not(.cl-card-check--done):hover { color: var(--status-verified); } }
.cl-task-checkitem .cl-card-check { width: 15px; height: 15px; }
/* Tasks page rows */
.cl-task-row__checkform { flex: none; margin-top: 8px; align-self: flex-start; }
.cl-task-row__main { padding-left: 4px; }
.cl-task-row__title--done { color: var(--text-muted, #6b6b68); text-decoration: line-through; }
.cl-task-row__meta .cl-label { height: 15px; font-size: 9.5px; padding: 0 7px; }
/* Home task rows: the circle, then the row's own door */
.cl-home__row--task { display: flex; align-items: center; gap: 8px; }
.cl-home__row-checkform { flex: none; display: inline-flex; }
.cl-home__row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cl-home__row-head .cl-label { height: 14px; font-size: 9px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
/* The lens strip never wraps into three lines when the pane narrows the list (dev at 1232px). */
.cl-hub .cl-hub__lenses { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cl-hub .cl-hub__lens { flex: none; white-space: nowrap; }

@media (hover: hover) { .cl-hub a:hover, .cl-msgs a:hover, .cl-flyout a:hover, .cl-hub button:hover, .cl-menu-pop a:hover { text-decoration: none; } }
.cl-home__row-head .cl-label, .cl-task-row__meta .cl-label { white-space: nowrap; flex: none; }
.cl-task-pane__kind { display: inline-flex; align-items: center; gap: 6px; }
.cl-task-pane__state { font-size: 9.5px; }

/* Case channels are peer rows. Only subject filters are indented. */
.cl-hub .cl-hub__navrow > .cl-hub__navitem { padding-left: 10px; padding-right: 34px; }
.cl-hub .cl-hub__navrow > .cl-hub__twist { position: absolute; left: -7px; width: 15px; margin: 0; }
.cl-hub .cl-hub__navitem > svg, .cl-hub .cl-hub__hash { flex: 0 0 18px; }
.cl-hub .cl-hub__navitem > .truncate { flex: 1; min-width: 0; }
.cl-hub .cl-hub__count--discussions { gap: 4px; white-space: nowrap; }
.cl-hub .cl-hub__count--discussions > svg { flex: 0 0 12px; width: 12px; height: 12px; }
.cl-hub .cl-hub__count + .cl-hub__count { margin-left: 0; }
.cl-hub .cl-hub__nav .cl-hub__navrow:has(.cl-hub__navgo):focus-within .cl-hub__count { display: inline-flex; }
@media (hover: hover) { .cl-hub .cl-hub__nav .cl-hub__navrow:has(.cl-hub__navgo):hover .cl-hub__count { display: inline-flex; } }
.cl-hub .cl-hub__nav .cl-hub__count[hidden] { display: none; }
.cl-msg-scope { font-style: normal; }
.cl-msg-scope::before { content: none; }
.cl-msg-scope summary { cursor: pointer; width: fit-content; }
.cl-msg-scope p { margin: 4px 0 0; max-width: 60ch; overflow-wrap: anywhere; }

/* Activity metadata wraps as complete items; truncate only the chip label. */
.cl-act:not(.cl-act--dense) .cl-act__top { flex-wrap: wrap; align-items: center; row-gap: 4px; }
.cl-act:not(.cl-act--dense) .cl-act__who { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.cl-act:not(.cl-act--dense) .cl-act__src { flex: 1 1 180px; max-width: 100%; overflow: visible; }
.cl-act__src > .cl-echip { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.cl-act__src .cl-echip__kind, .cl-act__glyph, .cl-act__glyph svg { flex-shrink: 0; }
.cl-act__src .cl-echip__label { min-width: 0; }
/* Selection replaces the avatar on hover instead of overlapping it. */
.cl-act__pick { left: 9px; top: 8px; bottom: auto; width: 28px; height: 28px; padding: 4px; }
.cl-act:has(.cl-act__pick :checked) .cl-act__avatar, .cl-act:has(.cl-act__pick:focus-within) .cl-act__avatar { visibility: hidden; }
@media (hover: hover) { .cl-act:hover .cl-act__avatar { visibility: hidden; } }
.cl-act--dense .cl-act__pick { top: 4px; width: 18px; height: 18px; padding: 0; }

/* Shared Claude waits quietly and publishes an ordinary message. */
.cl-ai-run[hidden] { display: none; }
.cl-ai-run__typing { display: inline-flex; gap: 3px; align-items: center; }
.cl-ai-run__typing i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: cl-typing-pulse 1.2s ease-in-out infinite; }
.cl-ai-run__typing i:nth-child(2) { animation-delay: .15s; }
.cl-ai-run__typing i:nth-child(3) { animation-delay: .3s; }
.cl-ai-run__stop { font: inherit; color: var(--text-muted); padding: 2px 5px; border-radius: 4px; }
.cl-ai-run__stop:focus-visible { color: var(--text-primary); background: var(--bg-hover); }
@media (hover: hover) { .cl-ai-run__stop:hover { color: var(--text-primary); background: var(--bg-hover); } }
@keyframes cl-typing-pulse { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-ai-run__typing i { animation: none; } }

/* Compact Activity: independently bounded columns, never clipping a chip box. */
.cl-act--dense .cl-act__body { display: grid; grid-template-columns: minmax(65px, .7fr) minmax(110px, 1fr) minmax(60px, 1.3fr) auto; align-items: center; gap: 8px; }
.cl-act--dense .cl-act__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-act--dense .cl-act__src { min-width: 0; max-width: none; overflow: visible; }
.cl-act--dense .cl-act__stamp { white-space: nowrap; }
.cl-act--dense .cl-act__src .cl-echip { max-width: calc(100% - 20px); }
.cl-act--dense .cl-act__where--title { display: none; }
/* A drawer cannot fit four useful text columns. Keep compact two-line rows. */
.cl-msgs .cl-act--dense .cl-act__body { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; }
.cl-msgs .cl-act--dense .cl-act__top { display: contents; }
.cl-msgs .cl-act--dense .cl-act__who { grid-column: 1; grid-row: 1; }
.cl-msgs .cl-act--dense .cl-act__stamp { grid-column: 2; grid-row: 1; }
.cl-msgs .cl-act--dense .cl-act__src { grid-column: 1; grid-row: 2; }
.cl-msgs .cl-act--dense .cl-act__snip { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 900px) {
  .cl-act--dense .cl-act__body { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-act--dense .cl-act__who { grid-column: 1; grid-row: 1; }
  .cl-act--dense .cl-act__stamp { grid-column: 2; grid-row: 1; }
  .cl-act--dense .cl-act__src { grid-column: 1 / -1; grid-row: 2; }
  .cl-act--dense .cl-act__snip { grid-column: 1 / -1; grid-row: 3; }
}

.cl-msgs .cl-act__where--title { display: none; }

/* The day divider — Slack's grammar (Bennett 2026-09-23): a pill on a hairline, plain words. */
.cl-hub .cl-hub__divider--day { display: flex; align-items: center; gap: 0; margin: 14px 0 6px; text-transform: none; letter-spacing: 0; }
.cl-hub .cl-hub__divider--day::before, .cl-hub .cl-hub__divider--day::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border-default, #e3e1dc); }
.cl-hub .cl-hub__divider--day > span { flex: none; padding: 3px 11px; border: 1px solid var(--border-default, #e3e1dc); border-radius: 999px; background: var(--bg-surface, #fff); font: 600 11.5px/1.3 var(--font-sans, system-ui); color: var(--text-primary, #111); text-transform: none; letter-spacing: 0; }
/* The object header's badge reads as the title. */
.cl-hub__head--object .cl-echip--title { font-size: 13px; }
.cl-hub__head--object .cl-echip--title .cl-echip__label { font-size: 13.5px; }
.cl-msg__body--verdict { margin-top: 2px; }
.cl-msg__body--verdict .cl-pill { font-size: 10.5px; }
/* The sidebar tree nests each audit under its brief (2026-09-23). */
.cl-hub__navkid--under { margin-left: 24px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--border-default, #e3e1dc) 80%, transparent); border-radius: 0 6px 6px 0; }
.cl-hub__navkid--quiet { opacity: 0.8; }

/* A citation's threads read as the editor's cards (Bennett 2026-09-23: "make these the same"). */
.cl-msg__stamp { font-size: 10.5px; vertical-align: middle; }
.cl-hub__scroll--citation .cl-stream-row { margin: 6px 16px; padding: 8px 10px 6px; border: 1px solid var(--border-default, #e3e1dc); border-radius: 10px; background: var(--bg-surface, #fff); }
.cl-hub__scroll--citation .cl-stream-row + .cl-stream-row { margin-top: 8px; }
.cl-hub__scroll--citation .cl-stream-row__foot { margin-top: 4px; }
.cl-hub__scroll--citation .cl-hub__divider--day { margin: 14px 16px 6px; }