fix(maestro): keep the draft first when the composer wraps

The attach button precedes the draft in the DOM, so under the ≤520px wrap
rule it took a line of its own above the textarea. An explicit order puts
the draft back on the first line and groups every control below it.

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

web/src/styles.css

@@ -3062,31 +3062,24 @@ 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. */
+   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: 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;
-  margin: 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));
-  padding: var(--sp-1);
+  border-top: 1px solid var(--border);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--r-3);
   background: var(--surface);
   display: flex;
   align-items: flex-end;
   gap: var(--sp-1);
-  box-shadow:
+  transition: border-color var(--dur-fast) var(--ease-out);
-    inset 0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent),
-    var(--shadow-1);
-  transition:
-    border-color var(--dur-fast) var(--ease-out),
-    box-shadow var(--dur-fast) var(--ease-out);
 }
 
 .structured-composer:focus-within {
-  border-color: var(--accent);
+  border-top-color: var(--accent);
-  box-shadow:
-    inset 0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent),
-    0 0 0 3px var(--accent-tint),
-    var(--shadow-1);
 }
 
 .structured-input-wrap {
@@ -3151,6 +3144,10 @@ input.leaf-rename:focus {
   line-height: 20px;
 }
 
+.structured-input:focus-visible {
+  outline: none;
+}
+
 .structured-composer .structured-send,
 .structured-composer .structured-cancel {
   height: 40px;
@@ -3208,17 +3205,29 @@ input.leaf-rename:focus {
 }
 
 @media (max-width: 520px) {
+  /* 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 {
-    margin: var(--sp-1) 0 0;
+    flex-wrap: wrap;
-    padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
+    justify-content: flex-end;
-    border-right: 0;
+    padding-left: var(--sp-2);
-    border-bottom: 0;
+    padding-right: var(--sp-2);
-    border-left: 0;
+  }
-    border-radius: var(--r-2) var(--r-2) 0 0;
+
+  /* `order` keeps the draft on the first line: without it the attach button,
+     which precedes it in the DOM, wraps onto a line of its own. */
+  .structured-input-wrap {
+    flex: 1 1 100%;
+    order: -1;
+  }
+
+  .structured-composer .structured-config {
+    margin-right: auto;
   }
 
   .structured-config-menu {
-    right: calc(-1 * (var(--control-h) + var(--sp-2)));
+    left: 0;
+    right: auto;
   }
 }