/* 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, …). THE CLICK-A-SENTENCE LAW: the drawer is a COLUMN that pushes content (html.cl-discuss-open pads the page; a [data-discuss-dock] slot hosts it inside an island's own layout) — never an overlay. */ :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; } .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; } /* F34 cursor law: the quote line is a jump link — pointer comes from the UA anchor rule; the hover state makes the door visible. */ .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 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:hover > .cl-msg-tools, .cl-msg:focus-within > .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; } /* F30 hover exclusivity (Bennett: "when i hover over a parent message then a reply to it, both popups remain"): replies NEST inside the parent row in this renderer, so the parent's :hover held its toolbar while the reply's showed. ONE at a time — an ancestor row yields to the hovered/focused descendant. The open-menu law still wins (last). */ .cl-msg:has(.cl-msg:hover) > .cl-msg-tools, .cl-msg:has(.cl-msg:focus-within) > .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; } .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; } .cl-thread-at-link:hover { text-decoration: underline; } .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; } /* The row is a door: quiet hover wash + the ↗ cue (instant, no transition). */ .cl-thread-row--compact:hover { background: color-mix(in srgb, var(--bg-surface-2, #f4f4f2) 70%, transparent); } .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; } .cl-thread-ctx .cl-thread-at-link:hover { color: var(--text-primary, #1a1a1a); text-decoration: underline; } .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; } .cl-thread-host .cl-thread-at-link:hover { color: var(--text-primary, #1a1a1a); text-decoration: underline; } /* 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; } .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; } .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; } .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); } .cl-thread-reopen:hover { color: var(--accent-brief, #4f6bed); text-decoration: underline; } .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; } .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); } .cl-thread-replybtn:hover { text-decoration: underline; } .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); } .cl-thread-more:hover { text-decoration: underline; } /* 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; } .cl-tcard__where:hover { text-decoration: underline; 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; } .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; } .cl-tcard:hover .cl-tcard__menu { visibility: visible; } .cl-tcard:has(details[data-cl-menu][open]) .cl-tcard__menu { visibility: visible; } .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; } .cl-tcard__more:hover { text-decoration: underline; } .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); } .cl-tcard__open:hover { color: var(--accent-brief, #4f6bed); } .cl-tcard__go { visibility: hidden; font-size: 10px; color: var(--text-faint, #9a9a96); } .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; } .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; } /* 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; } .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; } .cl-hub__navrow:hover .cl-hub__navgo { display: inline-flex; } .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; } .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; } 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 › " 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; } 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); } .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); } /* The page reflows around the floating column — never under it. */ html.cl-discuss-open body { padding-right: var(--cl-discuss-w); } html.cl-discuss-open .cl-topbar, html.cl-discuss-open [data-cl-topbar] { padding-right: var(--cl-discuss-w); } .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-resize:hover, .cl-discuss--resizing .cl-discuss-resize { 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); } .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; } /* F34 cursor law: the badge is a door (it opens the thread) — the pointer it already wears needs a visible hover state. */ .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); } .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); } .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; } [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 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; }