/* caddie-ui.css — tokens + styles for the Caddie UI pack.
 *
 * The pack is the SHARED chrome every caddie app mounts: the two-row shell
 * (global bar + app bar), the side panel, the one bell, and the review-modelled
 * thread components. Vendor the whole folder as a full independent copy —
 * never a shared import — and refresh it byte-for-byte from the canonical
 * copy. Do not hand-edit in an app; a change that is right for one app
 * belongs in the canonical pack or it is drift.
 *
 * TOKENS: every colour/space/radius reads a `--cu-*` custom property that FALLS
 * BACK to the app's plain tokens (`--surface`, `--text`, …) and then to a
 * neutral default — the same mechanism the bw-admin pack uses, so an app that
 * themes one pack themes both. Override `--cu-*` in the app root to restyle.
 *
 * TOKEN ROOTS: every outermost element the pack renders is listed here. A
 * referenced token that doesn't resolve fails SILENTLY (the declaration
 * collapses), so a component mounted anywhere must resolve its tokens from
 * its own root. Add a new root class here if you add a new top-level element. */

.cu-global, .cu-appbar, .cu-panel, .cu-bellwrap, .cu-bell-menu,
.cu-thread, .cu-thread-view, .cu-composer, .cu-status, .cu-menu, .cu-timeline,
.cu-section, .cu-stages, .cu-prose, .cu-starter {
  --cu-accent: var(--brand-accent, #6d5efc);
  --cu-accent-fg: #fff;
  --cu-bg: var(--surface, #fff);
  --cu-fg: var(--text, #1f2024);
  --cu-muted: var(--text-muted, #5f6368);
  --cu-border: var(--border, #e2e4ea);
  --cu-hover: var(--row-hover, #f6f7fb);
  --cu-chip: var(--chip-bg, #eef1ff);
  --cu-chip-fg: var(--chip-fg, #3b4aa0);
  --cu-open: var(--pin-open, #d64545);
  --cu-done: var(--pin-resolved, #2e9e5b);
  --cu-r: var(--r-control, 8px);
  --cu-r-pill: var(--r-pill, 999px);
  --cu-shadow: 0 10px 34px rgb(0 0 0 / 0.18);
  --cu-global-h: 40px;
  --cu-appbar-h: 36px;
  --cu-panel-w: min(420px, 100vw);
  color: var(--cu-fg);
  font-family: inherit;
}

/* ===================================================== the two-row shell */

/* Row 1 — GLOBAL. Owned by the platform, not the app: brand, locator ("where
 * am I"), and the account chrome (bell + account menu). In a caddie context
 * this is where the host bar's "Part of {project} on Caddie · Back" content
 * lives, so the row exists in every app whether or not caddie launched it. */
.cu-global {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  height: var(--cu-global-h); padding: 0 14px;
  background: var(--cu-bg); border-bottom: 1px solid var(--cu-border);
}
.cu-brand {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 2px 4px; margin-left: -4px;
  font: inherit; font-weight: 700; font-size: 15px; color: var(--cu-fg);
  cursor: pointer; border-radius: var(--cu-r); white-space: nowrap;
}
.cu-brand:hover { background: var(--cu-hover); }
.cu-brand-mark { color: var(--cu-accent); flex: 0 0 auto; }
/* The locator: the path to where the person is, as text — never controls.
 * Truncates from the left-most segment first on narrow screens. */
.cu-locator {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13px; color: var(--cu-muted); overflow: hidden;
}
.cu-locator > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-locator > span:last-child { color: var(--cu-fg); font-weight: 600; }
.cu-locator-sep { color: var(--cu-border); flex: 0 0 auto; }
.cu-locator-sep::before { content: "/"; }
.cu-global-right {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
/* A small orientation chip ("Team" / "Reviewing") — quiet, and it flips
 * during a View As, which is the moment it earns its place. */
.cu-side {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cu-muted);
  border: 1px solid var(--cu-border); border-radius: var(--cu-r-pill);
  padding: 1px 8px; white-space: nowrap;
}
.cu-side.is-team {
  color: var(--cu-accent);
  border-color: color-mix(in srgb, var(--cu-accent) 35%, transparent);
}

/* Row 2 — the APP bar. The app's own functions for the thing on screen. Sits
 * directly under the global bar and is sticky with it. Three slots; the
 * centre slot is for a mode or segment control and stays centred. */
.cu-appbar {
  position: sticky; top: var(--cu-global-h); z-index: 50;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--cu-appbar-h); padding: 3px 10px;
  background: var(--cu-bg); border-bottom: 1px solid var(--cu-border);
  flex-wrap: nowrap;
}
/* No overflow:hidden here: the left slot commonly holds a Menu, whose popup
 * is absolutely positioned and would be CLIPPED by it (it was — the switcher
 * opened into an invisible box). Truncation belongs to the trigger's own text
 * (`.cu-menu-where` ellipsis), not to the slot. */
.cu-appbar-left {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex-shrink: 1;
}
.cu-appbar-center { margin-inline: auto; display: flex; align-items: center; }
.cu-appbar-right {
  display: flex; gap: 6px; align-items: center; margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .cu-appbar { flex-wrap: wrap; }
  .cu-appbar-center { order: 3; width: 100%; justify-content: center; margin: 0; }
  .cu-appbar-right { margin-left: 0; flex-wrap: wrap; }
  .cu-locator { display: none; }
}

/* ========================================================= the side panel */

/* One wrapper, many contents — discussion, contents, settings — the way a
 * Gutenberg side panel hosts different inspectors in one frame. Docked over
 * the content's right edge (no backdrop by default: the work stays
 * interactive beside it); `is-modal` adds a scrim for flows that need it.
 * Header carries an eyebrow + title + close and, when given, a tab row.
 * The body scrolls; the footer is pinned — that is where a composer lives. */
.cu-panel {
  /* Below the GLOBAL row, never over it: the bell and the account menu stay
     reachable with a panel open. (z-index sits under the global row's 60
     would be wrong — the panel scrolls beneath nothing; it simply starts
     lower.) */
  /* `--cu-shell-bottom` is the global row's MEASURED bottom edge (GlobalBar
     publishes it): an app strip above the row — a dev-mode banner, a host
     bar — moved the row down and left the panel's head, with its close and
     back controls, hidden underneath it. */
  position: fixed; z-index: 55; right: 0; bottom: 0;
  top: var(--cu-shell-bottom, var(--cu-global-h));
  width: var(--cu-panel-w);
  background: var(--cu-bg); border-left: 1px solid var(--cu-border);
  box-shadow: -12px 0 40px rgb(0 0 0 / 0.16);
  display: flex; flex-direction: column;
  animation: cu-panel-in 0.16s ease-out;
}
@keyframes cu-panel-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cu-panel { animation: none; } }
.cu-panel-scrim {
  position: fixed; inset: 0; z-index: 69; border: 0; cursor: default;
  background: rgb(15 18 20 / 0.28);
}
.cu-panel-head {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px 0; border-bottom: 1px solid var(--cu-border);
}
.cu-panel-title-row { display: flex; align-items: flex-start; gap: 10px; }
.cu-panel-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cu-muted);
}
.cu-panel-title { margin: 2px 0 0; font-size: 15.5px; line-height: 1.35; font-weight: 650; }
.cu-panel-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--cu-muted); }
.cu-panel-close {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid transparent; background: none; color: var(--cu-muted);
  width: 28px; height: 28px; border-radius: var(--cu-r); cursor: pointer;
  font-size: 16px; line-height: 1;
}
.cu-panel-close:hover { background: var(--cu-hover); color: var(--cu-fg); }
.cu-panel-tabs { display: flex; gap: 2px; margin-bottom: -1px; }
.cu-panel-tab {
  border: 0; border-bottom: 2px solid transparent; background: none;
  padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--cu-muted); cursor: pointer;
}
.cu-panel-tab:hover { color: var(--cu-fg); }
.cu-panel-tab.is-on { color: var(--cu-fg); border-bottom-color: var(--cu-accent); }
.cu-panel-tab-count {
  margin-left: 5px; font-size: 11px; font-weight: 700; color: var(--cu-chip-fg);
  background: var(--cu-chip); border-radius: var(--cu-r-pill); padding: 0 6px;
}
.cu-panel-body {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cu-panel-foot {
  padding: 10px 16px 14px; border-top: 1px solid var(--cu-border);
  background: var(--cu-bg);
}
.cu-panel-empty {
  margin: 0; padding: 22px 6px; text-align: center;
  font-size: 13.5px; color: var(--cu-muted);
}
.cu-panel-back {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content;
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--cu-muted); cursor: pointer;
}
.cu-panel-back:hover { color: var(--cu-fg); }

/* A docked panel PUSHES the app area rather than covering it: put this class
 * on the app bar and the work surface while a panel is open, and the content
 * reflows beside the panel (a spotlight or pin on the right of a design would
 * otherwise sit under it). Phone width keeps the overlay. */
.cu-panel-push { margin-right: var(--cu-panel-w, min(420px, 100vw)); }
@media (max-width: 720px) { .cu-panel-push { margin-right: 0; } }

/* ============================================================== timeline */

.cu-timeline {
  list-style: none; margin: 0; padding: 0 0 0 4px;
  display: flex; flex-direction: column;
}
.cu-tl-item { position: relative; padding: 0 0 6px 0; }
/* The rail: a line down the left through every node but the last. */
.cu-tl-item::before {
  content: ""; position: absolute; left: 13px; top: 21px; bottom: -8px;
  width: 2px; background: var(--cu-border);
}
.cu-timeline.is-numbered .cu-tl-item::before { top: 26px; bottom: -6px; }
.cu-tl-item:last-child::before { display: none; }
.cu-tl-item.is-done::before { background: color-mix(in srgb, var(--cu-done) 45%, var(--cu-border)); }
.cu-tl-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 4px 6px 4px 0; text-align: left;
  font: inherit; color: var(--cu-fg); cursor: pointer; border-radius: var(--cu-r);
}
.cu-tl-row:disabled { cursor: default; }
.cu-tl-row:not(:disabled):hover .cu-tl-title { color: var(--cu-accent); }
/* Points, not numbers (Timeline.tsx): a 12px dot centred on the rail. The
 * numbered variant grows it into a 26px disc carrying the ordinal. */
.cu-tl-node {
  flex: 0 0 auto; width: 12px; height: 12px; margin: 0 7px; box-sizing: border-box;
  border-radius: var(--cu-r-pill); display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--cu-border); background: var(--cu-bg);
  color: var(--cu-muted); position: relative; z-index: 1;
}
.cu-timeline.is-numbered .cu-tl-node { width: 26px; height: 26px; margin: 0; }
.cu-tl-item.is-done .cu-tl-node {
  border-color: var(--cu-done); background: var(--cu-done); color: #fff;
}
.cu-tl-item.is-current .cu-tl-node {
  border-color: var(--cu-accent); background: var(--cu-accent); color: var(--cu-accent-fg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cu-accent) 22%, transparent);
}
.cu-tl-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 550; }
.cu-tl-item.is-todo .cu-tl-title { color: var(--cu-muted); font-weight: 450; }
.cu-tl-item.is-current .cu-tl-title { font-weight: 700; }
.cu-tl-badges { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.cu-tl-badge {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 600; line-height: 16px;
  padding: 0 7px; border-radius: var(--cu-r-pill);
  border: 1px solid color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 35%, transparent);
  background: color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 12%, var(--cu-bg));
  color: color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 75%, var(--cu-fg));
}
/* The current step's content hangs off the rail, indented past the node. */
.cu-tl-body {
  margin: 2px 0 8px 36px; padding: 10px 12px;
  border: 1px solid var(--cu-border); border-radius: 10px;
  background: color-mix(in srgb, var(--cu-hover) 60%, var(--cu-bg));
  font-size: 13.5px; display: flex; flex-direction: column; gap: 8px;
}

/* ================================================================ stages */

/* The roadmap rail (Stages). One flex row; a connector runs node to node
 * through ::before; done nodes are filled, the active one ringed, planned
 * ones hollow. The SELECTED stage (the one being read) gets the accent title
 * and an underline — a different mark from active on purpose. */
.cu-stages {
  list-style: none; margin: 0; padding: 4px 0 0; display: flex; gap: 0;
  overflow-x: auto; scrollbar-width: thin;
}
.cu-stage { flex: 1 1 0; min-width: 118px; position: relative; }
.cu-stage::before {
  content: ""; position: absolute; top: 15px; left: 50%; right: -50%; height: 2px;
  background: var(--cu-border);
}
.cu-stage:last-child::before { display: none; }
.cu-stage.is-done::before { background: color-mix(in srgb, var(--cu-done) 55%, var(--cu-border)); }
.cu-stage-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%;
  border: 0; background: none; padding: 2px 6px 6px; font: inherit; cursor: pointer;
  color: var(--cu-muted); border-radius: var(--cu-r);
}
.cu-stage-btn:disabled { cursor: default; }
.cu-stage-btn:not(:disabled):hover .cu-stage-title { color: var(--cu-fg); }
.cu-stage-node {
  width: 28px; height: 28px; border-radius: var(--cu-r-pill); box-sizing: border-box;
  border: 2px solid var(--cu-border); background: var(--cu-bg);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  position: relative; z-index: 1; color: var(--cu-muted);
}
.cu-stage.is-done .cu-stage-node { border-color: var(--cu-done); background: var(--cu-done); color: #fff; }
.cu-stage.is-active .cu-stage-node {
  border-color: var(--cu-accent); background: var(--cu-accent); color: var(--cu-accent-fg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cu-accent) 22%, transparent);
}
.cu-stage.is-skipped .cu-stage-node { border-style: dashed; }
.cu-stage-title {
  font-size: 12.5px; font-weight: 550; text-align: center; line-height: 1.25;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.cu-stage.is-active .cu-stage-title { color: var(--cu-fg); font-weight: 700; }
.cu-stage.is-done .cu-stage-title { color: var(--cu-fg); }
.cu-stage.is-selected .cu-stage-title { color: var(--cu-accent); border-bottom-color: var(--cu-accent); }
.cu-stage-meta { font-size: 11px; color: var(--cu-muted); text-align: center; }

/* ================================================================= prose */

.cu-prose { font-size: 14.5px; line-height: 1.55; color: var(--cu-fg); max-width: 70ch; }
.cu-prose > :first-child { margin-top: 0; }
.cu-prose p { margin: 0 0 10px; }
.cu-prose h2 { font-size: 17px; margin: 18px 0 6px; }
.cu-prose h3 { font-size: 15px; margin: 16px 0 4px; }
.cu-prose h4 { font-size: 13.5px; margin: 12px 0 4px; color: var(--cu-muted); text-transform: uppercase; letter-spacing: .04em; }
.cu-prose ul { margin: 0 0 10px; padding-left: 20px; }
.cu-prose li { margin: 2px 0; }
.cu-prose blockquote {
  margin: 8px 0 10px; padding: 4px 12px; border-left: 3px solid var(--cu-border);
  color: color-mix(in srgb, var(--cu-fg) 80%, var(--cu-muted)); font-style: italic;
}
.cu-prose blockquote p { margin: 0 0 4px; }
.cu-prose hr { border: 0; border-top: 1px solid var(--cu-border); margin: 12px 0; }

/* =============================================================== section */

/* A collapsible group in the panel (PanelSection). Stacked sections share a
 * hairline; the head is a full-width button so the whole row toggles. */
.cu-section { border-top: 1px solid var(--cu-border); }
.cu-section:first-child { border-top: 0; }
.cu-section-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; padding: 10px 2px; text-align: left;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--cu-fg);
  cursor: pointer; border-radius: var(--cu-r);
}
.cu-section-head:hover { color: var(--cu-accent); }
.cu-section-chev { flex: 0 0 auto; color: var(--cu-muted); transition: transform .15s ease; }
.cu-section.is-open .cu-section-chev { transform: rotate(90deg); }
.cu-section-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cu-section.is-current .cu-section-title { color: var(--cu-accent); }
.cu-section-meta { flex: 0 0 auto; font-size: 11.5px; font-weight: 500; color: var(--cu-muted); }
.cu-section-body { padding: 0 0 10px 0; }

/* ================================================================== menu */

/* The grouped dropdown. The trigger is a real control (border, caret) so it
 * cannot be mistaken for a label, and it carries a count chip. */
.cu-menu { position: relative; min-width: 0; }
.cu-menu-trigger {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid var(--cu-border); background: var(--cu-bg); color: var(--cu-fg);
  border-radius: var(--cu-r); padding: 4px 8px 4px 10px; font: inherit;
  font-size: 13px; cursor: pointer; text-align: left;
}
.cu-menu-trigger:hover { background: var(--cu-hover); }
.cu-menu-trigger[aria-expanded="true"] { border-color: var(--cu-accent); }
.cu-menu-caret { flex: 0 0 auto; color: var(--cu-muted); }
.cu-menu-where {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cu-menu-where-dim { color: var(--cu-muted); }
.cu-menu-where b { font-weight: 650; }
.cu-menu-where-meta { color: var(--cu-muted); font-size: 12px; }
.cu-menu-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; line-height: 16px;
  padding: 0 7px; border-radius: var(--cu-r-pill);
  color: var(--cu-chip-fg); background: var(--cu-chip); white-space: nowrap;
}
.cu-menu-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 65;
  min-width: 300px; max-width: min(420px, calc(100vw - 16px));
  max-height: 70vh; overflow-y: auto;
  background: var(--cu-bg); border: 1px solid var(--cu-border);
  border-radius: var(--cu-r); box-shadow: var(--cu-shadow); padding: 6px;
}
.cu-menu-group + .cu-menu-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cu-border); }
.cu-menu-group-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 8px 3px;
}
.cu-menu-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cu-muted);
}
.cu-menu-group-note { font-size: 11.5px; color: var(--cu-muted); }
.cu-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; color: var(--cu-fg); padding: 7px 8px;
  border-radius: var(--cu-r); font: inherit; text-align: left; cursor: pointer;
}
.cu-menu-item:hover { background: var(--cu-hover); }
.cu-menu-item.is-active { background: color-mix(in srgb, var(--cu-accent) 8%, var(--cu-bg)); }
.cu-menu-item:disabled { opacity: 0.5; cursor: default; }
.cu-menu-check { flex: 0 0 14px; font-size: 12px; font-weight: 700; color: var(--cu-accent); }
.cu-menu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cu-menu-label { font-size: 13.5px; font-weight: 550; }
.cu-menu-item.is-active .cu-menu-label { font-weight: 700; }
.cu-menu-meta { font-size: 12px; color: var(--cu-muted); }
.cu-menu-badges { display: flex; gap: 4px; flex: 0 0 auto; }
.cu-menu-badge {
  font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 7px;
  border-radius: var(--cu-r-pill);
  border: 1px solid color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 35%, transparent);
  background: color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 12%, var(--cu-bg));
  color: color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 75%, var(--cu-fg));
}
.cu-menu-empty { display: block; padding: 6px 8px; font-size: 12.5px; color: var(--cu-muted); }
.cu-menu-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cu-border); }
.cu-menu-foot button {
  width: 100%; border: 0; background: none; color: var(--cu-muted);
  padding: 6px 8px; border-radius: var(--cu-r); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.cu-menu-foot button:hover { background: var(--cu-hover); color: var(--cu-fg); }

/* ================================================================= bell */

/* Button: a 34px ring — the polished form. Panel: review's format — a header
 * with "Show resolved" and "Mark all read", rows that read as sentences
 * ("erin replied in a thread · on Staff"), a category chip with a dot, a
 * one-line preview, and the time. Unread rows are tinted and dotted. */
.cu-bellwrap { position: relative; }
.cu-bell {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--cu-border); border-radius: var(--cu-r-pill);
  background: var(--cu-bg); color: var(--cu-muted); cursor: pointer;
}
.cu-bell:hover { color: var(--cu-fg); background: var(--cu-hover); }
.cu-bell.is-unread { color: var(--cu-fg); }
.cu-bell.is-needs-you { color: var(--cu-accent); border-color: var(--cu-accent); }
.cu-bell-count {
  position: absolute; top: -5px; right: -6px; min-width: 16px;
  background: var(--cu-open); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: var(--cu-r-pill); padding: 1px 5px; line-height: 14px;
  text-align: center;
}
.cu-bell-count.is-quiet { background: var(--cu-muted); }
.cu-bell-scrim {
  position: fixed; inset: 0; background: transparent; border: 0;
  cursor: default; z-index: 79;
}
.cu-bell-menu {
  position: absolute; right: 0; top: 40px; z-index: 80;
  width: min(392px, calc(100vw - 16px));
  background: var(--cu-bg); border: 1px solid var(--cu-border);
  border-radius: var(--cu-r); box-shadow: var(--cu-shadow);
  display: flex; flex-direction: column;
}
.cu-bell-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--cu-border);
  font-size: 13.5px; font-weight: 650;
}
.cu-bell-head-right { display: flex; align-items: center; gap: 12px; }
.cu-bell-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--cu-muted); cursor: pointer;
}
.cu-bell-toggle input { margin: 0; }
.cu-bell-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--cu-muted); cursor: pointer;
}
.cu-bell-link:hover { color: var(--cu-fg); }
.cu-bell-list { max-height: 68vh; overflow-y: auto; }
.cu-bell-empty { padding: 22px 12px; text-align: center; font-size: 13px; color: var(--cu-muted); }
.cu-bell-row {
  display: flex; gap: 9px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--cu-border); background: none;
  color: var(--cu-fg); padding: 9px 12px; cursor: pointer; font: inherit;
}
.cu-bell-row:last-child { border-bottom: 0; }
.cu-bell-row:hover { background: var(--cu-hover); }
.cu-bell-row.is-unread { background: color-mix(in srgb, var(--cu-accent) 6%, var(--cu-bg)); }
.cu-bell-row.is-unread:hover { background: color-mix(in srgb, var(--cu-accent) 10%, var(--cu-bg)); }
.cu-bell-dot {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px;
  border-radius: var(--cu-r-pill); background: transparent;
}
.cu-bell-row.is-unread .cu-bell-dot { background: var(--cu-accent); }
.cu-bell-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cu-bell-line { font-size: 13.5px; line-height: 1.35; }
.cu-bell-row.is-unread .cu-bell-line { font-weight: 550; }
.cu-bell-line b { font-weight: 650; }
.cu-bell-line .cu-bell-kind { color: var(--cu-muted); font-weight: 400; }
.cu-bell-on { font-size: 12px; color: var(--cu-muted); }
.cu-bell-on b { color: var(--cu-fg); font-weight: 650; }
.cu-bell-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cu-bell-preview {
  font-size: 12.5px; color: var(--cu-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cu-bell-row.is-unread .cu-bell-preview { color: color-mix(in srgb, var(--cu-fg) 72%, transparent); }
.cu-bell-when { font-size: 11px; color: var(--cu-muted); }

/* =========================================================== status chip */

/* The category/status pill with its dot — review's idiom. Colour comes from
 * `--chip-tone` set inline BY THE CALLER FROM A TOKEN (never a literal). */
.cu-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; line-height: 16px;
  padding: 0 7px; border-radius: var(--cu-r-pill);
  border: 1px solid color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 35%, transparent);
  background: color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 12%, var(--cu-bg));
  color: color-mix(in srgb, var(--chip-tone, var(--cu-muted)) 75%, var(--cu-fg));
  white-space: nowrap;
}
.cu-status::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--cu-r-pill);
  background: var(--chip-tone, var(--cu-muted));
}

/* ============================================================= threads */

/* A thread card, review's NoteCard translated: status chip · author · time ·
 * resolve/reopen at the right; the body; a "N comments / Reply" foot that
 * opens the thread. Resolved cards dim and strike. */
.cu-thread {
  border: 1px solid var(--cu-border); border-radius: 10px;
  background: color-mix(in srgb, var(--cu-hover) 60%, var(--cu-bg));
  padding: 10px 12px; font-size: 13.5px;
  display: flex; flex-direction: column; gap: 6px;
}
.cu-thread.is-clickable { cursor: pointer; }
.cu-thread.is-clickable:hover { border-color: color-mix(in srgb, var(--cu-accent) 55%, var(--cu-border)); }
.cu-thread.is-clickable:focus-visible { outline: 2px solid var(--cu-accent); outline-offset: 1px; }
.cu-thread.is-resolved { opacity: 0.68; }
.cu-thread.is-active { border-color: var(--cu-accent); }
.cu-thread-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 12px; color: var(--cu-muted);
}
.cu-thread-anchor {
  font-size: 11px; font-weight: 700; color: #fff; background: var(--cu-open);
  border-radius: var(--cu-r-pill); padding: 0 7px; line-height: 16px;
}
.cu-thread.is-resolved .cu-thread-anchor { background: var(--cu-done); }
.cu-thread-author { font-weight: 650; color: var(--cu-fg); }
.cu-thread-author.is-team { color: var(--cu-accent); }
.cu-thread-actions { margin-left: auto; display: flex; gap: 2px; }
.cu-thread-act {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 2px 6px; border-radius: var(--cu-r);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--cu-muted);
}
.cu-thread-act:hover { background: var(--cu-hover); color: var(--cu-fg); }
.cu-thread-act.is-resolve { color: var(--cu-done); }
.cu-thread-act.is-resolve:hover { background: color-mix(in srgb, var(--cu-done) 12%, var(--cu-bg)); }
.cu-thread-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-thread.is-resolved .cu-thread-body { text-decoration: line-through; }
/* Text-styled, but with a REAL hit target: a 12px word is a miss on a phone
 * and a near-miss with a mouse. Padding gives it ~28px of height; the
 * negative margin keeps the row's rhythm unchanged. */
.cu-thread-open {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
  border: 0; background: none; padding: 5px 8px; margin: -5px -4px;
  border-radius: var(--cu-r); font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--cu-muted); cursor: pointer;
}
.cu-thread-open:hover { color: var(--cu-fg); background: var(--cu-hover); }
.cu-thread-foot { display: flex; gap: 12px; align-items: center; margin-top: 2px; }
.cu-thread-open.is-on { color: var(--cu-accent); }
/* the conversation, inline under the card: replies in the ruled column, then the composer */
.cu-thread-inline { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--cu-border); }
.cu-thread-inline .cu-composer textarea { min-height: 54px; }
/* the lightbox: a picture, full size, over everything */
.cu-lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 24px;
  background: rgb(6 8 12 / 0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.cu-lightbox img {
  max-width: min(96vw, 1600px); max-height: 86vh; object-fit: contain; border-radius: 8px;
  box-shadow: 0 12px 48px rgb(0 0 0 / 0.6); cursor: default; background: #fff;
}
.cu-lightbox-caption { color: #fff; font-size: 13px; opacity: .85; }
.cu-lightbox-close {
  position: absolute; top: 14px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.4); background: rgb(0 0 0 / 0.35); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.cu-md-img-link { display: block; margin: 6px 0; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }

/* The thread view: the parent card, then its replies in a left-ruled column. */
.cu-thread-view { display: flex; flex-direction: column; gap: 10px; }
.cu-replies {
  display: flex; flex-direction: column; gap: 8px;
  border-left: 2px solid var(--cu-border); padding-left: 12px; margin-left: 4px;
}
.cu-reply { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.cu-reply-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cu-muted); }
.cu-reply-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-reply-tools { display: flex; gap: 8px; }
.cu-reply-tools button, .cu-thread-tools button {
  border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px;
  color: var(--cu-muted); cursor: pointer;
}
.cu-reply-tools button:hover, .cu-thread-tools button:hover { color: var(--cu-fg); }
.cu-edit { display: flex; flex-direction: column; gap: 6px; }
.cu-edit-btns { display: flex; gap: 6px; }

/* ============================================================ composer */

.cu-composer { display: flex; flex-direction: column; gap: 6px; }
.cu-composer-label { font-size: 12px; font-weight: 600; }
.cu-composer-about { font-size: 12px; color: var(--cu-muted); }
.cu-composer textarea {
  width: 100%; min-height: 72px; resize: vertical;
  border: 1px solid var(--cu-border); border-radius: var(--cu-r);
  padding: 8px 10px; font: inherit; font-size: 13.5px;
  background: var(--cu-bg); color: var(--cu-fg);
}
.cu-composer textarea:focus { outline: 2px solid color-mix(in srgb, var(--cu-accent) 45%, transparent); outline-offset: 1px; }
.cu-composer-row { display: flex; align-items: center; gap: 8px; }
.cu-composer-hint { font-size: 11.5px; color: var(--cu-muted); margin-right: auto; }
.cu-composer-err { font-size: 12.5px; color: var(--cu-open); margin: 0; }
/* attachments in the composer: a drop target, the pending strip, the clip */
.cu-composer.is-dragover textarea { outline: 2px dashed var(--cu-accent); outline-offset: 1px; }
.cu-composer-files { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid var(--cu-border); border-radius: var(--cu-r); background: var(--cu-bg);
  padding: 3px 6px 3px 3px; font-size: 11.5px; color: var(--cu-muted);
}
.cu-file-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; display: block; }
.cu-file-chip-doc {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px;
  background: var(--cu-hover); font-size: 10px; font-weight: 700; color: var(--cu-muted);
}
.cu-file-chip > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-file-chip button {
  border: 0; background: none; padding: 0 2px; font: inherit; font-size: 14px;
  line-height: 1; color: var(--cu-muted); cursor: pointer;
}
.cu-file-chip button:hover { color: var(--cu-fg); }
.cu-attach {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--cu-border); border-radius: var(--cu-r); background: var(--cu-bg);
  color: var(--cu-muted); cursor: pointer;
}
.cu-attach:hover { color: var(--cu-fg); background: var(--cu-hover); }
/* an attachment image in a body: a bounded thumbnail that opens full-size */
.cu-md-img-link { display: block; margin: 6px 0; }
.cu-md-img {
  display: block; max-width: 100%; max-height: 240px; border-radius: 8px;
  border: 1px solid var(--cu-border); background: var(--cu-hover);
}
.cu-thread-body, .cu-reply-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-btn {
  border: 1px solid var(--cu-border); background: var(--cu-bg); color: var(--cu-fg);
  border-radius: var(--cu-r); padding: 5px 12px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.cu-btn:hover { background: color-mix(in srgb, var(--cu-fg) 8%, var(--cu-bg)); }
.cu-btn:disabled { opacity: 0.55; cursor: default; }
.cu-btn-primary { background: var(--cu-accent); border-color: var(--cu-accent); color: var(--cu-accent-fg); }
.cu-btn-primary:hover { background: color-mix(in srgb, var(--cu-accent) 86%, #000); color: var(--cu-accent-fg); }

/* ================================================================ starter */

/* A subject nobody has spoken about, listed among the threads: the same
 * card width, a dashed edge so it reads as "not yet", and an inline composer
 * under it while open. The first word on a subject costs one click. */
.cu-starter {
  border: 1px dashed var(--cu-border); border-radius: var(--cu-r);
  background: transparent; margin: 0 0 8px;
}
.cu-starter.is-open { border-style: solid; background: var(--cu-bg); }
.cu-starter-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  border: 0; background: none; padding: 10px 12px; cursor: pointer;
  text-align: left; font: inherit; color: var(--cu-fg); border-radius: var(--cu-r);
}
.cu-starter-row:hover { background: var(--cu-hover); }
.cu-starter-anchor {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--cu-muted);
}
.cu-starter-text { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.cu-starter-text > span { color: var(--cu-muted); font-size: 12.5px; }
.cu-starter .cu-thread-inline { padding: 0 12px 10px; }

/* ============================================================ deep links */

/* A deep-linked card or reply SETTLES out of a wash — slow enough to notice
 * after the scroll lands, never a flash. The app adds `is-settling is-target`,
 * drops `is-target` on the next frame (the transition carries the wash out),
 * and drops `is-settling` once it has faded, so hover stays instant. */
.cu-thread.is-settling, .cu-reply.is-settling {
  transition: background 2400ms ease-out, box-shadow 2400ms ease-out;
}
.cu-thread.is-target, .cu-reply.is-target {
  background: var(--cu-chip); box-shadow: inset 0 0 0 1px var(--cu-accent);
  transition: none;
}