diff --git a/web/src/structured.ts b/web/src/structured.ts
index b1cd30d..3064c21 100644
--- a/web/src/structured.ts
+++ b/web/src/structured.ts
@@ -97,19 +97,17 @@ export function createStructuredConnection(
               autocomplete="off" aria-autocomplete="list" aria-expanded="false"
               aria-controls="structured-command-menu-${sessionId}"></textarea>
           </div>
-          <div class="structured-actions">
-            <div class="structured-config" hidden>
-              <button type="button" class="structured-config-trigger" aria-haspopup="true"
-                aria-expanded="false" aria-label="Session settings" title="Session settings">
-                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></svg>
-              </button>
-              <div class="structured-config-menu" role="group" aria-label="Session settings" hidden></div>
-            </div>
-            <button type="button" class="btn structured-cancel" hidden>Cancel turn</button>
-            <button type="submit" class="btn btn-primary structured-send"><span>Send</span>
-              <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 5 5 5-5 5M12 10H3"/></svg>
+          <div class="structured-config" hidden>
+            <button type="button" class="structured-config-trigger" aria-haspopup="true"
+              aria-expanded="false" aria-label="Session settings" title="Session settings">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></svg>
             </button>
+            <div class="structured-config-menu" role="group" aria-label="Session settings" hidden></div>
           </div>
+          <button type="submit" class="btn btn-primary structured-send"><span>Send</span>
+            <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 5 5 5-5 5M12 10H3"/></svg>
+          </button>
+          <button type="button" class="btn structured-cancel" hidden>Cancel turn</button>
         </form>
       </div>
     </div>
diff --git a/web/src/styles.css b/web/src/styles.css
index dcf89db..f5310ce 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2176,14 +2176,12 @@ input.leaf-rename:focus {
 
 .structured-config {
   position: relative;
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
+  flex: 0 0 40px;
 }
 
 .structured-config-trigger {
-  width: 100%;
-  height: 100%;
+  width: 40px;
+  height: 40px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -2221,7 +2219,7 @@ input.leaf-rename:focus {
   position: absolute;
   z-index: 20;
   bottom: calc(100% + var(--sp-2));
-  left: 0;
+  right: 0;
   width: min(320px, 86vw);
   padding: var(--sp-2);
   border: 1px solid var(--border-strong);
@@ -3065,18 +3063,18 @@ input.leaf-rename:focus {
 
 /* The composer is a sibling of the scrolling transcript, not part of it: it
    stays reachable at the pane edge without changing transcript scroll math.
-   It is a flush band at the foot of the pane rather than a floating card —
-   one hairline separates it from the transcript, and that hairline is also
-   the focus indicator. Input and controls stack, so the send button keeps a
-   fixed place at the composer's foot however tall the draft grows. */
+   It is a flush band at the foot of the pane rather than a floating card: its
+   own `--surface` fill is what separates it from the transcript, over a
+   hairline that doubles as the focus indicator. Inner metrics line the draft
+   up with the transcript's own 12px gutter. */
 .structured-composer {
   flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-1);
-  padding: var(--sp-2) var(--sp-3) max(var(--sp-2), env(safe-area-inset-bottom));
+  padding: var(--sp-1) var(--sp-1) max(var(--sp-1), env(safe-area-inset-bottom));
   border-top: 1px solid var(--border);
-  background: var(--bg);
+  background: var(--surface);
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sp-1);
   transition: border-color var(--dur-fast) var(--ease-out);
 }
 
@@ -3086,6 +3084,7 @@ input.leaf-rename:focus {
 
 .structured-input-wrap {
   position: relative;
+  flex: 1 1 auto;
   min-width: 0;
 }
 
@@ -3094,11 +3093,12 @@ input.leaf-rename:focus {
   width: 100%;
   min-width: 0;
   max-height: 160px;
-  min-height: 20px;
+  min-height: 40px;
   resize: none;
   overflow-y: hidden;
-  padding: 0;
+  padding: 10px var(--sp-2);
   border: 0;
+  border-radius: var(--r-2);
   background: transparent;
   color: var(--ink);
   font-size: var(--fs-13);
@@ -3109,25 +3109,12 @@ input.leaf-rename:focus {
   outline: none;
 }
 
-.structured-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--sp-1);
-  min-height: 32px;
-}
-
-.structured-actions .structured-config {
-  margin-right: auto;
-}
-
 .structured-composer .structured-send,
 .structured-composer .structured-cancel {
-  height: 32px;
-  min-height: 32px;
+  height: 40px;
+  min-height: 40px;
   border-radius: var(--r-2);
   font-family: var(--font-sans);
-  font-size: var(--fs-12);
 }
 
 .structured-composer .structured-send {
@@ -3148,8 +3135,8 @@ input.leaf-rename:focus {
 }
 
 .structured-composer .structured-send svg {
-  width: 15px;
-  height: 15px;
+  width: 16px;
+  height: 16px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.7;
@@ -3179,21 +3166,26 @@ input.leaf-rename:focus {
 }
 
 @media (max-width: 520px) {
-  .structured-composer .structured-send,
-  .structured-composer .structured-cancel {
-    height: var(--tap);
-    min-height: var(--tap);
-    font-size: var(--fs-13);
+  /* One row cannot hold a draft plus three controls at phone width — the
+     draft gets a line of its own and the controls drop below it. */
+  .structured-composer {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    padding-left: var(--sp-2);
+    padding-right: var(--sp-2);
   }
 
-  .structured-actions {
-    min-height: var(--tap);
+  .structured-input-wrap {
+    flex: 1 1 100%;
   }
 
-  .structured-config,
-  .structured-config-trigger {
-    width: var(--tap);
-    height: var(--tap);
+  .structured-composer .structured-config {
+    margin-right: auto;
+  }
+
+  .structured-config-menu {
+    left: 0;
+    right: auto;
   }
 }