Mobile: collapse model/voice control bars behind tap-to-expand

On phones the diary had two full control bars (model + voice) stacking ~830px of
controls above the story. Wrap each bar in a <details> that's open on desktop
(summary hidden) and collapsed on mobile (tap "⚙ Model" / "🔊 Voice" to expand),
so the war story / persona sits near the top on a phone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/diaryPanel.js

@@ -31,12 +31,18 @@ export function mountDiaryPanel(host) {
   const ttsStatus = el('div', { class: 'persona-status tts-status' })
   const out = el('div', { class: 'persona-about' }, 'A first-person diary entry, written by a small model in your browser — and read aloud on your device.')
 
+  // On phones the model + voice bars collapse behind tap-to-expand summaries so the
+  // story isn't pushed off-screen; on desktop they stay open (summary hidden via CSS).
+  const modelWrap = el('details', { class: 'ctl-collapse' }, [el('summary', {}, '⚙ Model'), modelHost])
+  const ttsWrap = el('details', { class: 'ctl-collapse' }, [el('summary', {}, '🔊 Voice'), ttsHost])
+  modelWrap.open = ttsWrap.open = window.innerWidth > 768
+
   const controls = el('aside', { class: 'persona-controls' }, [
-    modelHost,
+    modelWrap,
     el('label', { class: 'persona-label' }, 'Unit'), unit,
     el('label', { class: 'persona-label' }, 'Traits'), traits,
     btn, stats, status,
-    ttsHost, narrateBtn, ttsStatus,
+    ttsWrap, narrateBtn, ttsStatus,
   ])
   const result = el('div', { class: 'persona-result' }, [out])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))

web/personaPanel.js

@@ -35,8 +35,13 @@ export function mountPersonaPanel(host) {
   const thinkEl = el('pre', { class: 'persona-think' })
   const thinkWrap = el('details', { class: 'persona-think-wrap' }, [el('summary', {}, 'model output (raw)'), thinkEl])
 
+  // On phones the model bar collapses behind a tap-to-expand summary so the result
+  // isn't pushed off-screen; on desktop it stays open (summary hidden via CSS).
+  const modelWrap = el('details', { class: 'ctl-collapse' }, [el('summary', {}, '⚙ Model'), modelHost])
+  modelWrap.open = window.innerWidth > 768
+
   const controls = el('aside', { class: 'persona-controls' }, [
-    modelHost,
+    modelWrap,
     el('label', { class: 'persona-label' }, 'Class'), sel,
     el('label', { class: 'persona-label' }, 'Seed'), seed,
     btn, stats, status,

web/shell/persona.css

@@ -118,10 +118,23 @@
 .persona-go-alt:hover { background: var(--p-paper-2) !important; color: var(--p-ink) !important; }
 .tts-status { min-height: 14px; }
 
+/* Collapsible control sections (model / voice). Desktop: no toggle, always shown. */
+.ctl-collapse > summary { display: none; }
+
 @media (max-width: 768px) {
   /* The whole view scrolls as one column (instead of two fighting scroll panes in
      a fixed-height box), so the story gets real room and the page scrolls. */
   .persona-view { flex-direction: column; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
+  /* Mobile: tuck the model/voice bars behind a tap-to-expand summary. */
+  .ctl-collapse > summary {
+    display: block; cursor: pointer; list-style: none; margin-top: 6px;
+    font-family: var(--p-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
+    color: var(--p-ink); background: var(--p-card); border: 1.5px solid var(--p-ink); padding: 10px;
+  }
+  .ctl-collapse > summary::-webkit-details-marker { display: none; }
+  .ctl-collapse > summary::after { content: ' ▾'; float: right; color: var(--p-muted); }
+  .ctl-collapse[open] > summary::after { content: ' ▴'; }
+  .persona-label { margin-top: 4px; }
   .persona-controls {
     width: 100%; border-right: 0; border-bottom: 2px solid var(--p-ink);
     overflow: visible; flex-shrink: 0; gap: 6px;