feat(ui): collapsible sidebar + rail, off-canvas mobile drawers, responsive layout

- Left sidebar collapses (topbar menu button); rail collapses (topbar button + strip).
- <=860px / portrait: sidebar + rail become off-canvas drawers over main with a
  scrim, closed by default; main goes full-width single-column.
- Smooth transitions; crossing the breakpoint resets to a sane default.
- New components/chrome.js owns toggle + drawer state.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/components/topbar.js

@@ -4,6 +4,7 @@
 import { el, mount, clear } from '../dom.js';
 import { navigate } from '../router.js';
 import { on } from '../state.js';
+import { toggleSidebar, toggleRail } from './chrome.js';
 
 function captureModal() {
   const root = document.getElementById('modal-root');
@@ -37,11 +38,13 @@ export function renderTopbar(root) {
   const bell = el('button', { class: 'icon-btn', onclick: () => navigate('/inbox') }, 'Inbox');
 
   mount(root,
+    el('button', { class: 'chrome-toggle', title: 'Toggle menu', onclick: toggleSidebar }, '☰'),
     el('div', { class: 'brand' }, 'VOID'),
     el('button', { class: 'icon-btn', onclick: captureModal }, '+ Capture'),
     el('div', { class: 'topbar-search' }, searchInput),
     el('div', { class: 'topbar-spacer' }),
     bell,
+    el('button', { class: 'chrome-toggle', title: 'Toggle companion chat', onclick: toggleRail }, '◆'),
     el('button', { class: 'icon-btn', onclick: () => alert('Agent-switching ships post-Plan-2.') }, 'Owner')
   );