editor: friendlier panels - collapsible rail, remembered state, no more overlap

Rail sections (Outline/Blocks/Nodes) collapse via their headers like
Experiments already did, so long pages stay navigable. Rail open state
and section toggles persist in localStorage across reloads (the QA
preview flow reloads constantly). The assistant panel shifts left while
the dev panel is open instead of stacking exactly underneath it, and
the rail/dev/assistant widths cap at the viewport on small screens.

Tests: rail-sections harness (collapse, reload persistence, shifted
assistant); harness boots with a fresh profile unless keepStorage is
passed; in-memory localStorage shim for the origin-less jsdom.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

src/ui/styles.css

@@ -67,7 +67,7 @@ button:disabled { opacity: .35; cursor: default; }
 .cms-outline__type { font-weight: 600; }
 .cms-outline__text { color: #8b8fa0; overflow: hidden; text-overflow: ellipsis; }
 
-.cms-dev { right: 12px; top: 12px; bottom: 70px; width: 420px; display: flex; flex-direction: column; overflow: hidden; }
+.cms-dev { right: 12px; top: 12px; bottom: 70px; width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; }
 .cms-dev header { justify-content: flex-start; gap: 4px; }
 .cms-dev header button:not(.cms-ico) { background: none; border: 0; padding: 4px 10px; border-radius: 6px; text-transform: capitalize; }
 .cms-dev header button.is-on { background: #2b3350; }
@@ -226,7 +226,7 @@ input.cms-map__key { padding-top: 6px; }
 .cms-attrchip:hover { background: #1f3a2e; }
 
 /* left panel: outline + blocks + nodes, one scroll (no tabs) */
-.cms-rail { pointer-events: auto; position: fixed; z-index: 2147483001; left: 12px; top: 12px; bottom: 76px; width: 320px; display: flex; flex-direction: column; overflow: hidden; background: var(--cms-panel); border: 1px solid var(--cms-line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
+.cms-rail { pointer-events: auto; position: fixed; z-index: 2147483001; left: 12px; top: 12px; bottom: 76px; width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; background: var(--cms-panel); border: 1px solid var(--cms-line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
 .cms-rail > header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--cms-line); font-weight: 600; }
 .cms-rail__title { display: inline-flex; align-items: center; gap: 8px; }
 .cms-rail__body { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 12px; }
@@ -324,7 +324,10 @@ details[open] > summary > .cms-chev { transform: rotate(90deg); }
 .cms-ai__actions { display: flex; justify-content: flex-end; gap: 8px; }
 
 /* AI assistant panel */
-.cms-assistant { right: 12px; top: 12px; bottom: 70px; width: 380px; display: flex; flex-direction: column; overflow: hidden; }
+.cms-assistant { right: 12px; top: 12px; bottom: 70px; width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; }
+/* dev and assistant share the right edge: sit side by side instead of stacking */
+.cms-assistant--shifted { right: 444px; }
+@media (max-width: 900px) { .cms-assistant--shifted { right: 12px; } }
 .cms-assistant > header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--cms-line, #2a2d3a); font-weight: 600; }
 .cms-chat { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
 .cms-msg { max-width: 92%; padding: 6px 10px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; background: #1d2029; }