Mobile: give persona/diary content real space on phones

On phones the controls panel and result were two scroll panes splitting a fixed-
height box, squeezing the story/persona to a sliver, and the floating ☰ button
overlapped the top of the content. Now (≤768px): the whole .persona-view scrolls
as one column, the result gets min-height 62vh, controls clear the hamburger
(padding-top), inputs use 16px (no iOS focus-zoom) with bigger tap targets, and
tapping Generate/Write scrolls the result into view.

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

web/diaryPanel.js

@@ -90,6 +90,7 @@ export function mountDiaryPanel(host) {
   async function write() {
     if (busy) return
     busy = true; btn.disabled = true; stats.textContent = ''
+    if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
     stopNarration()
     const header = `— Diary of ${(unit.value || 'a nameless soldier').trim()} —\n\n`
     out.textContent = header

web/personaPanel.js

@@ -58,6 +58,7 @@ export function mountPersonaPanel(host) {
   async function generate() {
     if (busy) return
     busy = true; btn.disabled = true
+    if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
     nameEl.textContent = '…'; aboutEl.textContent = ''; tagsEl.replaceChildren()
     thinkEl.textContent = ''; thinkWrap.open = true; stats.textContent = ''
     try {

web/shell/persona.css

@@ -119,6 +119,22 @@
 .tts-status { min-height: 14px; }
 
 @media (max-width: 768px) {
-  .persona-view { flex-direction: column; }
-  .persona-controls { width: 100%; border-right: 0; border-bottom: 2px solid var(--p-ink); }
+  /* 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; }
+  .persona-controls {
+    width: 100%; border-right: 0; border-bottom: 2px solid var(--p-ink);
+    overflow: visible; flex-shrink: 0; gap: 6px;
+    padding: 54px 14px 16px; /* top clears the floating ☰ reopen button */
+  }
+  /* The generated content (persona / war story) gets the majority of the screen. */
+  .persona-result { flex: 1 0 auto; min-height: 62vh; padding: 18px 16px; overflow: visible; }
+  .persona-name { font-size: 26px; }
+  .persona-about { font-size: 16px; max-width: none; }
+  .persona-tags { margin: 10px 0 14px; }
+  .persona-think { max-height: 150px; }
+  /* 16px inputs avoid iOS focus-zoom; bigger pads = easier taps. */
+  .persona-input { font-size: 16px !important; padding: 10px !important; }
+  .model-select { font-size: 15px !important; padding: 9px 10px !important; }
+  .persona-go, .persona-go-alt { padding: 12px !important; }
 }