privateboard 0.1.0 → 0.1.3

package/public/{prototype-dashboard.html → index.html}

@@ -37,9 +37,18 @@
 
     /* Chat page chrome (sidebar, queue, room head, etc.) runs on Human
        Sans. Agent message bubbles override to --font-agent;
-       the logo is pinned back to Inter further down the stylesheet. */
-    --mono: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
-    --sans: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
+       the logo is pinned back to Inter further down the stylesheet.
+       PingFang SC is named explicitly in the CJK fallback chain so
+       Chinese glyphs render as PingFang on macOS instead of whatever
+       `system-ui` resolves to. */
+    --mono: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+            "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei",
+            "Source Han Sans CN", "Noto Sans CJK SC",
+            system-ui, sans-serif;
+    --sans: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+            "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei",
+            "Source Han Sans CN", "Noto Sans CJK SC",
+            system-ui, sans-serif;
 
     --sidebar-w: 280px;
   }
@@ -63,16 +72,71 @@
     height: 100vh;
     overflow: hidden;
   }
+  /* Body becomes a flex column so the optional system-notice banner
+     can sit above the .control shell without forcing total height to
+     exceed the viewport. .control keeps its existing internal grid;
+     it just lives inside this outer flex now. */
+  body {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
 
   ::-webkit-scrollbar { width: 5px; height: 5px; }
   ::-webkit-scrollbar-track { background: var(--bg); }
   ::-webkit-scrollbar-thumb { background: var(--line-bright); }
 
+  /* ─────────── SYSTEM NOTICE BANNER ───────────
+     Dismissible single-line notice that appears above the app shell
+     when storage migrations have been applied. Mono micro-type, lime
+     left chevron, hairline border under so it reads as system chrome
+     not chat content. Only shown when app.js sets data-sys-notice
+     visible. */
+  .sys-notice {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    background: var(--panel-2, #1A1A18);
+    border-bottom: 0.5px solid var(--lime-dim, #2D5532);
+    font-family: var(--mono, "Inter", system-ui, sans-serif);
+    font-size: 11.5px;
+    color: var(--text-soft, #8E8B83);
+    flex-shrink: 0;
+  }
+  .sys-notice[hidden] { display: none; }
+  .sys-notice-mark {
+    color: var(--lime, #6FB572);
+    font-weight: 700;
+  }
+  .sys-notice-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    line-height: 1.4;
+  }
+  .sys-notice-text .sys-notice-strong {
+    color: var(--text, #C8C5BE);
+    font-weight: 600;
+  }
+  .sys-notice-close {
+    appearance: none;
+    background: none;
+    border: 0;
+    color: var(--text-faint, #5C5A4D);
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 1;
+    padding: 4px 6px;
+    transition: color 0.12s;
+  }
+  .sys-notice-close:hover { color: var(--lime, #6FB572); }
+
   /* ─────────── ROOT ─────────── */
   .control {
     display: grid;
     grid-template-rows: auto 1fr;
-    height: 100vh;
+    flex: 1 1 auto;
+    min-height: 0;
     gap: 8px;
     padding: 8px;
   }
@@ -141,98 +205,6 @@
   .topbar-right .val { color: var(--text-soft); }
   @keyframes pulse { 0%, 60% { opacity: 1; } 80% { opacity: 0.4; } }
 
-  .user-menu-wrap { position: relative; flex: 1; min-width: 0; }
-  .user-menu {
-    position: absolute;
-    /* Default opens DOWNWARD; sidebar-foot variant flips upward below */
-    top: calc(100% + 6px);
-    right: 0;
-    min-width: 200px;
-    background: var(--panel);
-    border: 0.5px solid var(--line-bright);
-    z-index: 100;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-2px);
-    transition: opacity 0.12s, transform 0.12s, visibility 0s linear 0.12s;
-  }
-  .user-menu-wrap:hover .user-menu,
-  .user-menu-wrap:focus-within .user-menu {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-    transition: opacity 0.12s, transform 0.12s, visibility 0s;
-  }
-
-  /* Sidebar-foot variant: menu pops UPWARD from the bottom user-block,
-     anchored to the left edge so it sits inside the sidebar column. */
-  .sidebar-foot .user-menu-wrap { display: flex; }
-  .sidebar-foot .user-block { flex: 1; min-width: 0; }
-  .sidebar-foot .user-menu {
-    top: auto;
-    bottom: calc(100% + 6px);
-    right: auto;
-    left: 0;
-    transform: translateY(2px);
-  }
-  .sidebar-foot .user-menu-wrap:hover .user-menu,
-  .sidebar-foot .user-menu-wrap:focus-within .user-menu {
-    transform: translateY(0);
-  }
-  .sidebar-foot .user-block .chev {
-    margin-left: auto;
-    color: var(--text-dim);
-    font-size: 9px;
-    transition: color 0.1s;
-  }
-  .sidebar-foot .user-menu-wrap:hover .user-block .chev,
-  .sidebar-foot .user-menu-wrap:focus-within .user-block .chev {
-    color: var(--lime);
-  }
-
-  .user-menu-section {
-    padding: 8px 12px;
-    border-bottom: 0.5px solid var(--line);
-    background: var(--panel-2);
-  }
-  .user-menu-section .name {
-    font-size: 11px;
-    color: var(--text);
-    font-weight: 700;
-    margin-bottom: 1px;
-  }
-  .user-menu-section .meta {
-    font-size: 9.5px;
-    color: var(--text-dim);
-    letter-spacing: 0.04em;
-  }
-  .user-menu-section .meta .lime { color: var(--lime); }
-
-  .user-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 12px;
-    font-size: 11.5px;
-    color: var(--text-soft);
-    text-decoration: none;
-    border-bottom: 0.5px solid var(--line);
-    transition: all 0.08s;
-  }
-  .user-menu-item:last-child { border-bottom: none; }
-  .user-menu-item:hover {
-    background: var(--panel-2);
-    color: var(--lime);
-  }
-  .user-menu-item .menu-icon {
-    width: 14px;
-    color: var(--text-dim);
-    text-align: center;
-  }
-  .user-menu-item:hover .menu-icon { color: var(--lime); }
-  .user-menu-item.danger:hover { color: var(--red); }
-  .user-menu-item.danger:hover .menu-icon { color: var(--red); }
-
   /* ═══════════════════════════════════════════
      MAIN GRID — sidebar + content
      ═══════════════════════════════════════════ */
@@ -242,6 +214,11 @@
     gap: 0;
     overflow: hidden;
     min-height: 0;
+    /* `position: relative` so the floating sidebar-expand-btn (absolute-
+       positioned) anchors to the body-grid's top-left edge instead of
+       the viewport — that puts the button below the topbar / brand
+       logo where the user expects it, not on top of it. */
+    position: relative;
   }
 
   /* Drag handles for resizable columns */
@@ -324,6 +301,134 @@
   }
   .sidebar-head-meta .lime { color: var(--lime); }
 
+  /* ─── Sidebar collapse toggle ───
+     Sits at the right edge of sidebar-head. Pure CSS glyph (no svg)
+     so we can flip the direction via class without re-rendering DOM.
+     Hover lime per the new-btn vocabulary. */
+  .sidebar-collapse-btn {
+    appearance: none;
+    background: var(--panel-3);
+    border: 0.5px solid var(--line-strong);
+    color: var(--text-soft);
+    cursor: pointer;
+    width: 24px;
+    height: 22px;
+    padding: 0;
+    line-height: 1;
+    font-family: var(--mono);
+    font-size: 16px;
+    font-weight: 700;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.12s, background 0.12s, border-color 0.12s;
+    flex-shrink: 0;
+  }
+  .sidebar-collapse-btn::before { content: "‹"; }
+  body.sidebar-collapsed .sidebar-collapse-btn::before { content: "›"; }
+  .sidebar-collapse-btn:hover {
+    color: var(--lime);
+    border-color: var(--lime-dim);
+    background: var(--panel-2);
+  }
+
+  /* ─── Collapsed state · sidebar fully hidden ───
+     Sidebar + resizer collapse out of layout via display:none. The
+     grid drops to a single 1fr column · auto-placement would otherwise
+     try to drop the .main into the now-empty first track (still
+     reserved by template), zero-width, and the user sees an empty
+     room. Single column = main fills the whole body-grid cleanly.
+     The user's preferred --sidebar-w stays in localStorage so
+     expanding restores the same width. */
+  body.sidebar-collapsed .body-grid {
+    grid-template-columns: 1fr !important;
+  }
+  body.sidebar-collapsed .sidebar,
+  body.sidebar-collapsed .col-resizer {
+    display: none;
+  }
+
+  /* Floating expand button · ONLY shown in the empty / no-room
+     state, where there's no room-head to host the in-header
+     expand control (rendered by renderHeader). Positioned absolute
+     relative to .body-grid (which carries `position: relative`),
+     pinned to the top-left of the body-grid area. Frosted black
+     glass with hairline border, lime on hover. z-index sits above
+     chat content but below modal overlays (which use 1500+). */
+  .sidebar-expand-btn {
+    display: none;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    width: 34px;
+    height: 34px;
+    align-items: center;
+    justify-content: center;
+    background: rgba(8, 8, 8, 0.55);
+    -webkit-backdrop-filter: blur(12px) saturate(1.05);
+    backdrop-filter: blur(12px) saturate(1.05);
+    border: 0.5px solid var(--line-strong);
+    color: var(--text-soft);
+    cursor: pointer;
+    z-index: 200;
+    transition: color 0.12s, border-color 0.12s, background 0.12s;
+    appearance: none;
+    padding: 0;
+  }
+  /* Show floating button only when sidebar is collapsed AND we're
+     in the empty / no-room state. When a room is loaded, the
+     in-header `.room-head-expand` button takes over instead, so
+     the icon doesn't sit on top of the room title. */
+  html.no-room body.sidebar-collapsed .sidebar-expand-btn {
+    display: inline-flex;
+  }
+  .sidebar-expand-btn:hover {
+    color: var(--lime);
+    border-color: var(--lime-dim);
+    background: rgba(8, 8, 8, 0.72);
+  }
+  .sidebar-expand-btn svg { display: block; }
+
+  /* ─── In-header expand button ───
+     Lives at the leading edge of `.room-head` (rendered by
+     renderHeader() in app.js). Twin of `.sidebar-collapse-btn` —
+     naked CSS-glyph, no border, faint text, lime on hover. The
+     ▸ glyph mirrors the ◂ on the collapse counterpart so the
+     two controls read as a paired set. Hidden by default; shown
+     only when the sidebar is collapsed AND a room is loaded. */
+  .room-head-expand {
+    appearance: none;
+    background: var(--panel-3);
+    border: 0.5px solid var(--line-strong);
+    color: var(--text-soft);
+    cursor: pointer;
+    width: 24px;
+    height: 22px;
+    padding: 0;
+    line-height: 1;
+    font-family: var(--mono);
+    font-size: 16px;
+    font-weight: 700;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.12s, background 0.12s, border-color 0.12s;
+    flex-shrink: 0;
+  }
+  .room-head-expand::before { content: "›"; }
+  body.sidebar-collapsed .room-head-expand {
+    display: inline-flex;
+  }
+  .room-head-expand:hover {
+    color: var(--lime);
+    border-color: var(--lime-dim);
+    background: var(--panel-2);
+  }
+  .room-head-expand:hover {
+    color: var(--lime);
+    background: var(--panel-3);
+  }
+
   /* ─── Sidebar tabs (Rooms / Agents) — segmented control with icon ─── */
   .sidebar-tabs {
     display: flex;
@@ -459,26 +564,48 @@
     flex-shrink: 0;
   }
   .agent-row .agent-row-content { min-width: 0; }
+  /* Top-line · matches `.row-top-line` in the rooms list so the
+     agent's name + time read with the same baseline/gap rhythm. The
+     trailing pin button sits AFTER the time and is hover-revealed,
+     so we don't need `space-between` to push it right — `flex: 1` on
+     the title handles that. */
   .agent-row .agent-row-top-line {
     display: flex;
-    justify-content: space-between;
-    gap: 6px;
-    font-family: var(--mono);
-    margin-bottom: 2px;
+    align-items: baseline;
+    gap: 4px;
+    margin-bottom: 1px;
   }
   .agent-row .agent-row-title {
     color: var(--text);
     font-family: var(--font-human);
     font-weight: 600;
-    font-size: 12.5px;
+    font-size: 14px;
     letter-spacing: -0.005em;
+    /* Truncate long agent names with ellipsis instead of wrapping
+       to a second line. Without `min-width: 0` here, flex children
+       default to min-width: auto = content-size and refuse to
+       shrink below their text — which produced the wrapping the
+       user saw. `flex: 1 1 0` + `min-width: 0` lets the title
+       shrink as needed; the trailing time tag is locked via
+       flex-shrink: 0 below so it never gets eaten. */
+    flex: 1 1 0;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
+  /* Time tag · same register as `.row-time` in the rooms list
+     (10.5px mono, text-dim) so both lists read as one consistent
+     "title · time" rhythm. Earlier this was 9px uppercase faint —
+     visually a different "kind of metadata" from the rooms time. */
   .agent-row .agent-row-time {
-    color: var(--text-faint);
-    font-size: 9px;
-    letter-spacing: 0.06em;
+    color: var(--text-dim);
+    font-size: 10.5px;
+    font-family: var(--mono);
+    letter-spacing: 0;
+    text-transform: none;
     white-space: nowrap;
-    text-transform: uppercase;
+    flex-shrink: 0;
   }
   .agent-row .agent-row-subtitle {
     font-family: var(--mono);
@@ -520,7 +647,17 @@
          accent · outlined (hairline border + cyan text on transparent
          bg) instead of a solid cyan fill that screamed at the user.
        · Section header reverts to the standard text-faint kicker. */
-  .agent-row.is-chair { background: transparent; }
+  /* Chair row · NOT wrapped in `.agent-row-shell` (the shell provides
+     the 1px×6px inset + 4px border-radius for director rows). To make
+     the chair's hover/active background match — same inset, same
+     rounded corners — fold those rules onto the chair anchor itself.
+     Without this, director hover felt "cushioned" while chair hover
+     painted edge-to-edge with sharp corners. */
+  .agent-row.is-chair {
+    background: transparent;
+    margin: 1px 6px;
+    border-radius: 4px;
+  }
   .agent-row.is-chair:hover { background: var(--panel-2); }
   .agent-row.is-chair.active { background: var(--panel-3); }
   .agent-row.is-chair .agent-row-av.chair-av {
@@ -600,7 +737,7 @@
     color: var(--text);
     border: none;
     font-family: var(--sans);
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     text-decoration: none;
@@ -626,8 +763,8 @@
      adjacent label without per-icon overrides. */
   .new-btn::before {
     content: "";
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
     flex-shrink: 0;
     background-color: currentColor;
     /* Inherit `color` from .new-btn so the icon picks up the same
@@ -639,8 +776,8 @@
             mask-repeat: no-repeat;
     -webkit-mask-position: center;
             mask-position: center;
-    -webkit-mask-size: 14px 14px;
-            mask-size: 14px 14px;
+    -webkit-mask-size: 16px 16px;
+            mask-size: 16px 16px;
     transition: color 0.12s;
   }
   /* "New room" · SquarePen (Lucide) — square frame with a pen
@@ -659,11 +796,59 @@
   .new-btn.nav-reports::before {
     --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
   }
+  /* "All Notes" · Bookmark (Lucide) — pennant-shaped bookmark glyph
+     mirroring the qcta save-button icon. Matches the chairman's-notes
+     vocabulary across the app (sidebar entry, save action, in-room
+     overlay all share the bookmark register). */
+  .new-btn.nav-notes::before {
+    --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
+  }
+  /* All Reports / All Notes nav-button shape · the count badge floats
+     to the right of the label, so the link's flex layout grows to fill
+     the row. `.nav-label` flex-grows, `.nav-count` is auto-sized and
+     hugs the trailing edge. */
+  .new-btn.nav-notes,
+  .new-btn.nav-reports {
+    justify-content: flex-start;
+  }
+  .new-btn.nav-notes .nav-label,
+  .new-btn.nav-reports .nav-label {
+    flex: 1;
+    min-width: 0;
+  }
+  /* Count badge · subtle mono micro-tag. Uses --text-faint on its own
+     and inherits the link's color cascade on hover/active so the badge
+     tracks the label's lime shift. Hidden until at least one item
+     exists (the `hidden` attr is removed once count > 0). Same visual
+     vocabulary as the section-header .badge below — both render as
+     mono pills so the sidebar reads as one consistent counting
+     system. */
+  .new-btn.nav-notes .nav-count,
+  .new-btn.nav-reports .nav-count {
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--text-faint);
+    padding: 1px 6px;
+    background: var(--panel-3);
+    border-radius: 3px;
+    flex-shrink: 0;
+    transition: color 0.12s, background 0.12s;
+  }
+  .new-btn.nav-notes:hover .nav-count,
+  .new-btn.nav-notes.active .nav-count,
+  .new-btn.nav-reports:hover .nav-count,
+  .new-btn.nav-reports.active .nav-count {
+    color: var(--lime);
+    background: rgba(190, 242, 100, 0.08);
+  }
   .new-btn:hover {
     background: var(--panel-2);
-    color: var(--text);
+    color: var(--lime);
   }
-  .new-btn:hover::before { color: var(--lime); }
+  /* The ::before icon inherits via currentColor — no explicit
+     hover override needed; setting the parent's color cascades. */
   /* Active state · matches session-row-shell.active treatment so the
      sidebar reads consistently when the composer is the current view. */
   .new-btn.active {
@@ -682,7 +867,17 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 10px 4px;
+    /* Trailing count badge column-aligns with the .new-btn.nav-*
+       badges above. Geometry:
+         nav badge inset · 6px margin + 10px padding = 16px from
+                            the sidebar edge
+         section badge inset · 4px sessions-scroll padding + this
+                                rule's right padding
+       So this rule's right padding must be 16 − 4 = 12px. The
+       parent's 4px padding was missed in an earlier version that
+       set this to 16px and made the section badges drift 4px
+       further left than the nav badges. */
+    padding: 8px 12px 4px 10px;
     font-size: 9px;
     color: var(--text-dim);
     text-transform: uppercase;
@@ -704,12 +899,27 @@
   }
   .row-status.paused { color: var(--amber); }
   .section-header .line { flex: 1; border-top: 0.5px dashed var(--line-bright); }
+  /* Section badge · same visual vocabulary as .new-btn.nav-* .nav-count
+     above so the sidebar reads as one consistent counting system.
+     Mono pill, panel-3 bg, faint text, rounded — overrides the
+     .section-header parent's sans uppercase letter-spacing because a
+     count is a number, not a label. The .live variant still takes its
+     pulsing dot via ::before. */
   .section-header .badge {
-    font-size: 9px;
-    color: inherit;
-    font-weight: 700;
-    padding: 0 4px;
-    background: var(--panel-2);
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: none;
+    color: var(--text-faint);
+    padding: 1px 6px;
+    background: var(--panel-3);
+    border-radius: 3px;
+    flex-shrink: 0;
+  }
+  .section-header.live .badge {
+    color: var(--lime);
+    background: rgba(190, 242, 100, 0.08);
   }
   .section-header.live .badge::before {
     content: "● ";
@@ -723,9 +933,20 @@
   }
   .agents-section-header.pinned { color: var(--text-soft); }
 
-  /* ─── Pin toggle (per-row · hover-revealed for non-pinned) ─── */
+  /* ─── Pin toggle (per-row · hover-revealed for non-pinned) ───
+     Positioned absolutely so the in-flow time tag (.agent-row-time /
+     .row-time) sits flush against the right edge — same as the rooms
+     list. Earlier the pin took 22px (18 + 4 margin) of in-flow width
+     even when invisible (opacity:0 still occupies space), which shoved
+     the agent's "7h" tag inward compared to the rooms list and made
+     the two columns of timestamps look mis-aligned. The row-shell
+     ancestor needs `position: relative` for this to anchor correctly. */
+  .agent-row-shell, .session-row-shell { position: relative; }
   .row-top-line .pin-toggle,
   .agent-row-top-line .pin-toggle {
+    position: absolute;
+    top: 8px;
+    right: 8px;
     width: 18px;
     height: 18px;
     border: none;
@@ -736,10 +957,8 @@
     align-items: center;
     justify-content: center;
     padding: 0;
-    margin-left: 4px;
     opacity: 0;
     transition: opacity 0.12s, color 0.12s;
-    flex-shrink: 0;
   }
   .row-top-line .pin-toggle svg,
   .agent-row-top-line .pin-toggle svg {
@@ -749,6 +968,10 @@
   }
   .session-row:hover .pin-toggle,
   .agent-row:hover .pin-toggle { opacity: 0.55; }
+  /* Hover · hide the in-flow time so the absolutely-positioned pin
+     button has the right edge to itself. Same pattern as the rooms
+     list (`.session-row-shell:hover .row-time { visibility: hidden }`). */
+  .agent-row-shell:hover .agent-row-time { visibility: hidden; }
   .pin-toggle:hover { opacity: 1 !important; color: var(--lime); }
   .session-row.pinned .pin-toggle,
   .agent-row.pinned .pin-toggle {
@@ -889,7 +1112,7 @@
     margin-bottom: 1px;
   }
   .row-title {
-    font-size: 12.5px;
+    font-size: 14px;
     font-weight: 600;
     color: var(--text);
     overflow: hidden;
@@ -1102,6 +1325,20 @@
   .main-view[data-main-view="reports"]:hover { scrollbar-width: thin; }
   .main-view[data-main-view="reports"]:hover::-webkit-scrollbar-thumb { background: var(--line-bright); }
 
+  /* All Notes view · same scroll register as All Reports so the two
+     cross-room aggregation destinations read as a paired set. */
+  .main-view[data-main-view="notes"] {
+    display: block;
+    overflow-y: auto;
+    overscroll-behavior: none;
+    scrollbar-width: none;
+    background: var(--panel);
+  }
+  .main-view[data-main-view="notes"]::-webkit-scrollbar-thumb { background: transparent; }
+  .main-view[data-main-view="notes"]::-webkit-scrollbar-track { background: transparent; }
+  .main-view[data-main-view="notes"]:hover { scrollbar-width: thin; }
+  .main-view[data-main-view="notes"]:hover::-webkit-scrollbar-thumb { background: var(--line-bright); }
+
   /* Hidden takes precedence over the per-view display rules above.
      Declared LAST + with !important so the variant rules (which match
      at the same specificity) can never override it back to block —
@@ -1159,14 +1396,19 @@
      bg + lime label), same 4px corner radius, same hover (panel-2 bg).
      One coherent vocabulary across every segmented control. The count
      rides inline after the label as quiet mono micro-type — no nested
-     chip chrome. */
-  .reports-filters {
+     chip chrome.
+     Comma-extended to `.notes-filters` / `.notes-filter-chip` so the
+     All Notes page reuses the exact same chip vocabulary — both
+     cross-room aggregation destinations stay visually identical. */
+  .reports-filters,
+  .notes-filters {
     display: flex;
     gap: 2px;
     margin: 22px 0 6px;
     flex-wrap: wrap;
   }
-  .reports-filter-chip {
+  .reports-filter-chip,
+  .notes-filter-chip {
     background: transparent;
     border: none;
     color: var(--text-dim);
@@ -1182,27 +1424,67 @@
     gap: 6px;
     transition: background 0.12s, color 0.12s;
   }
-  .reports-filter-chip:hover {
+  .reports-filter-chip:hover,
+  .notes-filter-chip:hover {
     background: var(--panel-2);
     color: var(--text-soft);
   }
-  .reports-filter-chip.on {
+  .reports-filter-chip.on,
+  .notes-filter-chip.on {
     background: var(--panel-3);
     color: var(--text);
     font-weight: 600;
   }
-  .reports-filter-count {
+  .reports-filter-count,
+  .notes-filter-count {
     font-family: var(--mono);
     font-size: 10.5px;
     color: var(--text-faint);
     font-weight: 400;
     letter-spacing: 0;
   }
-  .reports-filter-chip.on .reports-filter-count { color: var(--text-dim); }
+  .reports-filter-chip.on .reports-filter-count,
+  .notes-filter-chip.on .notes-filter-count { color: var(--text-dim); }
 
   /* ─── Reading list ─────────────────────────────────────────────── */
   .reports-list-wrap { margin-top: 18px; }
 
+  /* Load-more sentinel · sits at the bottom of the list when more
+     items are available beyond the current page (default 20). The
+     IntersectionObserver fires when this enters the viewport (200px
+     pre-roll) and bumps the visible count by 20. The button is also
+     a click target for users who'd rather page explicitly. */
+  .reports-load-sentinel {
+    margin-top: 24px;
+    padding: 16px 0 32px;
+    display: flex;
+    justify-content: center;
+  }
+  .reports-load-more {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: transparent;
+    color: var(--text-soft);
+    border: 1px solid var(--line-bright);
+    border-radius: 4px;
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    transition: color 0.12s, border-color 0.12s, background 0.12s;
+  }
+  .reports-load-more:hover {
+    color: var(--lime);
+    border-color: var(--lime);
+    background: var(--panel-2);
+  }
+  .reports-load-more-arrow {
+    font-size: 13px;
+    line-height: 1;
+  }
+
   /* Date-bucket label · sits flush left, hairline rule fills the
      remaining width. Reads as a quiet section break. */
   .reports-group + .reports-group { margin-top: 32px; }
@@ -1454,8 +1736,347 @@
     .reports-item-room { max-width: 140px; }
   }
 
-  /* Room head — generously padded so the title has breathing
-     room above and below. */
+  /* ─── All Notes view · chairman's saved excerpts ──────────────
+     Same column geometry + typographic register as `.reports-page`
+     so the two cross-room aggregation destinations read as a paired
+     set. The substantive difference is the "passage" cell — each
+     note row foregrounds the saved quote with a thick dotted lime
+     underline (text-decoration only, NOT bold-weight type), wrapped
+     by faded sentence-context that gradient-masks toward the
+     edges. The visual treatment is the same overlay the in-room
+     `.note-highlight` uses, so a note seen on this page reads with
+     the same identity when the user jumps back to the source. */
+  .notes-page {
+    max-width: 820px;
+    margin: 0 auto;
+    padding: 56px 48px 80px;
+  }
+  .notes-page-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 8px;
+    border-bottom: 0.5px solid var(--line);
+    padding-bottom: 14px;
+  }
+  .notes-page-title {
+    font-family: var(--font-human);
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--text);
+  }
+  .notes-page-kicker {
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    font-weight: 700;
+    margin-bottom: 4px;
+  }
+  .notes-page-meta {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    letter-spacing: 0.04em;
+    color: var(--text-dim);
+  }
+
+  /* Date-bucket sections · each opens with its own hairline-divided
+     label row, matching the reports `.reports-group` rhythm. */
+  .notes-group + .notes-group { margin-top: 32px; }
+  .notes-group:first-of-type { margin-top: 22px; }
+  .notes-group-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    border-bottom: 0.5px solid var(--line);
+    margin-bottom: 4px;
+  }
+  .notes-group-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+  }
+  .notes-group-count {
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--text-dim);
+    letter-spacing: 0.04em;
+  }
+
+  .notes-list { list-style: none; margin: 0; padding: 0; }
+  .notes-item { border-bottom: 0.5px solid var(--line); }
+  .notes-item:last-child { border-bottom: none; }
+  .notes-item-link {
+    display: block;
+    padding: 18px 4px;
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+  }
+  /* Hover lifts ONLY the meta room-tag + bumps the quote underline
+     to full-lime — the quote text itself stays at --text so the
+     dotted-underline does the focal work. */
+  .notes-item-link:hover .notes-item-room { color: var(--lime); }
+  .notes-item-link:hover .note-quote { text-decoration-color: var(--lime); }
+
+  .notes-item-meta {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    flex-wrap: wrap;
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+  .notes-item-room { color: var(--text-soft); transition: color 0.14s; }
+  .notes-item-subject {
+    color: var(--text-dim);
+    text-transform: none;
+    letter-spacing: -0.005em;
+    font-family: var(--font-human);
+    font-size: 11px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 280px;
+  }
+  .notes-item-director {
+    color: var(--text-soft);
+    text-transform: none;
+    letter-spacing: 0;
+    font-family: var(--font-human);
+    font-size: 11px;
+    font-weight: 600;
+  }
+  .notes-item-time {
+    margin-left: auto;
+    color: var(--text-faint);
+    letter-spacing: 0.06em;
+  }
+  .notes-item-sep { color: var(--text-faint); opacity: 0.7; }
+
+  /* The reading passage · context_before + quote + context_after
+     in a single inline flow. Contexts use a horizontal mask-image
+     fade toward the outer edges so the quote sits in a "spotlight"
+     of full-strength text while the surrounding sentences taper
+     visually — reads as "supporting context" without sacrificing
+     readability. The mask applies to every wrapped line, which is
+     what we want: each line's far edge is the "least important"
+     spatially, so each fades. */
+  .notes-item-passage {
+    font-family: var(--font-human);
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--text);
+    margin: 0;
+    word-break: normal;
+    overflow-wrap: anywhere;
+  }
+  .note-context { color: var(--text-soft); }
+  .note-context-before {
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32%);
+            mask-image: linear-gradient(to right, transparent 0%, black 32%);
+  }
+  .note-context-after {
+    -webkit-mask-image: linear-gradient(to right, black 68%, transparent 100%);
+            mask-image: linear-gradient(to right, black 68%, transparent 100%);
+  }
+  /* The quote span · pure typography accent. Text weight stays
+     normal (do NOT bold the type — it would collide with markdown's
+     own `**emphasis**`); only the underline grows thicker. Dotted
+     style differentiates from inline-link's solid 1px underline.
+     The lime accent identifies the note's identity across the app
+     — the same treatment appears on the in-room highlight overlay. */
+  .note-quote {
+    color: var(--text);
+    text-decoration: underline dotted;
+    text-decoration-thickness: 3px;
+    text-decoration-color: var(--lime-dim);
+    text-underline-offset: 4px;
+    transition: text-decoration-color 0.14s;
+  }
+
+  /* In-room highlight overlay · injected into director-message
+     `.msg-bubble` text by app.applyNoteHighlightsForMessage. Same
+     visual register as `.note-quote` so a saved span reads with the
+     same identity wherever it appears — the user can re-open a room
+     and see at a glance what they've already collected. Hover
+     strengthens the underline to full lime; the cursor uses `help`
+     so the saved-tooltip is discoverable (the title attr renders
+     "Saved to Notes"). */
+  .note-highlight {
+    text-decoration: underline dotted;
+    text-decoration-thickness: 3px;
+    text-decoration-color: var(--lime-dim);
+    text-underline-offset: 4px;
+    cursor: help;
+    transition: text-decoration-color 0.14s, background 0.18s;
+  }
+  .note-highlight:hover { text-decoration-color: var(--lime); }
+  /* Flash · briefly blooms a soft lime backdrop when the user jumps
+     to a note from the All-Notes view, so the eye lands on the
+     right span. Fades back to the resting underline after 1.6s
+     (matches scrollToNote's setTimeout in app.js). */
+  .note-highlight-flash {
+    animation: note-highlight-flash 1.6s ease-out;
+  }
+  @keyframes note-highlight-flash {
+    0%   { background: rgba(190, 242, 100, 0.28); }
+    60%  { background: rgba(190, 242, 100, 0.14); }
+    100% { background: transparent; }
+  }
+
+  /* Hover tooltip · custom pop replacing the native `title` attribute
+     so it appears immediately, not after the browser's 1–2s delay.
+     Same visual register as the qcta floating bar (panel-2 surface,
+     hairline border, mono micro-type). pointer-events:none so the
+     tooltip can never block the hover that triggers it. */
+  .note-tip {
+    position: absolute;
+    z-index: 1450;
+    display: none;
+    align-items: center;
+    gap: 6px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--line-strong);
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.04em;
+    padding: 6px 10px;
+    color: var(--text);
+    white-space: nowrap;
+    pointer-events: none;
+    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
+  }
+  .note-tip.open { display: inline-flex; }
+  .note-tip-mark {
+    color: var(--lime);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 1;
+  }
+  .note-tip-label { color: var(--text); }
+  .note-tip-sep { color: var(--text-faint); opacity: 0.7; }
+  .note-tip-meta { color: var(--text-faint); }
+
+  /* Empty state · single placeholder card matching the visual
+     register of `.reports-list-empty`, with a one-line hint and
+     two `.kbd` pills explaining how to save the first note. */
+  .notes-list-empty {
+    margin-top: 28px;
+    padding: 28px 24px 30px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--line);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-start;
+  }
+  .notes-empty-mark {
+    font-family: var(--mono);
+    font-size: 18px;
+    color: var(--text-faint);
+    line-height: 1;
+  }
+  .notes-empty-title {
+    font-family: var(--font-human);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--text-soft);
+  }
+  .notes-empty-deck {
+    font-family: var(--font-human);
+    font-size: 12.5px;
+    line-height: 1.6;
+    color: var(--text-dim);
+    max-width: 540px;
+  }
+  .notes-list-empty .kbd {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--mono);
+    font-size: 10.5px;
+    font-weight: 600;
+    padding: 1px 7px;
+    margin: 0 1px;
+    border: 0.5px solid var(--line-bright);
+    border-radius: 3px;
+    color: var(--text);
+    background: var(--panel-3);
+  }
+  /* Window-empty CTA · "← Show all notes" button shown when a
+     non-All filter has zero matches. Same visual register as
+     `.reports-list-empty-cta`. */
+  .notes-empty-cta {
+    margin-top: 6px;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 0.5px solid var(--line-bright);
+    color: var(--text-soft);
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: border-color 0.12s, color 0.12s, background 0.12s;
+  }
+  .notes-empty-cta:hover {
+    border-color: var(--lime);
+    color: var(--lime);
+    background: var(--panel-3);
+  }
+  .notes-empty-cta-arrow {
+    font-family: var(--mono);
+    font-size: 11px;
+    line-height: 1;
+  }
+  /* Wrap around the date-grouped list · matches the reports list
+     wrap so the chip strip → list spacing reads identically. */
+  .notes-list-wrap { margin-top: 18px; }
+
+  /* Loading skeleton · matches `.reports-skeleton` rhythm and
+     reuses its pulse keyframe. */
+  .notes-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    margin-top: 32px;
+  }
+  .notes-skeleton-card {
+    height: 84px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--line);
+    border-radius: 4px;
+    animation: reports-skeleton-pulse 1.6s ease-in-out infinite;
+  }
+
+  @media (max-width: 720px) {
+    .notes-page { padding: 36px 22px 60px; }
+    .notes-page-title { font-size: 22px; }
+    .notes-item-subject { max-width: 160px; }
+  }
+
+  /* Room head — generously padded so the title has breathing
+     room above and below. */
   .room-head {
     background: var(--panel-2);
     border-bottom: 0.5px solid var(--line-bright);
@@ -1465,6 +2086,15 @@
     gap: 14px;
     align-items: center;
   }
+  /* When the sidebar is collapsed the room-head gains a leading
+     auto-sized track for the in-header `.room-head-expand` button.
+     When expanded the button is display:none, so a 0-width track
+     would still leave a `gap` artifact — switching to a 3-track
+     template only in the collapsed state keeps the header visually
+     identical to before whenever the sidebar is open. */
+  body.sidebar-collapsed .room-head {
+    grid-template-columns: auto 1fr auto;
+  }
   /* `overflow: visible` so the tone-tag hover tooltip (positioned via
      ::after below the tag) can escape this container. The room-subject
      has its own overflow:hidden + text-overflow ellipsis rule, so the
@@ -1838,8 +2468,10 @@
   .paused-bar-text { font-size: 10.5px; color: var(--text-dim); }
   .paused-bar-text strong { color: var(--text); font-weight: 700; }
   .paused-bar-text .lime { color: var(--lime); }
-  .paused-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+  .paused-bar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
   .resume-btn-lg {
+    display: inline-flex;
+    align-items: center;
     padding: 6px 12px;
     background: var(--lime);
     color: var(--bg);
@@ -1847,6 +2479,7 @@
     font-family: var(--mono);
     font-size: 10px;
     font-weight: 700;
+    line-height: 1.2;
     cursor: pointer;
     text-decoration: none;
     text-transform: uppercase;
@@ -1891,20 +2524,30 @@
     letter-spacing: 0.1em;
   }
   .view-report-btn:hover { background: var(--bg); color: var(--lime); }
-  /* No-report variant · shown in the head when an adjourned room has no
-     brief filed (user opted out via skip-brief). Visually muted so it
-     reads as "status indicator", not an actionable button. */
-  .view-report-btn.no-report {
-    background: transparent;
-    color: var(--text-faint);
-    border-color: var(--line-bright);
-    cursor: default;
-    user-select: none;
+  /* Generate-report variant · shown in the head when an adjourned
+     room has no brief yet. Active CTA (lime filled, same register as
+     the "View Report" button next door) — clicking POSTs to
+     /api/rooms/:id/brief and kicks off the post-hoc 3-stage pipeline.
+     Replaces the earlier muted `[ ⊘ No Report ]` static span which
+     gave users no path back to a brief once they'd skipped at adjourn. */
+  .view-report-btn.generate-report {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
   }
-  .view-report-btn.no-report:hover {
-    background: transparent;
-    color: var(--text-faint);
-    border-color: var(--line-bright);
+  .view-report-btn.generate-report .vr-mark {
+    font-size: 10px;
+    line-height: 1;
+  }
+  /* Pending state · applied to either the header anchor or the
+     no-brief-card button while the brief pipeline is mid-flight.
+     Reads as "action accepted, working on it" without disabling the
+     surrounding region. */
+  .view-report-btn[data-pending="1"],
+  [data-generate-brief][data-pending="1"] {
+    cursor: progress;
+    opacity: 0.7;
+    pointer-events: none;
   }
 
   .adjourned-bar {
@@ -1935,17 +2578,26 @@
   }
   .followup-btn:hover { background: var(--bg); color: var(--lime); }
   .ghost-btn {
-    padding: 5px 10px;
+    /* inline-flex + align-items:center so text always centers vertically
+       inside the box even when a flex parent stretches us to match the
+       resume-btn-lg sibling's height. Padding / font-size / weight are
+       lined up with .resume-btn-lg so the buttons read as the same
+       size class — only the fill / border treatment distinguishes the
+       primary lime CTA from a quieter ghost. */
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
     background: var(--bg);
     border: 0.5px solid var(--line-strong);
     font-family: var(--mono);
-    font-size: 9.5px;
-    font-weight: 600;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1.2;
     color: var(--text);
     cursor: pointer;
     text-decoration: none;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
   }
   .ghost-btn:hover { border-color: var(--lime); color: var(--lime); }
 
@@ -2076,6 +2728,21 @@
     text-transform: uppercase;
     margin: 0;
   }
+  /* Subtle middot separator between meta items (authors · word count).
+     Faint enough that the eye walks the items, not the divider. */
+  .brief-meta-sep {
+    color: var(--text-faint);
+    font-family: var(--mono);
+    font-size: 9px;
+    line-height: 1;
+    opacity: 0.6;
+  }
+  /* Word / character count · same register as `.brief-meta-line` but
+     keep numerals tabular so the figure doesn't jitter while the
+     parent flex-row gets re-rendered (e.g. on tab switch). */
+  .brief-meta-words {
+    font-variant-numeric: tabular-nums;
+  }
 
   /* Signatures · folded into the meta line, no top border */
   .brief-signed {
@@ -2136,44 +2803,54 @@
     40% { opacity: 1; transform: translateY(-1px); }
   }
 
-  .brief-stages {
+  /* ── Loading layout · active card + horizontal pip rail ────────
+     Replaces the older 3-row stacked checklist. The active stage
+     gets full visual weight (label + rotating italic sub-line +
+     timing + bottom progress line); the pip rail underneath is the
+     "where am I in the sequence" reference. Container scales from
+     3 to N pips without breaking. */
+  .brief-progress {
     display: flex;
     flex-direction: column;
-    gap: 4px;
-  }
-  .brief-stage-row {
-    display: grid;
-    grid-template-columns: 16px 1fr;
-    gap: 8px;
-    align-items: start;
-    padding: 6px 0;
-    transition: opacity 0.2s, color 0.2s;
+    gap: 14px;
+    padding: 4px 0;
   }
-  .brief-stage-content {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
+
+  /* Active card · the protagonist row. Hairline frame on top + bottom
+     edges only (no left/right border, per project rule against left
+     callout treatments). The bottom edge is overdrawn by the lime
+     progress line as the stage advances. */
+  .brief-active-card {
+    position: relative;
+    padding: 10px 0 14px;
+    border-top: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+    min-height: 76px;
   }
-  .brief-stage-line {
+  .brief-active-head {
     display: flex;
     align-items: baseline;
-    gap: 8px;
+    justify-content: space-between;
+    gap: 12px;
     flex-wrap: wrap;
   }
-  .brief-stage-substage {
-    font-family: var(--mono);
-    font-size: 9.5px;
-    letter-spacing: 0.04em;
-    color: var(--text-faint);
-    line-height: 1.5;
-    margin-top: 1px;
-    transition: opacity 0.2s ease;
+  .brief-active-label {
+    font-family: var(--font-human);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--text);
+    letter-spacing: 0.005em;
   }
-  .brief-stage-row.brief-stage-active .brief-stage-substage {
+  .brief-active-card.brief-active-pending .brief-active-label,
+  .brief-active-card.brief-active-done .brief-active-label {
     color: var(--text-soft);
+    font-weight: 500;
   }
-  .brief-stage-timing {
+  .brief-active-meta {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 10px;
     font-family: var(--mono);
     font-size: 9.5px;
     letter-spacing: 0.06em;
@@ -2182,72 +2859,200 @@
     white-space: nowrap;
     margin-left: auto;
   }
-  .brief-stage-row.brief-stage-active .brief-stage-timing {
-    color: var(--lime);
-  }
-  .brief-stage-row.brief-stage-pending {
+  .brief-active-meta .meta-detail { color: var(--text-soft); }
+  .brief-active-meta .meta-timing { color: var(--lime); }
+  .brief-active-card.brief-active-pending .brief-active-meta .meta-timing,
+  .brief-active-card.brief-active-done .brief-active-meta .meta-timing {
     color: var(--text-faint);
-    opacity: 0.55;
   }
-  .brief-stage-row.brief-stage-active {
-    color: var(--text);
-  }
-  .brief-stage-row.brief-stage-done {
+  /* Italic-serif rotator under the head · changes every 3s while
+     active. Empty placeholder &nbsp; reserves the line so the layout
+     doesn't jump on the first render before substage populates. */
+  .brief-active-substage {
+    font-family: var(--font-headline, "Charter", "Songti SC", Georgia, serif);
+    font-style: italic;
+    font-size: 13px;
+    line-height: 1.55;
     color: var(--text-soft);
+    margin-top: 6px;
+    min-height: 20px;
   }
-  .brief-stage-mark {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 12px; height: 12px;
-    font-size: 11px;
-    line-height: 1;
-    margin-top: 4px;
+  /* Bottom progress line · overdraws the card's bottom border in
+     lime as elapsed advances. JS sets width via inline style; the
+     CSS transition smooths each tick. */
+  .brief-active-progressline {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    height: 1.5px;
+    background: var(--lime);
+    width: 0%;
+    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+    pointer-events: none;
   }
-  .brief-stage-mark.done {
-    color: var(--lime);
-    font-weight: 700;
+  .brief-active-card.brief-active-pending .brief-active-progressline {
+    background: var(--text-faint);
   }
-  .brief-stage-mark.pending {
-    color: var(--text-faint);
+
+  /* Pip rail · horizontal sequence indicator. Each pip = dot + tiny
+     mono caption underneath. Connectors are 1px lines between dots,
+     coloured by the LEFT pip's status so a done→active transition
+     reads as "completed crossing into the present." */
+  .brief-pip-rail {
+    display: flex;
+    align-items: flex-start;
+    padding: 0 2px;
   }
-  .brief-stage-mark.active {
-    position: relative;
+  .brief-pip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    flex: 0 0 auto;
+    min-width: 0;
   }
-  .brief-stage-pulse {
-    width: 8px; height: 8px;
+  .brief-pip-dot {
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
+    border: 1px solid var(--line-bright);
+    background: var(--bg);
+    position: relative;
+    transition: background 0.4s ease, border-color 0.4s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .brief-pip.is-done .brief-pip-dot {
     background: var(--lime);
-    box-shadow: 0 0 0 0 var(--lime);
-    animation: brief-stage-pulse 1.4s ease-out infinite;
+    border-color: var(--lime);
   }
-  @keyframes brief-stage-pulse {
-    0%   { box-shadow: 0 0 0 0 var(--lime); opacity: 1; }
-    70%  { box-shadow: 0 0 0 6px transparent; opacity: 0.85; }
-    100% { box-shadow: 0 0 0 0 transparent;   opacity: 1; }
+  .brief-pip.is-done .brief-pip-dot::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    border-radius: 50%;
+    background: var(--bg);
   }
-  .brief-stage-label {
-    font-weight: 500;
-    letter-spacing: 0;
-    text-transform: none;
-    font-family: var(--font-human);
-    font-size: 12.5px;
-    line-height: 1.35;
+  .brief-pip.is-active .brief-pip-dot {
+    background: var(--lime);
+    border-color: var(--lime);
+    animation: brief-pip-pulse 1.4s ease-out infinite;
   }
-  .brief-stage-row.brief-stage-active .brief-stage-label {
-    font-weight: 700;
+  @keyframes brief-pip-pulse {
+    0%   { box-shadow: 0 0 0 0 rgba(124, 184, 88, 0.55); }
+    70%  { box-shadow: 0 0 0 7px rgba(124, 184, 88, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(124, 184, 88, 0); }
   }
-  .brief-stage-detail {
+  .brief-pip-label {
     font-family: var(--mono);
-    font-size: 9.5px;
-    letter-spacing: 0.06em;
+    font-size: 9px;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-faint);
     white-space: nowrap;
+    line-height: 1;
+    transition: color 0.3s ease;
   }
-  .brief-stage-row.brief-stage-active .brief-stage-detail {
-    color: var(--lime);
+  .brief-pip.is-active .brief-pip-label { color: var(--lime); font-weight: 700; }
+  .brief-pip.is-done .brief-pip-label { color: var(--text-soft); }
+
+  /* Connector · stretches to fill remaining horizontal space between
+     two pip columns, sits at the dot's vertical center (5px from top
+     of the column). Done connectors are lime; pending stay neutral. */
+  .brief-pip-line {
+    flex: 1 1 0;
+    height: 1px;
+    background: var(--line-bright);
+    margin: 5px 6px 0;
+    align-self: flex-start;
+    transition: background 0.4s ease;
+  }
+  .brief-pip-line.is-done { background: var(--lime); }
+
+  /* One-shot "settle" spring when a pip first transitions to done.
+     The is-fresh-done class is applied by renderBriefStages ONLY on
+     the first render where the pip is done (subsequent re-renders
+     check the per-brief seenDone Set and skip the class). The brief
+     moment of motion reads as a chip falling into place — not a
+     particle, not a flash, just a small spring on the dot. */
+  .brief-pip.is-fresh-done .brief-pip-dot {
+    animation: brief-pip-settle 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  @keyframes brief-pip-settle {
+    0%   { transform: scale(0.6); }
+    55%  { transform: scale(1.18); }
+    100% { transform: scale(1.0); }
+  }
+
+  /* Stats row · accumulates harvested numbers + director chips below
+     the pip rail. Empty by default — the renderer hides the wrapper
+     entirely when no fragments are present so the layout doesn't show
+     a phantom border on first render. */
+  .brief-stats-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 10px;
+    align-items: center;
+    padding-top: 10px;
+    border-top: 1px solid var(--line);
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.04em;
+    color: var(--text-faint);
   }
+  .brief-stat-roster {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+  }
+  .brief-stat-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 8px;
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.04em;
+    color: var(--text-soft);
+    background: transparent;
+    border: 1px solid var(--line-bright);
+    border-radius: 9px;
+    line-height: 1.45;
+    white-space: nowrap;
+  }
+  /* Top-kind tag · italic afterthought next to the count. The
+     renderer only emits this when the dominant kind has ≥ 2 entries,
+     keeping the chip uncluttered on the long tail. */
+  .brief-stat-chip-tag {
+    font-style: italic;
+    color: var(--text-faint);
+    letter-spacing: 0.02em;
+  }
+  /* Entrance animation runs ONLY on the render where the chip first
+     appears · the renderer applies `.is-fresh` only when the
+     director's id isn't yet in `_briefSeenHarvestKeys[briefId]`, then
+     drops it on subsequent ticks. Without this gate, every 1-second
+     re-render would re-trigger the keyframe and the chips would fade
+     in over and over (the "flickering" bug). Stagger gives the row a
+     roll-call feel rather than a single dump. */
+  .brief-stat-chip.is-fresh {
+    animation: brief-stat-chip-in 280ms ease-out both;
+  }
+  .brief-stat-chip.is-fresh:nth-child(1) { animation-delay: 0ms; }
+  .brief-stat-chip.is-fresh:nth-child(2) { animation-delay: 60ms; }
+  .brief-stat-chip.is-fresh:nth-child(3) { animation-delay: 120ms; }
+  .brief-stat-chip.is-fresh:nth-child(4) { animation-delay: 180ms; }
+  .brief-stat-chip.is-fresh:nth-child(5) { animation-delay: 240ms; }
+  .brief-stat-chip.is-fresh:nth-child(6) { animation-delay: 300ms; }
+  @keyframes brief-stat-chip-in {
+    0%   { opacity: 0; transform: translateY(2px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+  .brief-stat-fact {
+    color: var(--text-soft);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .brief-stat-fact.brief-stat-live { color: var(--lime); }
 
   /* Brief error / interrupted state · retry button matches the
      supplement-row treatment but uses red accent for "something went
@@ -2285,6 +3090,72 @@
     line-height: 1;
   }
 
+  /* Salvage-path retry banner · shown when a regeneration fails but a
+     prior successful brief is still available. The banner sits AT the
+     top of the brief area (in flow, not overlay) so the existing
+     report below stays fully visible. Keeps the retry affordance
+     within reach without burying the user's last good output. */
+  .brief-retry-banner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    margin: 0 0 14px;
+    background: color-mix(in srgb, var(--red) 6%, var(--panel-2));
+    border: 0.5px solid color-mix(in srgb, var(--red) 40%, var(--line-bright));
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text);
+  }
+  .brief-retry-banner .brb-mark {
+    color: var(--red);
+    font-size: 12px;
+    line-height: 1;
+  }
+  .brief-retry-banner .brb-text {
+    flex: 1;
+    min-width: 0;
+    color: var(--text-soft);
+    letter-spacing: 0.02em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .brief-retry-banner .brb-retry {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    background: transparent;
+    border: 0.5px solid var(--lime);
+    color: var(--lime);
+    cursor: pointer;
+    font-family: var(--mono);
+    font-size: 9.5px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    transition: background 0.12s, color 0.12s;
+  }
+  .brief-retry-banner .brb-retry:hover {
+    background: var(--lime);
+    color: var(--bg);
+  }
+  .brief-retry-banner .brb-retry-mark {
+    font-size: 11px;
+    line-height: 1;
+  }
+  .brief-retry-banner .brb-dismiss {
+    background: transparent;
+    border: none;
+    color: var(--text-faint);
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 1;
+    padding: 2px 4px;
+  }
+  .brief-retry-banner .brb-dismiss:hover { color: var(--red); }
+
   /* Brief version tabs · scrollable horizontal strip at the top of
      the brief card when ≥ 2 briefs have been filed for this room.
      Each tab shows a mono number + a short label (Initial / supplement
@@ -2372,6 +3243,25 @@
   .brief-version-tab.active .brief-version-label {
     color: var(--text);
   }
+  /* Failure marker · small "!" glyph next to the version number when
+     a brief is errored / interrupted / timed-out. Lets the user spot
+     which tab needs retrying without entering it. The full error UI
+     surfaces once the tab is clicked (bypassSalvage path). */
+  .brief-version-state {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+    margin-left: 4px;
+    border-radius: 50%;
+    background: var(--red);
+    color: var(--bg);
+    font-family: var(--mono);
+    font-size: 8.5px;
+    font-weight: 700;
+    line-height: 1;
+  }
 
   /* Add-perspective + delete row · sits at the bottom of the brief
      card with a hairline divider above. The supplement button leads
@@ -2522,57 +3412,538 @@
     background: var(--bg);
     border: 0.5px solid var(--line-strong);
     color: var(--text);
-    font-family: var(--font-human);
-    font-size: 13.5px;
-    line-height: 1.55;
-    padding: 12px 14px;
-    resize: vertical;
-    min-height: 132px;
-    transition: border-color 0.12s;
+    font-family: var(--font-human);
+    font-size: 13.5px;
+    line-height: 1.55;
+    padding: 12px 14px;
+    resize: vertical;
+    min-height: 132px;
+    transition: border-color 0.12s;
+  }
+  .supplement-input:focus { outline: none; border-color: var(--lime); }
+  .supplement-input::placeholder {
+    color: var(--text-faint);
+    white-space: pre-wrap;
+  }
+  .supplement-hint {
+    margin: 10px 0 0;
+    font-size: 11.5px;
+    line-height: 1.5;
+    color: var(--text-faint);
+  }
+  .supplement-foot {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 12px 22px 16px;
+    border-top: 0.5px solid var(--line);
+  }
+  .supplement-cancel,
+  .supplement-confirm {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    padding: 8px 14px;
+    cursor: pointer;
+    background: transparent;
+    border: 0.5px solid var(--line-strong);
+    color: var(--text-soft);
+    transition: border-color 0.1s, color 0.1s, background 0.1s;
+  }
+  .supplement-cancel:hover { border-color: var(--text-soft); color: var(--text); }
+  .supplement-confirm {
+    background: var(--lime);
+    border-color: var(--lime);
+    color: var(--bg);
+  }
+  .supplement-confirm:hover { background: transparent; color: var(--lime); }
+  .supplement-confirm[disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  /* ─── Follow-up overlay · widens the supplement modal slightly so
+     the multi-field form (subject + cast + tone/intensity) breathes,
+     and adds shape for the parent reference card + form fields.
+     Inherits supplement-overlay's classification / head / footer
+     chrome — only the inside form differs. */
+  .supplement-modal.followup-modal {
+    max-width: 640px;
+  }
+  .followup-parent-card {
+    background: var(--panel-2);
+    border: 0.5px solid var(--line-bright);
+    padding: 10px 14px;
+    margin-bottom: 18px;
+    font-family: var(--mono);
+  }
+  .followup-parent-subject {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    line-height: 1.4;
+    margin-bottom: 4px;
+  }
+  .followup-parent-meta {
+    font-size: 10px;
+    color: var(--text-soft);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  /* Context note · explains to the user that this room's content
+     will be packaged as the follow-up's prior context. Sits inside
+     the parent reference card with a hairline separator above it
+     so it reads as a footnote on the card, not a separate block. */
+  .followup-parent-note {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 0.5px dashed var(--line-bright);
+    font-family: var(--font-human);
+    font-size: 11.5px;
+    line-height: 1.45;
+    color: var(--text-soft);
+    letter-spacing: -0.003em;
+    text-transform: none;
+  }
+  .followup-field {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 14px;
+  }
+  .followup-field-label {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--text-soft);
+    margin-bottom: 6px;
+  }
+  .followup-field-hint {
+    font-family: var(--mono);
+    font-size: 9px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    color: var(--text-faint);
+    text-transform: uppercase;
+  }
+  /* Cast / tone / intensity row · cast button + tune dropdowns on
+     ONE line, mirroring the new-room composer's toolbar layout
+     (cast left, separator, tune dropdowns) but in a form-row
+     register. The wrapper is `.cmp-tune` so the inline-flex + gap +
+     wrap behaviour is inherited as-is. */
+  .followup-cast-row {
+    align-items: stretch;
+  }
+  .followup-cast-btn {
+    /* Hairline visible at rest in the overlay (vs the toolbar
+       variant which is borderless until hover). Makes the picker
+       obviously interactive in the form context. */
+    border-color: var(--line-bright);
+  }
+  .followup-cast-btn[disabled] {
+    cursor: not-allowed;
+    opacity: 0.7;
+    border-style: dashed;
+  }
+  .followup-cast-btn[data-cast-mode="same-as-last"] {
+    border-color: var(--lime-dim);
+    background: var(--panel-2);
+  }
+  /* Visual separator between cast button and the tune group ·
+     mirrors `.cmp-toolbar-sep` from the inline composer toolbar. */
+  .followup-cast-row-sep {
+    display: inline-block;
+    width: 0.5px;
+    align-self: stretch;
+    background: var(--line-bright);
+    margin: 0 4px;
+  }
+
+  /* "Same cast as last session" checkbox · sits below the cast
+     button. Native checkbox restyled to match the radio chrome
+     used elsewhere in this overlay. */
+  .followup-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0 0;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--text-soft);
+    cursor: pointer;
+    user-select: none;
+  }
+  .followup-checkbox input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 12px; height: 12px;
+    border: 0.5px solid var(--line-strong);
+    background: var(--bg);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: border-color 0.1s, background 0.1s;
+    position: relative;
+  }
+  .followup-checkbox input[type="checkbox"]:hover { border-color: var(--text-soft); }
+  .followup-checkbox input[type="checkbox"]:checked {
+    background: var(--lime);
+    border-color: var(--lime);
+  }
+  .followup-checkbox input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--bg);
+    clip-path: polygon(14% 50%, 0 65%, 38% 100%, 100% 30%, 86% 16%, 38% 70%);
+  }
+  .followup-checkbox input[type="checkbox"]:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .followup-checkbox:has(input:checked) { color: var(--text); }
+
+  /* ─── Follow-up tree · parent banner + child list ─────────────────
+     parent banner sits at the top of the chat in a follow-up room
+     (under the room head, before the first message); child list
+     renders below the brief card on a parent room that's spawned
+     follow-ups. Both use the hairline + mono-tag visual register. */
+  .followup-parent-banner {
+    /* Width-match the chat messages cap (960px, centred) so the
+       banner sits flush with the column underneath instead of
+       spanning the full chat scroller on wide monitors. Without
+       this, the banner reads as a viewport-wide alert bar — out
+       of register with everything else. */
+    max-width: 960px;
+    margin: 0 auto 14px;
+    padding: 8px 14px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--line-bright);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    text-decoration: none;
+    font-family: var(--mono);
+    transition: border-color 0.1s, background 0.1s;
+  }
+  .followup-parent-banner:hover {
+    border-color: var(--lime-dim);
+    background: var(--panel-3);
+  }
+  .followup-parent-banner .label {
+    font-size: 9.5px;
+    color: var(--text-soft);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    flex-shrink: 0;
+  }
+  .followup-parent-banner .room-num {
+    font-size: 11px;
+    color: var(--lime);
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+  .followup-parent-banner .subject {
+    font-size: 12px;
+    color: var(--text);
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .followup-parent-banner .arrow {
+    font-size: 11px;
+    color: var(--text-dim);
+    flex-shrink: 0;
+  }
+
+  .followup-children {
+    /* Width-match the brief card (.ending-block: max-width 760px,
+       margin auto). The follow-ups list slots in directly below the
+       brief, so they need to share the same gutter — otherwise the
+       follow-ups span full chat width and the alignment breaks. */
+    max-width: 760px;
+    margin: 24px auto 0;
+    padding: 14px 16px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--line);
+    font-family: var(--mono);
+  }
+
+  /* ─── Session analytics card · post-adjourn summary ───
+     Sits below the brief (and any follow-ups) when the room is
+     adjourned. Editorial mood: panel-2 surface, lime banner kicker,
+     hero token-count headline, model-usage stacked bar tinted by
+     provider, "what you valued" highlights at the bottom. Width
+     matches the brief / follow-ups column (760px max, centred). */
+  /* Compact post-adjourn analytics tile · earlier iteration was 22px
+     padding + 22px section gaps + 32px hero numerals, which read as
+     "celebratory dashboard" rather than "summary stripe". Tightened
+     across the board so the tile reads as a dense info row sitting
+     above the brief, not as its own visual event. Hero numerals
+     dropped to 21px, section gaps to 10px, banner padding to 5px,
+     sub-tile padding cut by ~30%. */
+  .session-analytics {
+    max-width: 760px;
+    margin: 18px auto 10px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--line-bright);
+  }
+  .sa-banner {
+    padding: 5px 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    font-family: var(--mono);
+    border-bottom: 0.5px solid var(--line);
+    background: var(--panel-3);
+  }
+  .sa-banner-tag {
+    font-size: 9.5px;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--lime);
+  }
+  .sa-banner-stamp {
+    font-size: 9px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+  }
+  .sa-body {
+    padding: 12px 14px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  /* Headline metric grid · 4 cells. Hero (tokens) is the only one
+     in accent colour; the others read as siblings at the same size.
+     Compact register · all values 17px, hero 21px, label 9px. */
+  .sa-headline {
+    display: grid;
+    grid-template-columns: 1.4fr 1fr 1fr 1fr;
+    gap: 10px;
+    align-items: end;
+  }
+  @media (max-width: 600px) {
+    .sa-headline { grid-template-columns: 1fr 1fr; }
+  }
+  .sa-metric {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+  .sa-metric-value {
+    font-family: "SF Mono", "JetBrains Mono", "Menlo", monospace;
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--text);
+    letter-spacing: -0.01em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  .sa-metric-hero .sa-metric-value {
+    font-size: 21px;
+    color: var(--lime);
+  }
+  .sa-metric-label {
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    font-weight: 700;
+  }
+
+  /* Model breakdown · stacked bar + legend. Section head sits
+     inline · 9px mono kicker, 6px gap to the bar, 6px height bar
+     (down from 8). Legend rows lose their padding so they read as
+     a dense column not a list. */
+  .sa-section { display: flex; flex-direction: column; gap: 6px; }
+  .sa-section-head {
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: var(--text-soft);
+  }
+  .sa-bar {
+    display: flex;
+    height: 6px;
+    overflow: hidden;
+    background: var(--bg);
+    border: 0.5px solid var(--line);
+  }
+  .sa-bar-seg {
+    height: 100%;
+    transition: opacity 0.15s;
+  }
+  .sa-bar-seg:hover { opacity: 0.85; }
+  .sa-legend {
+    list-style: none;
+    margin: 2px 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  .sa-legend-row {
+    display: grid;
+    grid-template-columns: 10px 1fr auto auto;
+    align-items: baseline;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 10.5px;
+    color: var(--text-soft);
+  }
+  .sa-legend-swatch {
+    width: 8px;
+    height: 8px;
+    align-self: center;
+    border-radius: 0;
+  }
+  .sa-legend-name {
+    color: var(--text);
+    letter-spacing: -0.003em;
+  }
+  .sa-legend-pct {
+    color: var(--text-soft);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
+  .sa-legend-tokens {
+    color: var(--text-faint);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    min-width: 44px;
+  }
+
+  /* What you valued · chips for counts + list of ▲-voted points.
+     Smaller chip padding + tighter point rows so the section reads
+     as a tight strip rather than a separate panel. */
+  .sa-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  .sa-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 7px;
+    background: var(--bg);
+    border: 0.5px solid var(--line-bright);
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.06em;
+    color: var(--text-soft);
+  }
+  .sa-chip-mark {
+    color: var(--lime);
+    font-weight: 700;
+  }
+  .sa-points {
+    list-style: none;
+    margin: 2px 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+  .sa-point {
+    display: grid;
+    grid-template-columns: 12px 1fr;
+    gap: 6px;
+    align-items: baseline;
+    padding: 5px 8px;
+    background: var(--bg);
+    border: 0.5px solid var(--line);
+  }
+  .sa-point-mark {
+    color: var(--lime);
+    font-size: 9.5px;
+    font-weight: 700;
+    line-height: 1.4;
+  }
+  .sa-point-body {
+    font-family: var(--font-human);
+    font-size: 12px;
+    line-height: 1.42;
+    color: var(--text);
+    letter-spacing: -0.003em;
   }
-  .supplement-input:focus { outline: none; border-color: var(--lime); }
-  .supplement-input::placeholder {
+  .sa-empty {
+    font-family: var(--mono);
+    font-size: 10px;
     color: var(--text-faint);
-    white-space: pre-wrap;
+    letter-spacing: 0.04em;
   }
-  .supplement-hint {
-    margin: 10px 0 0;
-    font-size: 11.5px;
-    line-height: 1.5;
-    color: var(--text-faint);
+  .followup-children-head {
+    font-size: 10px;
+    color: var(--text-soft);
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    font-weight: 700;
+    margin-bottom: 10px;
   }
-  .supplement-foot {
+  .followup-children-list {
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .followup-child-tile {
+    display: grid;
+    grid-template-columns: 32px 1fr auto;
     gap: 10px;
-    padding: 12px 22px 16px;
-    border-top: 0.5px solid var(--line);
+    align-items: center;
+    padding: 8px 10px;
+    background: var(--bg);
+    border: 0.5px solid var(--line);
+    cursor: pointer;
+    text-decoration: none;
+    transition: border-color 0.1s, background 0.1s;
   }
-  .supplement-cancel,
-  .supplement-confirm {
-    font-family: var(--mono);
-    font-size: 10.5px;
+  .followup-child-tile:hover {
+    border-color: var(--lime-dim);
+    background: var(--panel);
+  }
+  .followup-child-tile .num {
+    font-size: 9.5px;
+    color: var(--text-faint);
+    letter-spacing: 0.1em;
+    text-align: center;
     font-weight: 700;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    padding: 8px 14px;
-    cursor: pointer;
-    background: transparent;
-    border: 0.5px solid var(--line-strong);
-    color: var(--text-soft);
-    transition: border-color 0.1s, color 0.1s, background 0.1s;
   }
-  .supplement-cancel:hover { border-color: var(--text-soft); color: var(--text); }
-  .supplement-confirm {
-    background: var(--lime);
-    border-color: var(--lime);
-    color: var(--bg);
+  .followup-child-tile .subject {
+    font-size: 12px;
+    color: var(--text);
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .supplement-confirm:hover { background: transparent; color: var(--lime); }
-  .supplement-confirm[disabled] {
-    opacity: 0.55;
-    pointer-events: none;
+  .followup-child-tile .meta {
+    font-size: 9.5px;
+    color: var(--text-soft);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-weight: 600;
   }
+  .followup-child-tile .meta.live      { color: var(--lime); }
+  .followup-child-tile .meta.paused    { color: var(--amber, #B59560); }
+  .followup-child-tile .meta.adjourned { color: var(--text-dim); }
 
   /* Open CTA · compact pill anchored to the right */
   .brief-open {
@@ -2672,6 +4043,31 @@
     overflow-y: auto;
     background: var(--panel);
     padding: 14px 20px 18px;
+    transition: opacity 0.18s ease-out;
+  }
+  /* Note-jump loading state · the user clicked a note in the All
+     Notes view; openRoom is fetching the room body + the notes list
+     before renderChat can scroll to the saved span. Keep the chat
+     invisible while that work happens so the user doesn't see the
+     stale-content → repaint → scroll-to-position transition as a
+     flicker. The class is added at openRoom entry and removed once
+     scrollToNote has landed (with a 1.2s timeout fallback in case
+     the scroll never resolves). */
+  body.note-jump-loading .chat { opacity: 0; }
+  /* Cap reading measure on the inner messages container · pure
+     percentage layout reads as a wall of text on wide monitors
+     (~110+ chars / line) and tanks reading comprehension. ~820px
+     keeps prose around 70-78 chars / line — Bringhurst's comfort
+     band — while still leaving room for tables, tool-use rows
+     (max-width 760px), and message chrome to sit inside without
+     truncation. Centred so the column doesn't drift left of the
+     viewport on ultra-wide displays. The .chat scroller stays
+     full-width so the scrollbar lives at the viewport edge, not
+     beside the prose. */
+  .chat > [data-chat-messages] {
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   /* ─── Tool-use row ───────────────────────────────────────────
@@ -3487,6 +4883,53 @@
   .chair-intervention .ci-body strong { color: var(--text); font-weight: 600; }
   .chair-intervention .ci-body em { color: var(--lime); font-style: normal; font-weight: 500; }
 
+  /* Chair-pending placeholder · transient "preparing…" card injected
+     directly into [data-chat-messages] while the chair does silent
+     server-side work (haiku discipline gate, pre-fetch tools, LLM
+     startup). Mirrors the .chair-intervention skeleton — same lime
+     accent, mono kicker, centered layout — but adds the bouncing
+     thinking-dots so the user sees motion. Removed when the real chair
+     bubble lands or the pipeline aborts. */
+  .chair-pending {
+    margin: 14px auto 18px;
+    max-width: 640px;
+    padding: 14px 22px 14px;
+    background: transparent;
+  }
+  .chair-pending .cp-rule {
+    width: 28px;
+    height: 1px;
+    background: var(--lime);
+    margin: 0 auto 10px;
+    opacity: 0.85;
+  }
+  .chair-pending .cp-kicker {
+    text-align: center;
+    font-family: var(--mono);
+    font-size: 9.5px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--lime);
+    margin-bottom: 10px;
+    opacity: 0.95;
+  }
+  .chair-pending .cp-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-family: var(--font-agent);
+    font-size: 13.5px;
+    line-height: 1.65;
+    color: var(--text-soft);
+    letter-spacing: -0.005em;
+  }
+  .chair-pending .cp-text {
+    font-style: italic;
+    color: var(--text-faint);
+  }
+
   /* Chair billing notice · same skeleton as chair-intervention but with
      amber accent so it reads as a warning rather than a moderator
      re-frame. Posted by the orchestrator when an upstream API rejects
@@ -3604,6 +5047,9 @@
     justify-content: center;
   }
   .no-brief-card .nb-cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
     font-family: var(--mono);
     font-size: 10px;
     font-weight: 700;
@@ -3616,15 +5062,19 @@
     cursor: pointer;
     transition: color 0.12s, border-color 0.12s, background 0.12s;
   }
+  .no-brief-card .nb-cta-mark { color: var(--lime); font-size: 11px; line-height: 1; }
+  .no-brief-card .nb-cta-text { line-height: 1; }
   .no-brief-card .nb-cta:hover {
     color: var(--lime);
     border-color: var(--lime);
     background: var(--panel-2);
   }
+  .no-brief-card .nb-cta:hover .nb-cta-mark { color: var(--lime); }
   .no-brief-card .nb-cta[disabled] {
     opacity: 0.6;
     cursor: not-allowed;
   }
+  .no-brief-card .nb-cta[disabled] .nb-cta-mark { color: var(--text-faint); }
 
   .msg {
     display: grid;
@@ -3850,6 +5300,37 @@
   .msg-bubble p:last-child { margin-bottom: 0; }
   .msg-bubble strong { color: var(--text); font-weight: 600; }
   .msg-bubble em { font-style: normal; color: var(--lime); font-weight: 500; }
+  /* Markdown blockquote · designed inset card, not a raw `>` line.
+     Per the no-coloured-left-borders rule, the callout treatment
+     uses a top mono kicker + panel-2 surface + indent (NOT a left
+     border). Italic body sets it apart from the surrounding agent
+     prose; the inline @director attribution at the end (rendered
+     by inline()'s @-mention pass) gets its usual lime treatment.
+     Used by quote-cta probe / second messages and any plain
+     markdown blockquote a director / chair might emit. */
+  .msg-bubble .msg-quote {
+    margin: 0 0 12px;
+    padding: 10px 14px;
+    background: var(--panel-2);
+    font-family: var(--font-agent);
+    font-style: italic;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--text-soft);
+  }
+  .msg-bubble .msg-quote::before {
+    content: "// quoted";
+    display: block;
+    font-family: var(--mono);
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    font-style: normal;
+    margin-bottom: 6px;
+  }
+  .msg-bubble .msg-quote:last-child { margin-bottom: 0; }
   /* Markdown tables · editorial style. No outer box, no zebra, no
      uppercase data-grid headers — those read as "spreadsheet pasted
      into a conversation" and broke the bubble's literary register.
@@ -4303,6 +5784,80 @@
     text-align: center;
   }
 
+  /* Chair's tone-shift proposal callout · sits between the key-points
+     list and the CTAs when the chair appended a MODE-SHIFT block to the
+     round-end output. Mono kicker matches the existing kp-eyebrow
+     register; serif body mirrors a pull-quote so the reasoning reads
+     differently from the procedural ping. */
+  .kp-mode-shift {
+    margin-top: 14px;
+    padding: 10px 12px;
+    border-top: 0.5px solid var(--line-bright);
+    border-bottom: 0.5px solid var(--line-bright);
+    background: color-mix(in srgb, var(--amber) 6%, var(--panel));
+  }
+  .kp-shift-eyebrow {
+    font-family: var(--mono);
+    font-size: 9.5px;
+    color: var(--amber);
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+  }
+  .kp-shift-eyebrow strong {
+    color: var(--amber);
+    font-weight: 700;
+  }
+  .kp-shift-because {
+    font-size: 12.5px;
+    color: var(--text);
+    line-height: 1.45;
+  }
+  /* Suppress the kp-ctas top rule when the mode-shift callout sits
+     directly above it · two adjacent 0.5px borders read as a doubled
+     frame. The mode-shift's own border-bottom is the divider here. */
+  .kp-mode-shift + .kp-ctas {
+    border-top: none;
+    margin-top: 0;
+    padding-top: 12px;
+  }
+
+  /* 3-button layout · only used when the chair proposed a tone shift
+     (kp-ctas-shift). The primary "switch to <tone>" action takes ~50%
+     of the row and each ghost button takes ~25%. Without this, three
+     `flex: 1` buttons compress each to ~33% width and longer tone
+     names ("constructive", "brainstorm") wrap inside the button.
+     The wrap fallback (`flex-wrap: wrap` + flex-basis on each item)
+     handles narrow chat viewports: when the row can't fit all three
+     side-by-side, the primary spans the row and the two ghosts share
+     the line below. Letter-spacing and uppercase are also relaxed for
+     this row so the labels stay narrow. */
+  .kp-ctas-shift { flex-wrap: wrap; }
+  .kp-ctas-shift .kp-cta.primary { flex: 2 1 240px; }
+  .kp-ctas-shift .kp-cta.ghost   { flex: 1 1 110px; }
+  .kp-ctas-shift .kp-cta {
+    text-transform: none;
+    letter-spacing: 0.04em;
+    padding: 8px 10px;
+  }
+
+  /* Degraded round-end card · shown when the chair finished streaming
+     but the parser couldn't extract any key points from the body.
+     Quieter eyebrow than the regular kp-eyebrow so the user reads it
+     as "this round didn't produce a vote ballot" rather than an error.
+     The continue / adjourn buttons below stay primary so the room can
+     still move forward. Earlier failure mode here was an indefinite
+     "drafting key points…" lock-up because the skeleton kept rendering
+     after streaming ended. */
+  .kp-eyebrow-degraded {
+    font-family: var(--mono);
+    font-size: 9.5px;
+    color: var(--text-faint);
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+  }
+
   /* Inline @mention / /handle pill. Two flavours so the addressee is
      glanceable: agent mentions get amber, user mentions get lime.
      Unscoped so the styling lands in any context (chat bubble, convene
@@ -5590,6 +7145,21 @@
     transform: rotate(180deg);
   }
 
+  /* Composer-toolbar fitting for the reused .ap-skill-row-toggle
+     vocabulary · same control as agent-profile's web-search row but
+     in a slightly different surrounding context (cmp-toolbar is
+     denser than the skill row). Just whitespace tuning — the toggle
+     visuals come from agent-profile.css. */
+  .cmp-toolbar .cmp-ws-toggle {
+    /* Full label + state takes more horizontal room than the
+       cmp-dd dropdowns; tighten letter-spacing slightly so the row
+       still fits the model dropdown + manual button + Convene CTA
+       without wrapping at common widths. */
+    letter-spacing: 0.12em;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
   /* Tune dropdown · row layout matches the director picker exactly:
      same padding (5px 10px), same name (12.5px sans) + tag (8.5px
      mono uppercase) inline-baseline pairing, same active treatment
@@ -5843,41 +7413,153 @@
     text-transform: uppercase;
     color: var(--text-soft);
   }
-  .ag-cmp-dots {
-    display: inline-flex;
-    gap: 3px;
-    margin-left: 6px;
-    vertical-align: middle;
+  .ag-cmp-dots {
+    display: inline-flex;
+    gap: 3px;
+    margin-left: 6px;
+    vertical-align: middle;
+  }
+  .ag-cmp-dots i {
+    width: 4px; height: 4px;
+    border-radius: 50%;
+    background: var(--lime);
+    display: inline-block;
+    animation: ag-cmp-bounce 1.1s ease-in-out infinite;
+  }
+  .ag-cmp-dots i:nth-child(2) { animation-delay: 0.18s; }
+  .ag-cmp-dots i:nth-child(3) { animation-delay: 0.36s; }
+  @keyframes ag-cmp-bounce {
+    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
+    40% { opacity: 1; transform: translateY(-2px); }
+  }
+  .cmp-input-frame.is-generating {
+    opacity: 0.7;
+  }
+
+  /* ─── Agent generation · animated stage card ───────────────────
+     Replaces the single "Generating…" deck. Shows a numbered checklist
+     of what the LLM is producing right now (imagining → naming → bio
+     → cover quote → instruction → voice → polish). Each stage ticks
+     done on a timer; the active row pulses lime. */
+  .ag-gen-card {
+    margin-top: 22px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--line-bright);
+    padding: 18px 22px 16px;
+    position: relative;
+    overflow: hidden;
+  }
+  /* Recovery card · shown when /generate-spec hits the 5-min hard
+     timeout or returns an error. Same outer shell as ag-gen-card so
+     the layout doesn't jump between generating → error. */
+  .ag-gen-error-card {
+    margin-top: 22px;
+    background: var(--panel-2);
+    border: 0.5px solid var(--amber, #B59560);
+    padding: 22px 24px 20px;
+  }
+  .ag-gen-error-kicker {
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--amber, #B59560);
+    margin-bottom: 10px;
+  }
+  .ag-gen-error-title {
+    font-family: var(--font-human);
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text);
+    line-height: 1.35;
+    margin: 0 0 10px;
+  }
+  .ag-gen-error-hint {
+    font-family: var(--font-human);
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--text-soft);
+    margin: 0 0 12px;
+  }
+  .ag-gen-error-detail {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    line-height: 1.55;
+    color: var(--text-faint);
+    background: var(--bg);
+    border: 0.5px solid var(--line);
+    padding: 8px 12px;
+    margin: 0 0 14px;
+    word-break: break-word;
+    max-height: 120px;
+    overflow-y: auto;
+  }
+  .ag-gen-error-desc {
+    margin: 0 0 16px;
+    padding-top: 12px;
+    border-top: 0.5px solid var(--line);
+  }
+  .ag-gen-error-desc-label {
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    margin-bottom: 6px;
+  }
+  .ag-gen-error-desc-body {
+    font-family: var(--font-human);
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--text-soft);
+  }
+  .ag-gen-error-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
   }
-  .ag-cmp-dots i {
-    width: 4px; height: 4px;
-    border-radius: 50%;
+  .ag-gen-error-retry {
+    appearance: none;
     background: var(--lime);
-    display: inline-block;
-    animation: ag-cmp-bounce 1.1s ease-in-out infinite;
+    color: var(--bg);
+    border: 0.5px solid var(--lime);
+    padding: 9px 18px;
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: background 0.12s, color 0.12s;
   }
-  .ag-cmp-dots i:nth-child(2) { animation-delay: 0.18s; }
-  .ag-cmp-dots i:nth-child(3) { animation-delay: 0.36s; }
-  @keyframes ag-cmp-bounce {
-    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
-    40% { opacity: 1; transform: translateY(-2px); }
+  .ag-gen-error-retry:hover {
+    background: transparent;
+    color: var(--lime);
   }
-  .cmp-input-frame.is-generating {
-    opacity: 0.7;
+  .ag-gen-error-retry-mark {
+    font-size: 13px;
+    line-height: 1;
   }
-
-  /* ─── Agent generation · animated stage card ───────────────────
-     Replaces the single "Generating…" deck. Shows a numbered checklist
-     of what the LLM is producing right now (imagining → naming → bio
-     → cover quote → instruction → voice → polish). Each stage ticks
-     done on a timer; the active row pulses lime. */
-  .ag-gen-card {
-    margin-top: 22px;
-    background: var(--panel-2);
+  .ag-gen-error-discard {
+    appearance: none;
+    background: transparent;
+    color: var(--text-soft);
     border: 0.5px solid var(--line-bright);
-    padding: 18px 22px 16px;
-    position: relative;
-    overflow: hidden;
+    padding: 9px 16px;
+    font-family: var(--mono);
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: color 0.12s, border-color 0.12s;
+  }
+  .ag-gen-error-discard:hover {
+    color: var(--text);
+    border-color: var(--text-soft);
   }
   /* Subtle scanline texture across the card · adds an "active system"
      atmosphere without being distracting. Slow upward drift. */
@@ -6656,6 +8338,119 @@
     color: var(--lime);
   }
 
+  /* ─── Brief picker popover · the [View Report] click target on
+     multi-brief rooms. Anchored under the room-head's button via
+     position: fixed and right-aligned so it visually drops out of
+     the trigger. Each row is a plain anchor to /report.html so
+     middle-click / cmd-click work for opening multiple reports
+     in tabs. ─── */
+  .brief-picker-pop {
+    position: fixed;
+    z-index: 9001;
+    width: 380px;
+    max-width: calc(100vw - 32px);
+    overflow-y: auto;
+    background: var(--panel);
+    border: 0.5px solid var(--line-strong);
+  }
+  .brief-picker-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: 8px 12px;
+    border-bottom: 0.5px solid var(--line);
+  }
+  .brief-picker-title-head {
+    font-family: var(--mono);
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: var(--text);
+  }
+  .brief-picker-count {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    color: var(--text-faint);
+    background: var(--panel-2);
+    border: 0.5px solid var(--line);
+    padding: 2px 8px;
+  }
+  .brief-picker-list {
+    padding: 2px 0;
+  }
+  .brief-picker-row {
+    display: grid;
+    grid-template-columns: 32px 1fr auto auto;
+    gap: 10px;
+    align-items: center;
+    padding: 10px 12px;
+    text-decoration: none;
+    color: inherit;
+    border-bottom: 0.5px solid var(--line);
+    transition: background 0.1s;
+  }
+  .brief-picker-row:last-child { border-bottom: none; }
+  .brief-picker-row:hover { background: var(--panel-2); }
+  .brief-picker-num {
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--text-faint);
+    letter-spacing: 0.06em;
+  }
+  .brief-picker-row:hover .brief-picker-num { color: var(--lime); }
+  .brief-picker-main {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+  .brief-picker-title {
+    font-family: var(--font-human, system-ui, sans-serif);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    line-height: 1.3;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .brief-picker-sub {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--text-faint);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .brief-picker-time {
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.04em;
+    color: var(--text-faint);
+    white-space: nowrap;
+  }
+  .brief-picker-arrow {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--text-faint);
+    transition: color 0.12s, transform 0.12s;
+  }
+  .brief-picker-row:hover .brief-picker-arrow {
+    color: var(--lime);
+    transform: translate(2px, -2px);
+  }
+  /* The "· N" count chip rendered inline with the View Report button
+     when multiple briefs exist · subtle, blends with the bracket
+     monospace label, mirrors how `.session-num` reads. */
+  .view-report-btn .vr-count {
+    color: var(--text-faint);
+    font-weight: 500;
+  }
+
   /* Convene opener · the room's seed question, distinct from chat bubbles. */
   .convene-opener {
     margin: 0 auto 24px;
@@ -6693,6 +8488,44 @@
     margin: 0 0 10px;
   }
   .convene-body p { margin: 0; }
+
+  /* Long-opener clamp · when the user wrote more than a sentence of
+     context, the card would otherwise dominate the viewport. We
+     clamp the body to ~2.5 lines with a fade-out overlay; a
+     `<button data-convene-toggle>` below toggles `.expanded` on the
+     opener parent to reveal the rest. 2.5 × line-height (1.32 ×
+     19px ≈ 25px) = 63px. */
+  .convene-opener-clamped:not(.expanded) .convene-body {
+    max-height: 63px;
+    overflow: hidden;
+    position: relative;
+  }
+  .convene-opener-clamped:not(.expanded) .convene-body::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 32px;
+    background: linear-gradient(to bottom, transparent, var(--panel-2));
+    pointer-events: none;
+  }
+  .convene-toggle {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: var(--text-soft);
+    cursor: pointer;
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    padding: 4px 0 6px;
+    margin: 4px 0 6px;
+    transition: color 0.12s;
+  }
+  .convene-toggle:hover { color: var(--lime); }
   .convene-meta {
     font-family: var(--mono);
     font-size: 10px;
@@ -6707,6 +8540,74 @@
   .convene-meta .convene-time { color: var(--text-faint); }
   .convene-meta .convene-cast { color: var(--text-dim); }
 
+  /* Follow-up origin row · only present when this room was started as
+     a continuation of a prior adjourned room. Sits between the
+     eyebrow and the question body, click-navigates back to the parent
+     room via hash route. Visually distinct from the eyebrow (mono +
+     ↩ glyph + brighter than meta-row) but quieter than the headline. */
+  .convene-origin {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 6px;
+    margin: -2px 0 10px;
+    padding: 4px 8px 4px 6px;
+    background: var(--bg);
+    border: 0.5px solid var(--line-bright);
+    font-family: var(--mono);
+    font-size: 10.5px;
+    letter-spacing: 0.04em;
+    color: var(--text-soft);
+    text-decoration: none;
+    transition: border-color 0.12s, color 0.12s, background 0.12s;
+    max-width: 100%;
+    /* Lock chrome to one line. CJK ("继续自") has no inter-character
+       wrap stopper by default and would otherwise break mid-word
+       when the row got tight. */
+    white-space: nowrap;
+  }
+  .convene-origin:hover {
+    border-color: var(--lime-dim);
+    color: var(--text);
+    background: var(--panel-3);
+  }
+  /* Lock the labels so flex shrinking only consumes the subject
+     (which has its own ellipsis). Otherwise every child shares the
+     shrink and the labels squeeze before the subject does. */
+  .convene-origin-arrow,
+  .convene-origin-label,
+  .convene-origin-room,
+  .convene-origin-sep {
+    flex-shrink: 0;
+  }
+  .convene-origin-arrow {
+    color: var(--lime);
+    font-weight: 700;
+    line-height: 1;
+  }
+  .convene-origin-label {
+    color: var(--text-soft);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 600;
+    font-size: 9.5px;
+  }
+  .convene-origin-room {
+    color: var(--lime);
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+  .convene-origin-sep { color: var(--text-faint); }
+  .convene-origin-subject {
+    color: var(--text-soft);
+    text-transform: none;
+    letter-spacing: -0.003em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    flex-shrink: 1;
+  }
+
   /* ─── Convening card · multi-stage placeholder while the room opens ───
      Lives at the tail of the chat from the moment createRoom resolves
      until the chair's first message lands (~10s). Three stages tied to
@@ -6991,6 +8892,8 @@
 <script src="auto-hide-scroll.js" defer></script>
 <link rel="stylesheet" href="onboarding.css">
 <script src="onboarding.js" defer></script>
+<link rel="stylesheet" href="quote-cta.css">
+<script src="quote-cta.js" defer></script>
 <script src="app.js" defer></script>
 <script>
   /* FOUC-prevention: apply saved theme synchronously before paint */
@@ -7007,6 +8910,19 @@
 </head>
 <body>
 
+<!-- ═══════════════ SYSTEM NOTICE BANNER ═══════════════
+     Surfaces "storage upgraded" notices when the user opens a build
+     that ran new schema migrations against their existing DB. Hidden
+     by default; populated + un-hidden by app.js after the boot fetch
+     to /api/system/migrations resolves. Dismiss writes the latest
+     migration name to localStorage so it doesn't re-show until the
+     next time fresh migrations actually apply. -->
+<div class="sys-notice" data-sys-notice hidden>
+  <span class="sys-notice-mark">▸</span>
+  <span class="sys-notice-text" data-sys-notice-text></span>
+  <button type="button" class="sys-notice-close" data-sys-notice-close aria-label="Dismiss">✕</button>
+</div>
+
 <div class="control">
 
   <!-- ═══════════════ TOP BAR (classification banner) ═══════════════ -->
@@ -7044,6 +8960,7 @@
       <div class="sidebar-head">
         <div class="sidebar-head-title">// CONTROL</div>
         <div class="sidebar-head-meta"><span class="lime">●</span> <span data-sidebar-summary>0 LIVE / 0 AGENTS</span></div>
+        <button type="button" class="sidebar-collapse-btn" data-sidebar-collapse aria-label="Collapse sidebar" title="Collapse sidebar"></button>
       </div>
 
       <div class="sidebar-tabs" role="tablist">
@@ -7068,7 +8985,20 @@
            "New room" so it reads as a peer destination, not a list
            item, with a square glyph echoing the dashboard glyphs
            elsewhere in the sidebar. -->
-      <a href="#" class="new-btn nav-reports" data-reports-trigger>All Reports</a>
+      <a href="#" class="new-btn nav-reports" data-reports-trigger>
+        <span class="nav-label">All Reports</span>
+        <span class="nav-count" data-reports-count hidden></span>
+      </a>
+      <!-- "All Notes" · chairman's-notes index. Sits directly below
+           All Reports because both are cross-cutting aggregation views
+           (read-only collections that span every room), distinct from
+           the room list below. Bookmark glyph differentiates from
+           Reports' FileText glyph. The data-notes-count badge updates
+           live as new notes are saved or deleted. -->
+      <a href="#" class="new-btn nav-notes" data-notes-trigger>
+        <span class="nav-label">All Notes</span>
+        <span class="nav-count" data-notes-count hidden></span>
+      </a>
 
       <div class="sessions-scroll">
         <div data-rooms-list></div>
@@ -7089,21 +9019,13 @@
       </div><!-- /agents panel -->
 
       <div class="sidebar-foot">
-        <div class="user-menu-wrap" tabindex="0">
-          <a href="#" class="user-block">
-            <div class="user-av" data-user-avatar>K</div>
-            <div class="user-info">
-              <div class="user-name" data-user-name>—</div>
-              <div class="user-meta" data-user-meta>// host</div>
-            </div>
-            <span class="chev">▴</span>
-          </a>
-          <div class="user-menu">
-            <div class="user-menu-section">
-              <div class="name" data-user-menu-name>—</div>
-            </div>
+        <a href="#" class="user-block">
+          <div class="user-av" data-user-avatar>K</div>
+          <div class="user-info">
+            <div class="user-name" data-user-name>—</div>
+            <div class="user-meta" data-user-meta>// host</div>
           </div>
-        </div>
+        </a>
         <a href="#" class="icon-btn" title="Settings" data-user-settings-trigger>⚙</a>
       </div>
 
@@ -7171,8 +9093,8 @@
               <strong>// room adjourned.</strong> the brief is filed above.
             </div>
             <div class="adjourned-bar-actions">
-              <a href="#" class="ghost-btn">[↓] Export</a>
-              <a href="#" class="ghost-btn">[↗] Share</a>
+              <a href="#" class="ghost-btn" data-room-export>[↓] Export</a>
+              <a href="#" class="ghost-btn" data-room-followup>[→] Convene Follow-up</a>
             </div>
           </footer>
         </div>
@@ -7190,8 +9112,30 @@
         <div class="reports-page" data-reports-page></div>
       </div>
 
+      <!-- All Notes view · cross-room chairman's-notes index. Vertical
+           timeline grouped by date (Today / This Week / Earlier).
+           Filled by app.renderNotesPage() on demand. -->
+      <div class="main-view" data-main-view="notes" hidden>
+        <div class="notes-page" data-notes-page></div>
+      </div>
+
     </main>
 
+    <!-- Floating expand affordance · only visible when the sidebar is
+         collapsed (body.sidebar-collapsed). Lives INSIDE .body-grid
+         (which is position: relative) so the button's absolute
+         positioning anchors to the body-grid's top-left edge — i.e.
+         below the topbar / brand logo, where the sidebar's own header
+         sat before collapse. Frosted black glass with a 3-line
+         hamburger glyph. -->
+    <button type="button" class="sidebar-expand-btn" data-sidebar-expand aria-label="Expand sidebar" title="Expand sidebar">
+      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
+        <line x1="2.5" y1="4.25"  x2="13.5" y2="4.25"/>
+        <line x1="2.5" y1="8"     x2="13.5" y2="8"/>
+        <line x1="2.5" y1="11.75" x2="13.5" y2="11.75"/>
+      </svg>
+    </button>
+
   </div>
 
 </div>
@@ -7261,6 +9205,45 @@
     }
 
     document.querySelectorAll("[data-resize]").forEach(attach);
+
+    // ─── Sidebar collapse / expand ───
+    // Three affordances, all event-delegated on document:
+    //   · `data-sidebar-collapse` inside the sidebar head ·
+    //     visible only while the sidebar is open · collapses
+    //   · `data-sidebar-expand` inside `.room-head` (rendered by
+    //     renderHeader) · visible when collapsed AND a room is
+    //     loaded · sits at the leading edge of the room title bar
+    //   · `data-sidebar-expand` floating button at top-left of
+    //     `.body-grid` · visible only when collapsed AND no room
+    //     is loaded (empty / no-room state, where there's no
+    //     room-head to host the in-header button)
+    // All flip `body.sidebar-collapsed` and persist to localStorage.
+    const COLLAPSE_KEY = "boardroom.sidebar.collapsed";
+    function applySidebarCollapsed(collapsed) {
+      document.body.classList.toggle("sidebar-collapsed", collapsed);
+    }
+    function readSidebarCollapsed() {
+      try { return localStorage.getItem(COLLAPSE_KEY) === "1"; }
+      catch { return false; }
+    }
+    function writeSidebarCollapsed(v) {
+      try { localStorage.setItem(COLLAPSE_KEY, v ? "1" : "0"); } catch {}
+    }
+    applySidebarCollapsed(readSidebarCollapsed());
+    document.addEventListener("click", (e) => {
+      if (e.target.closest("[data-sidebar-collapse]")) {
+        e.preventDefault();
+        applySidebarCollapsed(true);
+        writeSidebarCollapsed(true);
+        return;
+      }
+      if (e.target.closest("[data-sidebar-expand]")) {
+        e.preventDefault();
+        applySidebarCollapsed(false);
+        writeSidebarCollapsed(false);
+        return;
+      }
+    });
   })();
 
   /* ─── Speaking queue: collapse / expand persistence ───
@@ -7368,11 +9351,28 @@
     const TAB_KEY = "boardroom.sidebar.tab";
     const ROOMS_KEY = "boardroom.sidebar.rooms";
     const AGENTS_KEY = "boardroom.sidebar.agents";
+    /* Mirror of the last actually-opened roomId. Diverges from ROOMS_KEY
+       when the user lands on +New Room / All Reports / All Notes — those
+       overwrite ROOMS_KEY with "new" / "reports" / "notes" but should not
+       erase the memory of which ROOM the user had open. Used as a tab-
+       switch fallback so re-entering the Rooms tab restores a meaningful
+       selection rather than blanking it. */
+    const ROOMS_LAST_KEY = "boardroom.sidebar.rooms.last";
     const VALID_TABS = new Set(["rooms", "agents"]);
 
     const lsGet = (k) => { try { return localStorage.getItem(k); } catch (_) { return null; } };
     const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch (_) {} };
 
+    /* Fall back to the first session row in the sidebar when we have
+       no explicit user choice. Ordering matches DOM order (live first,
+       then paused, then adjourned), which is the same ordering the user
+       sees — picking [0] always means "the one at the top." Returns null
+       when the sidebar has no rooms at all. */
+    function firstRoomId() {
+      const row = document.querySelector(".session-row-shell[data-room-id]");
+      return row ? row.dataset.roomId : null;
+    }
+
     function applyRoomsSubState(sub) {
       // Make sure the room main view is visible (in case the agent
       // profile main view was up). setComposerMode also does this when
@@ -7388,6 +9388,13 @@
         }
         return;
       }
+      // "notes" → cross-room chairman's-notes index.
+      if (sub === "notes") {
+        if (window.app && typeof window.app.openAllNotes === "function") {
+          window.app.openAllNotes();
+        }
+        return;
+      }
       if (!sub || sub === "new") {
         if (window.app && typeof window.app.setComposerMode === "function") {
           window.app.setComposerMode("room");
@@ -7395,20 +9402,40 @@
         return;
       }
       // Navigate to the saved room — but only if it still exists in
-      // the sidebar list. Stale ids fall back to the composer.
-      const exists = !!document.querySelector(`.session-row-shell[data-room-id="${sub}"]`);
+      // the sidebar list. A stale id (deleted room, never-existed)
+      // falls back to the most-recently-viewed room, then the first
+      // row, before resorting to the composer. Without the fallback,
+      // a deleted-room id would land the user on a blank composer
+      // every tab-switch even when other rooms are available.
+      let exists = !!document.querySelector(`.session-row-shell[data-room-id="${sub}"]`);
       if (!exists) {
-        lsSet(ROOMS_KEY, "new");
-        if (window.app && typeof window.app.setComposerMode === "function") {
-          window.app.setComposerMode("room");
+        const last = lsGet(ROOMS_LAST_KEY);
+        const candidate = (last && document.querySelector(`.session-row-shell[data-room-id="${last}"]`))
+          ? last
+          : firstRoomId();
+        if (candidate) {
+          sub = candidate;
+          lsSet(ROOMS_KEY, candidate);
+          exists = true;
+        } else {
+          lsSet(ROOMS_KEY, "new");
+          if (window.app && typeof window.app.setComposerMode === "function") {
+            window.app.setComposerMode("room");
+          }
+          return;
         }
-        return;
       }
       const want = "#/r/" + sub;
       if (location.hash !== want) {
         location.hash = want;
       } else if (window.app && window.app.currentRoomId !== sub && typeof window.app.openRoom === "function") {
         window.app.openRoom(sub);
+      } else if (window.app && typeof window.app.markActiveRoom === "function") {
+        // Both hash and currentRoomId already match — but the sidebar
+        // session-row .active highlight may have been cleared by an
+        // intervening agent-profile open (markActiveAgent wipes it).
+        // Re-apply so the row reads as selected on tab return.
+        window.app.markActiveRoom(sub);
       }
     }
 
@@ -7433,6 +9460,7 @@
     function activate(which, opts) {
       if (!VALID_TABS.has(which)) return;
       const persist = !opts || opts.persist !== false;
+      const fromTabClick = !!(opts && opts.fromTabClick);
       document.querySelectorAll(".sidebar-tab[data-sidebar-tab]").forEach((t) => {
         const on = t.dataset.sidebarTab === which;
         t.classList.toggle("active", on);
@@ -7444,7 +9472,41 @@
         else    p.setAttribute("hidden", "");
       });
 
-      if (which === "rooms") applyRoomsSubState(lsGet(ROOMS_KEY) || "new");
+      if (which === "rooms") {
+        // Resolve which sub-state to apply. The room id ROOMS_KEY
+        // points to is the user's explicit choice when set; on
+        // user-driven tab switches we additionally prefer the last
+        // actually-opened room over a blank "new"-composer landing,
+        // so re-entering the Rooms tab feels continuous (selection
+        // restored) instead of resetting. Initial-load (refresh /
+        // boot) keeps the legacy "lands on composer" intent so a
+        // fresh user without prior history sees the new-room invite.
+        const saved = lsGet(ROOMS_KEY);
+        let target;
+        if (saved && saved !== "new" && saved !== "reports" && saved !== "notes") {
+          target = saved; // explicit room id
+        } else if (saved === "reports" || saved === "notes") {
+          target = saved; // cross-room destinations preserve on any nav
+        } else if (fromTabClick) {
+          // User-driven tab switch · prefer the last actually-opened
+          // room (or first row) over the +New Room composer, so
+          // re-entering the Rooms tab feels continuous instead of
+          // resetting to the composer. The "new" intent only persists
+          // within the rooms tab — once the user leaves and returns,
+          // we surface their last room.
+          const last = lsGet(ROOMS_LAST_KEY);
+          if (last && document.querySelector(`.session-row-shell[data-room-id="${last}"]`)) {
+            target = last;
+          } else {
+            target = firstRoomId() || "new";
+          }
+        } else if (saved === "new") {
+          target = "new"; // initial load · preserve composer intent
+        } else {
+          target = "new"; // initial load with no history → composer
+        }
+        applyRoomsSubState(target);
+      }
       else if (which === "agents") applyAgentsSubState(lsGet(AGENTS_KEY) || "new");
 
       if (persist) lsSet(TAB_KEY, which);
@@ -7476,7 +9538,7 @@
       const tab = e.target.closest(".sidebar-tab[data-sidebar-tab]");
       if (tab) {
         e.preventDefault();
-        activate(tab.dataset.sidebarTab);
+        activate(tab.dataset.sidebarTab, { fromTabClick: true });
         return;
       }
       // Track sub-state · "+ New room" → rooms = "new"
@@ -7495,10 +9557,47 @@
         }
         return;
       }
-      // Track sub-state · clicked a session row → rooms = roomId
+      // "All Notes" trigger · cross-room chairman's-notes index. Same
+      // sub-state pattern as reports — special token "notes" so the
+      // sidebar persists which destination was last visited.
+      const notesBtn = e.target.closest("[data-notes-trigger]");
+      if (notesBtn) {
+        e.preventDefault();
+        lsSet(ROOMS_KEY, "notes");
+        if (window.app && typeof window.app.openAllNotes === "function") {
+          window.app.openAllNotes();
+        }
+        return;
+      }
+      // Track sub-state · clicked a session row → rooms = roomId.
+      // Also stamp ROOMS_LAST_KEY so a later +New Room / All Reports
+      // / All Notes click that overwrites ROOMS_KEY doesn't erase the
+      // memory of which actual room was last open.
       const sessRow = e.target.closest(".session-row-shell[data-room-id]");
       if (sessRow && sessRow.dataset.roomId) {
-        lsSet(ROOMS_KEY, sessRow.dataset.roomId);
+        const id = sessRow.dataset.roomId;
+        lsSet(ROOMS_KEY, id);
+        lsSet(ROOMS_LAST_KEY, id);
+        // Anchor `href="#/r/<id>"` clicks rely on `hashchange` →
+        // handleRoute → openRoom. When the hash already equals the
+        // target (e.g. user just left an agent profile that didn't
+        // change the hash, then clicks the same room), the browser
+        // suppresses hashchange and openRoom never runs — the row
+        // stays unselected. Re-trigger the room load + highlight
+        // manually for the same-hash case.
+        const want = "#/r/" + id;
+        if (location.hash === want && window.app) {
+          if (window.app.currentRoomId !== id && typeof window.app.openRoom === "function") {
+            window.app.openRoom(id);
+          } else {
+            if (typeof window.closeAgentProfile === "function") {
+              try { window.closeAgentProfile(); } catch (_) {}
+            }
+            if (typeof window.app.markActiveRoom === "function") {
+              window.app.markActiveRoom(id);
+            }
+          }
+        }
         return;
       }
       // Track sub-state · "+ New agent" → agents = "new"
@@ -7509,10 +9608,15 @@
     });
 
     /* ─── hashchange · keep rooms sub-state synced when navigation
-           happens via URL bar / browser history. */
+           happens via URL bar / browser history. ROOMS_LAST_KEY mirrors
+           the same id so it survives later +New Room / All Reports
+           overwrites of ROOMS_KEY. */
     window.addEventListener("hashchange", () => {
       const m = (location.hash || "").match(/^#\/r\/([a-z0-9]+)/i);
-      if (m && m[1]) lsSet(ROOMS_KEY, m[1]);
+      if (m && m[1]) {
+        lsSet(ROOMS_KEY, m[1]);
+        lsSet(ROOMS_LAST_KEY, m[1]);
+      }
     });
 
     /* Wrap window.openAgentProfile so EVERY open call (sidebar click,
@@ -7548,6 +9652,7 @@
       const m = (location.hash || "").match(/^#\/r\/([a-z0-9]+)/i);
       if (m && m[1]) {
         lsSet(ROOMS_KEY, m[1]);
+        lsSet(ROOMS_LAST_KEY, m[1]);
         activate("rooms", { persist: false });
         return;
       }