dsh-zen-remote 1.1.12 → 1.1.13

package/README.md

@@ -3,7 +3,7 @@
 
 <p align="center">
 <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-0B7285?style=flat-square" alt="MIT"></a>
-<img src="https://img.shields.io/badge/release-v1.1.12-5B4CF0?style=flat-square" alt="v1.1.12">
+<img src="https://img.shields.io/badge/release-v1.1.13-5B4CF0?style=flat-square" alt="v1.1.13">
 <img src="https://img.shields.io/badge/DSH-Web%20Profile-5B4CF0?style=flat-square" alt="DSH Web Profile">
 </p>
 
@@ -45,7 +45,7 @@ Edit `~/.dsh/profiles/web/package.json` by hand — one line under `dependencies
 ```jsonc
 {
   "dependencies": {
-    "dsh-zen-remote": "^1.1.12"        // for local development: "link:/path/to/dsh-zen-remote"
+    "dsh-zen-remote": "^1.1.13"        // for local development: "link:/path/to/dsh-zen-remote"
   },
   "dsh": { "profile": { "bundles": [
     "@deepseek-ai/dsh-base",

package/README.zh-CN.md

@@ -3,7 +3,7 @@
 
 <p align="center">
 <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-0B7285?style=flat-square" alt="MIT"></a>
-<img src="https://img.shields.io/badge/release-v1.1.12-5B4CF0?style=flat-square" alt="v1.1.12">
+<img src="https://img.shields.io/badge/release-v1.1.13-5B4CF0?style=flat-square" alt="v1.1.13">
 <img src="https://img.shields.io/badge/DSH-Web%20Profile-5B4CF0?style=flat-square" alt="DSH Web Profile">
 </p>
 
@@ -45,7 +45,7 @@ dsh plugin add dsh-zen-remote
 ```jsonc
 {
   "dependencies": {
-    "dsh-zen-remote": "^1.1.12"        // 本地开发换成 "link:/path/to/dsh-zen-remote"
+    "dsh-zen-remote": "^1.1.13"        // 本地开发换成 "link:/path/to/dsh-zen-remote"
   },
   "dsh": { "profile": { "bundles": [
     "@deepseek-ai/dsh-base",

package/docs/interface.md

@@ -119,6 +119,9 @@ composer 最左的回形针打开的是**手机本地**的文件选择器（iOS
 
 **修复**
 
+- composer 行里第三方插件的入口(`conversation.input.right`)在手机端整体移进模型弹层,
+  与「模型」「推理等级」并列成行——行是不换行的,模型名是唯一能让宽度的东西,
+  订阅插件的速度 chip(带文字约 70px)加上识图开关会把它挤没(2026-09-06 用户报)
 - 适配 dsh-vision-router(2.0.1 / 2.1.1):composer 识图开关在手机端压成 28px 圆形
   图标钮(眼睛为 CSS mask 图标,aria-label / aria-pressed 照旧),不再把
   模型名挤出 composer 行;桌面端保持插件原样(见兼容插件清单)。

package/lib/client.js

@@ -5099,8 +5099,12 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
     flex: 0 0 auto !important;
     gap: 6px !important;
   }
-  /* The model seat carries the elastic gap: everything after it is pushed to
-     the right edge, so no spacer element is needed. */
+  /* The elastic gap used to live here as \`margin-right: auto\`, which broke
+     the moment a session had no model pill: a subagent session has none, so
+     the gap vanished and the stop / send buttons bunched up in the middle of
+     the row instead of sitting at the right edge (reported 2026-09-06). The
+     gap belongs to the RIGHT group, not to the last item of the left one —
+     see the two rules below the order list. */
   ${MODEL} {
     order: 4 !important;
     /* A definite flex-basis (not auto) breaks the circular sizing between
@@ -5111,7 +5115,6 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
     flex: 0 1 min(48vw, 200px) !important;
     min-width: 0 !important;
     max-width: min(48vw, 200px) !important;
-    margin-right: auto !important;
   }
   /* Third-party input.right entries park next to the ring rather than
      landing at order 0 (= far left) once the groups are flattened. */
@@ -5126,6 +5129,22 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
   ${ROW} > [class$="_trailing"] > [class$="_primary"] {
     order: 7 !important;
   }
+  /* The elastic gap. It sits in front of whichever of the two right-hand
+     items comes first, so the group hugs the right edge no matter what the
+     left side happens to contain — with a model pill, without one (subagent
+     sessions), with or without the third-party entries at order 5.
+     Both get \`margin-left: auto\` and the last rule takes it back off the
+     send button whenever a ring precedes it: two auto margins would SHARE
+     the free space and open a second gap between the ring and send. A
+     sibling combinator answers "is there a ring before me" without assuming
+     anything about the host's nesting. */
+  ${ROW} > [class$="_trailing"] > span[class$="_root"],
+  ${ROW} > [class$="_trailing"] > [class$="_primary"] {
+    margin-left: auto !important;
+  }
+  ${ROW} > [class$="_trailing"] > span[class$="_root"] ~ [class$="_primary"] {
+    margin-left: 0 !important;
+  }
 
   /* --- 3. permission as icon-only pill; model as name+effort pill ---
      (real-device round 2, 2026-08-17; model pill reworked 2026-08-25:
@@ -5246,6 +5265,115 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
     border-radius: 12px !important;
     font-size: 15px !important;
   }
+  /* --- 4a. third-party composer entries live in the model sheet ---
+     effects/model-sheet-extras.ts parks the \`conversation.input.right\`
+     container inside the model menu while that menu is open and puts it back
+     when it closes; these rules are the two halves of that trip.
+
+     In the row: hidden, but ONLY once the effect has marked the container as
+     one it manages. Keying the hide off the marker rather than off "not
+     currently parked" is what makes the failure direction safe — if the
+     effect declines to act (nothing in the slot but the vision toggle, so
+     nothing worth moving) or never runs at all, the marker is absent, this
+     rule does not match, and the controls stay exactly where the host put
+     them. The inverse spelling hid them in the row whenever they were not in
+     the sheet, which in those same cases left them reachable from neither
+     place (caught in review, 2026-09-06).
+     Hiding by ancestor rather than by a display rule on the container itself
+     is what lets the parked copy style itself freely — same element, two
+     homes, two rule sets. \`!important\` because the slot container carries an
+     inline \`display: contents\`. */
+  ${ROW} > [class$="_trailing"] > [data-slot="conversation.input.right"][data-zen-sheet-extras] {
+    display: none !important;
+  }
+  /* Parked in the sheet: a column of full-width rows in the sheet's own
+     language, so a relocated control reads as a sibling of 模型 and 推理等级
+     rather than a chip that wandered in. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 2px !important;
+    width: 100% !important;
+  }
+  /* Undo the row's compaction on every parked control: back to full width and
+     the 48px the sheet's own cells use. \`> * > *\` reaches both shapes without
+     naming either plugin — subscriptions wraps its trigger in a positioning
+     div, vision-router puts its button straight in the slot. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > *,
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > * > button {
+    width: 100% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+    justify-content: flex-start !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] button {
+    box-sizing: border-box !important;
+    min-height: 48px !important;
+    height: auto !important;
+    padding: 0 12px !important;
+    gap: 10px !important;
+    border-radius: 12px !important;
+    border: none !important;
+    background: transparent !important;
+    font-size: 15px !important;
+    /* Both plugins center their chip label, which is right for a pill in the
+       row and wrong for a full-width row: the sheet's own cells start their
+       label at the left edge. justify-content covers the flex triggers,
+       text-align the ones that are not flex containers. */
+    text-align: left !important;
+    justify-content: flex-start !important;
+  }
+  /* Order comes from the row (compat.css.ts puts the vision toggle at 5 so it
+     parks beside the context ring), and that rule still matches in here — the
+     sheet is a DOM descendant of the composer bar even though it paints as a
+     fixed layer. Reset it so the sheet follows DOM order instead of
+     inheriting a decision that was about a different layout. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > * {
+    order: 0 !important;
+  }
+  /* The vision toggle is squeezed to a 28px icon in the row (compat.css.ts);
+     in the sheet it is a row, so its label comes back and the icon leads. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > span {
+    display: inline !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > svg:first-of-type {
+    width: 18px !important;
+    height: 18px !important;
+  }
+  /* The speed chip opens a menu of its own, anchored \`bottom: 100%\` to its
+     trigger. Inside the sheet — which is \`overflow: hidden\` so its rounded
+     top clips its content — that menu would be cut off. Same escape section 4
+     uses for the host's two menus: position: fixed leaves the clip behind
+     (the sheet sets \`transform: none\`, so nothing between here and the
+     viewport captures fixed positioning) and it lands as its own sheet on top
+     of this one. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [role="menu"] {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    margin: 0 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    max-height: min(70dvh, 520px) !important;
+    box-sizing: border-box !important;
+    border-radius: 16px 16px 0 0 !important;
+    border-bottom: none !important;
+    padding: 8px 8px calc(8px + var(--mnav-sab)) !important;
+    /* Above the model sheet it sits on (60, section 4), below the session-info
+       sheet's 70 (info.css.ts) — it is a child of the model sheet, not a peer
+       of the page's own layers. */
+    z-index: 61 !important;
+    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [role="menu"] [role="menuitemradio"] {
+    min-height: 48px !important;
+    border-radius: 12px !important;
+    font-size: 15px !important;
+  }
+
   /* --- 4b. the official scroll-to-bottom button must not poke through the
      sheet (real-device follow-up, 2026-08-17) ---
      ChatView's own "jump to latest" button (aria-label t("chat.toBottom"))
@@ -5280,6 +5408,17 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
   [class$="_composerSeat"] {
     --dsh-composer-text-max-height: 124px;
   }
+  /* Pull the text in from the card's left border. Upstream insets the editing
+     host by 16px while the control row below it starts 8px in (row padding,
+     section 1), so the placeholder sat noticeably further out than the
+     buttons under it and the field read as over-padded on a phone (reported
+     2026-09-06). 12px squares it with the 12px of clear space on the right,
+     giving the text a symmetric box, and closes most of the gap with the
+     button row. Anchored on the editing host's own contract attribute rather
+     than a hashed class. */
+  [data-slot="conversation.composer.bar"] [data-composer-input] {
+    padding-left: 12px !important;
+  }
 
   /* --- 6. no divider above OR below the message list ---
      Instead of a rule the messages butt against, they fade near both edges.
@@ -5371,7 +5510,13 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
      composer. Anchored on the official data-testid, a stable contract
      marker rather than a hashed class name. */
   [data-slot="conversation.input.dock"] > [data-testid="todo-panel"] {
-    flex: 1 1 auto !important;
+    /* A whole line to itself. It shared line 0 with the pills until the goal
+       bar turned up (2026-09-06): two full-width things on one nowrap line
+       meant the to-do header shrank to a stub and the goal bar ran off the
+       right edge. Both are status strips you read at a glance, so they stack
+       — see the line policy in 7c. */
+    flex: 1 0 100% !important;
+    order: 1 !important;
     min-width: 0 !important;
     max-width: none !important;
     min-height: 0 !important;
@@ -5398,7 +5543,7 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
     display: flex !important;
     flex: 1 0 100% !important;
     flex-wrap: wrap !important;
-    order: 2 !important;
+    order: 4 !important;
     align-items: center !important;
     gap: 6px !important;
     max-width: none !important;
@@ -5433,12 +5578,12 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
      sits closest to the input it will be sent from. The rail only wraps
      while one of the two full-width entries exists, so a session with
      neither keeps the original single scrolling chip line. */
-  [data-slot="conversation.input.dock"]:has(> [data-queue-dock], > [data-mobile-nav="attach-chips"]) {
+  [data-slot="conversation.input.dock"]:has(> [data-queue-dock], > [data-mobile-nav="attach-chips"], > [data-testid="todo-panel"], > [data-goal-bar]) {
     flex-wrap: wrap !important;
   }
   [data-slot="conversation.input.dock"] > [data-queue-dock] {
     flex: 1 0 100% !important;
-    order: 1 !important;
+    order: 3 !important;
     max-width: none !important;
     min-height: 0 !important;
     max-height: none !important;
@@ -5449,6 +5594,24 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
     font-size: 13px !important;
     line-height: normal !important;
   }
+  /* dsh-client-ui-goal's status strip (its own \`data-goal-bar\` marker; it
+     registers into this dock at order 10). Fourth thing here that is not a
+     pill: a row carrying the objective text plus pause / edit / delete
+     buttons, so the 26px cage clipped its buttons off the right edge and the
+     nowrap line pushed what was left off screen (reported 2026-09-06). Same
+     treatment the queue gets — a line of its own, official geometry back. */
+  [data-slot="conversation.input.dock"] > [data-goal-bar] {
+    flex: 1 0 100% !important;
+    order: 2 !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    border-radius: 12px !important;
+    overflow: visible !important;
+    font-size: 13px !important;
+    line-height: normal !important;
+  }
+
   /* The panel is the dock's only child; upstream rounds its top corners only
      and drops the bottom border, because there it is half-hidden behind the
      card. On its own line it is a free-standing strip, so close it up. */
@@ -8339,6 +8502,166 @@ function installModalBack(ctx) {
     }, 'dsh-zen-remote: modal back gesture');
 }
 };
+__modules["effects/model-sheet-extras.js"] = function (require, module, exports) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installModelSheetExtras = installModelSheetExtras;
+/** Phone breakpoint — same query every phone-only effect in this plugin uses. */
+const PHONE_QUERY = '(max-width: 767px)';
+/** The model pill itself. Absent in a subagent session — see `sync`. */
+const MODEL_SEAT_SELECTOR = '[data-slot="conversation.input.model"]';
+/** The model pill's own popup, which section 4 of composer.css.ts turns into a bottom sheet. */
+const MENU_SELECTOR = '[data-slot="conversation.input.model"] [class$="_menu"]';
+/**
+ * The third-party composer controls this effect relocates. Both register into
+ * `conversation.input.right`; moving the slot container rather than its
+ * children keeps them together and leaves exactly one node to put back.
+ */
+const EXTRAS_SELECTOR = '[data-slot="conversation.input.right"]';
+/**
+ * dsh-vision-router's own mount marker. Used here only to answer "is there
+ * anything in this slot BESIDES the vision toggle" — see `worthMoving`.
+ */
+const VISION_SELECTOR = '[data-vision-router-mode-toggle]';
+/**
+ * Set on the container while this effect manages it, in the row and in the
+ * sheet alike. It is the styling hook for both halves in composer.css.ts, and
+ * it is deliberately what the row's `display: none` keys off: without the
+ * marker the controls stay exactly where the host put them, so a version of
+ * this file that declines to act — or never runs at all — cannot leave them
+ * hidden in the row and absent from the sheet, i.e. unreachable.
+ */
+const MANAGED = 'data-zen-sheet-extras';
+/**
+ * Is the slot holding anything that actually costs the row width?
+ *
+ * The row is one nowrap flex line whose only elastic item is the model pill
+ * (composer.css.ts section 1), so entries here are paid for out of the model
+ * name. But that is only a problem once something WIDE lands in the slot —
+ * today dsh-plugin-subscriptions' speed chip, which renders "速度 · 标准" and
+ * eats ~70px. dsh-vision-router's toggle alone is a 28px icon that the row
+ * accommodates fine, and moving it on its own would cost a tap (it becomes
+ * two: open the sheet, then toggle) to buy width nobody needed.
+ *
+ * So: relocate only when the slot holds an entry that is not the vision
+ * toggle. With no such entry — subscriptions not installed, or installed but
+ * not contributing on this model — nothing moves and the row keeps its one
+ * icon, which is the behaviour asked for (user review, 2026-09-06).
+ *
+ * Why this rather than sniffing for subscriptions by name: the slot system
+ * adds no per-registration marker (measured — entries render straight into the
+ * container) and subscriptions marks nothing of its own, so naming it would
+ * mean adding a marker to our fork of that plugin and anchoring on it. That
+ * marker dies the day the fork is dropped, and the feature would go quiet
+ * with nothing to catch it. The width question is the real question anyway,
+ * and this asks it directly.
+ */
+function worthMoving(extras) {
+    return [...extras.children].some(child => !child.matches(VISION_SELECTOR));
+}
+/**
+ * Phone: park the composer row's third-party controls inside the model sheet.
+ *
+ * With the speed chip and the vision toggle both present on a GPT model the
+ * row runs out of width. Both are model-scoped settings, so the model sheet —
+ * which already holds 模型 and 推理等级 — is where they belong (user request,
+ * 2026-09-06).
+ *
+ * Why move the real controls instead of drawing our own rows that drive them:
+ * the same reason native-trigger-overlay.ts moves the real trigger. A stand-in
+ * has to script the original, which is a road this plugin does not go down —
+ * beyond the trusted-input wall that effect documents, our own rows would have
+ * to mirror every piece of state (speed tier, disabled, aria-pressed, whether
+ * a vision twin exists for the current model) and would rot on the next
+ * upstream restyle. Moving the node keeps one source of truth: their React
+ * roots go on owning and updating these elements, we only change where they
+ * hang.
+ *
+ * Measured 2026-09-06 (DSH 0.1.2, 390px) before writing this — the two things
+ * that would have killed the approach both hold: a relocated control survives
+ * host re-renders (typing into the composer re-renders the row and does not
+ * yank it back) and stays hit-testable at its new position.
+ *
+ * Restoring on close is not cosmetic. The sheet unmounts when it closes and
+ * anything still inside goes with it, so the controls would vanish from the
+ * page while their React roots kept updating detached nodes. The observer
+ * therefore watches the menu leaving too, and the parked node is held as a
+ * reference rather than looked up — once the menu is detached a document
+ * query can no longer find it.
+ */
+function installModelSheetExtras(ctx) {
+    ctx.effect(() => {
+        const phone = window.matchMedia(PHONE_QUERY);
+        /** The container while parked in the sheet, plus where to put it back. */
+        let parked = null;
+        const park = (node, menu) => {
+            if (parked !== null || node.parentElement === null)
+                return;
+            parked = { node, parent: node.parentElement, next: node.nextSibling };
+            menu.appendChild(node);
+        };
+        const unpark = () => {
+            if (parked === null)
+                return;
+            const { node, parent, next } = parked;
+            parked = null;
+            // The menu may already be detached, having taken the container with it.
+            // The node itself is still live either way; re-home it only if its old
+            // parent is still on the page (when the whole composer went away, the
+            // owning React roots rebuild the slot on the next mount).
+            if (parent.isConnected)
+                parent.insertBefore(node, next);
+        };
+        /** Hand the container back to the host, marker and all. */
+        const release = (node) => {
+            unpark();
+            node?.removeAttribute(MANAGED);
+        };
+        const sync = () => {
+            const extras = document.querySelector(EXTRAS_SELECTOR);
+            if (extras === null) {
+                unpark();
+                return;
+            }
+            // No model pill, no sheet to park into — a subagent session has none.
+            // Claiming the slot there would hide the controls from the row with
+            // nowhere to show them instead, which is the unreachable state the
+            // marker is meant to prevent.
+            const seat = document.querySelector(MODEL_SEAT_SELECTOR);
+            if (!phone.matches || seat === null || !worthMoving(extras)) {
+                release(extras);
+                return;
+            }
+            extras.setAttribute(MANAGED, '');
+            const menu = document.querySelector(MENU_SELECTOR);
+            if (menu === null)
+                unpark();
+            else
+                park(extras, menu);
+        };
+        // Synchronous in the observer callback, never behind rAF: the callback is
+        // a microtask and runs before this frame paints, so the controls are in
+        // the sheet the first time it is drawn. A rAF would land a frame late and
+        // show one frame of the sheet without them (AGENTS.md's "晚一帧" rule).
+        // Body-level childList is the same shape modal-back.ts uses; aria-expanded
+        // is watched too so a close that reuses the node still re-syncs.
+        const observer = new MutationObserver(sync);
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-expanded'],
+        });
+        phone.addEventListener('change', sync);
+        sync();
+        return () => {
+            observer.disconnect();
+            phone.removeEventListener('change', sync);
+            release(document.querySelector(EXTRAS_SELECTOR));
+        };
+    }, 'dsh-mobile-nav: model sheet extras');
+}
+};
 __modules["effects/native-trigger-overlay.js"] = function (require, module, exports) {
 "use strict";
 /**
@@ -9017,6 +9340,7 @@ const header_status_ts_1 = require("./effects/header-status.js");
 const gestures_ts_1 = require("./effects/gestures.js");
 const turn_fold_ts_1 = require("./effects/turn-fold.js");
 const modal_back_ts_1 = require("./effects/modal-back.js");
+const model_sheet_extras_ts_1 = require("./effects/model-sheet-extras.js");
 const native_trigger_overlay_ts_1 = require("./effects/native-trigger-overlay.js");
 const welcome_notice_ts_1 = require("./effects/welcome-notice.js");
 const keyboard_guard_ts_1 = require("./effects/keyboard-guard.js");
@@ -9069,6 +9393,9 @@ function apply(ctx) {
     (0, turn_fold_ts_1.installTurnFold)(ctx);
     (0, modal_back_ts_1.installModalBack)(ctx);
     (0, native_trigger_overlay_ts_1.installNativeTriggerOverlay)(ctx);
+    // Third-party composer entries (speed chip, vision toggle) move into the
+    // model sheet — the row has no width to spare and both are model settings.
+    (0, model_sheet_extras_ts_1.installModelSheetExtras)(ctx);
     // "内测声明" first-run notice: keep it visible (CSS-hiding it leaked the
     // dialog's #root inert lock — see effects/welcome-notice.ts) and offer a
     // per-browser "不再弹出" opt-out instead.

package/lib/types/client/effects/model-sheet-extras.d.ts

@@ -0,0 +1,33 @@
+import type { ClientContext } from '../compat/types.ts';
+/**
+ * Phone: park the composer row's third-party controls inside the model sheet.
+ *
+ * With the speed chip and the vision toggle both present on a GPT model the
+ * row runs out of width. Both are model-scoped settings, so the model sheet —
+ * which already holds 模型 and 推理等级 — is where they belong (user request,
+ * 2026-09-06).
+ *
+ * Why move the real controls instead of drawing our own rows that drive them:
+ * the same reason native-trigger-overlay.ts moves the real trigger. A stand-in
+ * has to script the original, which is a road this plugin does not go down —
+ * beyond the trusted-input wall that effect documents, our own rows would have
+ * to mirror every piece of state (speed tier, disabled, aria-pressed, whether
+ * a vision twin exists for the current model) and would rot on the next
+ * upstream restyle. Moving the node keeps one source of truth: their React
+ * roots go on owning and updating these elements, we only change where they
+ * hang.
+ *
+ * Measured 2026-09-06 (DSH 0.1.2, 390px) before writing this — the two things
+ * that would have killed the approach both hold: a relocated control survives
+ * host re-renders (typing into the composer re-renders the row and does not
+ * yank it back) and stays hit-testable at its new position.
+ *
+ * Restoring on close is not cosmetic. The sheet unmounts when it closes and
+ * anything still inside goes with it, so the controls would vanish from the
+ * page while their React roots kept updating detached nodes. The observer
+ * therefore watches the menu leaving too, and the parked node is held as a
+ * reference rather than looked up — once the menu is detached a document
+ * query can no longer find it.
+ */
+export declare function installModelSheetExtras(ctx: ClientContext): void;
+//# sourceMappingURL=model-sheet-extras.d.ts.map

package/lib/types/client/effects/model-sheet-extras.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-sheet-extras.d.ts","sourceRoot":"","sources":["../../../../src/client/effects/model-sheet-extras.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AA8DvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAkEhE"}

package/lib/types/client/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAA0B,MAAM,mBAAmB,CAAA;AAwB9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,kBAAkB;QAC1B,sCAAsC;QACtC,WAAW,EAAE,YAAY,CAAA;KAC1B;CACF;AAED,0GAA0G;AAC1G,eAAO,MAAM,MAAM,UAAgF,CAAA;AAmBnG;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAoO9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAA0B,MAAM,mBAAmB,CAAA;AAyB9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,kBAAkB;QAC1B,sCAAsC;QACtC,WAAW,EAAE,YAAY,CAAA;KAC1B;CACF;AAED,0GAA0G;AAC1G,eAAO,MAAM,MAAM,UAAgF,CAAA;AAmBnG;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAuO9C"}

package/lib/types/client/styles/composer.css.d.ts

@@ -1,2 +1,2 @@
-export declare const COMPOSER_CSS = "/* ---------- phone composer (< 768px) ---------- */\n\n/* The file picker the attachment button drives (S7) \u2014 hidden at EVERY width,\n   deliberately OUTSIDE the phone media block below. A bare <input type=\"file\">\n   renders as a native \"Choose Files\" control, and the slot wrapper around it is\n   `display: contents`, so an un-hidden one becomes a flex item of the official\n   tool row. Scoping this to < 768px once put that control in the DESKTOP\n   composer (caught on a live deploy, 2026-08-17): the button that drives it is\n   phone-only, but the input it drives is in the DOM at all widths. */\n[data-mobile-nav=\"attach-picker\"] {\n  display: none !important;\n}\n\n@media (max-width: 767px) {\n  /* --- 1. flatten the two official groups ---\n     `_tools` and `_trailing` only exist to cluster controls left/right.\n     display:contents dissolves them into `_row`, so the six leaf controls\n     become siblings in one flex line and `order` alone drives the layout:\n     [attach \u00B7 + \u00B7 permission \u00B7 model] \u2026elastic gap\u2026 [context ring \u00B7 send]. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] {\n    justify-content: flex-start !important;\n    gap: 5px !important;\n    padding: 2px 8px 8px !important;\n    /* One line, always: the model pill is the only shrinkable item (its\n       label ellipsizes), so wrapping would only ever push the send button\n       to a second row (real-device report, 2026-08-25). */\n    flex-wrap: nowrap !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] {\n    display: contents !important;\n  }\n\n  /* --- 2. the running order ---\n     The attachment button (S3 placeholder, S7 wires it up) sits leftmost;\n     the official \"+\" command menu keeps its seat right next to it, where\n     the two \"insert something\" affordances read as one cluster. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] [data-mobile-nav=\"attach\"] {\n    order: 1 !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_add\"] {\n    order: 2 !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] {\n    order: 3 !important;\n    /* Rigid on purpose. This seat holds the permission chip, whose own\n       wrapper (the plugin's element inside _modes) is `flex: 0 0 auto` and\n       will NOT follow the seat down \u2014 so a shrinkable seat does not make the\n       chip narrower, it just slices the seat out from under a chip that\n       stays 44px wide, and the overflow lands on top of the model pill.\n       Measured 2026-09-04 on DSH 0.1.2 at 390px: seat 90-120 (29.7px) with\n       the chip still 90-134, model starting at 125 \u2014 a 9px overlap, exactly\n       the \"the two chips touch\" report. With the seat rigid: seat 90-134,\n       model 139-246, overlap 0; and at 320px the model pill shrinks to 52px\n       and still nothing overlaps.\n       This also restores what section 1 says out loud \u2014 the model pill is\n       the ONLY shrinkable item in the row. `min-width: 0` is gone with the\n       shrink: it only ever mattered as the companion of `flex: 0 1`. */\n    flex: 0 0 auto !important;\n    gap: 6px !important;\n  }\n  /* The model seat carries the elastic gap: everything after it is pushed to\n     the right edge, so no spacer element is needed. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] {\n    order: 4 !important;\n    /* A definite flex-basis (not auto) breaks the circular sizing between\n       this seat and the trigger's max-width:100%: the seat's width comes\n       from flex resolution, the trigger fills up to it, the label\n       ellipsizes inside. Under nowrap pressure this is the only\n       min-width:0 seat, so it absorbs all shrink. */\n    flex: 0 1 min(48vw, 200px) !important;\n    min-width: 0 !important;\n    max-width: min(48vw, 200px) !important;\n    margin-right: auto !important;\n  }\n  /* Third-party input.right entries park next to the ring rather than\n     landing at order 0 (= far left) once the groups are flattened. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.right\"] > * {\n    order: 5 !important;\n  }\n  /* ContextMeter \u2014 the only `span` ending in _root inside the row. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > span[class$=\"_root\"] {\n    order: 6 !important;\n    flex: none !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [class$=\"_primary\"] {\n    order: 7 !important;\n  }\n\n  /* --- 3. permission as icon-only pill; model as name+effort pill ---\n     (real-device round 2, 2026-08-17; model pill reworked 2026-08-25:\n     the user wants to SEE which model/effort is active, so only the\n     permission trigger stays icon-only \u2014 its label is hidden and it\n     collapses to a plain ~44x30 icon button. This AGREES with (rather than fights) the official\n     container query (`@container (width <= 460px) { .trigger:has(.triggerIcon)\n     .triggerLabel { display: none } }`) that S3 had to override \u2014 no need\n     to override it back. Accessible name is unaffected: both official\n     triggers already ship a descriptive aria-label independent of the\n     visible text (PermissionSelect: t('input.accessMode', {name}); the\n     model trigger: t('trigger.aria'/'trigger.ariaEffort')) \u2014 verified live\n     in dsh-client-ui-conversation / dsh-client-ui-model-selection lib/\n     client.js, 2026-08-17 \u2014 so hiding the label costs nothing for screen\n     readers. The permission trigger only renders an icon for the\n     \"read-only\" / \"workspace-write\" presets (permissionGlyphs in\n     dsh-client-ui-conversation) \u2014 \"Full access\" and any host-configured\n     preset name fall back to chevron-only, a known gap in the official\n     markup this plugin cannot fill without inventing new icon meaning.\n     The model trigger never renders an icon at all (only label + optional\n     effort text + chevron), so its ::before below draws one from a\n     primitives icon path (Sparkle \u2014 the closest existing \"model\" glyph) as\n     a CSS-only pseudo-element: it survives React re-renders for free\n     (unlike a DOM-injected node, which would need a MutationObserver, see\n     the preview-full-toggle pitfall in AGENTS.md) and does not touch\n     accessible-name computation (empty generated content). S3's\n     rtl-ellipsis trick on the model label is simply inert under\n     display:none now; left alone rather than unpicked. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [class$=\"_triggerLabel\"] {\n    display: none !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] button[class$=\"_trigger\"] {\n    background: var(--dsw-specific-selector, rgba(127, 127, 127, .12)) !important;\n    width: 44px !important;\n    height: 30px !important;\n    max-width: none !important;\n    min-width: 0 !important;\n    padding: 0 !important;\n    gap: 2px !important;\n    justify-content: center !important;\n    border-radius: 999px !important;\n    touch-action: manipulation !important;\n  }\n  /* Model trigger: name + effort pill (2026-08-25 user request \u2014 the\n     icon-only form hid which model was active). The effort text must stay\n     whole; the model NAME is the elastic part and ellipsizes. max-width\n     caps the pill so the row's elastic gap survives extreme model ids;\n     the label rules below override the <=1023px grow rules in\n     layout.css.ts (flex 1 1 auto) that would otherwise pad the pill. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_trigger\"] {\n    background: var(--dsw-specific-selector, rgba(127, 127, 127, .12)) !important;\n    height: 30px !important;\n    width: auto !important;\n    max-width: 100% !important;\n    min-width: 0 !important;\n    padding: 0 10px !important;\n    gap: 4px !important;\n    justify-content: flex-start !important;\n    border-radius: 999px !important;\n    touch-action: manipulation !important;\n    font-size: 12px !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_trigger\"] > [class$=\"_triggerLabel\"] {\n    display: block !important;\n    flex: 0 1 auto !important;\n    min-width: 0 !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n    white-space: nowrap !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_trigger\"] > [class$=\"_triggerEffort\"] {\n    display: block !important;\n    flex: none !important;\n    white-space: nowrap !important;\n  }\n  /* PermissionSelect wraps its trigger in the Menu primitive's root span,\n     which must shrink to the icon button's fixed width. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] > span:has(> button[class$=\"_trigger\"]) {\n    flex: 0 0 auto !important;\n    min-width: 0 !important;\n  }\n  /* (2026-08-25) The model trigger's CSS-only Sparkle ::before icon is gone:\n     the pill now shows the model name + effort text itself, so an icon would\n     just eat label width. */\n\n  /* --- 4. both menus become bottom sheets ---\n     The permission menu is the Menu primitive (role=menu, absolute, side=top)\n     and the model menu is ModelSelect's own `_menu` (absolute, bottom+right).\n     Neither has a transformed ancestor between it and the viewport, so\n     position:fixed re-anchors both to the screen edge. Only the shell moves \u2014\n     the items, the two-level model panes and every selection handler stay\n     official. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [role=\"menu\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] {\n    position: fixed !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    top: auto !important;\n    transform: none !important;\n    width: 100% !important;\n    min-width: 0 !important;\n    max-width: none !important;\n    max-height: min(70dvh, 520px) !important;\n    box-sizing: border-box !important;\n    border-radius: 16px 16px 0 0 !important;\n    border-bottom: none !important;\n    padding: 8px 8px calc(8px + var(--mnav-sab)) !important;\n    z-index: 60 !important;\n    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important;\n  }\n  /* 44pt+ rows in both sheets (Menu items, model options, and the model\n     sheet's two root cells that drill into the model / effort panes). */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [role=\"menu\"] [role=\"menuitem\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] [class$=\"_option\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] [class$=\"_cell\"] {\n    min-height: 48px !important;\n    border-radius: 12px !important;\n    font-size: 15px !important;\n  }\n  /* --- 4b. the official scroll-to-bottom button must not poke through the\n     sheet (real-device follow-up, 2026-08-17) ---\n     ChatView's own \"jump to latest\" button (aria-label t(\"chat.toBottom\"))\n     is `position: sticky; z-index: 8` inside the message column, not\n     `position: fixed` \u2014 it never escapes to the same top-level stacking\n     context our sheets get promoted to, so raising the sheet's z-index\n     further does nothing (measured live: it still rendered on top at\n     z-index 60 vs 8). Rather than chase engine-specific stacking-context\n     semantics (Chromium and WebKit do not always agree here \u2014 see AGENTS.md\n     CDP/document.hidden lesson for another instance of that), this hides\n     the button outright while either sheet is open and lets it reappear on\n     close: a plain `display: none` behind a live `:has()` read is correct\n     regardless of which stacking rules the engine happens to apply.\n     Selector: no hashed classes (dsh-client-ui-conversation lib/client.js,\n     verified 2026-08-17) \u2014 `data-chat-flow` is the one stable attribute on\n     the message column, and the button's wrapper is its only sibling\n     (ChatView only ever renders the column and, conditionally, this one\n     slot), so the adjacent-sibling combinator pins it precisely. */\n  body:has([data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [role=\"menu\"]) [data-chat-flow] + div,\n  body:has([data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"]) [data-chat-flow] + div {\n    display: none !important;\n  }\n  /* --- 5. input box: two lines minimum, five lines maximum ---\n     The official autosizer drives the box off the hidden mirror's height, so\n     a min-height on the mirror IS the min-height of the field; the scroll cap\n     rides the official custom property. 52px = 2 x 24px line box + 4px pad,\n     124px = 5 lines. The hero card keeps its own one-line collapse (misc.css\n     pins _scroll/_grow while the placeholder shows). */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] [class$=\"_mirror\"] {\n    min-height: 52px !important;\n  }\n  [class$=\"_composerSeat\"] {\n    --dsh-composer-text-max-height: 124px;\n  }\n\n  /* --- 6. no divider above OR below the message list ---\n     Instead of a rule the messages butt against, they fade near both edges.\n     This used to be ONE mask-image on the message scroller; iOS WebKit\n     turned that into fog over the header (user report 2026-08-23): a mask\n     on a scroll container is applied in CONTENT coordinates there (the fade\n     bands scroll away with the messages) and, worse, it breaks the\n     container's own overflow clipping \u2014 content scrolled out of view keeps\n     painting, straight over the header and status bar. Engine bug with no\n     iOS escape hatch (every iOS browser is WebKit), so the fades moved off\n     the scroller entirely:\n\n     - fade-IN under the header: the header's own ::after, restyled into a\n       20px gradient strip \u2014 styles/header.css.ts (\"no header bottom line\").\n     - fade-OUT above the composer: nothing of ours. The official composer\n       seat already carries `background: linear-gradient(transparent 0,\n       bg 36px)` on its sticky self (dsh-client-ui-conversation lib/\n       client.js .wSkVaW_composerSeat) and that is the entire visible\n       effect; the mask's own bottom band landed inside the safe-area\n       padding below the card and painted nothing. If the bottom edge ever\n       reads harsh, hang a ::before strip off the seat the same way the\n       header does \u2014 do NOT put a mask back on the scroller.\n\n     Painted strips instead of a mask is a fair trade only because the page\n     background is one flat color \u2014 which it is (--dsw-alias-bg-base). */\n  [class$=\"_composerSeat\"],\n  [class$=\"_composerStack\"] {\n    border-top: none !important;\n  }\n\n  /* --- 7. dock entries become mini chips above the input card ---\n     conversation.input.dock is display:contents (inline style), so its\n     entries are stacked rows of the composer column. Forcing the slot itself\n     to flex turns them into ONE scrollable chip line outside and above the\n     card. Written against the slot, not against any particular plugin's chip\n     (the git branch chip and the todo panel are third-party and may not be\n     installed at all). */\n  [data-slot=\"conversation.input.dock\"] {\n    display: flex !important;\n    flex-flow: row nowrap !important;\n    align-items: center !important;\n    gap: 6px !important;\n    min-width: 0 !important;\n    margin: 0 16px !important;\n    overflow-x: auto !important;\n    overflow-y: hidden !important;\n    scrollbar-width: none !important;\n    /* The dock is itself a flex ITEM of the composer stack, and the\n       new-session hero pins that stack to a fixed height. overflow-x:auto\n       above makes this a scroll container, which drops a flex item's\n       automatic minimum size to 0 \u2014 so the hero squeezed the dock to ~5px\n       and the attachment chips slid under the card drawn after it (only the\n       top sliver of a thumbnail showed; reported from a real phone,\n       2026-08-26). Refuse the squeeze: natural height, the stack centers a\n       few px lower instead. In-chat the column is not height-pinned and this\n       is a no-op. */\n    flex-shrink: 0 !important;\n  }\n  [data-slot=\"conversation.input.dock\"]::-webkit-scrollbar {\n    display: none !important;\n  }\n  [data-slot=\"conversation.input.dock\"] > * {\n    flex: 0 0 auto !important;\n    max-width: 70% !important;\n    min-height: 26px !important;\n    max-height: 26px !important;\n    border-radius: 999px !important;\n    font-size: 11.5px !important;\n    line-height: 18px !important;\n    overflow: hidden !important;\n  }\n  /* The git-graph chip carries a 34px tablet target from misc.css; that\n     selector is more specific, so restate it at the phone breakpoint. */\n  [data-slot=\"conversation.input.dock\"] [data-gitgraph-chip-anchor] [data-gitgraph-chip] {\n    min-height: 26px !important;\n    padding: 0 10px !important;\n    font-size: 11.5px !important;\n  }\n  /* --- 7a. the native to-do card opts OUT of the 26px pill cage ---\n     conversation.input.dock is not only a chip rail: DSH's own TodoPanel\n     (dsh-client-ui-conversation) registers here, and it is an expandable\n     card, not a pill \u2014 tapping its header renders the to-do list INSIDE\n     itself. The cage's max-height:26px + overflow:hidden left that list\n     rendered but clipped to nothing, so on a phone the bar looked dead:\n     aria-expanded flipped, 8 rows mounted at 216px, and the card still\n     painted 26px tall (measured live, 2026-08-20). Give it the official\n     geometry back \u2014 full row, natural height, 12px radius. Its list caps\n     itself at 180px with its own scroller, so this cannot run into the\n     composer. Anchored on the official data-testid, a stable contract\n     marker rather than a hashed class name. */\n  [data-slot=\"conversation.input.dock\"] > [data-testid=\"todo-panel\"] {\n    flex: 1 1 auto !important;\n    min-width: 0 !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    border-radius: 12px !important;\n    /* The cage shrinks dock text to 11.5px/18px; the card's rows inherit it\n       and turn cramped. Restore the official 13px body scale. */\n    font-size: 13px !important;\n    line-height: normal !important;\n  }\n\n  /* --- 7b. attachment chips (S7.1) ---\n     Our own dock entry opts OUT of the 26px pill cage above: an image chip is\n     a 48px tile. The row sits tight under the card's top edge, so the chips\n     read as part of the composer rather than as a floating strip.\n\n     It also takes the LAST line of its own (line policy in 7c): a 48px tile\n     beside the to-do chip on one nowrap line squeezed that chip down to an\n     unreadable stub, with a long file name pushing the rest off-screen\n     (reported 2026-08-22). Its own chips wrap rather than overflow, so\n     several attachments stack instead of scrolling out of reach. */\n  [data-slot=\"conversation.input.dock\"] > [data-mobile-nav=\"attach-chips\"] {\n    display: flex !important;\n    flex: 1 0 100% !important;\n    flex-wrap: wrap !important;\n    order: 2 !important;\n    align-items: center !important;\n    gap: 6px !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    border-radius: 0 !important;\n    overflow: visible !important;\n    margin-bottom: -2px;\n  }\n\n  /* --- 7c. the queue strip opts OUT of the cage, on a line of its own ---\n     Third entry that is not a pill. conversation.input.dock is a `list` slot\n     and DSH's own QueueDock registers into it at order 20 (id `queue`,\n     dsh-client-ui-conversation) \u2014 a 36px row per queued message, or a\n     collapsible \"N \u6761\u6392\u961F\u6D88\u606F\" header once there is more than one. The 26px\n     cage above clipped it to a sliver: on a phone a queued message showed as\n     a grey stub poking out from behind the input card, unreadable and with\n     its edit / delete / send buttons cut off (reported 2026-08-22, same\n     failure the to-do card hit in 7a).\n\n     Two things are restored. Geometry: the official row height back, and the\n     dock's own composer-column sizing dropped \u2014 its width/max-width are\n     calc()s over the composer card variables and its bottom margin is\n     negative by design (upstream tucks the strip UNDER the card), none of\n     which survives being a flex item of our chip rail.\n\n     Layout \u2014 the line policy for the whole rail, now that three things want\n     room on it. The pills (the to-do card, a branch chip, whatever else\n     registers) keep order 0 and share the top line, still scrolling\n     horizontally. The queue takes the next line (order 1). The attachment\n     chips take the last one (order 2, 7b), so what the user is about to send\n     sits closest to the input it will be sent from. The rail only wraps\n     while one of the two full-width entries exists, so a session with\n     neither keeps the original single scrolling chip line. */\n  [data-slot=\"conversation.input.dock\"]:has(> [data-queue-dock], > [data-mobile-nav=\"attach-chips\"]) {\n    flex-wrap: wrap !important;\n  }\n  [data-slot=\"conversation.input.dock\"] > [data-queue-dock] {\n    flex: 1 0 100% !important;\n    order: 1 !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    border-radius: 0 !important;\n    overflow: visible !important;\n    font-size: 13px !important;\n    line-height: normal !important;\n  }\n  /* The panel is the dock's only child; upstream rounds its top corners only\n     and drops the bottom border, because there it is half-hidden behind the\n     card. On its own line it is a free-standing strip, so close it up. */\n  [data-slot=\"conversation.input.dock\"] > [data-queue-dock] > * {\n    border-radius: 12px !important;\n  }\n  [data-slot=\"conversation.input.dock\"] > [data-queue-dock] > *::after {\n    border-bottom: 1px solid var(--dsw-alias-border-l1) !important;\n  }\n\n  [data-mobile-nav=\"attach-chip\"] {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex: 0 0 auto;\n    max-width: 62vw;\n    background: var(--dsw-alias-interactive-bg-hover, rgba(127, 127, 127, .12));\n    color: var(--dsw-alias-label-primary, inherit);\n  }\n  [data-mobile-nav=\"attach-chip\"][data-kind=\"file\"] {\n    height: 26px;\n    padding: 0 4px 0 8px;\n    border-radius: 999px;\n    font-size: 11.5px;\n    line-height: 18px;\n  }\n  /* An image chip is the thumbnail: no name line, the filename lives in the\n     title attribute (and in the draft text right below). */\n  [data-mobile-nav=\"attach-chip\"][data-kind=\"image\"] {\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border-radius: 10px;\n    overflow: hidden;\n  }\n  [data-mobile-nav=\"attach-chip-art\"] {\n    position: relative;\n    display: grid;\n    place-items: center;\n    flex: none;\n    overflow: hidden;\n  }\n  [data-kind=\"file\"] > [data-mobile-nav=\"attach-chip-art\"] {\n    width: 16px;\n    height: 16px;\n    opacity: .7;\n  }\n  [data-kind=\"image\"] > [data-mobile-nav=\"attach-chip-art\"] {\n    width: 100%;\n    height: 100%;\n  }\n  /* The <img> is stacked over the paperclip, not swapped for it: a format the\n     engine cannot decode (HEIC outside WebKit) simply paints nothing and the\n     icon shows through \u2014 no onError state to carry. */\n  [data-mobile-nav=\"attach-chip-art\"] img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    background: var(--dsw-alias-bg-layer-2, rgba(127, 127, 127, .18));\n  }\n  [data-mobile-nav=\"attach-chip-name\"] {\n    min-width: 0;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n  [data-mobile-nav=\"attach-chip-remove\"] {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    border-radius: 999px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    touch-action: manipulation;\n  }\n  /* On a tile the \u00D7 floats in the corner over the picture, so it needs its own\n     ground to stay legible against an arbitrary photo. */\n  [data-kind=\"image\"] > [data-mobile-nav=\"attach-chip-remove\"] {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    background: rgba(0, 0, 0, .55);\n    color: #fff;\n  }\n  [data-mobile-nav=\"attach-chip-remove\"]:active {\n    transform: scale(.9);\n  }\n\n  /* --- 8. the official stats strip leaves the composer ---\n     Its data moves into the session info card (S4). The row is the composer\n     dock's own `_root` entry; the slot itself stays live for later entries. */\n  [data-slot=\"conversation.composer.dock\"] > [class$=\"_root\"] {\n    display: none !important;\n  }\n\n  /* --- 9. the attachment button (S7; its file input is hidden at the top of\n     this file, at every width) --- */\n  [data-mobile-nav=\"attach\"] {\n    position: relative;\n    width: 28px !important;\n    height: 28px !important;\n    flex: none !important;\n    display: grid !important;\n    place-items: center !important;\n    padding: 0 !important;\n    border: none !important;\n    border-radius: 999px !important;\n    background: var(--dsw-specific-selector, rgba(127, 127, 127, .12));\n    color: var(--dsw-alias-label-primary, inherit);\n    cursor: pointer;\n    touch-action: manipulation;\n  }\n  [data-mobile-nav=\"attach\"]:active {\n    transform: scale(.94);\n    transition: transform .12s;\n  }\n  /* Busy: a ring sweeps around the paperclip. Drawn with a conic gradient in\n     a pseudo-element rather than a spinner node, so the official React tree\n     around us has nothing extra to re-render (same reasoning as the model\n     pill's mask icon, S3.1). */\n  [data-mobile-nav=\"attach\"][data-busy]::after {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 999px;\n    background: conic-gradient(from 0deg, transparent 0 65%, currentColor 100%);\n    mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));\n    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));\n    animation: mnav-attach-spin .9s linear infinite;\n    pointer-events: none;\n  }\n  @keyframes mnav-attach-spin {\n    to { transform: rotate(1turn); }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    [data-mobile-nav=\"attach\"][data-busy]::after {\n      animation-duration: 3s;\n    }\n  }\n  /* Failure note: one line above the button, tap-to-dismiss. Sits on the\n     composer card (z 2) rather than in an overlay layer \u2014 nothing here needs\n     to clear the permission/model sheets. */\n  [data-mobile-nav=\"attach-error\"] {\n    position: absolute;\n    bottom: calc(100% + 6px);\n    left: 0;\n    z-index: 2;\n    max-width: 62vw;\n    padding: 5px 8px;\n    border-radius: 8px;\n    font-size: 12px;\n    line-height: 1.3;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .82));\n    color: var(--dsw-alias-label-primary, #fff);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);\n  }\n\n  /* --- 9. home-indicator clearance (S4.1, 2026-08-17) ---\n     Owned HERE, not by the gateway half. That plugin used to carry\n       [data-slot=\"conversation.composer\"] { padding-bottom: max(env(safe-area-inset-bottom), 8px) }\n     in both pwa/app.css and the gateway's inline DEVICE_CSS. Both were\n     INERT and had always been: that slot element is `display: contents`\n     (measured 2026-08-17 \u2014 the slot wrapper generates no box, so padding on\n     it is discarded), which is why raising it never moved anything. The rule\n     is deleted on the PWA side and restated here on an element that actually\n     lays out, reading --mnav-sab so ?mobile-nav-inset=54,34 can regress it\n     off-device (env() is hard 0 on desktop \u2014 the whole reason S2.1 exists).\n\n     Target: the card should look EQUALLY inset on all four sides. This same\n     element carries the card's side inset (`padding: 0 16px` officially,\n     measured 16px left and 16px right at 390px), so the bottom gap is simply\n     capped at that same 16px. Clearing the FULL 34px inset \u2014 the naive\n     max(sab, 8px) \u2014 is what read as \"too thick\": it is more than double the\n     side margin, so the card looked shoved up off the bottom edge.\n\n     clamp() says all three requirements at once:\n       - floor 8px  -> a device with no home indicator (sab: 0) keeps the\n                       official 8px exactly, so this is a strict no-op there;\n       - track sab  -> a shallower inset than 16px is honoured as-is;\n       - cap 16px   -> a full-size indicator (sab: 34) lands on 16px, equal\n                       to the side inset, which is the look being asked for.\n     Keep the 16px in step with the side padding above if that ever changes;\n     that equality IS the spec here, not a coincidence. */\n  [data-slot=\"conversation.composer.bar\"] > [class$=\"_root\"] {\n    padding-bottom: clamp(8px, var(--mnav-sab), 16px) !important;\n  }\n\n  /* S10 keyboard avoid: effects/keyboard-avoid.ts mirrors the band of the\n     layout viewport hidden behind the software keyboard into --mnav-kb-lift\n     and stamps the html attribute while (and only while) it is non-zero \u2014\n     a resting transform, even translateY(0), would silently become the\n     containing block for any fixed-position descendant of the bar. In every\n     environment where the browser's own focus-reveal works the attribute is\n     simply never set.\n     The target is the slot's _root CHILD, not the slot wrapper: the wrapper\n     is display:contents \u2014 it generates no box, so a transform on it is a\n     silent no-op (found live on-device via CDP, 2026-08-21; the variable and\n     attribute were set and nothing moved). */\n  html[data-mnav-kb] [data-slot=\"conversation.composer.bar\"] > [class$=\"_root\"] {\n    transform: translateY(calc(-1 * var(--mnav-kb-lift, 0px)));\n  }\n}\n\n/* The attachment button and its preview row only exist for the phone shell.\n   Both render at every width (the slots are not breakpoint-aware), so both\n   need hiding here \u2014 the dock-row rules that shape the chips live in the\n   < 768px block and would otherwise leave a bare, unstyled chip line in the\n   desktop composer. */\n@media (min-width: 768px) {\n  [data-mobile-nav=\"attach\"],\n  [data-mobile-nav=\"attach-chips\"] {\n    display: none !important;\n  }\n}\n";
+export declare const COMPOSER_CSS = "/* ---------- phone composer (< 768px) ---------- */\n\n/* The file picker the attachment button drives (S7) \u2014 hidden at EVERY width,\n   deliberately OUTSIDE the phone media block below. A bare <input type=\"file\">\n   renders as a native \"Choose Files\" control, and the slot wrapper around it is\n   `display: contents`, so an un-hidden one becomes a flex item of the official\n   tool row. Scoping this to < 768px once put that control in the DESKTOP\n   composer (caught on a live deploy, 2026-08-17): the button that drives it is\n   phone-only, but the input it drives is in the DOM at all widths. */\n[data-mobile-nav=\"attach-picker\"] {\n  display: none !important;\n}\n\n@media (max-width: 767px) {\n  /* --- 1. flatten the two official groups ---\n     `_tools` and `_trailing` only exist to cluster controls left/right.\n     display:contents dissolves them into `_row`, so the six leaf controls\n     become siblings in one flex line and `order` alone drives the layout:\n     [attach \u00B7 + \u00B7 permission \u00B7 model] \u2026elastic gap\u2026 [context ring \u00B7 send]. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] {\n    justify-content: flex-start !important;\n    gap: 5px !important;\n    padding: 2px 8px 8px !important;\n    /* One line, always: the model pill is the only shrinkable item (its\n       label ellipsizes), so wrapping would only ever push the send button\n       to a second row (real-device report, 2026-08-25). */\n    flex-wrap: nowrap !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] {\n    display: contents !important;\n  }\n\n  /* --- 2. the running order ---\n     The attachment button (S3 placeholder, S7 wires it up) sits leftmost;\n     the official \"+\" command menu keeps its seat right next to it, where\n     the two \"insert something\" affordances read as one cluster. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] [data-mobile-nav=\"attach\"] {\n    order: 1 !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_add\"] {\n    order: 2 !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] {\n    order: 3 !important;\n    /* Rigid on purpose. This seat holds the permission chip, whose own\n       wrapper (the plugin's element inside _modes) is `flex: 0 0 auto` and\n       will NOT follow the seat down \u2014 so a shrinkable seat does not make the\n       chip narrower, it just slices the seat out from under a chip that\n       stays 44px wide, and the overflow lands on top of the model pill.\n       Measured 2026-09-04 on DSH 0.1.2 at 390px: seat 90-120 (29.7px) with\n       the chip still 90-134, model starting at 125 \u2014 a 9px overlap, exactly\n       the \"the two chips touch\" report. With the seat rigid: seat 90-134,\n       model 139-246, overlap 0; and at 320px the model pill shrinks to 52px\n       and still nothing overlaps.\n       This also restores what section 1 says out loud \u2014 the model pill is\n       the ONLY shrinkable item in the row. `min-width: 0` is gone with the\n       shrink: it only ever mattered as the companion of `flex: 0 1`. */\n    flex: 0 0 auto !important;\n    gap: 6px !important;\n  }\n  /* The elastic gap used to live here as `margin-right: auto`, which broke\n     the moment a session had no model pill: a subagent session has none, so\n     the gap vanished and the stop / send buttons bunched up in the middle of\n     the row instead of sitting at the right edge (reported 2026-09-06). The\n     gap belongs to the RIGHT group, not to the last item of the left one \u2014\n     see the two rules below the order list. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] {\n    order: 4 !important;\n    /* A definite flex-basis (not auto) breaks the circular sizing between\n       this seat and the trigger's max-width:100%: the seat's width comes\n       from flex resolution, the trigger fills up to it, the label\n       ellipsizes inside. Under nowrap pressure this is the only\n       min-width:0 seat, so it absorbs all shrink. */\n    flex: 0 1 min(48vw, 200px) !important;\n    min-width: 0 !important;\n    max-width: min(48vw, 200px) !important;\n  }\n  /* Third-party input.right entries park next to the ring rather than\n     landing at order 0 (= far left) once the groups are flattened. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.right\"] > * {\n    order: 5 !important;\n  }\n  /* ContextMeter \u2014 the only `span` ending in _root inside the row. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > span[class$=\"_root\"] {\n    order: 6 !important;\n    flex: none !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [class$=\"_primary\"] {\n    order: 7 !important;\n  }\n  /* The elastic gap. It sits in front of whichever of the two right-hand\n     items comes first, so the group hugs the right edge no matter what the\n     left side happens to contain \u2014 with a model pill, without one (subagent\n     sessions), with or without the third-party entries at order 5.\n     Both get `margin-left: auto` and the last rule takes it back off the\n     send button whenever a ring precedes it: two auto margins would SHARE\n     the free space and open a second gap between the ring and send. A\n     sibling combinator answers \"is there a ring before me\" without assuming\n     anything about the host's nesting. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > span[class$=\"_root\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [class$=\"_primary\"] {\n    margin-left: auto !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > span[class$=\"_root\"] ~ [class$=\"_primary\"] {\n    margin-left: 0 !important;\n  }\n\n  /* --- 3. permission as icon-only pill; model as name+effort pill ---\n     (real-device round 2, 2026-08-17; model pill reworked 2026-08-25:\n     the user wants to SEE which model/effort is active, so only the\n     permission trigger stays icon-only \u2014 its label is hidden and it\n     collapses to a plain ~44x30 icon button. This AGREES with (rather than fights) the official\n     container query (`@container (width <= 460px) { .trigger:has(.triggerIcon)\n     .triggerLabel { display: none } }`) that S3 had to override \u2014 no need\n     to override it back. Accessible name is unaffected: both official\n     triggers already ship a descriptive aria-label independent of the\n     visible text (PermissionSelect: t('input.accessMode', {name}); the\n     model trigger: t('trigger.aria'/'trigger.ariaEffort')) \u2014 verified live\n     in dsh-client-ui-conversation / dsh-client-ui-model-selection lib/\n     client.js, 2026-08-17 \u2014 so hiding the label costs nothing for screen\n     readers. The permission trigger only renders an icon for the\n     \"read-only\" / \"workspace-write\" presets (permissionGlyphs in\n     dsh-client-ui-conversation) \u2014 \"Full access\" and any host-configured\n     preset name fall back to chevron-only, a known gap in the official\n     markup this plugin cannot fill without inventing new icon meaning.\n     The model trigger never renders an icon at all (only label + optional\n     effort text + chevron), so its ::before below draws one from a\n     primitives icon path (Sparkle \u2014 the closest existing \"model\" glyph) as\n     a CSS-only pseudo-element: it survives React re-renders for free\n     (unlike a DOM-injected node, which would need a MutationObserver, see\n     the preview-full-toggle pitfall in AGENTS.md) and does not touch\n     accessible-name computation (empty generated content). S3's\n     rtl-ellipsis trick on the model label is simply inert under\n     display:none now; left alone rather than unpicked. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [class$=\"_triggerLabel\"] {\n    display: none !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] button[class$=\"_trigger\"] {\n    background: var(--dsw-specific-selector, rgba(127, 127, 127, .12)) !important;\n    width: 44px !important;\n    height: 30px !important;\n    max-width: none !important;\n    min-width: 0 !important;\n    padding: 0 !important;\n    gap: 2px !important;\n    justify-content: center !important;\n    border-radius: 999px !important;\n    touch-action: manipulation !important;\n  }\n  /* Model trigger: name + effort pill (2026-08-25 user request \u2014 the\n     icon-only form hid which model was active). The effort text must stay\n     whole; the model NAME is the elastic part and ellipsizes. max-width\n     caps the pill so the row's elastic gap survives extreme model ids;\n     the label rules below override the <=1023px grow rules in\n     layout.css.ts (flex 1 1 auto) that would otherwise pad the pill. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_trigger\"] {\n    background: var(--dsw-specific-selector, rgba(127, 127, 127, .12)) !important;\n    height: 30px !important;\n    width: auto !important;\n    max-width: 100% !important;\n    min-width: 0 !important;\n    padding: 0 10px !important;\n    gap: 4px !important;\n    justify-content: flex-start !important;\n    border-radius: 999px !important;\n    touch-action: manipulation !important;\n    font-size: 12px !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_trigger\"] > [class$=\"_triggerLabel\"] {\n    display: block !important;\n    flex: 0 1 auto !important;\n    min-width: 0 !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n    white-space: nowrap !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_trigger\"] > [class$=\"_triggerEffort\"] {\n    display: block !important;\n    flex: none !important;\n    white-space: nowrap !important;\n  }\n  /* PermissionSelect wraps its trigger in the Menu primitive's root span,\n     which must shrink to the icon button's fixed width. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] > span:has(> button[class$=\"_trigger\"]) {\n    flex: 0 0 auto !important;\n    min-width: 0 !important;\n  }\n  /* (2026-08-25) The model trigger's CSS-only Sparkle ::before icon is gone:\n     the pill now shows the model name + effort text itself, so an icon would\n     just eat label width. */\n\n  /* --- 4. both menus become bottom sheets ---\n     The permission menu is the Menu primitive (role=menu, absolute, side=top)\n     and the model menu is ModelSelect's own `_menu` (absolute, bottom+right).\n     Neither has a transformed ancestor between it and the viewport, so\n     position:fixed re-anchors both to the screen edge. Only the shell moves \u2014\n     the items, the two-level model panes and every selection handler stay\n     official. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [role=\"menu\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] {\n    position: fixed !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    top: auto !important;\n    transform: none !important;\n    width: 100% !important;\n    min-width: 0 !important;\n    max-width: none !important;\n    max-height: min(70dvh, 520px) !important;\n    box-sizing: border-box !important;\n    border-radius: 16px 16px 0 0 !important;\n    border-bottom: none !important;\n    padding: 8px 8px calc(8px + var(--mnav-sab)) !important;\n    z-index: 60 !important;\n    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important;\n  }\n  /* 44pt+ rows in both sheets (Menu items, model options, and the model\n     sheet's two root cells that drill into the model / effort panes). */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [role=\"menu\"] [role=\"menuitem\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] [class$=\"_option\"],\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] [class$=\"_cell\"] {\n    min-height: 48px !important;\n    border-radius: 12px !important;\n    font-size: 15px !important;\n  }\n  /* --- 4a. third-party composer entries live in the model sheet ---\n     effects/model-sheet-extras.ts parks the `conversation.input.right`\n     container inside the model menu while that menu is open and puts it back\n     when it closes; these rules are the two halves of that trip.\n\n     In the row: hidden, but ONLY once the effect has marked the container as\n     one it manages. Keying the hide off the marker rather than off \"not\n     currently parked\" is what makes the failure direction safe \u2014 if the\n     effect declines to act (nothing in the slot but the vision toggle, so\n     nothing worth moving) or never runs at all, the marker is absent, this\n     rule does not match, and the controls stay exactly where the host put\n     them. The inverse spelling hid them in the row whenever they were not in\n     the sheet, which in those same cases left them reachable from neither\n     place (caught in review, 2026-09-06).\n     Hiding by ancestor rather than by a display rule on the container itself\n     is what lets the parked copy style itself freely \u2014 same element, two\n     homes, two rule sets. `!important` because the slot container carries an\n     inline `display: contents`. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.right\"][data-zen-sheet-extras] {\n    display: none !important;\n  }\n  /* Parked in the sheet: a column of full-width rows in the sheet's own\n     language, so a relocated control reads as a sibling of \u6A21\u578B and \u63A8\u7406\u7B49\u7EA7\n     rather than a chip that wandered in. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 2px !important;\n    width: 100% !important;\n  }\n  /* Undo the row's compaction on every parked control: back to full width and\n     the 48px the sheet's own cells use. `> * > *` reaches both shapes without\n     naming either plugin \u2014 subscriptions wraps its trigger in a positioning\n     div, vision-router puts its button straight in the slot. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] > *,\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] > * > button {\n    width: 100% !important;\n    max-width: none !important;\n    min-width: 0 !important;\n    justify-content: flex-start !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] button {\n    box-sizing: border-box !important;\n    min-height: 48px !important;\n    height: auto !important;\n    padding: 0 12px !important;\n    gap: 10px !important;\n    border-radius: 12px !important;\n    border: none !important;\n    background: transparent !important;\n    font-size: 15px !important;\n    /* Both plugins center their chip label, which is right for a pill in the\n       row and wrong for a full-width row: the sheet's own cells start their\n       label at the left edge. justify-content covers the flex triggers,\n       text-align the ones that are not flex containers. */\n    text-align: left !important;\n    justify-content: flex-start !important;\n  }\n  /* Order comes from the row (compat.css.ts puts the vision toggle at 5 so it\n     parks beside the context ring), and that rule still matches in here \u2014 the\n     sheet is a DOM descendant of the composer bar even though it paints as a\n     fixed layer. Reset it so the sheet follows DOM order instead of\n     inheriting a decision that was about a different layout. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] > * {\n    order: 0 !important;\n  }\n  /* The vision toggle is squeezed to a 28px icon in the row (compat.css.ts);\n     in the sheet it is a row, so its label comes back and the icon leads. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > span {\n    display: inline !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > svg:first-of-type {\n    width: 18px !important;\n    height: 18px !important;\n  }\n  /* The speed chip opens a menu of its own, anchored `bottom: 100%` to its\n     trigger. Inside the sheet \u2014 which is `overflow: hidden` so its rounded\n     top clips its content \u2014 that menu would be cut off. Same escape section 4\n     uses for the host's two menus: position: fixed leaves the clip behind\n     (the sheet sets `transform: none`, so nothing between here and the\n     viewport captures fixed positioning) and it lands as its own sheet on top\n     of this one. */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] [role=\"menu\"] {\n    position: fixed !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    top: auto !important;\n    margin: 0 !important;\n    width: 100% !important;\n    min-width: 0 !important;\n    max-width: none !important;\n    max-height: min(70dvh, 520px) !important;\n    box-sizing: border-box !important;\n    border-radius: 16px 16px 0 0 !important;\n    border-bottom: none !important;\n    padding: 8px 8px calc(8px + var(--mnav-sab)) !important;\n    /* Above the model sheet it sits on (60, section 4), below the session-info\n       sheet's 70 (info.css.ts) \u2014 it is a child of the model sheet, not a peer\n       of the page's own layers. */\n    z-index: 61 !important;\n    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important;\n  }\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"] > [data-zen-sheet-extras] [role=\"menu\"] [role=\"menuitemradio\"] {\n    min-height: 48px !important;\n    border-radius: 12px !important;\n    font-size: 15px !important;\n  }\n\n  /* --- 4b. the official scroll-to-bottom button must not poke through the\n     sheet (real-device follow-up, 2026-08-17) ---\n     ChatView's own \"jump to latest\" button (aria-label t(\"chat.toBottom\"))\n     is `position: sticky; z-index: 8` inside the message column, not\n     `position: fixed` \u2014 it never escapes to the same top-level stacking\n     context our sheets get promoted to, so raising the sheet's z-index\n     further does nothing (measured live: it still rendered on top at\n     z-index 60 vs 8). Rather than chase engine-specific stacking-context\n     semantics (Chromium and WebKit do not always agree here \u2014 see AGENTS.md\n     CDP/document.hidden lesson for another instance of that), this hides\n     the button outright while either sheet is open and lets it reappear on\n     close: a plain `display: none` behind a live `:has()` read is correct\n     regardless of which stacking rules the engine happens to apply.\n     Selector: no hashed classes (dsh-client-ui-conversation lib/client.js,\n     verified 2026-08-17) \u2014 `data-chat-flow` is the one stable attribute on\n     the message column, and the button's wrapper is its only sibling\n     (ChatView only ever renders the column and, conditionally, this one\n     slot), so the adjacent-sibling combinator pins it precisely. */\n  body:has([data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_tools\"] > [class$=\"_modes\"] [role=\"menu\"]) [data-chat-flow] + div,\n  body:has([data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] > [class$=\"_row\"] > [class$=\"_trailing\"] > [data-slot=\"conversation.input.model\"] > [class$=\"_root\"] > [class$=\"_menu\"]) [data-chat-flow] + div {\n    display: none !important;\n  }\n  /* --- 5. input box: two lines minimum, five lines maximum ---\n     The official autosizer drives the box off the hidden mirror's height, so\n     a min-height on the mirror IS the min-height of the field; the scroll cap\n     rides the official custom property. 52px = 2 x 24px line box + 4px pad,\n     124px = 5 lines. The hero card keeps its own one-line collapse (misc.css\n     pins _scroll/_grow while the placeholder shows). */\n  [data-slot=\"conversation.composer.bar\"] [class$=\"_card\"] [class$=\"_mirror\"] {\n    min-height: 52px !important;\n  }\n  [class$=\"_composerSeat\"] {\n    --dsh-composer-text-max-height: 124px;\n  }\n  /* Pull the text in from the card's left border. Upstream insets the editing\n     host by 16px while the control row below it starts 8px in (row padding,\n     section 1), so the placeholder sat noticeably further out than the\n     buttons under it and the field read as over-padded on a phone (reported\n     2026-09-06). 12px squares it with the 12px of clear space on the right,\n     giving the text a symmetric box, and closes most of the gap with the\n     button row. Anchored on the editing host's own contract attribute rather\n     than a hashed class. */\n  [data-slot=\"conversation.composer.bar\"] [data-composer-input] {\n    padding-left: 12px !important;\n  }\n\n  /* --- 6. no divider above OR below the message list ---\n     Instead of a rule the messages butt against, they fade near both edges.\n     This used to be ONE mask-image on the message scroller; iOS WebKit\n     turned that into fog over the header (user report 2026-08-23): a mask\n     on a scroll container is applied in CONTENT coordinates there (the fade\n     bands scroll away with the messages) and, worse, it breaks the\n     container's own overflow clipping \u2014 content scrolled out of view keeps\n     painting, straight over the header and status bar. Engine bug with no\n     iOS escape hatch (every iOS browser is WebKit), so the fades moved off\n     the scroller entirely:\n\n     - fade-IN under the header: the header's own ::after, restyled into a\n       20px gradient strip \u2014 styles/header.css.ts (\"no header bottom line\").\n     - fade-OUT above the composer: nothing of ours. The official composer\n       seat already carries `background: linear-gradient(transparent 0,\n       bg 36px)` on its sticky self (dsh-client-ui-conversation lib/\n       client.js .wSkVaW_composerSeat) and that is the entire visible\n       effect; the mask's own bottom band landed inside the safe-area\n       padding below the card and painted nothing. If the bottom edge ever\n       reads harsh, hang a ::before strip off the seat the same way the\n       header does \u2014 do NOT put a mask back on the scroller.\n\n     Painted strips instead of a mask is a fair trade only because the page\n     background is one flat color \u2014 which it is (--dsw-alias-bg-base). */\n  [class$=\"_composerSeat\"],\n  [class$=\"_composerStack\"] {\n    border-top: none !important;\n  }\n\n  /* --- 7. dock entries become mini chips above the input card ---\n     conversation.input.dock is display:contents (inline style), so its\n     entries are stacked rows of the composer column. Forcing the slot itself\n     to flex turns them into ONE scrollable chip line outside and above the\n     card. Written against the slot, not against any particular plugin's chip\n     (the git branch chip and the todo panel are third-party and may not be\n     installed at all). */\n  [data-slot=\"conversation.input.dock\"] {\n    display: flex !important;\n    flex-flow: row nowrap !important;\n    align-items: center !important;\n    gap: 6px !important;\n    min-width: 0 !important;\n    margin: 0 16px !important;\n    overflow-x: auto !important;\n    overflow-y: hidden !important;\n    scrollbar-width: none !important;\n    /* The dock is itself a flex ITEM of the composer stack, and the\n       new-session hero pins that stack to a fixed height. overflow-x:auto\n       above makes this a scroll container, which drops a flex item's\n       automatic minimum size to 0 \u2014 so the hero squeezed the dock to ~5px\n       and the attachment chips slid under the card drawn after it (only the\n       top sliver of a thumbnail showed; reported from a real phone,\n       2026-08-26). Refuse the squeeze: natural height, the stack centers a\n       few px lower instead. In-chat the column is not height-pinned and this\n       is a no-op. */\n    flex-shrink: 0 !important;\n  }\n  [data-slot=\"conversation.input.dock\"]::-webkit-scrollbar {\n    display: none !important;\n  }\n  [data-slot=\"conversation.input.dock\"] > * {\n    flex: 0 0 auto !important;\n    max-width: 70% !important;\n    min-height: 26px !important;\n    max-height: 26px !important;\n    border-radius: 999px !important;\n    font-size: 11.5px !important;\n    line-height: 18px !important;\n    overflow: hidden !important;\n  }\n  /* The git-graph chip carries a 34px tablet target from misc.css; that\n     selector is more specific, so restate it at the phone breakpoint. */\n  [data-slot=\"conversation.input.dock\"] [data-gitgraph-chip-anchor] [data-gitgraph-chip] {\n    min-height: 26px !important;\n    padding: 0 10px !important;\n    font-size: 11.5px !important;\n  }\n  /* --- 7a. the native to-do card opts OUT of the 26px pill cage ---\n     conversation.input.dock is not only a chip rail: DSH's own TodoPanel\n     (dsh-client-ui-conversation) registers here, and it is an expandable\n     card, not a pill \u2014 tapping its header renders the to-do list INSIDE\n     itself. The cage's max-height:26px + overflow:hidden left that list\n     rendered but clipped to nothing, so on a phone the bar looked dead:\n     aria-expanded flipped, 8 rows mounted at 216px, and the card still\n     painted 26px tall (measured live, 2026-08-20). Give it the official\n     geometry back \u2014 full row, natural height, 12px radius. Its list caps\n     itself at 180px with its own scroller, so this cannot run into the\n     composer. Anchored on the official data-testid, a stable contract\n     marker rather than a hashed class name. */\n  [data-slot=\"conversation.input.dock\"] > [data-testid=\"todo-panel\"] {\n    /* A whole line to itself. It shared line 0 with the pills until the goal\n       bar turned up (2026-09-06): two full-width things on one nowrap line\n       meant the to-do header shrank to a stub and the goal bar ran off the\n       right edge. Both are status strips you read at a glance, so they stack\n       \u2014 see the line policy in 7c. */\n    flex: 1 0 100% !important;\n    order: 1 !important;\n    min-width: 0 !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    border-radius: 12px !important;\n    /* The cage shrinks dock text to 11.5px/18px; the card's rows inherit it\n       and turn cramped. Restore the official 13px body scale. */\n    font-size: 13px !important;\n    line-height: normal !important;\n  }\n\n  /* --- 7b. attachment chips (S7.1) ---\n     Our own dock entry opts OUT of the 26px pill cage above: an image chip is\n     a 48px tile. The row sits tight under the card's top edge, so the chips\n     read as part of the composer rather than as a floating strip.\n\n     It also takes the LAST line of its own (line policy in 7c): a 48px tile\n     beside the to-do chip on one nowrap line squeezed that chip down to an\n     unreadable stub, with a long file name pushing the rest off-screen\n     (reported 2026-08-22). Its own chips wrap rather than overflow, so\n     several attachments stack instead of scrolling out of reach. */\n  [data-slot=\"conversation.input.dock\"] > [data-mobile-nav=\"attach-chips\"] {\n    display: flex !important;\n    flex: 1 0 100% !important;\n    flex-wrap: wrap !important;\n    order: 4 !important;\n    align-items: center !important;\n    gap: 6px !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    border-radius: 0 !important;\n    overflow: visible !important;\n    margin-bottom: -2px;\n  }\n\n  /* --- 7c. the queue strip opts OUT of the cage, on a line of its own ---\n     Third entry that is not a pill. conversation.input.dock is a `list` slot\n     and DSH's own QueueDock registers into it at order 20 (id `queue`,\n     dsh-client-ui-conversation) \u2014 a 36px row per queued message, or a\n     collapsible \"N \u6761\u6392\u961F\u6D88\u606F\" header once there is more than one. The 26px\n     cage above clipped it to a sliver: on a phone a queued message showed as\n     a grey stub poking out from behind the input card, unreadable and with\n     its edit / delete / send buttons cut off (reported 2026-08-22, same\n     failure the to-do card hit in 7a).\n\n     Two things are restored. Geometry: the official row height back, and the\n     dock's own composer-column sizing dropped \u2014 its width/max-width are\n     calc()s over the composer card variables and its bottom margin is\n     negative by design (upstream tucks the strip UNDER the card), none of\n     which survives being a flex item of our chip rail.\n\n     Layout \u2014 the line policy for the whole rail, now that three things want\n     room on it. The pills (the to-do card, a branch chip, whatever else\n     registers) keep order 0 and share the top line, still scrolling\n     horizontally. The queue takes the next line (order 1). The attachment\n     chips take the last one (order 2, 7b), so what the user is about to send\n     sits closest to the input it will be sent from. The rail only wraps\n     while one of the two full-width entries exists, so a session with\n     neither keeps the original single scrolling chip line. */\n  [data-slot=\"conversation.input.dock\"]:has(> [data-queue-dock], > [data-mobile-nav=\"attach-chips\"], > [data-testid=\"todo-panel\"], > [data-goal-bar]) {\n    flex-wrap: wrap !important;\n  }\n  [data-slot=\"conversation.input.dock\"] > [data-queue-dock] {\n    flex: 1 0 100% !important;\n    order: 3 !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    border-radius: 0 !important;\n    overflow: visible !important;\n    font-size: 13px !important;\n    line-height: normal !important;\n  }\n  /* dsh-client-ui-goal's status strip (its own `data-goal-bar` marker; it\n     registers into this dock at order 10). Fourth thing here that is not a\n     pill: a row carrying the objective text plus pause / edit / delete\n     buttons, so the 26px cage clipped its buttons off the right edge and the\n     nowrap line pushed what was left off screen (reported 2026-09-06). Same\n     treatment the queue gets \u2014 a line of its own, official geometry back. */\n  [data-slot=\"conversation.input.dock\"] > [data-goal-bar] {\n    flex: 1 0 100% !important;\n    order: 2 !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    border-radius: 12px !important;\n    overflow: visible !important;\n    font-size: 13px !important;\n    line-height: normal !important;\n  }\n\n  /* The panel is the dock's only child; upstream rounds its top corners only\n     and drops the bottom border, because there it is half-hidden behind the\n     card. On its own line it is a free-standing strip, so close it up. */\n  [data-slot=\"conversation.input.dock\"] > [data-queue-dock] > * {\n    border-radius: 12px !important;\n  }\n  [data-slot=\"conversation.input.dock\"] > [data-queue-dock] > *::after {\n    border-bottom: 1px solid var(--dsw-alias-border-l1) !important;\n  }\n\n  [data-mobile-nav=\"attach-chip\"] {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex: 0 0 auto;\n    max-width: 62vw;\n    background: var(--dsw-alias-interactive-bg-hover, rgba(127, 127, 127, .12));\n    color: var(--dsw-alias-label-primary, inherit);\n  }\n  [data-mobile-nav=\"attach-chip\"][data-kind=\"file\"] {\n    height: 26px;\n    padding: 0 4px 0 8px;\n    border-radius: 999px;\n    font-size: 11.5px;\n    line-height: 18px;\n  }\n  /* An image chip is the thumbnail: no name line, the filename lives in the\n     title attribute (and in the draft text right below). */\n  [data-mobile-nav=\"attach-chip\"][data-kind=\"image\"] {\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border-radius: 10px;\n    overflow: hidden;\n  }\n  [data-mobile-nav=\"attach-chip-art\"] {\n    position: relative;\n    display: grid;\n    place-items: center;\n    flex: none;\n    overflow: hidden;\n  }\n  [data-kind=\"file\"] > [data-mobile-nav=\"attach-chip-art\"] {\n    width: 16px;\n    height: 16px;\n    opacity: .7;\n  }\n  [data-kind=\"image\"] > [data-mobile-nav=\"attach-chip-art\"] {\n    width: 100%;\n    height: 100%;\n  }\n  /* The <img> is stacked over the paperclip, not swapped for it: a format the\n     engine cannot decode (HEIC outside WebKit) simply paints nothing and the\n     icon shows through \u2014 no onError state to carry. */\n  [data-mobile-nav=\"attach-chip-art\"] img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    background: var(--dsw-alias-bg-layer-2, rgba(127, 127, 127, .18));\n  }\n  [data-mobile-nav=\"attach-chip-name\"] {\n    min-width: 0;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n  [data-mobile-nav=\"attach-chip-remove\"] {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    border-radius: 999px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    touch-action: manipulation;\n  }\n  /* On a tile the \u00D7 floats in the corner over the picture, so it needs its own\n     ground to stay legible against an arbitrary photo. */\n  [data-kind=\"image\"] > [data-mobile-nav=\"attach-chip-remove\"] {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    background: rgba(0, 0, 0, .55);\n    color: #fff;\n  }\n  [data-mobile-nav=\"attach-chip-remove\"]:active {\n    transform: scale(.9);\n  }\n\n  /* --- 8. the official stats strip leaves the composer ---\n     Its data moves into the session info card (S4). The row is the composer\n     dock's own `_root` entry; the slot itself stays live for later entries. */\n  [data-slot=\"conversation.composer.dock\"] > [class$=\"_root\"] {\n    display: none !important;\n  }\n\n  /* --- 9. the attachment button (S7; its file input is hidden at the top of\n     this file, at every width) --- */\n  [data-mobile-nav=\"attach\"] {\n    position: relative;\n    width: 28px !important;\n    height: 28px !important;\n    flex: none !important;\n    display: grid !important;\n    place-items: center !important;\n    padding: 0 !important;\n    border: none !important;\n    border-radius: 999px !important;\n    background: var(--dsw-specific-selector, rgba(127, 127, 127, .12));\n    color: var(--dsw-alias-label-primary, inherit);\n    cursor: pointer;\n    touch-action: manipulation;\n  }\n  [data-mobile-nav=\"attach\"]:active {\n    transform: scale(.94);\n    transition: transform .12s;\n  }\n  /* Busy: a ring sweeps around the paperclip. Drawn with a conic gradient in\n     a pseudo-element rather than a spinner node, so the official React tree\n     around us has nothing extra to re-render (same reasoning as the model\n     pill's mask icon, S3.1). */\n  [data-mobile-nav=\"attach\"][data-busy]::after {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 999px;\n    background: conic-gradient(from 0deg, transparent 0 65%, currentColor 100%);\n    mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));\n    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));\n    animation: mnav-attach-spin .9s linear infinite;\n    pointer-events: none;\n  }\n  @keyframes mnav-attach-spin {\n    to { transform: rotate(1turn); }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    [data-mobile-nav=\"attach\"][data-busy]::after {\n      animation-duration: 3s;\n    }\n  }\n  /* Failure note: one line above the button, tap-to-dismiss. Sits on the\n     composer card (z 2) rather than in an overlay layer \u2014 nothing here needs\n     to clear the permission/model sheets. */\n  [data-mobile-nav=\"attach-error\"] {\n    position: absolute;\n    bottom: calc(100% + 6px);\n    left: 0;\n    z-index: 2;\n    max-width: 62vw;\n    padding: 5px 8px;\n    border-radius: 8px;\n    font-size: 12px;\n    line-height: 1.3;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .82));\n    color: var(--dsw-alias-label-primary, #fff);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);\n  }\n\n  /* --- 9. home-indicator clearance (S4.1, 2026-08-17) ---\n     Owned HERE, not by the gateway half. That plugin used to carry\n       [data-slot=\"conversation.composer\"] { padding-bottom: max(env(safe-area-inset-bottom), 8px) }\n     in both pwa/app.css and the gateway's inline DEVICE_CSS. Both were\n     INERT and had always been: that slot element is `display: contents`\n     (measured 2026-08-17 \u2014 the slot wrapper generates no box, so padding on\n     it is discarded), which is why raising it never moved anything. The rule\n     is deleted on the PWA side and restated here on an element that actually\n     lays out, reading --mnav-sab so ?mobile-nav-inset=54,34 can regress it\n     off-device (env() is hard 0 on desktop \u2014 the whole reason S2.1 exists).\n\n     Target: the card should look EQUALLY inset on all four sides. This same\n     element carries the card's side inset (`padding: 0 16px` officially,\n     measured 16px left and 16px right at 390px), so the bottom gap is simply\n     capped at that same 16px. Clearing the FULL 34px inset \u2014 the naive\n     max(sab, 8px) \u2014 is what read as \"too thick\": it is more than double the\n     side margin, so the card looked shoved up off the bottom edge.\n\n     clamp() says all three requirements at once:\n       - floor 8px  -> a device with no home indicator (sab: 0) keeps the\n                       official 8px exactly, so this is a strict no-op there;\n       - track sab  -> a shallower inset than 16px is honoured as-is;\n       - cap 16px   -> a full-size indicator (sab: 34) lands on 16px, equal\n                       to the side inset, which is the look being asked for.\n     Keep the 16px in step with the side padding above if that ever changes;\n     that equality IS the spec here, not a coincidence. */\n  [data-slot=\"conversation.composer.bar\"] > [class$=\"_root\"] {\n    padding-bottom: clamp(8px, var(--mnav-sab), 16px) !important;\n  }\n\n  /* S10 keyboard avoid: effects/keyboard-avoid.ts mirrors the band of the\n     layout viewport hidden behind the software keyboard into --mnav-kb-lift\n     and stamps the html attribute while (and only while) it is non-zero \u2014\n     a resting transform, even translateY(0), would silently become the\n     containing block for any fixed-position descendant of the bar. In every\n     environment where the browser's own focus-reveal works the attribute is\n     simply never set.\n     The target is the slot's _root CHILD, not the slot wrapper: the wrapper\n     is display:contents \u2014 it generates no box, so a transform on it is a\n     silent no-op (found live on-device via CDP, 2026-08-21; the variable and\n     attribute were set and nothing moved). */\n  html[data-mnav-kb] [data-slot=\"conversation.composer.bar\"] > [class$=\"_root\"] {\n    transform: translateY(calc(-1 * var(--mnav-kb-lift, 0px)));\n  }\n}\n\n/* The attachment button and its preview row only exist for the phone shell.\n   Both render at every width (the slots are not breakpoint-aware), so both\n   need hiding here \u2014 the dock-row rules that shape the chips live in the\n   < 768px block and would otherwise leave a bare, unstyled chip line in the\n   desktop composer. */\n@media (min-width: 768px) {\n  [data-mobile-nav=\"attach\"],\n  [data-mobile-nav=\"attach-chips\"] {\n    display: none !important;\n  }\n}\n";
 //# sourceMappingURL=composer.css.d.ts.map

package/lib/types/client/styles/composer.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composer.css.d.ts","sourceRoot":"","sources":["../../../../src/client/styles/composer.css.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,YAAY,uhgCA2nBxB,CAAA"}
+{"version":3,"file":"composer.css.d.ts","sourceRoot":"","sources":["../../../../src/client/styles/composer.css.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,YAAY,w00CA8xBxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-zen-remote",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "把 DeepSeek Harness 变成手机 App：移动端界面重排（两级页面栈、会话列表主屏、composer 重排、手势、附件上传）+ 配对码认证网关 + PWA 安装 + 真 Web Push。Complete mobile plugin for DeepSeek Harness (DSH): app-shell mobile UI, pairing-code gateway for public-internet access behind your own reverse proxy, installable PWA, offline service worker, and real Web Push agent-done notifications.",
   "license": "MIT",
   "type": "module",

package/pwa/app.css

@@ -50,13 +50,6 @@ html:not([data-lan-device="desktop"]) body {
   overscroll-behavior-y: none;
 }
 
-/* iOS Safari zooms the whole page when a focused input's font-size is below
- * 16px. dsh-mobile-nav does not add this workaround, so it stays here. */
-html:not([data-lan-device="desktop"]) [data-slot="conversation"] input,
-html:not([data-lan-device="desktop"]) [data-slot="conversation"] textarea {
-  font-size: 16px;
-}
-
 /* Apply the pinch-to-resize font scale. touch-gestures.js sets
  * --dsh-pwa-font-scale via root.style.setProperty() on pinch; this is this
  * plugin's own gesture feature, not a dsh-mobile-nav concern. */
@@ -67,6 +60,53 @@ html:not([data-lan-device="desktop"]) [data-slot="conversation"] [data-phase] {
   font-size: calc(1em * var(--dsh-pwa-font-scale));
 }
 
+/* iOS Safari zooms the whole page when a focused input's font-size is below
+ * 16px, and it does NOT zoom back out when focus leaves — the page just stays
+ * magnified until the user pinches it back (reported 2026-09-06: the UI came
+ * back enlarged after a trip through a subagent session, and only leaving to
+ * the session list and re-entering cleared it).
+ *
+ * This was scoped to [data-slot="conversation"], which is an exact attribute
+ * match: it covers inputs inside the element whose slot is literally
+ * "conversation" and nothing in the dozens of conversation.* subtrees around
+ * it. Measured on the running UI: one input matched, while a visible 12px
+ * text field sat outside the rule — and the composer never triggered the zoom
+ * at all because it is contenteditable, not an input, which is why this went
+ * unnoticed for so long. So the guard now covers the whole mobile shell.
+ *
+ * File / checkbox / radio are excluded: they carry no text, the file inputs
+ * here are hidden anyway, and forcing 16px on them only disturbs layout.
+ *
+ * `[contenteditable]` is in the list because the thing users actually focus
+ * — the message composer — is one: a contenteditable div with role=textbox,
+ * not an input or a textarea. iOS treats it like any other editing host and
+ * zooms on it just the same, so covering only inputs left the single most
+ * focused element on the page unprotected, which is why widening this rule to
+ * every input still did not stop the page coming back magnified (2026-09-06).
+ * Measured before changing it: the composer computes 14px, and raising it to
+ * 16px moves no geometry at all — its line-height is a fixed 24px rather than
+ * a ratio, so the line box, the editor height and the card height are
+ * identical either way, and section 5 of composer.css.ts can go on counting
+ * lines in 24px units.
+ *
+ * It has to come AFTER the pinch-scale rule above, and say max() rather than
+ * a flat 16px. The composer's editing host carries `data-phase` of its own,
+ * so `[data-slot="conversation"] [data-phase]` matches it too — at exactly the
+ * same specificity as this rule (0,3,1). Source order was therefore the whole
+ * ballgame, and with this block sitting first the pinch rule quietly won and
+ * put the composer back to 1em. That is why the composer stayed at 14px even
+ * after this selector learned about contenteditable, and why the page went on
+ * zooming (measured 2026-09-06: both rules matched, the later one applied).
+ * max() keeps the two goals from fighting — a hard 16px floor so iOS never
+ * zooms, and everything above it still scaling with the pinch gesture.
+ *
+ * dsh-mobile-nav does not add this workaround, so it stays here. */
+html:not([data-lan-device="desktop"]) input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
+html:not([data-lan-device="desktop"]) textarea,
+html:not([data-lan-device="desktop"]) [contenteditable]:not([contenteditable="false"]) {
+  font-size: max(16px, calc(1em * var(--dsh-pwa-font-scale, 1)));
+}
+
 /* Home-indicator clearance for the composer USED to live here, as
  *   [data-slot="conversation.composer"], [data-slot="conversation.input.bar"]
  *   { padding-bottom: max(env(safe-area-inset-bottom), 8px) }

package/src/client/effects/model-sheet-extras.ts

@@ -0,0 +1,159 @@
+import type { ClientContext } from '../compat/types.ts'
+
+/** Phone breakpoint — same query every phone-only effect in this plugin uses. */
+const PHONE_QUERY = '(max-width: 767px)'
+
+/** The model pill itself. Absent in a subagent session — see `sync`. */
+const MODEL_SEAT_SELECTOR = '[data-slot="conversation.input.model"]'
+
+/** The model pill's own popup, which section 4 of composer.css.ts turns into a bottom sheet. */
+const MENU_SELECTOR = '[data-slot="conversation.input.model"] [class$="_menu"]'
+
+/**
+ * The third-party composer controls this effect relocates. Both register into
+ * `conversation.input.right`; moving the slot container rather than its
+ * children keeps them together and leaves exactly one node to put back.
+ */
+const EXTRAS_SELECTOR = '[data-slot="conversation.input.right"]'
+
+/**
+ * dsh-vision-router's own mount marker. Used here only to answer "is there
+ * anything in this slot BESIDES the vision toggle" — see `worthMoving`.
+ */
+const VISION_SELECTOR = '[data-vision-router-mode-toggle]'
+
+/**
+ * Set on the container while this effect manages it, in the row and in the
+ * sheet alike. It is the styling hook for both halves in composer.css.ts, and
+ * it is deliberately what the row's `display: none` keys off: without the
+ * marker the controls stay exactly where the host put them, so a version of
+ * this file that declines to act — or never runs at all — cannot leave them
+ * hidden in the row and absent from the sheet, i.e. unreachable.
+ */
+const MANAGED = 'data-zen-sheet-extras'
+
+/**
+ * Is the slot holding anything that actually costs the row width?
+ *
+ * The row is one nowrap flex line whose only elastic item is the model pill
+ * (composer.css.ts section 1), so entries here are paid for out of the model
+ * name. But that is only a problem once something WIDE lands in the slot —
+ * today dsh-plugin-subscriptions' speed chip, which renders "速度 · 标准" and
+ * eats ~70px. dsh-vision-router's toggle alone is a 28px icon that the row
+ * accommodates fine, and moving it on its own would cost a tap (it becomes
+ * two: open the sheet, then toggle) to buy width nobody needed.
+ *
+ * So: relocate only when the slot holds an entry that is not the vision
+ * toggle. With no such entry — subscriptions not installed, or installed but
+ * not contributing on this model — nothing moves and the row keeps its one
+ * icon, which is the behaviour asked for (user review, 2026-09-06).
+ *
+ * Why this rather than sniffing for subscriptions by name: the slot system
+ * adds no per-registration marker (measured — entries render straight into the
+ * container) and subscriptions marks nothing of its own, so naming it would
+ * mean adding a marker to our fork of that plugin and anchoring on it. That
+ * marker dies the day the fork is dropped, and the feature would go quiet
+ * with nothing to catch it. The width question is the real question anyway,
+ * and this asks it directly.
+ */
+function worthMoving(extras: Element): boolean {
+  return [...extras.children].some(child => !child.matches(VISION_SELECTOR))
+}
+
+/**
+ * Phone: park the composer row's third-party controls inside the model sheet.
+ *
+ * With the speed chip and the vision toggle both present on a GPT model the
+ * row runs out of width. Both are model-scoped settings, so the model sheet —
+ * which already holds 模型 and 推理等级 — is where they belong (user request,
+ * 2026-09-06).
+ *
+ * Why move the real controls instead of drawing our own rows that drive them:
+ * the same reason native-trigger-overlay.ts moves the real trigger. A stand-in
+ * has to script the original, which is a road this plugin does not go down —
+ * beyond the trusted-input wall that effect documents, our own rows would have
+ * to mirror every piece of state (speed tier, disabled, aria-pressed, whether
+ * a vision twin exists for the current model) and would rot on the next
+ * upstream restyle. Moving the node keeps one source of truth: their React
+ * roots go on owning and updating these elements, we only change where they
+ * hang.
+ *
+ * Measured 2026-09-06 (DSH 0.1.2, 390px) before writing this — the two things
+ * that would have killed the approach both hold: a relocated control survives
+ * host re-renders (typing into the composer re-renders the row and does not
+ * yank it back) and stays hit-testable at its new position.
+ *
+ * Restoring on close is not cosmetic. The sheet unmounts when it closes and
+ * anything still inside goes with it, so the controls would vanish from the
+ * page while their React roots kept updating detached nodes. The observer
+ * therefore watches the menu leaving too, and the parked node is held as a
+ * reference rather than looked up — once the menu is detached a document
+ * query can no longer find it.
+ */
+export function installModelSheetExtras(ctx: ClientContext): void {
+  ctx.effect(() => {
+    const phone = window.matchMedia(PHONE_QUERY)
+    /** The container while parked in the sheet, plus where to put it back. */
+    let parked: { node: Element, parent: Element, next: Node | null } | null = null
+
+    const park = (node: Element, menu: Element): void => {
+      if (parked !== null || node.parentElement === null) return
+      parked = { node, parent: node.parentElement, next: node.nextSibling }
+      menu.appendChild(node)
+    }
+
+    const unpark = (): void => {
+      if (parked === null) return
+      const { node, parent, next } = parked
+      parked = null
+      // The menu may already be detached, having taken the container with it.
+      // The node itself is still live either way; re-home it only if its old
+      // parent is still on the page (when the whole composer went away, the
+      // owning React roots rebuild the slot on the next mount).
+      if (parent.isConnected) parent.insertBefore(node, next)
+    }
+
+    /** Hand the container back to the host, marker and all. */
+    const release = (node: Element | null): void => {
+      unpark()
+      node?.removeAttribute(MANAGED)
+    }
+
+    const sync = (): void => {
+      const extras = document.querySelector(EXTRAS_SELECTOR)
+      if (extras === null) { unpark(); return }
+      // No model pill, no sheet to park into — a subagent session has none.
+      // Claiming the slot there would hide the controls from the row with
+      // nowhere to show them instead, which is the unreachable state the
+      // marker is meant to prevent.
+      const seat = document.querySelector(MODEL_SEAT_SELECTOR)
+      if (!phone.matches || seat === null || !worthMoving(extras)) { release(extras); return }
+      extras.setAttribute(MANAGED, '')
+      const menu = document.querySelector(MENU_SELECTOR)
+      if (menu === null) unpark()
+      else park(extras, menu)
+    }
+
+    // Synchronous in the observer callback, never behind rAF: the callback is
+    // a microtask and runs before this frame paints, so the controls are in
+    // the sheet the first time it is drawn. A rAF would land a frame late and
+    // show one frame of the sheet without them (AGENTS.md's "晚一帧" rule).
+    // Body-level childList is the same shape modal-back.ts uses; aria-expanded
+    // is watched too so a close that reuses the node still re-syncs.
+    const observer = new MutationObserver(sync)
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-expanded'],
+    })
+    phone.addEventListener('change', sync)
+    sync()
+
+    return () => {
+      observer.disconnect()
+      phone.removeEventListener('change', sync)
+      release(document.querySelector(EXTRAS_SELECTOR))
+    }
+  }, 'dsh-mobile-nav: model sheet extras')
+}

package/src/client/index.tsx

@@ -17,6 +17,7 @@ import { installHeaderStatusDot } from './effects/header-status.ts'
 import { installGestures } from './effects/gestures.ts'
 import { installTurnFold } from './effects/turn-fold.ts'
 import { installModalBack } from './effects/modal-back.ts'
+import { installModelSheetExtras } from './effects/model-sheet-extras.ts'
 import { installNativeTriggerOverlay } from './effects/native-trigger-overlay.ts'
 import { installWelcomeNoticeOptOut } from './effects/welcome-notice.ts'
 import { installKeyboardGuard } from './effects/keyboard-guard.ts'
@@ -106,6 +107,9 @@ export function apply(ctx: ClientContext): void {
   installTurnFold(ctx)
   installModalBack(ctx)
   installNativeTriggerOverlay(ctx)
+  // Third-party composer entries (speed chip, vision toggle) move into the
+  // model sheet — the row has no width to spare and both are model settings.
+  installModelSheetExtras(ctx)
 
   // "内测声明" first-run notice: keep it visible (CSS-hiding it leaked the
   // dialog's #root inert lock — see effects/welcome-notice.ts) and offer a

package/src/client/styles/composer.css.ts

@@ -81,8 +81,12 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     flex: 0 0 auto !important;
     gap: 6px !important;
   }
-  /* The model seat carries the elastic gap: everything after it is pushed to
-     the right edge, so no spacer element is needed. */
+  /* The elastic gap used to live here as \`margin-right: auto\`, which broke
+     the moment a session had no model pill: a subagent session has none, so
+     the gap vanished and the stop / send buttons bunched up in the middle of
+     the row instead of sitting at the right edge (reported 2026-09-06). The
+     gap belongs to the RIGHT group, not to the last item of the left one —
+     see the two rules below the order list. */
   ${MODEL} {
     order: 4 !important;
     /* A definite flex-basis (not auto) breaks the circular sizing between
@@ -93,7 +97,6 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     flex: 0 1 min(48vw, 200px) !important;
     min-width: 0 !important;
     max-width: min(48vw, 200px) !important;
-    margin-right: auto !important;
   }
   /* Third-party input.right entries park next to the ring rather than
      landing at order 0 (= far left) once the groups are flattened. */
@@ -108,6 +111,22 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
   ${ROW} > [class$="_trailing"] > [class$="_primary"] {
     order: 7 !important;
   }
+  /* The elastic gap. It sits in front of whichever of the two right-hand
+     items comes first, so the group hugs the right edge no matter what the
+     left side happens to contain — with a model pill, without one (subagent
+     sessions), with or without the third-party entries at order 5.
+     Both get \`margin-left: auto\` and the last rule takes it back off the
+     send button whenever a ring precedes it: two auto margins would SHARE
+     the free space and open a second gap between the ring and send. A
+     sibling combinator answers "is there a ring before me" without assuming
+     anything about the host's nesting. */
+  ${ROW} > [class$="_trailing"] > span[class$="_root"],
+  ${ROW} > [class$="_trailing"] > [class$="_primary"] {
+    margin-left: auto !important;
+  }
+  ${ROW} > [class$="_trailing"] > span[class$="_root"] ~ [class$="_primary"] {
+    margin-left: 0 !important;
+  }
 
   /* --- 3. permission as icon-only pill; model as name+effort pill ---
      (real-device round 2, 2026-08-17; model pill reworked 2026-08-25:
@@ -228,6 +247,115 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     border-radius: 12px !important;
     font-size: 15px !important;
   }
+  /* --- 4a. third-party composer entries live in the model sheet ---
+     effects/model-sheet-extras.ts parks the \`conversation.input.right\`
+     container inside the model menu while that menu is open and puts it back
+     when it closes; these rules are the two halves of that trip.
+
+     In the row: hidden, but ONLY once the effect has marked the container as
+     one it manages. Keying the hide off the marker rather than off "not
+     currently parked" is what makes the failure direction safe — if the
+     effect declines to act (nothing in the slot but the vision toggle, so
+     nothing worth moving) or never runs at all, the marker is absent, this
+     rule does not match, and the controls stay exactly where the host put
+     them. The inverse spelling hid them in the row whenever they were not in
+     the sheet, which in those same cases left them reachable from neither
+     place (caught in review, 2026-09-06).
+     Hiding by ancestor rather than by a display rule on the container itself
+     is what lets the parked copy style itself freely — same element, two
+     homes, two rule sets. \`!important\` because the slot container carries an
+     inline \`display: contents\`. */
+  ${ROW} > [class$="_trailing"] > [data-slot="conversation.input.right"][data-zen-sheet-extras] {
+    display: none !important;
+  }
+  /* Parked in the sheet: a column of full-width rows in the sheet's own
+     language, so a relocated control reads as a sibling of 模型 and 推理等级
+     rather than a chip that wandered in. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 2px !important;
+    width: 100% !important;
+  }
+  /* Undo the row's compaction on every parked control: back to full width and
+     the 48px the sheet's own cells use. \`> * > *\` reaches both shapes without
+     naming either plugin — subscriptions wraps its trigger in a positioning
+     div, vision-router puts its button straight in the slot. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > *,
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > * > button {
+    width: 100% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+    justify-content: flex-start !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] button {
+    box-sizing: border-box !important;
+    min-height: 48px !important;
+    height: auto !important;
+    padding: 0 12px !important;
+    gap: 10px !important;
+    border-radius: 12px !important;
+    border: none !important;
+    background: transparent !important;
+    font-size: 15px !important;
+    /* Both plugins center their chip label, which is right for a pill in the
+       row and wrong for a full-width row: the sheet's own cells start their
+       label at the left edge. justify-content covers the flex triggers,
+       text-align the ones that are not flex containers. */
+    text-align: left !important;
+    justify-content: flex-start !important;
+  }
+  /* Order comes from the row (compat.css.ts puts the vision toggle at 5 so it
+     parks beside the context ring), and that rule still matches in here — the
+     sheet is a DOM descendant of the composer bar even though it paints as a
+     fixed layer. Reset it so the sheet follows DOM order instead of
+     inheriting a decision that was about a different layout. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > * {
+    order: 0 !important;
+  }
+  /* The vision toggle is squeezed to a 28px icon in the row (compat.css.ts);
+     in the sheet it is a row, so its label comes back and the icon leads. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > span {
+    display: inline !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > svg:first-of-type {
+    width: 18px !important;
+    height: 18px !important;
+  }
+  /* The speed chip opens a menu of its own, anchored \`bottom: 100%\` to its
+     trigger. Inside the sheet — which is \`overflow: hidden\` so its rounded
+     top clips its content — that menu would be cut off. Same escape section 4
+     uses for the host's two menus: position: fixed leaves the clip behind
+     (the sheet sets \`transform: none\`, so nothing between here and the
+     viewport captures fixed positioning) and it lands as its own sheet on top
+     of this one. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [role="menu"] {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    margin: 0 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    max-height: min(70dvh, 520px) !important;
+    box-sizing: border-box !important;
+    border-radius: 16px 16px 0 0 !important;
+    border-bottom: none !important;
+    padding: 8px 8px calc(8px + var(--mnav-sab)) !important;
+    /* Above the model sheet it sits on (60, section 4), below the session-info
+       sheet's 70 (info.css.ts) — it is a child of the model sheet, not a peer
+       of the page's own layers. */
+    z-index: 61 !important;
+    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [role="menu"] [role="menuitemradio"] {
+    min-height: 48px !important;
+    border-radius: 12px !important;
+    font-size: 15px !important;
+  }
+
   /* --- 4b. the official scroll-to-bottom button must not poke through the
      sheet (real-device follow-up, 2026-08-17) ---
      ChatView's own "jump to latest" button (aria-label t("chat.toBottom"))
@@ -262,6 +390,17 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
   [class$="_composerSeat"] {
     --dsh-composer-text-max-height: 124px;
   }
+  /* Pull the text in from the card's left border. Upstream insets the editing
+     host by 16px while the control row below it starts 8px in (row padding,
+     section 1), so the placeholder sat noticeably further out than the
+     buttons under it and the field read as over-padded on a phone (reported
+     2026-09-06). 12px squares it with the 12px of clear space on the right,
+     giving the text a symmetric box, and closes most of the gap with the
+     button row. Anchored on the editing host's own contract attribute rather
+     than a hashed class. */
+  [data-slot="conversation.composer.bar"] [data-composer-input] {
+    padding-left: 12px !important;
+  }
 
   /* --- 6. no divider above OR below the message list ---
      Instead of a rule the messages butt against, they fade near both edges.
@@ -353,7 +492,13 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
      composer. Anchored on the official data-testid, a stable contract
      marker rather than a hashed class name. */
   [data-slot="conversation.input.dock"] > [data-testid="todo-panel"] {
-    flex: 1 1 auto !important;
+    /* A whole line to itself. It shared line 0 with the pills until the goal
+       bar turned up (2026-09-06): two full-width things on one nowrap line
+       meant the to-do header shrank to a stub and the goal bar ran off the
+       right edge. Both are status strips you read at a glance, so they stack
+       — see the line policy in 7c. */
+    flex: 1 0 100% !important;
+    order: 1 !important;
     min-width: 0 !important;
     max-width: none !important;
     min-height: 0 !important;
@@ -380,7 +525,7 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     display: flex !important;
     flex: 1 0 100% !important;
     flex-wrap: wrap !important;
-    order: 2 !important;
+    order: 4 !important;
     align-items: center !important;
     gap: 6px !important;
     max-width: none !important;
@@ -415,12 +560,12 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
      sits closest to the input it will be sent from. The rail only wraps
      while one of the two full-width entries exists, so a session with
      neither keeps the original single scrolling chip line. */
-  [data-slot="conversation.input.dock"]:has(> [data-queue-dock], > [data-mobile-nav="attach-chips"]) {
+  [data-slot="conversation.input.dock"]:has(> [data-queue-dock], > [data-mobile-nav="attach-chips"], > [data-testid="todo-panel"], > [data-goal-bar]) {
     flex-wrap: wrap !important;
   }
   [data-slot="conversation.input.dock"] > [data-queue-dock] {
     flex: 1 0 100% !important;
-    order: 1 !important;
+    order: 3 !important;
     max-width: none !important;
     min-height: 0 !important;
     max-height: none !important;
@@ -431,6 +576,24 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     font-size: 13px !important;
     line-height: normal !important;
   }
+  /* dsh-client-ui-goal's status strip (its own \`data-goal-bar\` marker; it
+     registers into this dock at order 10). Fourth thing here that is not a
+     pill: a row carrying the objective text plus pause / edit / delete
+     buttons, so the 26px cage clipped its buttons off the right edge and the
+     nowrap line pushed what was left off screen (reported 2026-09-06). Same
+     treatment the queue gets — a line of its own, official geometry back. */
+  [data-slot="conversation.input.dock"] > [data-goal-bar] {
+    flex: 1 0 100% !important;
+    order: 2 !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    border-radius: 12px !important;
+    overflow: visible !important;
+    font-size: 13px !important;
+    line-height: normal !important;
+  }
+
   /* The panel is the dock's only child; upstream rounds its top corners only
      and drops the bottom border, because there it is half-hidden behind the
      card. On its own line it is a free-standing strip, so close it up. */