diff --git a/frontend/index.html b/frontend/index.html
index e004457..0134879 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- interactive-widget: shrink the layout viewport when the on-screen
+         keyboard opens, so the bottom-sticky composers stay above it instead
+         of staying pinned behind it. Chromium honours this; iOS Safari does
+         not, which is what src/keyboard.js covers. -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 642ffea..04c1464 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -301,7 +301,16 @@ button:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: n
 
 /* ---------- Play page ---------- */
 
-.play-page { display: flex; flex-direction: column; min-height: calc(100dvh - 56px); }
+.play-page {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100dvh - 56px);
+  /* Room to scroll the last beat clear of a composer lifted by the keyboard
+     (see --kb-inset in keyboard.js); 0 on desktop and on browsers that shrink
+     the layout viewport themselves. Margin, not padding — .page already sets
+     padding and a longhand here would drop its bottom gutter. */
+  margin-bottom: var(--kb-inset, 0px);
+}
 
 /* Keep the Plot/Memory/Scripts/Insights toggles reachable while the story
    scrolls — pin the header just below the 56px top nav. */
@@ -446,7 +455,9 @@ button:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: n
 
 .play-controls {
   position: sticky;
-  bottom: 0;
+  /* Sits on the keyboard's top edge when one is open, on the viewport bottom
+     otherwise — --kb-inset is 0 unless a virtual keyboard is covering us. */
+  bottom: var(--kb-inset, 0px);
   background: linear-gradient(to top, var(--bg) 75%, transparent);
   padding: 18px 0 16px;
   border-top: 1px solid var(--border);
@@ -1952,7 +1963,12 @@ button.primary.compact { padding: 3px 12px; font-size: 0.76rem; margin-left: aut
    A plain chat scratchpad, styled as a transcript rather than as the story
    page: UI font, role labels, and a sticky composer at the bottom. */
 
-.chat-page { max-width: 820px; display: flex; flex-direction: column; }
+.chat-page {
+  max-width: 820px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--kb-inset, 0px); /* see .play-page */
+}
 .chat-meta {
   font-size: 0.78rem;
   margin: -10px 0 16px;
@@ -2024,7 +2040,7 @@ button.primary.compact { padding: 3px 12px; font-size: 0.76rem; margin-left: aut
 
 .chat-composer {
   position: sticky;
-  bottom: 0;
+  bottom: var(--kb-inset, 0px); /* clears the on-screen keyboard — see .play-controls */
   display: flex;
   gap: 10px;
   align-items: flex-end;
diff --git a/frontend/src/keyboard.js b/frontend/src/keyboard.js
new file mode 100644
index 0000000..5e55e95
--- /dev/null
+++ b/frontend/src/keyboard.js
@@ -0,0 +1,32 @@
+// Mobile virtual keyboards vs. the bottom-sticky composers.
+//
+// A phone keyboard covers the bottom of the screen without shrinking the
+// layout viewport, so `position: sticky; bottom: 0` keeps pinning the composer
+// to a bottom edge the user can no longer see — tap the box and it vanishes
+// behind the keyboard. Chromium can be told to shrink the layout viewport
+// instead (`interactive-widget=resizes-content` on the viewport meta in
+// index.html), which fixes it there. iOS Safari ignores that flag and only
+// ever shrinks the *visual* viewport, so measure the overlap ourselves and
+// publish it as --kb-inset for the composers to lift by.
+//
+// Where the browser did resize the layout viewport, window.innerHeight shrank
+// along with it and this measures ~0 — the same CSS is a no-op there rather
+// than a double lift.
+
+const MIN_KEYBOARD = 80 // px — below this it's browser chrome, not a keyboard
+
+export function trackKeyboardInset() {
+  const vv = window.visualViewport
+  if (!vv) return
+  const apply = () => {
+    // Pinch-zoom shrinks the visual viewport too, and that is not a keyboard.
+    const covered = vv.scale > 1.01 ? 0 : window.innerHeight - vv.height - vv.offsetTop
+    const inset = covered > MIN_KEYBOARD ? Math.round(covered) : 0
+    document.documentElement.style.setProperty('--kb-inset', `${inset}px`)
+  }
+  // resize fires as the keyboard animates in; scroll fires as the page pans
+  // under a keyboard that is already up, which moves offsetTop.
+  vv.addEventListener('resize', apply)
+  vv.addEventListener('scroll', apply)
+  apply()
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index ecba514..9350bb0 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -11,8 +11,11 @@ import Scripts from './pages/Scripts.jsx'
 import ScriptEditor from './pages/ScriptEditor.jsx'
 import Settings from './pages/Settings.jsx'
 import Chat from './pages/Chat.jsx'
+import { trackKeyboardInset } from './keyboard.js'
 import './index.css'
 
+trackKeyboardInset()
+
 const router = createBrowserRouter([
   {
     path: '/',