privateboard 0.1.32 → 0.1.37

package/public/index.html

@@ -28,6 +28,11 @@
     --panel-2: #1A1A18;
     --panel-3: #21211E;
     --hi: #2A2A26;
+    /* Sidebar chrome surface · used by `.sidebar`, `.sessions-scroll`,
+       `.agents-scroll`, the sticky `.section-header`, and the
+       `.sidebar-foot::before` scroll-fade. One token so the whole
+       sidebar column moves together. */
+    --sidebar-bg: #191918;
 
     --line: #26241F;
     --line-bright: #3A3934;
@@ -64,6 +69,9 @@
             system-ui, sans-serif;
 
     --sidebar-w: 280px;
+    /* Collapsed icon-rail width · matches the ChatGPT folded sidebar.
+       Wide enough for a centered 32px hit target with breathing room. */
+    --mini-sidebar-w: 56px;
   }
 
   /* Logo stays on Inter so the brandmark reads consistently
@@ -484,7 +492,12 @@
      SIDEBAR
      ═══════════════════════════════════════════ */
   .sidebar {
-    background: var(--panel);
+    /* Sidebar runs on its own token `--sidebar-bg` (#191918) so the
+       column can be tuned independently of `--panel` / `--panel-2`.
+       Every inner surface that needs to match (`.sessions-scroll`,
+       `.agents-scroll`, sticky `.section-header`, `.sidebar-foot`
+       fade) reads the same token. */
+    background: var(--sidebar-bg);
     /* Right edge owns the region divider · brighter than the other
        three sides (--line-bright vs --line) so the sidebar reads as
        visually distinct from the main column. Pairs with
@@ -505,12 +518,10 @@
        the 22px collapse-button's box; after the button was shrunk to a
        16px icon, the row would collapse 6px shorter without this lock. */
     min-height: 38px;
-    border-bottom: 0.5px solid var(--line-bright);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
-    background: var(--panel-2);
   }
   /* Lock-up · brand mark + wordmark in the slot the prior
      "// CONTROL" title held. Anchored as a link so a click on the
@@ -662,14 +673,6 @@
   html.is-electron-mac .room-head .head-cast img {
     -webkit-app-region: no-drag;
   }
-  /* The expand-btn's ::after halo paints OUTSIDE the button rect
-     (inset: -16px), so it doesn't inherit the button's no-drag and
-     gets eaten by `.room-head { drag }` above. Stamp no-drag on the
-     pseudo directly so the 48×48 hit zone keeps registering clicks.
-     (Same shape as the sidebar-collapse-btn::after override.) */
-  html.is-electron-mac .room-head .room-head-expand::after {
-    -webkit-app-region: no-drag;
-  }
   /* ─── macOS Electron · top-strip drag coverage for non-room views.
      When the room view is hidden (All Reports / All Notes / Search /
      Agent Profile) or the room view is shown with no current room (the
@@ -687,21 +690,16 @@
      agent-profile card (agent-profile.js). No interactive descendants,
      so the no-drag exception below mostly no-ops for it.
 
-     `.main-view[data-main-view="search"]` · the search view has no
-     native page-head element. The pseudo `::before` becomes a sticky
-     36px drag overlay at the top of the scrolling container; the
-     `.search-page` gets matching top padding (only in electron) so
-     content sits below the strip instead of underneath it. */
+     (Search no longer has a main-view of its own — it lives as a
+     floating overlay since the v0.1.33 redesign — so no drag-strip
+     equivalent is needed.) */
   /* `position: absolute` so the 36px drag strip floats above
-     `.chat-col` without taking a grid-row of vertical space. Without
-     this, the new-room / new-agent composer (and its `.cmp-bg-deco`
-     pixel backdrop, anchored to `.chat-col` top) were both pushed down
-     by 36px — the deco's top band ended up clipped below the visible
-     area. The strip stays transparent (`background: transparent`) so
-     the deco shows through, and `pointer-events: none` lets clicks
-     fall through to the composer below — the drag region itself
-     activates via `-webkit-app-region: drag` which Electron handles
-     before the renderer's hit-testing. */
+     `.chat-col` without taking a grid-row of vertical space. The
+     strip stays transparent (`background: transparent`) and
+     `pointer-events: none` lets clicks fall through to the composer
+     below — the drag region itself activates via
+     `-webkit-app-region: drag` which Electron handles before the
+     renderer's hit-testing. */
   html.is-electron-mac.no-room .room-head:empty {
     display: block;
     position: absolute;
@@ -739,24 +737,6 @@
   html.is-electron-mac .notes-page-head [contenteditable="true"] {
     -webkit-app-region: no-drag;
   }
-  html.is-electron-mac .main-view[data-main-view="search"] {
-    position: relative;
-  }
-  html.is-electron-mac .main-view[data-main-view="search"]::before {
-    content: "";
-    position: sticky;
-    top: 0;
-    display: block;
-    width: 100%;
-    height: 36px;
-    margin-bottom: -36px;
-    background: transparent;
-    -webkit-app-region: drag;
-    z-index: 50;
-  }
-  html.is-electron-mac .main-view[data-main-view="search"] .search-page {
-    padding-top: 36px;
-  }
   /* When the sidebar is floating as a peek overlay, every drag region
      declared above for the main-view's top strip MUST be suppressed.
      drag regions are computed as bounding rectangles regardless of
@@ -792,9 +772,6 @@
   html.is-electron-mac body.sidebar-peek .room-head:empty {
     -webkit-app-region: no-drag;
   }
-  html.is-electron-mac body.sidebar-peek .main-view[data-main-view="search"]::before {
-    -webkit-app-region: no-drag;
-  }
   /* macOS Electron · round the four outer corners of the entire
      `.body-grid` (sidebar + 8px resizer + main as one rectangle), not
      each panel individually. The grid already has `overflow: hidden`
@@ -819,6 +796,22 @@
      `enter-full-screen` / `leave-full-screen` events. */
   html.is-fullscreen .control { padding: 0; }
   html.is-fullscreen .body-grid { border-radius: 0; }
+  /* macOS fullscreen safe-area · the system menu bar (incl. the
+     traffic-light cluster + the macOS screen-recording indicator)
+     slides down over the top ~28 px of the window when the cursor
+     enters that zone. In normal windowed mode the menu bar lives
+     above the window and isn't a concern, but in fullscreen our
+     content extends edge-to-edge so anything we paint in the top
+     28 px gets obscured the moment the user hovers up to access
+     traffic lights — and the things they're trying to access
+     (window close / minimize, the head-record button at the
+     right) sit precisely there. Push the .room-head contents
+     down by 28 px in fullscreen so the action buttons clear the
+     reveal zone. The .room-head itself still starts at top: 0
+     (drag region for window-drag), only its inner content shifts. */
+  html.is-fullscreen.is-electron-mac .room-head {
+    padding-top: 28px;
+  }
   /* macOS Electron · let the BrowserWindow's `vibrancy: "under-window"`
      layer show through. The vibrancy lives behind the renderer, so
      anything painted with a fully opaque background covers it. We
@@ -841,22 +834,28 @@
      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. */
+  /* Collapsed · the full sidebar + resizer drop out and a fixed-width
+     mini icon rail takes column 1. Source order [sidebar, resizer,
+     mini, main] + both hidden siblings → grid auto-places mini in
+     col 1, main in col 2. */
   body.sidebar-collapsed .body-grid {
-    grid-template-columns: 1fr !important;
+    grid-template-columns: var(--mini-sidebar-w) 1fr !important;
   }
   body.sidebar-collapsed .sidebar,
   body.sidebar-collapsed .col-resizer {
     display: none;
   }
+  body.sidebar-collapsed .mini-sidebar {
+    display: flex;
+  }
   /* ─── Hover peek · floating sidebar while collapsed ───
-     When the user hovers the collapsed-state trigger (the floating
-     `.sidebar-expand-btn` or the in-header `.room-head-expand`), JS
-     adds `.sidebar-peek` to body. The sidebar reappears as a floating
-     overlay anchored to the body-grid's top-left edge so it sits ABOVE
-     the chat content without re-flowing the grid. Mouseleave (with
-     short grace) drops the class and the sidebar disappears again.
-     This is purely an addition to the collapsed state — the column
-     never reclaims its grid track. */
+     When the cursor reaches the viewport's left edge (over the mini
+     rail), JS adds `.sidebar-peek` to body. The full sidebar reappears
+     as a floating overlay anchored to the body-grid's top-left edge so
+     it sits ABOVE the chat content (and the mini rail) without
+     re-flowing the grid. Mouseleave drops the class and the float
+     disappears again, leaving the mini rail. This is purely an addition
+     to the collapsed state — the column never reclaims its grid track. */
   body.sidebar-collapsed.sidebar-peek .sidebar {
     display: flex;
     position: absolute;
@@ -892,10 +891,10 @@
      glass with hairline border, lime on hover. z-index sits above
      chat content but below modal overlays (which use 1500+). */
   /* Round chip · fold glyph centred in a 28px circle. `--bg` fill
-     (white on light, near-black on dark) masks the cmp-bg-deco
-     constellation behind it; `--lime-dim` ring anchors it to the
-     product's accent. Hover intensifies both ring + icon to full
-     `--lime` for an obvious interactive state. */
+     (white on light, near-black on dark) sits against the composer
+     panel; `--lime-dim` ring anchors it to the product's accent.
+     Hover intensifies both ring + icon to full `--lime` for an
+     obvious interactive state. */
   .sidebar-expand-btn {
     display: none;
     position: absolute;
@@ -915,12 +914,14 @@
     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. */
+  /* Retired · the persistent mini icon rail now owns the collapsed
+     state, and its logo button expands. The old floating round chip
+     would sit on top of the rail's top icon (both pin to the body-grid
+     top-left), so it stays hidden in every state. Kept in the DOM (and
+     this rule kept as `display: none`) so the edge-peek mousemove guard
+     that references `[data-sidebar-expand]` still resolves cleanly. */
   html.no-room body.sidebar-collapsed .sidebar-expand-btn {
-    display: inline-flex;
+    display: none;
   }
   .sidebar-expand-btn:hover {
     color: var(--lime);
@@ -963,110 +964,310 @@
     -webkit-app-region: no-drag;
   }
 
-  /* ─── In-header expand button ───
-     Lives at the leading edge of `.room-head` (rendered by
-     renderHeader() in app.js). Visual twin of `.sidebar-collapse-btn`
-     so the collapse/expand pair reads as the SAME control across
-     the two places it can appear (in-sidebar when open · in-header
-     when sidebar collapsed AND a room is loaded). Icon-only · no
-     chrome · same Lucide PanelLeft mask · same hover-lime cascade.
-     Always rendered in the mirrored variant (panel folded to the
-     right edge) since this button only ever appears in the collapsed
-     state · clicking it expands the sidebar back. */
-  .room-head-expand {
-    appearance: none;
+  /* ─── Mini (collapsed) sidebar · ChatGPT-style icon rail ───
+     A persistent narrow rail shown while collapsed. `display: none`
+     by default; flipped to `flex` by the collapsed-state rule above.
+     Shares the sidebar chrome surface (`--sidebar-bg`) + a hairline
+     right edge so it reads as the same column the full sidebar used. */
+  .mini-sidebar {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    width: var(--mini-sidebar-w);
+    height: 100%;
+    min-height: 0;
+    background: var(--sidebar-bg);
+    border-right: 1px solid var(--line);
+    padding: 10px 0;
+    /* `visible` (not `hidden`) so the per-icon hover tooltips can
+       escape the 56px rail and pop out to the right. The icon set is
+       short enough that it never overflows the rail vertically, so
+       there's nothing to clip anyway. The enclosing `.body-grid`
+       still bounds everything. */
+    overflow: visible;
+  }
+  .mini-top {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+  }
+  .mini-foot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 0 0 auto;
+    padding-top: 8px;
+  }
+  /* Icon button · 32×32 centered hit target. Stroke icons ride
+     currentColor (text-soft idle → text on hover) via the shared
+     mask-image vocabulary, matching the full sidebar's nav glyphs. */
+  .mini-btn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
     background: transparent;
-    border: 0;
     color: var(--text-soft);
+    border-radius: 8px;
     cursor: pointer;
-    width: 16px;
-    height: 16px;
-    padding: 0;
+    text-decoration: none;
     flex-shrink: 0;
-    transition: color 0.12s;
-    /* position: relative anchors the ::after hit-area expander so
-       the cursor doesn't have to land precisely on the 16px icon. */
-    position: relative;
-    display: none;
+    transition: background 0.12s, color 0.12s;
+    appearance: none;
   }
-  .room-head-expand::before {
+  /* Hover tooltip · CSS-only via ::after + data-tip, mirroring the
+     `.ib-action::after` pattern. Pops to the RIGHT of the icon (the
+     rail hugs the window's left edge, so above/left would clip) after
+     ~300ms dwell. data-tip is populated from data-i18n-tip by i18n.js,
+     with a static English fallback for the pre-i18n frame. */
+  .mini-btn[data-tip]::after {
+    content: attr(data-tip);
+    position: absolute;
+    left: calc(100% + 10px);
+    top: 50%;
+    transform: translateY(-50%) translateX(-3px);
+    background: var(--panel-2);
+    border: 0.5px solid var(--line-strong);
+    padding: 5px 9px;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--text);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
+    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.18s;
+    z-index: 250;
+  }
+  .mini-btn[data-tip]:hover::after,
+  .mini-btn[data-tip]:focus-visible::after {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(-50%) translateX(0);
+    transition: opacity 0.14s ease 0.3s, transform 0.14s ease 0.3s, visibility 0s linear 0.3s;
+  }
+  .mini-btn:hover {
+    background: var(--panel-2);
+    color: var(--text);
+  }
+  /* Selected state · the icon for the current destination (reports /
+     notes / new-room / new-agent via shared trigger attrs, rooms /
+     agents via setMiniRailContext). Settled `--panel-3` chip + full
+     --text glyph, matching the full sidebar's `.new-btn.active`
+     language (background-only, no accent — per project CSS rules).
+     Placed after :hover so an active icon keeps its chip on hover
+     instead of dropping to the lighter hover tone. */
+  .mini-btn.active,
+  .mini-btn.active:hover {
+    background: var(--panel-3);
+    color: var(--text);
+  }
+  /* Glyph · same 18px Lucide mask the full sidebar nav buttons use.
+     `--icon` is supplied per-button by the shared rules below (data-
+     attribute scoped so both the .new-btn and .mini-btn carriers pick
+     it up from one definition). */
+  .mini-btn::before {
     content: "";
-    display: block;
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
     background-color: currentColor;
-    -webkit-mask-image: 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'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 3v18'/><path d='M5 8h2'/><path d='M5 12h2'/><path d='M5 16h2'/></svg>");
-            mask-image: 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'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 3v18'/><path d='M5 8h2'/><path d='M5 12h2'/><path d='M5 16h2'/></svg>");
+    -webkit-mask-image: var(--icon, none);
+            mask-image: var(--icon, none);
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
     -webkit-mask-position: center;
             mask-position: center;
-    -webkit-mask-size: 16px 16px;
-            mask-size: 16px 16px;
-    /* Same scaleX(-1) the sidebar-collapse-btn uses when
-       body.sidebar-collapsed · since this button is ONLY visible
-       in the collapsed state, the flip is unconditional here. */
-    transform: scaleX(-1);
+    -webkit-mask-size: 18px 18px;
+            mask-size: 18px 18px;
+    transition: color 0.12s;
   }
-  /* Invisible hit-area expander · matches `.sidebar-collapse-btn::after`
-     so the click rectangle grows to 48×48 around the 16px icon. */
-  .room-head-expand::after {
+  /* Tab + user buttons render real children (.ic / avatar), not a mask
+     glyph. Suppress the shared ::before — without an `--icon` its
+     `currentColor` fill would paint a solid square block next to the
+     real content. (The logo keeps its ::before for the hover fold-icon
+     below.) */
+  .mini-tab::before,
+  .mini-user::before { content: none; }
+  .mini-tab .ic { width: 18px; height: 18px; }
+  /* Logo → fold glyph on hover · telegraphs "click to expand" using the
+     same Lucide PanelLeft + 3-rows icon as the in-sidebar collapse
+     button. At rest the brand mark shows; on hover it fades out and the
+     fold glyph (overlaid, currentColor) fades in. The explicit fold
+     mask here also overrides the generic .mini-btn::before, which —
+     lacking an --icon — would otherwise paint a solid square. */
+  .mini-logo { position: relative; }
+  /* The chair avatar is a two-layer stack: open-eye frame always
+     visible, closed-eye frame flashed in by the blink keyframe. The
+     wrapper carries an occasional idle hop. */
+  .mini-logo-av {
+    position: relative;
+    width: 26px;
+    height: 26px;
+    transition: opacity 0.12s;
+    animation: chair-hop 7s ease-in-out infinite;
+  }
+  .mini-logo-av img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    image-rendering: pixelated;
+    image-rendering: crisp-edges;
+  }
+  /* Closed-eye frame · hidden at rest, briefly opaque on the blink
+     keyframe. A different cycle length from the hop keeps the two from
+     locking into a robotic sync. */
+  .mini-logo-av .cl-blink {
+    opacity: 0;
+    animation: chair-blink 5.7s ease-in-out infinite;
+  }
+  .mini-logo:hover .mini-logo-av { opacity: 0; }
+  /* Occasional double-bounce hop · still ~85% of the cycle, then a
+     quick two-step hop so the chair reads as "alive" without being
+     busy. */
+  @keyframes chair-hop {
+    0%, 60%, 100% { transform: translateY(0); }
+    66% { transform: translateY(-4px); }
+    72% { transform: translateY(0); }
+    77% { transform: translateY(-2px); }
+    82% { transform: translateY(0); }
+  }
+  /* Single crisp blink near the end of the cycle (~170ms closed). */
+  @keyframes chair-blink {
+    0%, 93.5%, 100% { opacity: 0; }
+    94%, 96.5% { opacity: 1; }
+    97% { opacity: 0; }
+  }
+  /* Respect reduced-motion · hold the open-eye frame, no hop / blink. */
+  @media (prefers-reduced-motion: reduce) {
+    .mini-logo-av,
+    .mini-logo-av .cl-blink { animation: none; }
+  }
+  .mini-logo::before {
     content: "";
     position: absolute;
-    inset: -16px;
+    top: 50%;
+    left: 50%;
+    /* scaleX(-1) mirrors the fold so the rows flip to the right edge —
+       the same direction the in-sidebar collapse button uses in its
+       collapsed state to telegraph "the panel expands out from here". */
+    transform: translate(-50%, -50%) scaleX(-1);
+    -webkit-mask-image: 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'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 3v18'/><path d='M5 8h2'/><path d='M5 12h2'/><path d='M5 16h2'/></svg>");
+            mask-image: 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'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 3v18'/><path d='M5 8h2'/><path d='M5 12h2'/><path d='M5 16h2'/></svg>");
+    opacity: 0;
+    transition: opacity 0.12s;
   }
-  body.sidebar-collapsed .room-head-expand {
-    display: block;
-    /* Extra 5px breathing room between the icon and the title cluster
-       on top of the room-head's own 12px column gap · the icon sat
-       too close to the kicker / subject otherwise. Scoped to the
-       collapsed state since the button itself only exists then. */
-    margin-right: 5px;
+  .mini-logo:hover::before { opacity: 1; }
+  /* Divider between the action group and the rooms/agents switchers. */
+  .mini-sep {
+    width: 20px;
+    height: 1px;
+    background: var(--line-bright);
+    margin: 6px 0;
+    flex-shrink: 0;
+  }
+  .mini-user { width: 32px; height: 32px; }
+  .mini-user .mini-user-av { width: 26px; height: 26px; }
+  .mini-user:hover { background: var(--panel-2); }
+
+  /* macOS Electron · clicks must reach the rail's buttons (the window
+     drag region otherwise swallows them), and the traffic-light cluster
+     is hidden while collapsed (see syncElectronTrafficLights), so the
+     logo can sit near the top with normal padding. */
+  html.is-electron-mac .mini-sidebar {
+    -webkit-app-region: no-drag;
   }
-  .room-head-expand:hover { color: var(--lime); }
 
-  /* ─── Sidebar tabs (Rooms / Agents) — segmented control with icon ─── */
+  /* ─── Sidebar tabs (Rooms / Agents) — bar-style nav ───
+     Reference: `public/icons/bar.png`. Two layers:
+       1. Outer "bar" container · its OWN background, sits inset from
+          the sidebar edges, with a small-radius rounded rectangle
+          frame. NO inner padding — the active tab fills the bar
+          edge-to-edge so the hairline border IS the divider, not an
+          inset gap.
+       2. ACTIVE tab · rounded rectangle, hairline border, brighter
+          bg, shows icon + label. Height matches the container's so
+          there's zero gap between them on top / bottom.
+       3. INACTIVE tabs · icon-only, sit transparently on the bar with
+          generous breathing room around the glyph. */
   .sidebar-tabs {
     display: flex;
-    gap: 2px;
-    padding: 6px 6px 8px;
+    align-items: stretch;            /* tabs fill container height edge-to-edge */
+    /* No justify-content · `space-between` glued the inactive tab to
+       the far right which doesn't match the reference. Instead the
+       active tab takes its DOM position (left edge) and the inactive
+       tab uses auto margins (below) to float centred in the leftover
+       space — mirrors bar.png where the "Chat" pill hugs the left
+       edge and the icon-only siblings sit in the bar's middle/right
+       area with empty space on both sides. */
+    margin: 5px 10px 10px;
+    /* No inner padding · the active tab's hairline border is flush
+       with the container's edge, matching the reference. */
+    padding: 0;
     flex-shrink: 0;
-    background: var(--panel);
+    background: var(--panel-2);
+    border-radius: 10px;
   }
   .sidebar-tab {
-    flex: 1;
-    padding: 6px 8px;
+    /* Equal-width slots · bar.png's three-item distribution adapted
+       for our 2-tab case. Each tab occupies 50% of the container's
+       inner width so the two halves stay visually balanced regardless
+       of which side carries the pill chrome. Without this the active
+       was content-sized + the inactive icon-sized → wildly mismatched
+       slot widths that read as a layout bug. */
+    flex: 1 1 0;
+    padding: 0 14px;
+    min-height: 30px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 6px;
+    gap: 7px;
     font-family: var(--sans);
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     color: var(--text-dim);
     cursor: pointer;
     text-decoration: none;
-    transition: background 0.15s, color 0.15s;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
     letter-spacing: -0.005em;
-    border-radius: 4px;
+    border-radius: 10px;
+    /* Transparent placeholder border keeps inactive + active tabs the
+       same outer height so toggling doesn't shift the row by 1px. */
+    border: 1px solid transparent;
+    background: transparent;
   }
   .sidebar-tab .ico {
-    width: 14px;
-    height: 14px;
+    width: 15px;
+    height: 15px;
     flex-shrink: 0;
     color: currentColor;
-    opacity: 0.85;
+    opacity: 0.9;
   }
+  /* Label hidden by default; revealed only on the active tab. Keeps the
+     `<span data-i18n>` in the DOM for translation + screen readers. */
+  .sidebar-tab > span { display: none; }
   .sidebar-tab:hover {
-    background: var(--panel-2);
     color: var(--text-soft);
   }
   .sidebar-tab.active {
-    background: var(--panel-3);
     color: var(--text);
     font-weight: 600;
+    background: var(--panel-3);
+    border-color: var(--line-bright);
   }
   .sidebar-tab.active .ico { opacity: 1; }
+  .sidebar-tab.active > span { display: inline; }
 
   /* Sidebar tab panels */
   .sidebar-panel {
@@ -1086,28 +1287,41 @@
        pins flush to the scroll-viewport edge. Any padding-top here
        creates a sliver between the static nav buttons above and the
        pinned header which can briefly expose the body --bg through
-       sub-pixel render races during fast scroll. Explicit panel bg
-       belt-and-braces the inheritance chain. */
+       sub-pixel render races during fast scroll. Explicit sidebar
+       bg belts-and-braces the inheritance chain. Shares
+       `--sidebar-bg` with the rest of the sidebar column. */
     padding: 0 4px 2px;
-    background: var(--panel);
+    background: var(--sidebar-bg);
   }
+  /* Unified with `.section-header` (rooms list dividers) · same
+     padding, type scale, sticky pin behavior, and sidebar-bg
+     box-shadow chrome that masks the parent's lateral padding +
+     absorbs the sub-pixel sliver during fast scroll. */
   .agents-section-header {
-    padding: 8px 8px 6px;
-    font-family: var(--mono);
-    font-size: 9px;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--text-faint);
     display: flex;
     align-items: center;
     gap: 6px;
-    margin-top: 4px;
-  }
-  .agents-section-header .line {
-    flex: 1;
-    height: 1px;
-    background: var(--line-bright);
+    padding: 8px 12px 4px 10px;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    font-weight: 400;
+    color: var(--text-dim);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--sidebar-bg);
+    box-shadow:
+      -4px 0 0 var(--sidebar-bg),
+       4px 0 0 var(--sidebar-bg),
+       0 -2px 0 var(--sidebar-bg);
   }
+  /* Right-side divider line is no longer drawn (mirrors `.section-
+     header` which leaves the trailing space for an optional badge);
+     the markup still emits an empty <span class="line"> so existing
+     JS isn't touched. */
+  .agents-section-header .line { display: none; }
 
   /* Shell wraps the agent-row link + delete button as siblings — same
      pattern as session-row-shell · the X click never gets absorbed by
@@ -1234,7 +1448,7 @@
   .agent-row.is-chair {
     background: transparent;
     margin: 1px 6px;
-    border-radius: 4px;
+    border-radius: 10px;
   }
   .agent-row.is-chair:hover { background: var(--panel-2); }
   .agent-row.is-chair.active { background: var(--panel-3); }
@@ -1308,14 +1522,10 @@
 
   /* "Building" section · in-flight Full persona build placeholder.
      Lime accent on the header to distinguish from inert pinned /
-     custom / core sections. */
+     custom / core sections · mirrors `.section-header.live`. */
   .agents-section-header.building {
     color: var(--lime);
   }
-  .agents-section-header.building .line {
-    background: var(--lime-dim, var(--line));
-    opacity: 0.4;
-  }
   /* Building row · same dimensions as a normal agent row but the
      avatar slot is a pulsing CRT-style frame instead of a face,
      and the row carries a small "BUILD" / "READY" tag chip.
@@ -1421,7 +1631,7 @@
     letter-spacing: -0.005em;
     text-align: left;
     flex-shrink: 0;
-    border-radius: 4px;
+    border-radius: 10px;
     transition: background 0.12s, color 0.12s;
     display: flex;
     align-items: center;
@@ -1463,27 +1673,33 @@
   [data-convene-trigger]::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='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/></svg>");
   }
-  /* "New agent" · UserPlus (Lucide) — silhouette with a small plus
-     to its right, Claude's "add member" pattern. */
+  /* "New agent" · UserRoundPlus (Lucide) — rounder, bigger-headed
+     "add person" glyph. Replaces the thinner UserPlus, whose small
+     low-left silhouette + floating plus read a size smaller than the
+     box-filling neighbours (SquarePen / FileText) — most visible in
+     the collapsed mini rail where icons stand alone without labels. */
   [data-agent-composer-trigger]::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='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' x2='19' y1='8' y2='14'/><line x1='22' x2='16' y1='11' y2='11'/></svg>");
+    --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='M2 21a8 8 0 0 1 13.292-6'/><circle cx='10' cy='8' r='5'/><path d='M19 16v6'/><path d='M22 19h-6'/></svg>");
   }
   /* "All Reports" · FileText (Lucide) — single document with three
      text lines, cleaner than the previous gradient-stack glyph. */
-  .new-btn.nav-reports::before {
+  .new-btn.nav-reports::before,
+  .mini-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 {
+  .new-btn.nav-notes::before,
+  .mini-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>");
   }
   /* "Search" · Search (Lucide) — circle + diagonal handle. Standard
      magnifying-glass glyph in the same Lucide line-icon vocabulary as
      the rest of the sidebar. */
-  .new-btn.nav-search::before {
+  .new-btn.nav-search::before,
+  .mini-search::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'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
   }
   /* All Reports / All Notes / Search nav-button shape · label-only. */
@@ -1522,11 +1738,12 @@
        header that can briefly expose the body --bg through sub-pixel
        render races during fast scroll (visible as a thin "see-through"
        seam right above the ADJOURNED / LIVE / PAUSED divider).
-       Explicit panel bg belts-and-braces the inheritance chain so the
-       region is unambiguously --panel even if a child's bg falls
-       through. */
+       Explicit sidebar bg belts-and-braces the inheritance chain so
+       the region is unambiguously `--sidebar-bg` even if a child's
+       bg falls through. Tracks `.sidebar`'s surface — change via
+       the shared `--sidebar-bg` token. */
     padding: 0 4px 2px;
-    background: var(--panel);
+    background: var(--sidebar-bg);
   }
 
   .section-header {
@@ -1548,27 +1765,26 @@
     color: var(--text-dim);
     text-transform: uppercase;
     letter-spacing: 0.14em;
-    font-weight: 600;
+    font-weight: 400;
     /* Sticky · the LIVE / PAUSED / ADJOURNED dividers stay pinned
        to the top of the scroll viewport as the user scrolls down
        a long room list. Parent `.sessions-scroll` is the scroll
-       container. Background is the same `--panel` as the sidebar
-       so rows passing under the header don't bleed through; the
-       box-shadow extends that background 4px to either side (to
-       mask the parent's lateral 4px padding) and 2px upward (to
-       absorb any sub-pixel sliver between the scroll-viewport edge
-       and the pinned header during fast scroll — without it, brief
-       repaint races can expose the body --bg as a thin seam above
-       the divider). z-index keeps the header above the rows during
-       the scroll transition. */
+       container. Background matches `.sidebar` so rows passing
+       under the header don't bleed through; the box-shadow extends
+       that background 4px to either side (mask the parent's
+       lateral 4px padding) and 2px upward (absorb sub-pixel sliver
+       between the scroll-viewport edge and the pinned header
+       during fast scroll). z-index keeps the header above the rows
+       during the scroll transition. Tracks `.sidebar`'s surface
+       via the shared `--sidebar-bg` token. */
     position: sticky;
     top: 0;
     z-index: 2;
-    background: var(--panel);
+    background: var(--sidebar-bg);
     box-shadow:
-      -4px 0 0 var(--panel),
-       4px 0 0 var(--panel),
-       0 -2px 0 var(--panel);
+      -4px 0 0 var(--sidebar-bg),
+       4px 0 0 var(--sidebar-bg),
+       0 -2px 0 var(--sidebar-bg);
   }
   .section-header.live { color: var(--lime); }
   .section-header.draft { color: var(--amber); }
@@ -1584,13 +1800,6 @@
   }
   .row-status.paused { color: var(--amber); }
   .section-header .line { flex: 1; }
-  .pin-glyph {
-    width: 10px;
-    height: 10px;
-    fill: currentColor;
-    flex-shrink: 0;
-  }
-  .agents-section-header.pinned { color: var(--text-soft); }
 
   /* ─── Pin toggle (per-row · hover-revealed for non-pinned) ───
      Positioned absolutely so it overlays the right edge of the row
@@ -1636,7 +1845,7 @@
   .session-row-shell {
     position: relative;
     margin: 2px 6px;
-    border-radius: 4px;
+    border-radius: 10px;
     overflow: hidden;
   }
   .session-row-shell.active .session-row { background: var(--panel-3); }
@@ -1645,10 +1854,10 @@
     display: block;
     /* Horizontal padding kept in sync with .agent-row so the agents-tab
        and rooms-tab lists share the same horizontal rhythm in the
-       sidebar. Vertical padding 5px — single-line title with the
-       subtitle row removed; tight hitbox matching the .new-btn nav
+       sidebar. Vertical 6px gives the row a slightly more comfortable
+       hitbox while still reading as compact alongside the .new-btn nav
        buttons above. */
-    padding: 5px 10px;
+    padding: 6px 10px;
     text-decoration: none;
     color: var(--text);
     cursor: pointer;
@@ -1794,7 +2003,7 @@
   }
 
   .sidebar-foot {
-    border-top: 0.5px solid var(--line-bright);
+    position: relative;
     padding: 0 10px;
     /* Fixed 44px min-height so the sidebar footer sits on a
        predictable baseline regardless of which main view is
@@ -1807,7 +2016,23 @@
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
-    background: var(--panel-2);
+  }
+  /* Scroll fade · the rooms / agents list above .sidebar-foot can
+     scroll behind it (foot is now transparent, no border-top). This
+     ::before sits just above the foot and fades content from fully
+     transparent to the sidebar's surface colour, so list items
+     dissolve instead of clipping hard against the foot.
+     pointer-events: none keeps clicks reaching whatever's behind.
+     End-stop matches `--sidebar-bg` so the fade lands seamlessly. */
+  .sidebar-foot::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 100%;
+    height: 24px;
+    background: linear-gradient(to bottom, transparent 0%, var(--sidebar-bg) 100%);
+    pointer-events: none;
   }
   .user-block {
     display: flex;
@@ -1835,11 +2060,12 @@
     overflow: hidden;
   }
   /* Pixel-art variant · when prefs.avatarSeed exists, app.renderUserBlock
-     swaps the initial-letter chip for an AvatarSkill SVG. Drop the
-     lime fill (the SVG is its own surface) and use the bg color
-     instead, keep the box border-less so the SVG bleeds edge-to-edge. */
+     swaps the initial-letter chip for an AvatarSkill SVG. The pixel SVG
+     is transparent, so we drop the fill entirely (was --lime, then
+     --bg) and let it sit directly on the surface behind it — no boxed
+     square around the character. */
   .user-av.has-pixel-av {
-    background: var(--bg);
+    background: transparent;
   }
   .user-av.has-pixel-av svg {
     width: 100%;
@@ -1983,20 +2209,6 @@
 
   /* All Notes view · same scroll register as All Reports so the two
      cross-room aggregation destinations read as a paired set. */
-  /* Search view · same scroll chrome as reports / notes so the
-     three cross-cutting destinations behave identically. */
-  .main-view[data-main-view="search"] {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    scrollbar-width: none;
-  }
-  .main-view[data-main-view="search"]::-webkit-scrollbar { width: 8px; }
-  .main-view[data-main-view="search"]::-webkit-scrollbar-thumb { background: transparent; }
-  .main-view[data-main-view="search"]::-webkit-scrollbar-track { background: transparent; }
-  .main-view[data-main-view="search"]:hover { scrollbar-width: thin; }
-  .main-view[data-main-view="search"]:hover::-webkit-scrollbar-thumb { background: var(--line-bright); }
-
   .main-view[data-main-view="notes"] {
     display: block;
     overflow-y: auto;
@@ -2062,11 +2274,13 @@
   }
 
   /* ─── Filter strip · All / Today / This week / Earlier ────────────
-     Mirrors `.sidebar-tab` exactly — same active treatment (panel-3
-     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.
+     Segmented control · multiple chips must be visible at once (the
+     time-range filter is a pick-one-of-N for a list view), so this
+     stays SEGMENTED rather than tracking the sidebar tabs' newer
+     pill-shape "active grows, inactive collapses to icon-only" vocab.
+     Active chip gets the panel-3 bg + text colour upgrade; hover gets
+     panel-2; 4px corner radius keeps it clearly chip-not-pill. The
+     count rides inline after the label as quiet mono micro-type.
      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. */
@@ -2458,705 +2672,227 @@
   }
 
   /* ──────────────────────────────────────────────────────────
-     Search page · cross-room keyword search results.
-     Two postures driven by `.is-initial` / `.has-results` on
-     `.search-page` (toggled by `app.renderSearchPage` /
-     `app.runSearch`):
-       · is-initial · vertically-centred Google-style hero with
-         a wide search input and a mono caption beneath. Reads
-         as "this IS the page" rather than chrome above an
-         empty list.
-       · has-results · the hero collapses, the input shrinks to
-         a compact head row paired with the result-count meta,
-         and the list below uses Google-style 3-line rows
-         (mono source breadcrumb · sans link title · sans
-         snippet body).
-     The same input element serves both states so the focus /
-     value / cursor position survive the swap. */
-  .search-page {
-    /* No `flex: 1` here · search-page must grow naturally with
-       its content (especially long result lists) so the sticky
-       `.search-card`'s containing block extends through all the
-       rows. With `flex: 1`, the search-page was clamped to one
-       viewport tall and the sticky card un-stuck after scrolling
-       past that — exactly the "sticky disappears after a few
-       scrolls" bug. `min-height: 100%` is still the floor so the
-       is-initial hero can vertical-centre against a viewport-
-       sized stage. */
-    width: 100%;
-    max-width: 920px;
-    margin: 0 auto;
-    padding: 32px 32px 40px;
+     Search overlay · floating command-palette layer that
+     replaces the prior `.search-page` standalone view. Triggered
+     by `[data-search-trigger]` (sidebar Search nav) and Cmd+K /
+     Ctrl+K globally. Layers over whatever main-view is mounted
+     (room / agent / reports / notes) — the view stays mounted
+     underneath so closing returns the user exactly where they
+     were. Esc / scrim-click / X close. Result rows link to
+     `#/r/{roomId}?m={msgId}&q={q}` (hash router), preserving
+     click-navigation + keyword flash on the destination message
+     from the prior page. */
+  .search-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9000;
     display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    box-sizing: border-box;
-    /* NO `position: relative` here · the deco layers below
-       anchor to `.main-view[data-main-view="search"]` instead
-       (which IS position:relative) so they fill main-view's
-       width — the visible room content area to the right of
-       the sidebar — rather than the .search-page's own 920px
-       column. Earlier the deco was anchored here and used a
-       `width: 100vw` trick to escape, but `vw` units include
-       the sidebar's slice of the viewport, so the deco's left
-       edge ended up underneath the sidebar (and the corner
-       brackets sat where the user couldn't see them). */
-  }
-  /* ─── Initial / empty state · 8-bit ambient deco + wide card ───
-     The page surface gets a static 8-bit "constellation" overlay
-     at the top — scattered pixel dots + a few lime accents —
-     drawn with `shape-rendering: crispEdges` to match the
-     round-table stage / chair-sprite vocabulary. Hero is text-
-     only (longer wordmark, subline) since the prior pixel mark
-     read too noisy. The card itself is 760px and `width: 100%`
-     so it actually fills the centred column instead of shrinking
-     to the input's intrinsic width. */
-  .search-page.is-initial {
+    align-items: flex-start;
     justify-content: center;
-    /* Nudge slightly above true-centre so the hero feels
-       visually weighted. */
-    padding-bottom: 12vh;
-    padding-top: 0;
-  }
-  /* Has-results · inner-scroll layout. The PAGE itself is sized
-     to exactly main-view height (so nothing scrolls at this
-     level), and the results list inside gets its own scroll
-     via `flex: 1 + overflow-y: auto`. This puts the head row
-     in a non-scrolling top slot — no `position: sticky`
-     gymnastics, no containing-block-too-short failure mode.
-     The previous sticky approach disappeared as soon as the
-     user scrolled past one screen because the sticky's
-     containing block (the page) ran out; this design has no
-     such ceiling. */
-  .search-page.has-results {
-    height: 100%;
-    min-height: 0;
-    padding-top: 32px;
-    padding-bottom: 0;
-    flex-shrink: 0;
-  }
-  /* 8-bit ambient deco · absolute-positioned overlay at the top
-     of the page. Pure decoration · pointer-events: none, aria-
-     hidden, fades out the lower edge with a CSS mask so it
-     doesn't compete with the hero / card below.
-
-     Width · `left: 0; right: 0` resolves against the nearest
-     positioned ancestor, which is `.main-view[data-main-view=
-     "search"]` (it sits to the right of the sidebar). The deco
-     therefore spans the FULL main-view width, not the viewport
-     — so the sidebar never overlaps. .search-page is static
-     (no position:relative) so the deco escapes its 920px cap
-     naturally. */
-  .search-bg-deco {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 280px;
+    padding: 88px 24px 24px;
     pointer-events: none;
-    z-index: -1;
-    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
-            mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
-    opacity: 0.85;
-  }
-  .search-bg-deco svg { display: block; width: 100%; height: 100%; }
-
-  /* Positioning anchor for the deco layers · main-view sits
-     to the right of the sidebar so its bounds = the visible
-     "room content" width. `isolation: isolate` scopes the
-     deco's z-index: -1 so it sits behind search-page content
-     without leaking past main-view's background. */
-  .main-view[data-main-view="search"] {
-    position: relative;
-    isolation: isolate;
   }
-
-  .search-page.has-results .search-bg-deco {
-    /* Compact in has-results · keep a slim band of pixel
-       constellation behind the head row so the page still
-       reads as the search page rather than a generic list. */
-    height: 130px;
-    opacity: 0.45;
-    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
-            mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
-    transition: opacity 0.18s ease, height 0.22s ease;
-  }
-
-  /* Results-only deco · second layer that ONLY shows in
-     has-results. Adds proper 8-bit characters on top of the
-     constellation: CRT scanlines (CSS), pixel antennas at
-     the corners, scattered pixel "plus" sparkles, and a
-     dashed horizon line at the bottom edge. The combination
-     gives the results header genuine "search station"
-     atmosphere instead of a thin star field. */
-  .search-results-deco {
+  .search-overlay[hidden] { display: none; }
+  .search-overlay-scrim {
     position: absolute;
-    top: 0;
-    /* Spans full main-view width · the deco's `position:
-       absolute` resolves to `.main-view[data-main-view=
-       "search"]` (now position:relative) since .search-page
-       is static. No `100vw` trick needed — main-view already
-       sits to the right of the sidebar. */
-    left: 0;
-    right: 0;
-    height: 130px;
-    pointer-events: none;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.22s ease;
-    /* Faint CRT scanlines · 1px lime-tinted line every 5px.
-       Subtle enough not to compete with the input but
-       persistent enough to read as "this surface is alive." */
-    background-image: repeating-linear-gradient(
-      0deg,
-      transparent 0px,
-      transparent 4px,
-      rgba(111, 181, 114, 0.035) 4px,
-      rgba(111, 181, 114, 0.035) 5px
-    );
-    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
-            mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
-  }
-  .search-page.has-results .search-results-deco {
-    opacity: 0.85;
-  }
-  .search-results-deco svg { display: block; width: 100%; height: 100%; }
-  .search-hero {
-    text-align: center;
-    max-width: 760px;
-    margin: 0 auto 26px;
-    overflow: hidden;
-    transition:
-      opacity 0.22s ease,
-      max-height 0.24s ease,
-      margin 0.24s ease;
-  }
-  .search-page.is-initial .search-hero {
-    opacity: 1;
-    max-height: 220px;
-  }
-  .search-page.has-results .search-hero {
-    opacity: 0;
-    max-height: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-    pointer-events: none;
-  }
-  .search-hero-title {
-    font-family: var(--font-human);
-    font-size: 28px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    color: var(--text);
-    line-height: 1.05;
-    margin: 0 0 12px 0;
-  }
-  .search-hero-sub {
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    margin: 0;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.42);
+    -webkit-backdrop-filter: blur(2px);
+            backdrop-filter: blur(2px);
+    pointer-events: auto;
   }
-
-  /* Search card · the substantial input affordance for the
-     is-initial state. `width: 100%` is load-bearing — without
-     it the card collapses to its content's intrinsic width
-     (the input had no flex anchor in is-initial because the
-     wrap was display:flex with the input as a single child),
-     making the whole hero look narrow. With `width: 100%`
-     plus `max-width: 760px` the card always fills the
-     centred column. In has-results the card chrome strips
-     and the inner input-wrap takes back its own border so
-     the compact head row can flex input + meta side-by-side. */
-  .search-card {
-    display: block;
+  .search-overlay-card {
+    position: relative;
     width: 100%;
-    max-width: 760px;
-    margin: 0 auto;
-    box-sizing: border-box;
-    /* Match the new-room composer's `.cmp-input-frame` beat-for-beat ·
-       solid `var(--bg)` surface (was frosted glass; the previous
-       backdrop-filter + color-mix made the card read as its own
-       material register inside the chat-col, which clashed with the
-       calm framed-input look the composer ships). Same `0.5px
-       --accent-line` hairline border, same 14px radius, same
-       `overflow: hidden` so the inner `.search-topbar` panel-strip
-       sits flush with the rounded corners. */
-    background: var(--bg);
-    border: 0.5px solid var(--accent-line);
+    max-width: 640px;
+    max-height: calc(100vh - 112px);
+    display: flex;
+    flex-direction: column;
+    background: var(--panel-2);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+            backdrop-filter: blur(20px) saturate(160%);
+    border: 0.5px solid var(--line-bright);
     border-radius: 14px;
+    box-shadow:
+      0 24px 60px -20px rgba(0, 0, 0, 0.55),
+      0 6px 16px -8px rgba(0, 0, 0, 0.4);
     overflow: hidden;
-    transition:
-      border-color 0.18s,
-      max-width 0.22s ease,
-      margin 0.22s ease,
-      padding 0.22s ease;
-  }
-  .search-card:focus-within {
-    /* Default border is `--lime-dim` (subtle brand tint); focus lifts
-       to full `--lime` for a clear "active" register. */
-    border-color: var(--lime);
-  }
-  /* Topbar inside the search card · mirrors `.cmp-topbar` from the
-     new-room composer · brand-tinted `--strip-bg` fill with an
-     `--accent-line` bottom hairline. Hosts the old `.search-hero-sub`
-     hint line ("across every room · keyword · message body · room
-     name") so the card itself surfaces its scope instead of needing
-     a separate sub-headline above. Only present in is-initial — the
-     has-results state collapses it alongside the hero. */
-  .search-topbar {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 4px;
-    padding: 6px 14px;
-    background: var(--strip-bg);
-    border-bottom: 0.5px solid var(--accent-line);
-    min-height: 36px;
-  }
-  .search-topbar-hint {
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    /* Same baseline tonality as `.search-hero-sub` had outside the
-       card · text-faint mono micro-caps sit quietly above the input. */
+    pointer-events: auto;
   }
-  .search-page.has-results .search-topbar { display: none; }
-  .search-page.has-results .search-card {
+  .search-overlay-input-row {
     display: flex;
     align-items: center;
-    gap: 14px;
-    max-width: none;
-    /* No `margin-bottom` here · the 18px breathing room below
-       the head row moved INSIDE `.search-results` (via the
-       ::before pseudo down at line ~XXX). With it on the card,
-       that 18px lived OUTSIDE the scroll area and permanently
-       stole vertical real estate; the scroll content was
-       truncated 18px earlier than the visible band. Moving the
-       gap into the scroll content means it scrolls away
-       naturally as the user reads down. */
-    margin: 0;
-    padding-top: 12px;
-    padding-bottom: 14px;
-    /* The head row is now in a NON-scrolling top slot of
-       search-page (the page is fixed at main-view height; the
-       scroll lives inside `.search-results`). No `position:
-       sticky` needed — the card stays put because the surface
-       around it doesn't move. */
-    background: var(--panel);
-    border: none;
+    gap: 10px;
+    padding: 12px 12px 12px 16px;
+    border-bottom: 1px solid var(--line-bright);
     flex-shrink: 0;
-    z-index: 2;
-    /* Stacking context for the full-width ::after pseudo. */
-    position: relative;
-    isolation: isolate;
-  }
-  /* Full-width head band · ::after extends a panel-coloured
-     strip + 0.5px under-line from -100vmax to +100vmax past
-     the card's 920px box, clipped by main-view's overflow.
-     z-index: -1 keeps it behind the card's children (input /
-     chips / meta) inside the card's own stacking context. */
-  .search-page.has-results .search-card::after {
-    content: "";
-    position: absolute;
-    inset: 0 -100vmax;
-    background: var(--panel);
-    border-bottom: 0.5px solid var(--line);
-    z-index: -1;
-    pointer-events: none;
   }
-  .search-page.has-results .search-card:focus-within {
-    border-color: transparent;
-    border-bottom-color: var(--lime);
-  }
-
-  /* Input wrap · borderless inside the card in is-initial,
-     bordered pill in has-results. */
-  .search-input-wrap {
-    position: relative;
-    display: flex;
-    align-items: center;
+  .search-overlay-icon { color: var(--text-dim); flex-shrink: 0; }
+  .search-overlay-input {
     flex: 1;
     min-width: 0;
-    transition: border-color 0.18s, background 0.18s;
-  }
-  .search-page.is-initial .search-input-wrap {
-    background: transparent;
     border: none;
-    padding: 6px 4px 0;
-  }
-  .search-page.has-results .search-input-wrap {
-    background: var(--panel-2);
-    border: 0.5px solid var(--line);
-  }
-  .search-page.has-results .search-input-wrap:focus-within {
-    border-color: var(--lime);
-    background: var(--panel);
-  }
-  .search-input-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-faint);
-    flex-shrink: 0;
-    transition: width 0.22s ease, color 0.12s;
-  }
-  /* Hide the leading magnifier in BOTH states · the hero card
-     is its own affordance, and in has-results the input is
-     unmistakably a search field by context (sort chips +
-     result-count meta beside it). The icon was reading as
-     redundant chrome. */
-  .search-input-icon { display: none; }
-  .search-input-wrap:focus-within .search-input-icon { color: var(--lime); }
-  .search-input {
-    flex: 1;
-    min-width: 0;
+    outline: none;
     background: transparent;
-    border: none;
     color: var(--text);
     font-family: var(--font-human);
+    font-size: 15px;
+    line-height: 1.4;
     letter-spacing: -0.005em;
-    outline: none;
-    transition: padding 0.22s ease, font-size 0.22s ease;
-  }
-  .search-page.is-initial .search-input {
-    /* Type spec matches `.cmp-input` (14 px sans / line-height 1.55 /
-       -0.003em letter-spacing) and we reuse the same `14 px`
-       horizontal padding. No `min-height` here · an `<input>` always
-       vertical-centres its text content, so a forced 84 px height
-       (which works for the cmp's textarea where text top-aligns)
-       just leaves a tall band of empty space above the cursor. The
-       hero card's presence comes from the bottom toolbar + frame
-       padding, not from a stretched input. */
-    padding: 8px 14px 12px;
-    font-size: 14px;
-    line-height: 1.55;
-    letter-spacing: -0.003em;
+    padding: 4px 0;
   }
-  /* Defuse Chrome's autofill bg · when the browser remembers a
-     prior query, the input gets a pale yellow/gray autofill
-     surface that fights our intended black card. The giant
-     inset box-shadow trick paints the autofill area with our
-     own surface color so the input stays visually consistent
-     with the rest of the card whether autofill engaged or not. */
-  .search-input:-webkit-autofill,
-  .search-input:-webkit-autofill:hover,
-  .search-input:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
+  .search-overlay-input::placeholder { color: var(--text-dim); font-weight: 400; }
+  .search-overlay-input:-webkit-autofill,
+  .search-overlay-input:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset !important;
     -webkit-text-fill-color: var(--text) !important;
     caret-color: var(--text);
     transition: background-color 5000s ease-in-out 0s;
   }
-  .search-page.has-results .search-input {
-    /* Horizontal padding matches the new-room composer's `.cmp-input`
-       (14 px each side) so the text-to-input-box gutter reads the same
-       across the two surfaces. The earlier 6 px was visibly tighter
-       than the new-room textarea and made the head-row input feel
-       cramped against its panel-2 pill. */
-    padding: 9px 14px;
-    font-size: 13px;
-  }
-  .search-input::placeholder {
-    color: var(--text-faint);
-    font-style: normal;
-    font-weight: 400;
-  }
-  /* Override the OLDER `.search-input:focus` rule (line ~796)
-     from the sidebar's search-block · that rule sets
-     `background: var(--panel-2)` on focus, which turned our
-     hero input GRAY whenever the user clicked into it. Both
-     features share the class name `.search-input`, so an
-     unscoped focus rule there leaks here. Scoping under
-     `.search-page` raises specificity and pins the input
-     transparent on focus. */
-  .search-page .search-input:focus,
-  .search-page .search-input:focus-visible {
-    background: transparent;
-    border: none;
-    outline: none;
-  }
-  .search-input-clear {
-    background: transparent;
-    border: none;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      color 0.12s,
-      width 0.22s ease,
-      height 0.22s ease;
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .search-page.is-initial .search-input-clear {
-    width: 36px;
-    height: 36px;
-    font-size: 13px;
-    margin-right: 6px;
-  }
-  .search-page.has-results .search-input-clear {
-    width: 32px;
-    height: 32px;
-    font-size: 12px;
-  }
-  .search-input-clear:hover { color: var(--text); }
-  /* Hide the clear button when the input is empty (set by JS
-     via the .is-empty class on .search-card). Keeps the
-     hero's right edge clean when the user hasn't typed yet. */
-  .search-card.is-empty .search-input-clear { display: none; }
-
-  /* Internal toolbar · footer of the card in is-initial.
-     Mono hint on the left, lime send button on the right.
-     Hidden entirely in has-results (the card is collapsed
-     to a head row by then). */
-  /* `.search-input-toolbar` and its mono "keyword · message body ·
-     room name" hint were retired · the frosted card alone is the
-     affordance, no extra footer-bar needed. */
-  /* Starter chips · static suggestions below the card in
-     is-initial. Click → pre-fill the input + trigger search.
-     Hidden in has-results. */
-  .search-starters {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    margin: 20px auto 0;
-    max-width: 760px;
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    flex-wrap: wrap;
-  }
-  .search-page.has-results .search-starters { display: none; }
-  .search-starters-label { color: var(--text-faint); margin-right: 4px; }
-  .search-starter {
-    background: transparent;
-    border: 0.5px solid var(--line);
-    color: var(--text-soft);
-    font: inherit;
-    letter-spacing: inherit;
-    text-transform: inherit;
-    cursor: pointer;
-    padding: 5px 10px;
-    transition: color 0.12s, border-color 0.12s;
-  }
-  .search-starter:hover {
-    color: var(--lime);
-    border-color: var(--lime);
-  }
-
-  /* Result-count meta · sits beside the shrunk input in the
-     has-results head row. Hidden entirely in is-initial. */
-  .search-results-meta {
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-  .search-page.is-initial .search-results-meta { display: none; }
-
-  /* Sort chip group · "Newest" / "Oldest" toggle that re-sorts
-     the result list client-side (no re-fetch). Only visible in
-     has-results · the head row's flex layout slots it between
-     the input and the meta count. Active chip uses the lime
-     accent border + caps; inactives are line-faint until hover. */
-  .search-results-sort {
-    display: none;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-  }
-  .search-page.has-results .search-results-sort {
-    display: inline-flex;
-  }
-  .search-results-sort .srs-label {
-    color: var(--text-faint);
-    margin-right: 4px;
-  }
-  .search-results-sort button {
-    background: transparent;
-    border: 0.5px solid var(--line);
-    color: var(--text-faint);
-    font: inherit;
-    letter-spacing: inherit;
-    text-transform: inherit;
-    padding: 5px 9px;
-    cursor: pointer;
-    transition: color 0.12s, border-color 0.12s;
-  }
-  .search-results-sort button:hover {
-    color: var(--text-soft);
-    border-color: var(--text-faint);
-  }
-  .search-results-sort button.active {
-    color: var(--lime);
-    border-color: var(--lime);
-  }
-  .search-results-sort button.active:hover {
-    color: var(--lime);
-    border-color: var(--lime);
+  .search-overlay-close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-dim);
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    transition: color 0.12s, background 0.12s;
+    flex-shrink: 0;
   }
-
-  /* Results · only visible in has-results. Top padding gives a
-     small breathing room below the head row's hairline. */
-  .search-results {
-    padding-top: 4px;
+  .search-overlay-close-btn:hover {
+    color: var(--text);
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
   }
-  .search-page.is-initial .search-results { display: none; }
-  /* Inner scroll container · in has-results, `.search-results`
-     owns the vertical scroll instead of `.main-view`. The
-     search-page itself is sized to exactly main-view height,
-     so the head row (`.search-card`) sits in a non-scrolling
-     top slot and stays there permanently. */
-  .search-page.has-results .search-results {
+  .search-overlay-body {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding-bottom: 40px;
     scrollbar-width: thin;
   }
-  /* Initial breathing-room spacer · 18px tall block that sits
-     INSIDE the scroll content (before the result list). On
-     first render it gives the user the same gap below the
-     head row that a `margin-bottom: 18px` would; once they
-     start scrolling, this spacer scrolls away with the rest
-     of the list (it's part of the scrollable content), so it
-     doesn't permanently consume visible scroll real estate
-     the way an outside-the-scroll margin did. */
-  .search-page.has-results .search-results::before {
-    content: "";
-    display: block;
-    height: 18px;
-  }
-  .search-page.has-results .search-results::-webkit-scrollbar { width: 8px; }
-  .search-page.has-results .search-results::-webkit-scrollbar-thumb { background: transparent; }
-  .search-page.has-results .search-results::-webkit-scrollbar-track { background: transparent; }
-  .search-page.has-results .search-results:hover::-webkit-scrollbar-thumb { background: var(--line-bright); }
-
-  /* Google-style result row · 3 stacked text lines (mono
-     source breadcrumb · sans link title · sans snippet body).
-     No row hover background, no per-row border — only the
-     title line lights up on hover so the row reads calm. */
-  .search-results-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .search-results-list > li {
-    margin-bottom: 22px;
+  .search-overlay-body::-webkit-scrollbar { width: 8px; }
+  .search-overlay-body::-webkit-scrollbar-thumb { background: transparent; }
+  .search-overlay-body::-webkit-scrollbar-track { background: transparent; }
+  .search-overlay-body:hover::-webkit-scrollbar-thumb { background: var(--line-bright); }
+  .search-overlay-empty {
+    padding: 56px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    color: var(--text-dim);
   }
-  .search-results-list > li:last-child { margin-bottom: 0; }
-  .sr-row {
-    display: block;
-    text-decoration: none;
-    color: inherit;
+  .search-overlay-empty-icon { color: var(--text-dim); margin-bottom: 18px; }
+  .search-overlay-empty-text {
+    font-family: var(--font-human);
+    font-size: 14px;
+    color: var(--text-soft);
+    margin-bottom: 6px;
+    letter-spacing: -0.003em;
   }
-  .sr-source {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
+  .search-overlay-empty-hint {
     font-family: var(--mono);
     font-size: 10px;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.14em;
     text-transform: uppercase;
-    color: var(--text-faint);
-    margin-bottom: 4px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    color: var(--text-dim);
   }
-  .sr-source-author {
-    color: var(--text-soft);
-    font-weight: 600;
+  .search-overlay-list { list-style: none; margin: 0; padding: 6px 0; }
+  .search-overlay-list > li { margin: 0; }
+  .so-row {
+    display: grid;
+    grid-template-columns: 20px 1fr auto;
+    column-gap: 12px;
+    row-gap: 2px;
+    align-items: center;
+    padding: 8px 16px;
+    text-decoration: none;
+    color: inherit;
+    transition: background 0.08s;
+    cursor: pointer;
   }
-  .sr-source-sep {
-    color: var(--text-faint);
-    margin: 0 2px;
+  .so-row:hover,
+  .so-row:focus-visible {
+    background: var(--surface-hover, rgba(255, 255, 255, 0.04));
+    outline: none;
   }
-  .sr-source-time {
-    color: var(--text-faint);
+  .so-row-icon {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    color: var(--text-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: start;
+    margin-top: 1px;
   }
-  .sr-title {
+  .so-row-title {
+    grid-column: 2;
+    grid-row: 1;
     font-family: var(--font-human);
-    font-size: 17px;
-    font-weight: 500;
-    line-height: 1.3;
+    font-size: 14px;
+    line-height: 1.35;
     color: var(--text);
-    margin: 0 0 4px 0;
-    letter-spacing: -0.005em;
-    transition: color 0.12s;
+    font-weight: 500;
+    letter-spacing: -0.003em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .sr-row:hover .sr-title { color: var(--lime); }
-  .sr-snippet {
+  .so-row-meta {
+    grid-column: 3;
+    grid-row: 1;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .so-row-snippet {
+    grid-column: 2 / 4;
+    grid-row: 2;
     font-family: var(--font-human);
-    font-size: 13px;
-    line-height: 1.55;
+    font-size: 12px;
+    line-height: 1.45;
     color: var(--text-soft);
-    word-break: break-word;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  .sr-snippet mark {
-    background: var(--lime);
-    color: var(--bg, #0c0c0c);
-    padding: 0 2px;
-    border-radius: 2px;
+  .so-row-snippet mark {
+    background: transparent;
+    color: var(--lime);
     font-weight: 600;
+    padding: 0;
+    border-radius: 0;
   }
-
-  /* Empty / hint card · only ever rendered inside .search-results
-     so it's tied to the has-results state. Centered block, calm
-     copy. */
-  .search-empty {
-    padding: 40px 0;
-    text-align: center;
-    color: var(--text-faint);
-  }
-  .search-empty-kicker {
+  .search-overlay-status { padding: 40px 16px; text-align: center; color: var(--text-dim); }
+  .search-overlay-status-kicker {
     display: block;
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--lime);
-    margin-bottom: 8px;
+    margin-bottom: 6px;
   }
-  .search-empty-msg {
+  .search-overlay-status-msg {
     font-family: var(--font-human);
-    font-size: 14px;
+    font-size: 13px;
     color: var(--text-soft);
     line-height: 1.5;
-    max-width: 520px;
+    max-width: 360px;
     margin: 0 auto;
   }
-
-  /* Reduced-motion · snap state changes, no transitions. */
   @media (prefers-reduced-motion: reduce) {
-    .search-hero,
-    .search-card,
-    .search-input,
-    .search-input-icon,
-    .search-input-clear,
-    .sr-title { transition: none; }
+    .so-row { transition: none; }
+    .search-overlay-scrim,
+    .search-overlay-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
   }
 
   /* Search-result jump · in-place keyword pulse + article outline.
@@ -4159,15 +3895,6 @@
       -webkit-backdrop-filter: none;
     }
   }
-  /* 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
@@ -6186,15 +5913,15 @@
 
   .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. */
+       margin auto) AND mirror `.session-analytics` chrome · same
+       panel-2 surface, same --line-bright hairline, same banner-body
+       split (head = panel-3 strip with mono kicker, list = body
+       block with its own padding). No container-level padding ·
+       inner elements own it. */
     max-width: 760px;
     margin: 24px auto 0;
-    padding: 14px 16px;
     background: var(--panel-2);
-    border: 0.5px solid var(--line);
-    font-family: var(--mono);
+    border: 0.5px solid var(--line-bright);
   }
 
   /* ─── Session analytics card · post-adjourn summary ───
@@ -6335,21 +6062,27 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 1px;
+    gap: 0;
   }
+  /* All columns `auto` (previously `10px 1fr auto auto`) so swatch +
+     name + pct + tokens cluster on the left rather than `1fr` on the
+     name column stretching short labels and shoving the numbers to
+     the far right of the legend. min-width on pct + tokens keeps the
+     numeric columns roughly aligned across rows so the eye can still
+     scan vertically. */
   .sa-legend-row {
     display: grid;
-    grid-template-columns: 10px 1fr auto auto;
-    align-items: baseline;
-    gap: 8px;
+    grid-template-columns: 8px auto auto auto;
+    align-items: center;
+    gap: 6px;
     font-family: var(--mono);
     font-size: 10px;
+    line-height: 1.35;
     color: var(--text-soft);
   }
   .sa-legend-swatch {
     width: 8px;
     height: 8px;
-    align-self: center;
     border-radius: 0;
   }
   .sa-legend-name {
@@ -6360,12 +6093,13 @@
     color: var(--text-soft);
     font-variant-numeric: tabular-nums;
     text-align: right;
+    min-width: 30px;
   }
   .sa-legend-tokens {
     color: var(--text-faint);
     font-variant-numeric: tabular-nums;
     text-align: right;
-    min-width: 44px;
+    min-width: 40px;
   }
 
   /* What you valued · chips for counts + list of ▲-voted points.
@@ -6449,15 +6183,26 @@
     color: var(--text-faint);
     letter-spacing: 0.04em;
   }
+  /* Banner head · matches `.sa-banner` shape (panel-3 strip with mono
+     kicker, hairline divider beneath). The text-only label slots in
+     where `.sa-banner-tag` would sit in the analytics card. */
   .followup-children-head {
+    padding: 5px 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-family: var(--mono);
     font-size: 10px;
-    color: var(--text-soft);
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
     font-weight: 700;
-    margin-bottom: 10px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--lime);
+    background: var(--panel-3);
+    border-bottom: 0.5px solid var(--line);
   }
+  /* Body block · matches `.sa-body` padding. */
   .followup-children-list {
+    padding: 12px 14px 14px;
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -6627,6 +6372,14 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
+    /* Chat scroller is on `--panel` — same surface as the sidebar,
+       so the message stream reads as a flat continuous canvas
+       (vs `.chat-col` which sits at `--panel-2` underneath as a
+       lifted frame the chat sits on top of). The lifted `--panel-2`
+       shows through wherever `.chat` doesn't paint (cmp starter
+       panel, gutters when chat is hidden), giving the column a
+       subtle warm border that the message stream itself doesn't
+       inherit. */
     background: var(--panel);
     /* Top padding · clears the frosted-glass `.room-head` (which is
        now absolutely positioned, ~56px tall). Without this, the first
@@ -6643,7 +6396,7 @@
        common case (textarea + one strip); tall textarea +
        multiple strips can still cover the bottom message, the
        user scrolls a touch — acceptable. */
-    padding: calc(14px + var(--room-head-h, 56px)) 20px 140px;
+    padding: calc(14px + var(--room-head-h, 56px)) 50px 140px 40px;
     transition: opacity 0.18s ease-out;
   }
   /* Note-jump loading state · the user clicked a note in the All
@@ -7810,6 +7563,42 @@
   .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; }
+  /* Karaoke-style TTS sentence highlight · when voice replay reads a
+     message aloud, app.js wraps each sentence in a `.tts-sentence`
+     span and adds `.is-current` to whichever one matches the audio
+     cursor (currentTime / duration → character offset → sentence
+     index). The wrap survives across messages and is harmless without
+     `.is-current`. Highlight uses the theme accent so the user can
+     scan back to "where it's reading" without re-reading the whole
+     bubble. Smooth color transition · feels like a soft sweep
+     instead of a strobing chip when the cursor advances. */
+  .msg-bubble .tts-sentence,
+  .cd-body .tts-sentence,
+  .ci-body .tts-sentence {
+    transition: color 0.18s ease, background 0.18s ease;
+    border-radius: 2px;
+  }
+  .msg-bubble .tts-sentence.is-current,
+  .cd-body .tts-sentence.is-current,
+  .ci-body .tts-sentence.is-current {
+    color: var(--lime);
+    background: color-mix(in srgb, var(--lime) 12%, transparent);
+    /* Keep the highlight readable when the sentence wraps across
+       multiple lines · `box-decoration-break: clone` paints the
+       background on each line fragment instead of one giant box. */
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+  }
+  /* Keep <em> inside the current sentence visually consistent with
+     the surrounding highlight (otherwise the `em { color: var(--lime) }`
+     above + the wrapper's lime tint blend into one undifferentiated
+     accent and the italic emphasis loses signal). Subtle weight bump
+     instead. */
+  .msg-bubble .tts-sentence.is-current em,
+  .cd-body .tts-sentence.is-current em,
+  .ci-body .tts-sentence.is-current em {
+    font-weight: 600;
+  }
   /* 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
@@ -7893,9 +7682,6 @@
      (--font-agent) so the visual continuity reads as "another voice in
      the room". Only the name color + avatar border distinguish them. */
   .msg.chair .msg-name { color: var(--cyan, #6A9B97); }
-  .msg.chair .msg-av {
-    border: 0.5px solid var(--cyan, #6A9B97);
-  }
   /* Settings-change pings stay deliberately small — they're a status
      line, not a turn. */
   .msg.chair.kind-settings .msg-bubble {
@@ -9012,6 +8798,25 @@
   .rt-avatar[data-agent]:hover {
     filter: brightness(1.18);
   }
+  /* Speaking squash-blink · the avatar's eyes are baked into the
+     sprite (img / inline pixel-SVG), so a quick vertical scaleY
+     squash is the cheapest "blink while talking" cue. Only the
+     speaking seat animates; the dip is brief + shallow so it reads
+     as a blink, not a bounce. transform keeps the static
+     translateX(-50%) so the sprite stays centered on the chair. */
+  .rt-seat-speaking .rt-avatar {
+    transform-origin: center 45%;
+    animation: rt-blink-squash 4.2s ease-in-out infinite;
+  }
+  @keyframes rt-blink-squash {
+    0%, 88%, 100% { transform: translateX(-50%) scaleY(1); }
+    92%           { transform: translateX(-50%) scaleY(0.88); }
+    96%           { transform: translateX(-50%) scaleY(1); }
+  }
+  /* Respect reduced-motion · hold the avatar at full height. */
+  @media (prefers-reduced-motion: reduce) {
+    .rt-seat-speaking .rt-avatar { animation: none; }
+  }
 
   /* Name plate · small mono caption ABOVE the avatar (was below,
      but back-row director seats had their names land on the table
@@ -11599,94 +11404,6 @@
     margin: 0 auto;
     padding: 32px 32px;
     width: 100%;
-    /* `isolation: isolate` creates a stacking context here WITHOUT
-       making cmp the containing block for absolute descendants.
-       Result: `.cmp-bg-deco` belongs to cmp's stacking context
-       (so `z-index: -1` puts it just below cmp's static content
-       but ABOVE the lower-layer chat / chat-col panel bgs), while
-       its SPATIAL containing block is `.chat-col` (positioned
-       above) — so the deco can span the full chat-col width
-       without being constrained to cmp's 760px. The two-axis
-       split is what makes the Search-page-style backdrop work
-       inside a max-width-narrower section. */
-    isolation: isolate;
-  }
-  /* 8-bit ambient backdrop · pinned at the top of the composer.
-     Same visual language + position as `.search-bg-deco`. The
-     backdrop ESCAPES `.cmp`'s max-width (760px) so it spans the
-     full main-view width — same `left: 50%; margin-left: -50vw;
-     width: 100vw` pattern the Search page uses. `.main-view`'s
-     own `overflow: hidden` clips it to the visible content area,
-     so "full width" resolves to the room-content rect (sidebar
-     not included). Scene-tuned SVG content is injected by
-     `composerBgDecoSvg(scene)` in app.js · room mode draws a
-     mini boardroom (table + chairs), agent mode draws a row of
-     pixel character heads + speech bubble. */
-  .cmp-bg-deco {
-    /* Containing block is `.chat-col` (set position: relative above)
-       so `top/left/right: 0` snap to the FULL CHAT COLUMN — exactly
-       the right-pane width the user wants. No `100vw` escape · the
-       previous viewport-relative width spilled behind the sidebar
-       because the sidebar lives OUTSIDE this main-view's overflow
-       clip, so the deco rendered under it. Anchoring to `.chat-col`
-       gets us the right pane's actual content rect and nothing
-       beyond it. */
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    pointer-events: none;
-    z-index: -1;
-    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
-            mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
-    /* Opacity tuned down from 0.85 — the field of small pixel motifs
-       read as "fragmented dirt" especially in light, where white bg
-       amplifies every dot's contrast. Light gets an extra step down. */
-    opacity: 0.6;
-  }
-  :root[data-theme="light"] .cmp-bg-deco { opacity: 0.4; }
-  .cmp-bg-deco svg { display: block; width: 100%; height: 100%; }
-  /* 8-bit deco animations · keep subtle so the field reads as
-     "alive" rather than "demanding attention". All animations are
-     opacity / quantised transforms so the pixel-art register
-     holds (no smooth tweens). Each element gets an inline
-     `animation-delay` from the SVG generator so siblings don't
-     pulse in lockstep — the field shimmers organically. */
-  @keyframes deco-twinkle {
-    0%, 100% { opacity: 1; }
-    50%      { opacity: 0.35; }
-  }
-  @keyframes deco-shine {
-    0%, 100% { opacity: 1; }
-    50%      { opacity: 0.55; }
-  }
-  @keyframes deco-spark {
-    0%, 100% { opacity: 1;   transform: scale(1);   }
-    50%      { opacity: 0.4; transform: scale(0.7); }
-  }
-  @keyframes deco-bob {
-    0%, 100% { transform: translateY(0); }
-    50%      { transform: translateY(-1.5px); }
-  }
-  @keyframes deco-blink {
-    0%, 70%, 100% { opacity: 1; }
-    80%, 92%      { opacity: 0.15; }
-  }
-  .cmp-bg-deco .deco-twinkle { animation: deco-twinkle 4.5s ease-in-out infinite; }
-  .cmp-bg-deco .deco-shine   { animation: deco-shine   3.2s ease-in-out infinite; }
-  .cmp-bg-deco .deco-spark   { animation: deco-spark   2.4s ease-in-out infinite;
-                                transform-box: fill-box; transform-origin: center; }
-  .cmp-bg-deco .deco-bob     { animation: deco-bob     3.0s ease-in-out infinite;
-                                transform-box: fill-box; transform-origin: center; }
-  .cmp-bg-deco .deco-blink   { animation: deco-blink   4.0s ease-in-out infinite; }
-  /* Reduced-motion · stop animation but keep the deco visible. */
-  @media (prefers-reduced-motion: reduce) {
-    .cmp-bg-deco .deco-twinkle,
-    .cmp-bg-deco .deco-shine,
-    .cmp-bg-deco .deco-spark,
-    .cmp-bg-deco .deco-bob,
-    .cmp-bg-deco .deco-blink { animation: none; }
   }
   /* Default composer mode (content fits viewport).
      Toggled by JS via `.chat--composer` (added in
@@ -12588,7 +12305,7 @@
   }
 
   /* ─── Celebrity seed cards · new-agent composer "hire a known
-     mind" rail. Replaces the older AGENT_STARTERS_EN list. Six
+     mind" rail. Replaces the older AGENT_STARTERS_EN list. Four
      portrait-style cards in a 2-col grid, each a one-click preset
      for the full-mode persona builder.
 
@@ -14650,6 +14367,70 @@
     font-size: 10px;
     color: var(--text-faint);
   }
+  /* ─── Cast-edit popover (room header "Add director" button) ───
+     Extends `.composer-pick-pop` with an explicit footer carrying
+     Cancel / Confirm so the membership change is intentional. The
+     list rows reuse `.composer-pick-row` styling — identical visual
+     register to the new-room composer's director picker so the user
+     reads it as the same primitive. */
+  .cast-edit-pop {
+    position: fixed;
+    z-index: 9001;
+    width: 340px;
+    max-width: calc(100vw - 32px);
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--panel);
+    border: 0.5px solid var(--line-strong);
+  }
+  .cast-edit-pop .composer-pick-list {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .cast-edit-foot {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-top: 0.5px solid var(--line);
+    background: var(--panel-2);
+  }
+  .cast-edit-floor-msg {
+    flex: 1;
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: 0.06em;
+    color: var(--amber, #B59560);
+    visibility: hidden;
+  }
+  .cast-edit-floor-msg.is-visible { visibility: visible; }
+  .cast-edit-btn {
+    appearance: none;
+    background: transparent;
+    border: 0.5px solid var(--line-bright);
+    color: var(--text);
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    padding: 5px 12px;
+    cursor: pointer;
+    transition: color 0.12s, border-color 0.12s, background 0.12s;
+  }
+  .cast-edit-btn:hover { color: var(--lime); border-color: var(--lime); }
+  .cast-edit-btn.is-primary {
+    color: var(--lime);
+    border-color: var(--lime);
+  }
+  .cast-edit-btn.is-primary:hover { background: var(--lime-dim, transparent); }
+  .cast-edit-btn:disabled {
+    color: var(--text-dim);
+    border-color: var(--line);
+    cursor: not-allowed;
+  }
+  .cast-edit-btn:disabled:hover { background: transparent; }
   /* ─── 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
@@ -15144,24 +14925,21 @@
        `margin: 0 14px` so the gutters match the live-chat layout. */
   }
 
-  /* Chat column wraps the message stream + input bar. */
+  /* Chat column wraps the message stream + input bar. Surface is
+     `--panel-2` — one step warmer than the sidebar's `--panel` —
+     so the content reads as a lifted stage against the sidebar
+     chrome. Sat at `--panel-3` previously which read too pale.
+     #07 gray-step from sidebar is subtle but intentional; floating
+     chrome above the chat (`.input-bar`, `.room-head`,
+     `.speaking-queue` trio) keeps its own frosted-glass treatment,
+     so it still differentiates from the lifted base. */
   .chat-col {
     display: flex;
     flex-direction: column;
     min-height: 0;
     overflow: hidden;
-    background: var(--panel);
+    background: var(--panel-2);
     height: 100%;
-    /* `position: relative` makes chat-col the CONTAINING BLOCK
-       for `.cmp-bg-deco` (positioned absolute) so the deco's
-       `left/right: 0` snap to the full chat-col width. NOTE: no
-       `isolation` here · we DON'T want chat-col to also be the
-       stacking context. The deco's `z-index: -1` is meant to
-       paint within `.cmp`'s isolated stacking context (which sits
-       on top of chat / chat-col bgs), not get trapped below
-       chat-col's own panel bg. Splitting the two roles lets the
-       deco stretch wide while still rendering above the chat
-       panel — see `.cmp` + `.cmp-bg-deco` below. */
     position: relative;
   }
 
@@ -16293,6 +16071,45 @@
     <!-- Resizable handle: sidebar | main -->
     <div class="col-resizer" data-resize data-var="--sidebar-w" data-side="left" data-min="220" data-max="480" data-i18n-title="col_resize"></div>
 
+    <!-- ─── Mini (collapsed) sidebar · ChatGPT-style icon rail ───
+         Shown ONLY while body.sidebar-collapsed (the full .sidebar is
+         display:none then). Source order matters: it sits between the
+         (hidden) resizer and <main> so grid auto-placement drops it in
+         column 1 and main in column 2 when collapsed.
+         Icon order: logo (→ expand), new room, new agent, search,
+         reports, notes, divider, rooms (→ expand+tab), agents
+         (→ expand+tab). Foot: user avatar (→ settings). New room /
+         agent / search / reports / notes keep the room collapsed (they
+         reuse the same document-delegated data-* triggers the full
+         sidebar uses); only the logo + rooms + agents expand. -->
+    <aside class="mini-sidebar" aria-label="Collapsed sidebar navigation">
+      <div class="mini-top">
+        <button type="button" class="mini-btn mini-logo" data-sidebar-expand data-i18n-tip="sidebar_expand" data-tip="Expand sidebar" aria-label="Expand sidebar">
+          <span class="mini-logo-av">
+            <img class="cl-open" src="/avatars/chair.svg" alt="" aria-hidden="true">
+            <img class="cl-blink" src="/avatars/chair-blink.svg" alt="" aria-hidden="true">
+          </span>
+        </button>
+        <button type="button" class="mini-btn mini-new-room" data-convene-trigger data-i18n-tip="sidebar_new_room" data-tip="New room" aria-label="New room"></button>
+        <button type="button" class="mini-btn mini-new-agent" data-agent-composer-trigger data-i18n-tip="sidebar_new_agent" data-tip="New agent" aria-label="New agent"></button>
+        <button type="button" class="mini-btn mini-search" data-search-trigger data-tip="Search" aria-label="Search"></button>
+        <button type="button" class="mini-btn mini-reports" data-reports-trigger data-i18n-tip="sidebar_all_reports" data-tip="Reports" aria-label="All Reports"></button>
+        <button type="button" class="mini-btn mini-notes" data-notes-trigger data-i18n-tip="sidebar_all_notes" data-tip="Notes" aria-label="All Notes"></button>
+        <span class="mini-sep" aria-hidden="true"></span>
+        <button type="button" class="mini-btn mini-tab" data-mini-tab="rooms" data-i18n-tip="sidebar_tab_rooms" data-tip="Rooms" aria-label="Rooms">
+          <i class="ic ic-rooms"></i>
+        </button>
+        <button type="button" class="mini-btn mini-tab" data-mini-tab="agents" data-i18n-tip="sidebar_tab_agents" data-tip="Agents" aria-label="Agents">
+          <i class="ic ic-agents"></i>
+        </button>
+      </div>
+      <div class="mini-foot">
+        <a href="#" class="mini-btn mini-user" data-user-settings-trigger data-i18n-tip="settings_title" data-tip="Settings" aria-label="Settings">
+          <div class="user-av mini-user-av" data-user-avatar>K</div>
+        </a>
+      </div>
+    </aside>
+
     <!-- ═══════════════ MAIN: room view + agent profile view ═══════════════ -->
     <main class="main">
 
@@ -16724,15 +16541,69 @@
         <div class="notes-page" data-notes-page></div>
       </div>
 
-      <!-- Search view · cross-room keyword search results.
-           Filled by app.renderSearchPage() on demand. -->
-      <div class="main-view" data-main-view="search" hidden>
-        <div class="search-page" data-search-page></div>
-      </div>
-
-
     </main>
 
+    <!-- Search overlay · floating command-palette-style search.
+         Triggered by `[data-search-trigger]` (sidebar nav) and Cmd+K /
+         Ctrl+K globally. Replaces the old `.main-view[data-main-view=
+         "search"]` page — current room / agent / etc. stay mounted
+         underneath; the overlay layers on top with a scrim. Result row
+         hrefs (`#/r/{roomId}?m={msgId}&q={q}`) reuse the hash-router
+         navigation that the old search page used, so click behavior is
+         unchanged. Esc / scrim-click / X close. -->
+    <div class="search-overlay" data-search-overlay hidden aria-hidden="true">
+      <div class="search-overlay-scrim" data-search-overlay-close></div>
+      <div class="search-overlay-card" role="dialog" aria-modal="true" aria-labelledby="search-overlay-input">
+        <div class="search-overlay-input-row">
+          <svg class="search-overlay-icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+            <circle cx="11" cy="11" r="7"/>
+            <line x1="20" y1="20" x2="16.5" y2="16.5"/>
+          </svg>
+          <input
+            id="search-overlay-input"
+            type="text"
+            class="search-overlay-input"
+            data-search-input
+            data-i18n-placeholder="search_overlay_placeholder"
+            placeholder="Search rooms and messages"
+            autocomplete="off"
+            spellcheck="false"
+          />
+          <button
+            type="button"
+            class="search-overlay-close-btn"
+            data-search-overlay-close
+            data-i18n-aria="search_overlay_close"
+            data-i18n-title="search_overlay_close"
+            aria-label="Close"
+            title="Close"
+          >
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+        <div class="search-overlay-body" data-search-results>
+          <!-- Empty state · shown when the query is blank. `runSearch("")`
+               restores this exact HTML; `runSearch("query")` replaces it
+               first with a "searching…" placeholder, then with the
+               `<ul class="search-overlay-list">` of result rows. -->
+          <div class="search-overlay-empty">
+            <svg class="search-overlay-empty-icon" viewBox="0 0 64 64" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <circle cx="27" cy="27" r="17"/>
+              <line x1="50" y1="50" x2="39" y2="39"/>
+              <line x1="21" y1="27" x2="33" y2="27" opacity="0.45"/>
+              <line x1="21" y1="22" x2="28" y2="22" opacity="0.3"/>
+              <line x1="21" y1="32" x2="30" y2="32" opacity="0.3"/>
+            </svg>
+            <div class="search-overlay-empty-text" data-i18n="search_overlay_empty_title">Search across rooms and messages</div>
+            <div class="search-overlay-empty-hint" data-i18n="search_overlay_empty_hint">Type to filter live · click a result to jump</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 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
@@ -16881,6 +16752,21 @@
         clearSidebarPeek();
         return;
       }
+      // Mini-rail rooms / agents · expand the full sidebar. The tab
+      // switch + first-room/agent default is owned by the sidebar-tab
+      // IIFE's click handler (it has ROOMS_KEY / appFirstRoomId /
+      // activate in scope — they're NOT visible here). Both handlers
+      // fire on the same click: this one expands, that one navigates.
+      // The other mini buttons (new room / agent / search / reports /
+      // notes) deliberately do NOT expand — they fire their own
+      // document-delegated triggers and the rail stays collapsed.
+      if (e.target.closest("[data-mini-tab]")) {
+        e.preventDefault();
+        applySidebarCollapsed(false);
+        writeSidebarCollapsed(false);
+        clearSidebarPeek();
+        return;
+      }
     });
 
     // ─── Sidebar edge-peek · Arc-browser style ───
@@ -16930,6 +16816,10 @@
       // miss `.sidebar` during the open animation. Immediate close on
       // exit is handled by the in→out transition branch below, which
       // bypasses this lock.
+      // The floated full sidebar is opaque (--sidebar-bg) at 280px and
+      // pins to left:0, so it cleanly covers the 56px mini rail while
+      // peeked — hovering the left edge reveals the full sidebar, and
+      // moving off it drops back to the rail.
       setPeek(true);
       peekLockedUntil = Date.now() + PEEK_OPEN_LOCK_MS;
     }
@@ -17186,17 +17076,6 @@
         }
         return;
       }
-      // "search" → cross-room keyword search view. Restores on
-      // refresh same as reports / notes — without this branch
-      // the saved token fell through to the roomId resolver,
-      // failed `appRoomExists("search")`, and bounced the user
-      // back to the new-room composer.
-      if (sub === "search") {
-        if (window.app && typeof window.app.openSearch === "function") {
-          window.app.openSearch();
-        }
-        return;
-      }
       if (!sub || sub === "new") {
         if (window.app && typeof window.app.setComposerMode === "function") {
           window.app.setComposerMode("room");
@@ -17299,9 +17178,9 @@
         // when there's no saved sub-state at all.
         const saved = lsGet(ROOMS_KEY);
         let target;
-        if (saved && saved !== "new" && saved !== "reports" && saved !== "notes" && saved !== "search") {
+        if (saved && saved !== "new" && saved !== "reports" && saved !== "notes") {
           target = saved; // explicit room id
-        } else if (saved === "reports" || saved === "notes" || saved === "new" || saved === "search") {
+        } else if (saved === "reports" || saved === "notes" || saved === "new") {
           target = saved; // explicit destination preserved on any nav
         } else if (fromTabClick) {
           // No saved sub-state · fresh user clicking the tab. Prefer
@@ -17356,6 +17235,34 @@
        tracker. These don't conflict with stopPropagation because they
        match elements that no other capture handler swallows. */
     document.addEventListener("click", (e) => {
+      // Mini-rail rooms / agents switcher · expand is handled by the
+      // collapse IIFE; here we own the tab switch + default selection.
+      // Seed the FIRST room / agent when coming from a non-room /
+      // non-agent context (reports, notes, composer, the other tab) so
+      // the icon actually lands you on content instead of restoring the
+      // last sub-state (e.g. "new" / "reports"). If you're already
+      // viewing a room / agent profile, leave it so expand keeps place.
+      const miniTab = e.target.closest("[data-mini-tab]");
+      if (miniTab) {
+        e.preventDefault();
+        const which = miniTab.getAttribute("data-mini-tab");
+        if (which === "rooms") {
+          if (!window.app || !window.app.currentRoomId) {
+            const first = appFirstRoomId();
+            if (first) lsSet(ROOMS_KEY, first);
+          }
+        } else if (which === "agents") {
+          const agentView = document.querySelector('[data-main-view="agent"]');
+          const inAgentProfile = agentView && !agentView.hasAttribute("hidden");
+          if (!inAgentProfile) {
+            const firstAgent = document.querySelector('[data-sidebar-panel="agents"] .agent-row[data-agent-profile]');
+            const id = firstAgent && firstAgent.getAttribute("data-agent-profile");
+            if (id) lsSet(AGENTS_KEY, id);
+          }
+        }
+        activate(which, { fromTabClick: true });
+        return;
+      }
       // Tab click
       const tab = e.target.closest(".sidebar-tab[data-sidebar-tab]");
       if (tab) {
@@ -17391,11 +17298,12 @@
         }
         return;
       }
-      // "Search" trigger · cross-room keyword search view.
+      // "Search" trigger · floating search overlay. No `lsSet`
+      // persistence — the overlay is a transient lens, not a
+      // sub-state worth restoring across reloads.
       const searchBtn = e.target.closest("[data-search-trigger]");
       if (searchBtn) {
         e.preventDefault();
-        lsSet(ROOMS_KEY, "search");
         if (window.app && typeof window.app.openSearch === "function") {
           window.app.openSearch();
         }