@linxin666/dsh-remote-web-ui 0.2.9 → 0.3.1

package/lib/types/mobile/markdown.js

@@ -9,14 +9,23 @@
  * Pure and exported for tests.
  * @module dsh-remote-web-ui/mobile/markdown
  */
-/** Escape HTML special characters. */
+/** HTML special-character map for {@link escapeHtml}. */
+const HTML_ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+/**
+ * Escape HTML special characters. One regex pass replaces all five
+ * characters through the map; the output is identical to five sequential
+ * passes (each replacement string contains none of the escaped characters),
+ * and the common no-special-character case scans the string only once
+ * instead of five times.
+ */
 export function escapeHtml(text) {
-    return text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
+    return text.replace(/[&<>"']/g, char => HTML_ESCAPE_MAP[char] ?? char);
 }
 /**
  * Guard a raw link/image target against dangerous protocols. Returns the

package/lib/types/mobile/markdown.test.js

@@ -68,4 +68,12 @@ describe('escapeHtml', () => {
     it('escapes all five HTML-significant characters', () => {
         expect(escapeHtml('<&>"\'')).toBe('&lt;&amp;&gt;&quot;&#39;');
     });
+    it('equals the five sequential passes on mixed, pre-escaped and plain input', () => {
+        // Single-pass map replacement must never diverge from the sequential
+        // five-pass escape (including double-escaping of literal entities).
+        expect(escapeHtml('a & b < c > d " e \' f')).toBe('a &amp; b &lt; c &gt; d &quot; e &#39; f');
+        expect(escapeHtml('&amp; &lt; &gt;')).toBe('&amp;amp; &amp;lt; &amp;gt;');
+        expect(escapeHtml('plain text 123')).toBe('plain text 123');
+        expect(escapeHtml('')).toBe('');
+    });
 });

package/lib/types/mobile/mobile-styles.d.ts

@@ -2,5 +2,5 @@
  * Mobile surface stylesheet, shipped as a string and injected at boot (the
  * standalone page has no CSS-module pipeline).
  */
-export declare const mobileCss = "/* Mobile surface chrome: standalone stylesheet (no main-UI design tokens \u2014\n   this page boots without the shell). Light-first palette; the dark palette\n   applies only when the header toggle sets [data-theme='dark']. */\n\n:root {\n  --m-bg: #f3f5f9;\n  --m-bg-raised: #ffffff;\n  --m-bg-input: #ffffff;\n  --m-border: #dfe4ec;\n  --m-text: #1c2333;\n  --m-text-secondary: #4d5768;\n  --m-text-tertiary: #8b95a7;\n  --m-accent: #2f6fed;\n  --m-accent-soft: rgba(47, 111, 237, 0.12);\n  --m-danger: #d64545;\n  --m-success: #1e9e6a;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);\n  --m-shadow-raise: 0 6px 20px rgba(16, 24, 40, 0.1);\n  --m-backdrop: rgba(15, 23, 42, 0.4);\n}\n\n:root[data-theme='dark'] {\n  --m-bg: #111418;\n  --m-bg-raised: #1a1f26;\n  --m-bg-input: #20262e;\n  --m-border: #2b333d;\n  --m-text: #e8eaed;\n  --m-text-secondary: #9aa3ad;\n  --m-text-tertiary: #6b747f;\n  --m-accent: #4f8cff;\n  --m-accent-soft: rgba(79, 140, 255, 0.14);\n  --m-danger: #e5534b;\n  --m-success: #3fb68b;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --m-shadow-raise: 0 6px 20px rgba(0, 0, 0, 0.4);\n  --m-backdrop: rgba(0, 0, 0, 0.55);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif;\n  font-size: 15px;\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n}\n\n/* The app fills exactly one viewport: the page itself never scrolls, each\n   view owns its scroll region (chat history, session lists) and the chat\n   composer stays pinned to the bottom of the screen. */\n#root {\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mobile {\n  min-height: 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px;\n  background: color-mix(in srgb, var(--m-bg) 88%, transparent);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid var(--m-border);\n}\n\n.mobile-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 600;\n}\n\n.mobile-titleInline {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mobile-back {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 22px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-back:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-back:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle {\n  flex: none;\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-theme-toggle:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-theme-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* \u2500\u2500 lists \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  list-style: none;\n  margin: 0;\n  padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 16px);\n}\n\n.mobile-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: calc(100% - 24px);\n  margin: 0 12px 8px;\n  padding: 13px 14px;\n  border: 1px solid var(--m-border);\n  border-radius: 14px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mobile-row:active {\n  background: color-mix(in srgb, var(--m-text) 5%, var(--m-bg-raised));\n}\n\n.mobile-rowMain {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n\n.mobile-rowTitle {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 15px;\n}\n\n.mobile-rowMeta {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.mobile-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 18px;\n}\n\n.mobile-live {\n  margin-left: 6px;\n  color: var(--m-success);\n  font-size: 10px;\n  vertical-align: middle;\n}\n\n/* \u2500\u2500 empty / error states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 32px;\n}\n\n.mobile-muted {\n  margin: 0;\n  color: var(--m-text-tertiary);\n}\n\n.mobile-error {\n  margin: 0;\n  color: var(--m-danger);\n}\n\n.mobile-pad {\n  padding: 8px 16px;\n}\n\n.mobile-create {\n  display: grid;\n  gap: 8px;\n}\n\n.mobile-preset {\n  display: grid;\n  gap: 4px;\n}\n\n.mobile-presetLabel {\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mobile-presetSelect {\n  width: 100%;\n  height: 40px;\n  padding: 0 36px 0 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n}\n\n.mobile-presetSelect:disabled {\n  opacity: 0.6;\n}\n\n.mobile-presetDescription {\n  margin: 0;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-button {\n  height: 38px;\n  padding: 0 18px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-raised);\n  color: var(--m-text);\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.mobile-button:disabled {\n  opacity: 0.5;\n}\n\n.mobile-block {\n  display: block;\n  width: calc(100% - 32px);\n  margin: 4px 16px;\n}\n\n/* Primary action (create session): accent fill, readable on both themes. */\n.mobile-new {\n  display: block;\n  width: 100%;\n  height: 44px;\n  border: none;\n  border-radius: 12px;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(47, 111, 237, 0.3);\n}\n\n.mobile-new:active {\n  opacity: 0.88;\n}\n\n.mobile-new:disabled {\n  opacity: 0.6;\n}\n\n.mobile-hint {\n  display: block;\n  margin-top: 2px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n/* \u2500\u2500 chat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.chat-scroll {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.chat-msg {\n  max-width: 88%;\n  padding: 10px 12px;\n  border-radius: var(--m-radius);\n  font-size: 14.5px;\n  line-height: 1.55;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.chat-msg-user {\n  align-self: flex-end;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  border-bottom-right-radius: 4px;\n  box-shadow: 0 1px 3px rgba(47, 111, 237, 0.28);\n}\n\n.chat-msg-assistant {\n  align-self: flex-start;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom-left-radius: 4px;\n  box-shadow: var(--m-shadow);\n}\n\n.chat-msg-pending .chat-msg-text::after {\n  content: '\u258D';\n  animation: chat-blink 1s steps(2) infinite;\n}\n\n@keyframes chat-blink {\n  50% {\n    opacity: 0;\n  }\n}\n\n.chat-msg-failed {\n  border-color: var(--m-danger);\n}\n\n.chat-msg-failtag {\n  display: inline-block;\n  margin-top: 6px;\n  padding: 1px 8px;\n  border: 1px solid var(--m-danger);\n  border-radius: 999px;\n  color: var(--m-danger);\n  font-size: 11px;\n}\n\n.chat-msg-time {\n  display: block;\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 10.5px;\n  line-height: 1.2;\n}\n\n.chat-msg-toggle {\n  display: block;\n  margin-top: 8px;\n  padding: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-accent);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n/* Assistant markdown content (GFM subset; renderer in markdown.ts). */\n.chat-md {\n  white-space: normal;\n}\n.chat-md-collapsed {\n  max-height: 45vh;\n  overflow: hidden;\n  position: relative;\n}\n.chat-md-collapsed::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 28px;\n  background: linear-gradient(transparent, var(--m-bg-raised));\n  pointer-events: none;\n}\n.chat-md-body p { margin: 0 0 8px; }\n.chat-md-body p:last-child { margin-bottom: 0; }\n.chat-md-body h1, .chat-md-body h2, .chat-md-body h3,\n.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 {\n  margin: 12px 0 6px;\n  font-weight: 650;\n  line-height: 1.3;\n}\n.chat-md-body h1 { font-size: 1.35em; }\n.chat-md-body h2 { font-size: 1.25em; }\n.chat-md-body h3 { font-size: 1.15em; }\n.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 { font-size: 1.05em; }\n.chat-md-body code {\n  font-family: var(--m-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: 0.9em;\n  background: var(--m-accent-soft);\n  padding: 1px 5px;\n  border-radius: 4px;\n}\n.chat-md-body pre {\n  margin: 8px 0;\n  padding: 10px;\n  background: #101726;\n  color: #dbe4f5;\n  border-radius: 8px;\n  overflow-x: auto;\n  font-size: 12.5px;\n  line-height: 1.5;\n}\n.chat-md-body pre code {\n  background: transparent;\n  padding: 0;\n  color: inherit;\n}\n.chat-md-body ul, .chat-md-body ol { margin: 4px 0 8px; padding-left: 22px; }\n.chat-md-body li { margin: 2px 0; }\n.chat-md-body blockquote {\n  margin: 8px 0;\n  padding: 4px 10px;\n  border-left: 3px solid var(--m-accent);\n  background: var(--m-accent-soft);\n  border-radius: 0 6px 6px 0;\n  color: var(--m-text-secondary);\n}\n.chat-md-body table {\n  margin: 8px 0;\n  border-collapse: collapse;\n  display: block;\n  overflow-x: auto;\n  font-size: 13px;\n}\n.chat-md-body th, .chat-md-body td {\n  border: 1px solid var(--m-border);\n  padding: 4px 8px;\n}\n.chat-md-body th { background: var(--m-accent-soft); }\n.chat-md-body a { color: var(--m-accent); }\n.chat-md-body hr { border: none; border-top: 1px solid var(--m-border); margin: 10px 0; }\n.chat-md-body img { max-width: 100%; border-radius: 8px; }\n\n/* \u2500\u2500 message disclosures (reasoning / tools) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-disclosure {\n  margin-bottom: 8px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--m-bg) 55%, transparent);\n  overflow: hidden;\n}\n\n.chat-disclosure-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 7px 10px;\n  border: none;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 12.5px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.chat-disclosure-caret {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n  line-height: 1;\n  transition: transform 0.15s ease;\n}\n\n.chat-disclosure-open .chat-disclosure-caret {\n  transform: rotate(90deg);\n}\n\n.chat-disclosure-label {\n  flex: none;\n  color: var(--m-text-secondary);\n}\n\n.chat-reasoning[data-pending] .chat-disclosure-label {\n  color: var(--m-accent);\n}\n\n.chat-disclosure-summary {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.chat-disclosure-count {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-disclosure-body {\n  padding: 8px 10px 10px;\n  border-top: 1px dashed var(--m-border);\n  color: var(--m-text-secondary);\n  font-size: 12.5px;\n  line-height: 1.6;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  max-height: 40vh;\n  overflow-y: auto;\n}\n\n.chat-tools-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.chat-tool-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.chat-tool-name {\n  color: var(--m-text);\n  font-size: 12.5px;\n  font-weight: 600;\n}\n\n.chat-tool-args {\n  margin: 0;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--m-bg-input);\n  color: var(--m-text-secondary);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n/* \u2500\u2500 composer toolbar (model / permission chips) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-tools {\n  display: flex;\n  gap: 8px;\n  padding: 6px 12px 0;\n}\n\n.chat-chip {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 999px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.chat-chip:active {\n  border-color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.chat-chip-label {\n  flex: none;\n  color: var(--m-text-tertiary);\n}\n\n.chat-chip-value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.chat-chip-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n}\n\n/* \u2500\u2500 bottom sheets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  background: var(--m-backdrop);\n  animation: sheet-fade 0.18s ease;\n}\n\n@keyframes sheet-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.sheet {\n  max-height: 74dvh;\n  display: flex;\n  flex-direction: column;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom: none;\n  border-radius: 16px 16px 0 0;\n  box-shadow: var(--m-shadow-raise);\n  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);\n  animation: sheet-up 0.22s ease;\n}\n\n@keyframes sheet-up {\n  from {\n    transform: translateY(40px);\n    opacity: 0.6;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.sheet-handle {\n  flex: none;\n  align-self: center;\n  width: 36px;\n  height: 4px;\n  margin: 8px 0 4px;\n  border-radius: 999px;\n  background: var(--m-border);\n}\n\n.sheet-title {\n  flex: none;\n  padding: 6px 16px 10px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.sheet-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 12px 8px;\n}\n\n.sheet-status {\n  padding: 18px 8px;\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.sheet-status-error {\n  color: var(--m-danger);\n}\n\n.sheet-hint {\n  margin: 0;\n  color: var(--m-text-secondary);\n  font-size: 12px;\n  line-height: 1.5;\n  max-width: 32em;\n}\n\n.sheet-error {\n  margin: 0 0 8px;\n  color: var(--m-danger);\n  font-size: 12.5px;\n}\n\n.sheet-section {\n  margin-bottom: 14px;\n}\n\n.sheet-section-title {\n  padding: 4px 8px 6px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.sheet-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  background: transparent;\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.sheet-option:active {\n  background: var(--m-bg-input);\n}\n\n.sheet-option-selected {\n  border-color: var(--m-accent);\n  background: color-mix(in srgb, var(--m-accent) 12%, transparent);\n}\n\n.sheet-option:disabled {\n  opacity: 0.5;\n}\n\n.sheet-option-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sheet-option-title {\n  font-size: 14px;\n}\n\n.sheet-option-desc {\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.sheet-option-check {\n  flex: none;\n  color: var(--m-accent);\n  font-size: 15px;\n  font-weight: 700;\n}\n\n.sheet-confirm-desc {\n  margin: 0 4px 14px;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  line-height: 1.6;\n}\n\n.sheet-confirm-actions {\n  display: flex;\n  gap: 10px;\n  padding: 4px;\n}\n\n.sheet-confirm-actions .mobile-button {\n  flex: 1;\n}\n\n.sheet-confirm-danger {\n  flex: 1;\n  height: 38px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-danger);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.sheet-confirm-danger:disabled {\n  opacity: 0.5;\n}\n\n.chat-meta {\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-typing {\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  padding: 4px 2px;\n}\n\n.chat-inputbar {\n  display: flex;\n  gap: 8px;\n  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);\n  border-top: 1px solid var(--m-border);\n  background: var(--m-bg);\n}\n\n.chat-input {\n  flex: 1;\n  min-width: 0;\n  min-height: 40px;\n  max-height: 120px;\n  /* Grow with the content (still bounded by min/max-height); browsers\n     without field-sizing support ignore this line and keep the old size. */\n  field-sizing: content;\n  padding: 9px 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n  font-size: 14.5px;\n  resize: none;\n  outline: none;\n}\n\n.chat-input:focus {\n  border-color: var(--m-accent);\n}\n\n.chat-send {\n  flex: none;\n  align-self: flex-end;\n  height: 40px;\n  padding: 0 16px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-accent);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.chat-send:disabled {\n  opacity: 0.5;\n}\n\n.chat-load-older {\n  align-self: center;\n  margin: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  padding: 6px 10px;\n}\n\n/* Touch surfaces have no hover, so keyboard focus must be fully visible.\n   One shared ring keeps every interactive control consistent and readable\n   on both palettes. */\n.mobile-row:focus-visible,\n.mobile-button:focus-visible,\n.mobile-new:focus-visible,\n.mobile-presetSelect:focus-visible,\n.chat-send:focus-visible,\n.chat-chip:focus-visible,\n.chat-msg-toggle:focus-visible,\n.chat-load-older:focus-visible,\n.chat-disclosure-head:focus-visible,\n.sheet-option:focus-visible,\n.sheet-confirm-danger:focus-visible,\n.sheet-toggle-switch:focus-visible,\n.chat-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n/* \u2500\u2500 chat context usage chip (chat-tools row) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-context {\n  flex: none;\n  align-self: center;\n  padding: 2px 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--m-text-tertiary) 10%, transparent);\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n  line-height: 1.6;\n  white-space: nowrap;\n}\n\n.chat-context-warn {\n  border-color: var(--m-danger);\n  background: color-mix(in srgb, var(--m-danger) 14%, transparent);\n  color: var(--m-danger);\n}\n\n/* \u2500\u2500 display sheet toggle rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sheet-toggle-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 8px;\n  border-bottom: 1px solid var(--m-border);\n}\n\n.sheet-toggle-row:last-child {\n  border-bottom: none;\n}\n\n.sheet-toggle-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sheet-toggle-title {\n  font-size: 14px;\n}\n\n.sheet-toggle-desc {\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.sheet-toggle-switch {\n  position: relative;\n  flex: none;\n  width: 44px;\n  height: 26px;\n  border: none;\n  border-radius: 999px;\n  background: var(--m-border);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.sheet-toggle-switch-on {\n  background: var(--m-accent);\n}\n\n.sheet-toggle-switch-knob {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);\n  transition: transform 0.15s ease;\n}\n\n.sheet-toggle-switch-on .sheet-toggle-switch-knob {\n  transform: translateX(18px);\n}\n\n/* Accessibility: collapse every interaction/enter animation for\n   reduced-motion users; surface layout itself stays static. */\n@media (prefers-reduced-motion: reduce) {\n  .mobile-theme-toggle,\n  .mobile-back,\n  .mobile-row,\n  .mobile-button,\n  .mobile-new,\n  .chat-send,\n  .chat-chip,\n  .chat-msg-toggle,\n  .chat-load-older,\n  .chat-disclosure-head,\n  .chat-disclosure-caret,\n  .chat-msg-pending .chat-msg-text::after,\n  .sheet-backdrop,\n  .sheet,\n  .sheet-option,\n  .sheet-confirm-danger,\n  .sheet-toggle-switch,\n  .sheet-toggle-switch-knob,\n  .chat-input {\n    animation: none;\n    transition: none;\n  }\n}\n\n/* \u2500\u2500 installed-app pairing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-pair {\n  min-height: 100dvh;\n  display: grid;\n  place-items: center;\n  padding: 24px;\n}\n\n.mobile-pairCard {\n  display: grid;\n  width: min(100%, 420px);\n  gap: 12px;\n  padding: 24px;\n  border: 1px solid var(--m-border);\n  border-radius: 12px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow-raise);\n}\n\n.mobile-pairLabel {\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mobile-pairInput {\n  width: 100%;\n  min-height: 42px;\n  box-sizing: border-box;\n  padding: 9px 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 8px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n  outline: none;\n}\n\n.mobile-pairInput:focus-visible {\n  border-color: var(--m-accent);\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-pairSubmit {\n  width: 100%;\n}\n";
+export declare const mobileCss = "/* Mobile surface chrome: standalone stylesheet (no main-UI design tokens \u2014\n   this page boots without the shell). Light-first palette; the dark palette\n   applies only when the header toggle sets [data-theme='dark']. */\n\n:root {\n  --m-bg: #f3f5f9;\n  --m-bg-raised: #ffffff;\n  --m-bg-input: #ffffff;\n  --m-border: #dfe4ec;\n  --m-text: #1c2333;\n  --m-text-secondary: #4d5768;\n  --m-text-tertiary: #8b95a7;\n  --m-accent: #2f6fed;\n  --m-accent-soft: rgba(47, 111, 237, 0.12);\n  --m-danger: #d64545;\n  --m-success: #1e9e6a;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);\n  --m-shadow-raise: 0 6px 20px rgba(16, 24, 40, 0.1);\n  --m-backdrop: rgba(15, 23, 42, 0.4);\n}\n\n:root[data-theme='dark'] {\n  --m-bg: #111418;\n  --m-bg-raised: #1a1f26;\n  --m-bg-input: #20262e;\n  --m-border: #2b333d;\n  --m-text: #e8eaed;\n  --m-text-secondary: #9aa3ad;\n  --m-text-tertiary: #6b747f;\n  --m-accent: #4f8cff;\n  --m-accent-soft: rgba(79, 140, 255, 0.14);\n  --m-danger: #e5534b;\n  --m-success: #3fb68b;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --m-shadow-raise: 0 6px 20px rgba(0, 0, 0, 0.4);\n  --m-backdrop: rgba(0, 0, 0, 0.55);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif;\n  font-size: 15px;\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n}\n\n/* The app fills exactly one viewport: the page itself never scrolls, each\n   view owns its scroll region (chat history, session lists) and the chat\n   composer stays pinned to the bottom of the screen. */\n#root {\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mobile {\n  min-height: 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px;\n  background: color-mix(in srgb, var(--m-bg) 88%, transparent);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid var(--m-border);\n}\n\n.mobile-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 600;\n}\n\n.mobile-titleInline {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mobile-back {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 22px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-back:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-back:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle {\n  flex: none;\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-theme-toggle:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-theme-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* \u2500\u2500 lists \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  list-style: none;\n  margin: 0;\n  padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 16px);\n}\n\n.mobile-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: calc(100% - 24px);\n  margin: 0 12px 8px;\n  padding: 13px 14px;\n  border: 1px solid var(--m-border);\n  border-radius: 14px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mobile-row:active {\n  background: color-mix(in srgb, var(--m-text) 5%, var(--m-bg-raised));\n}\n\n.mobile-rowMain {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n\n.mobile-rowTitle {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 15px;\n}\n\n.mobile-rowMeta {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.mobile-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 18px;\n}\n\n.mobile-live {\n  margin-left: 6px;\n  color: var(--m-success);\n  font-size: 10px;\n  vertical-align: middle;\n}\n\n/* \u2500\u2500 empty / error states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 32px;\n}\n\n.mobile-muted {\n  margin: 0;\n  color: var(--m-text-tertiary);\n}\n\n.mobile-error {\n  margin: 0;\n  color: var(--m-danger);\n}\n\n.mobile-pad {\n  padding: 8px 16px;\n}\n\n.mobile-create {\n  display: grid;\n  gap: 8px;\n}\n\n.mobile-preset {\n  display: grid;\n  gap: 4px;\n}\n\n.mobile-presetLabel {\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mobile-presetSelect {\n  width: 100%;\n  height: 40px;\n  padding: 0 36px 0 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n}\n\n.mobile-presetSelect:disabled {\n  opacity: 0.6;\n}\n\n.mobile-presetDescription {\n  margin: 0;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-button {\n  height: 38px;\n  padding: 0 18px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-raised);\n  color: var(--m-text);\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.mobile-button:disabled {\n  opacity: 0.5;\n}\n\n.mobile-block {\n  display: block;\n  width: calc(100% - 32px);\n  margin: 4px 16px;\n}\n\n/* Primary action (create session): accent fill, readable on both themes. */\n.mobile-new {\n  display: block;\n  width: 100%;\n  height: 44px;\n  border: none;\n  border-radius: 12px;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(47, 111, 237, 0.3);\n}\n\n.mobile-new:active {\n  opacity: 0.88;\n}\n\n.mobile-new:disabled {\n  opacity: 0.6;\n}\n\n.mobile-hint {\n  display: block;\n  margin-top: 2px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n/* \u2500\u2500 chat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.chat-scroll {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.chat-msg {\n  max-width: 88%;\n  padding: 10px 12px;\n  border-radius: var(--m-radius);\n  font-size: 14.5px;\n  line-height: 1.55;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.chat-msg-user {\n  align-self: flex-end;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  border-bottom-right-radius: 4px;\n  box-shadow: 0 1px 3px rgba(47, 111, 237, 0.28);\n}\n\n.chat-msg-assistant {\n  align-self: flex-start;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom-left-radius: 4px;\n  box-shadow: var(--m-shadow);\n}\n\n.chat-msg-pending .chat-msg-text::after {\n  content: '\u258D';\n  animation: chat-blink 1s steps(2) infinite;\n}\n\n@keyframes chat-blink {\n  50% {\n    opacity: 0;\n  }\n}\n\n.chat-msg-failed {\n  border-color: var(--m-danger);\n}\n\n.chat-msg-failtag {\n  display: inline-block;\n  margin-top: 6px;\n  padding: 1px 8px;\n  border: 1px solid var(--m-danger);\n  border-radius: 999px;\n  color: var(--m-danger);\n  font-size: 11px;\n}\n\n.chat-msg-time {\n  display: block;\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 10.5px;\n  line-height: 1.2;\n}\n\n.chat-msg-toggle {\n  display: block;\n  margin-top: 8px;\n  padding: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-accent);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n/* Assistant markdown content (GFM subset; renderer in markdown.ts). */\n.chat-md {\n  white-space: normal;\n}\n.chat-md-collapsed {\n  max-height: 45vh;\n  overflow: hidden;\n  position: relative;\n}\n.chat-md-collapsed::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 28px;\n  background: linear-gradient(transparent, var(--m-bg-raised));\n  pointer-events: none;\n}\n.chat-md-body p { margin: 0 0 8px; }\n.chat-md-body p:last-child { margin-bottom: 0; }\n.chat-md-body h1, .chat-md-body h2, .chat-md-body h3,\n.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 {\n  margin: 12px 0 6px;\n  font-weight: 650;\n  line-height: 1.3;\n}\n.chat-md-body h1 { font-size: 1.35em; }\n.chat-md-body h2 { font-size: 1.25em; }\n.chat-md-body h3 { font-size: 1.15em; }\n.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 { font-size: 1.05em; }\n.chat-md-body code {\n  font-family: var(--m-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: 0.9em;\n  background: var(--m-accent-soft);\n  padding: 1px 5px;\n  border-radius: 4px;\n}\n.chat-md-body pre {\n  margin: 8px 0;\n  padding: 10px;\n  background: #101726;\n  color: #dbe4f5;\n  border-radius: 8px;\n  overflow-x: auto;\n  font-size: 12.5px;\n  line-height: 1.5;\n}\n.chat-md-body pre code {\n  background: transparent;\n  padding: 0;\n  color: inherit;\n}\n.chat-md-body ul, .chat-md-body ol { margin: 4px 0 8px; padding-left: 22px; }\n.chat-md-body li { margin: 2px 0; }\n.chat-md-body blockquote {\n  margin: 8px 0;\n  padding: 4px 10px;\n  border-left: 3px solid var(--m-accent);\n  background: var(--m-accent-soft);\n  border-radius: 0 6px 6px 0;\n  color: var(--m-text-secondary);\n}\n.chat-md-body table {\n  margin: 8px 0;\n  border-collapse: collapse;\n  display: block;\n  overflow-x: auto;\n  font-size: 13px;\n}\n.chat-md-body th, .chat-md-body td {\n  border: 1px solid var(--m-border);\n  padding: 4px 8px;\n}\n.chat-md-body th { background: var(--m-accent-soft); }\n.chat-md-body a { color: var(--m-accent); }\n.chat-md-body hr { border: none; border-top: 1px solid var(--m-border); margin: 10px 0; }\n.chat-md-body img { max-width: 100%; border-radius: 8px; }\n\n/* \u2500\u2500 message disclosures (reasoning / tools) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-disclosure {\n  margin-bottom: 8px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--m-bg) 55%, transparent);\n  overflow: hidden;\n}\n\n.chat-disclosure-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 7px 10px;\n  border: none;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 12.5px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.chat-disclosure-caret {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n  line-height: 1;\n  transition: transform 0.15s ease;\n}\n\n.chat-disclosure-open .chat-disclosure-caret {\n  transform: rotate(90deg);\n}\n\n.chat-disclosure-label {\n  flex: none;\n  color: var(--m-text-secondary);\n}\n\n.chat-reasoning[data-pending] .chat-disclosure-label {\n  color: var(--m-accent);\n}\n\n.chat-disclosure-summary {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.chat-disclosure-count {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-disclosure-body {\n  padding: 8px 10px 10px;\n  border-top: 1px dashed var(--m-border);\n  color: var(--m-text-secondary);\n  font-size: 12.5px;\n  line-height: 1.6;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  max-height: 40vh;\n  overflow-y: auto;\n}\n\n.chat-tools-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.chat-tool-card {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 6px 8px;\n  border: 1px solid var(--m-border);\n  border-radius: 8px;\n  background: var(--m-bg-raised);\n}\n\n.chat-tool-pills {\n  display: flex;\n  gap: 4px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.chat-tool-pill {\n  display: inline-block;\n  padding: 1px 7px;\n  border-radius: 999px;\n  background: var(--m-accent-soft);\n  color: var(--m-accent);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n.chat-tool-args {\n  margin: 0;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--m-bg-input);\n  color: var(--m-text-secondary);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* \u2500\u2500 turn status indicator (#1017) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-turn-status {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  color: var(--m-accent);\n  font-size: 13px;\n  font-weight: 600;\n  background: linear-gradient(\n    90deg,\n    var(--m-accent) 0%,\n    color-mix(in srgb, var(--m-accent) 60%, #ffffff) 50%,\n    var(--m-accent) 100%\n  );\n  background-size: 200% 100%;\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: dsh-shimmer 1.8s linear infinite;\n}\n\n.chat-turn-dots {\n  display: inline-flex;\n  gap: 3px;\n}\n\n.chat-turn-dots span {\n  display: inline-block;\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--m-accent);\n  animation: dsh-dot-bounce 1.2s ease-in-out infinite;\n}\n\n.chat-turn-dots span:nth-child(2) {\n  animation-delay: 0.15s;\n}\n\n.chat-turn-dots span:nth-child(3) {\n  animation-delay: 0.3s;\n}\n\n@keyframes dsh-shimmer {\n  from { background-position: 200% 0; }\n  to { background-position: -200% 0; }\n}\n\n@keyframes dsh-dot-bounce {\n  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }\n  40% { transform: translateY(-4px); opacity: 1; }\n}\n\n/* \u2500\u2500 approval panel (#1025) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-approval-panel {\n  margin: 8px 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--m-accent);\n  border-radius: var(--m-radius);\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n}\n\n.chat-approval-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.chat-approval-reason {\n  color: var(--m-text-secondary);\n  font-size: 12.5px;\n}\n\n.chat-approval-error {\n  margin: 4px 0;\n  color: var(--m-danger);\n  font-size: 12px;\n}\n\n.chat-approval-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.chat-approval-allow {\n  flex: 1;\n  height: 34px;\n  border: none;\n  border-radius: 8px;\n  background: var(--m-accent);\n  color: #fff;\n  font: inherit;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.chat-approval-allow:disabled {\n  opacity: 0.6;\n}\n\n.chat-approval-reject {\n  flex: 1;\n  height: 34px;\n  border: 1px solid var(--m-border);\n  border-radius: 8px;\n  background: var(--m-bg-raised);\n  color: var(--m-text);\n  font: inherit;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.chat-approval-reject:disabled {\n  opacity: 0.6;\n}\n\n/* \u2500\u2500 question panel (#1025) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-question-panel {\n  margin: 8px 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--m-accent);\n  border-radius: var(--m-radius);\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.chat-question-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.chat-question-header {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--m-text);\n}\n\n.chat-question-text {\n  font-size: 13px;\n  color: var(--m-text);\n  line-height: 1.5;\n}\n\n.chat-question-detail {\n  font-size: 12px;\n  color: var(--m-text-secondary);\n  line-height: 1.5;\n}\n\n.chat-question-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.chat-question-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  transition: border-color 0.12s, background 0.12s;\n}\n\n.chat-question-option input {\n  margin: 2px 0 0;\n  flex: none;\n}\n\n.chat-question-option-selected {\n  border-color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.chat-question-option-label {\n  color: var(--m-text);\n  font-weight: 500;\n}\n\n.chat-question-option-desc {\n  display: block;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.chat-question-custom {\n  width: 100%;\n  min-height: 40px;\n  box-sizing: border-box;\n  padding: 8px 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 8px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n  font-size: 13px;\n  resize: vertical;\n  outline: none;\n}\n\n.chat-question-custom:focus-visible {\n  border-color: var(--m-accent);\n}\n\n.chat-question-submit {\n  height: 36px;\n  border: none;\n  border-radius: 8px;\n  background: var(--m-accent);\n  color: #fff;\n  font: inherit;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.chat-question-submit:disabled {\n  opacity: 0.6;\n}\n\n\n/* \u2500\u2500 composer toolbar (model / permission chips) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-tools {\n  display: flex;\n  gap: 8px;\n  padding: 6px 12px 0;\n}\n\n.chat-chip {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 999px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.chat-chip:active {\n  border-color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.chat-chip-label {\n  flex: none;\n  color: var(--m-text-tertiary);\n}\n\n.chat-chip-value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.chat-chip-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n}\n\n/* \u2500\u2500 bottom sheets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  background: var(--m-backdrop);\n  animation: sheet-fade 0.18s ease;\n}\n\n@keyframes sheet-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.sheet {\n  max-height: 74dvh;\n  display: flex;\n  flex-direction: column;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom: none;\n  border-radius: 16px 16px 0 0;\n  box-shadow: var(--m-shadow-raise);\n  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);\n  animation: sheet-up 0.22s ease;\n}\n\n@keyframes sheet-up {\n  from {\n    transform: translateY(40px);\n    opacity: 0.6;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.sheet-handle {\n  flex: none;\n  align-self: center;\n  width: 36px;\n  height: 4px;\n  margin: 8px 0 4px;\n  border-radius: 999px;\n  background: var(--m-border);\n}\n\n.sheet-title {\n  flex: none;\n  padding: 6px 16px 10px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.sheet-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 12px 8px;\n}\n\n.sheet-status {\n  padding: 18px 8px;\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.sheet-status-error {\n  color: var(--m-danger);\n}\n\n.sheet-hint {\n  margin: 0;\n  color: var(--m-text-secondary);\n  font-size: 12px;\n  line-height: 1.5;\n  max-width: 32em;\n}\n\n.sheet-error {\n  margin: 0 0 8px;\n  color: var(--m-danger);\n  font-size: 12.5px;\n}\n\n.sheet-section {\n  margin-bottom: 14px;\n}\n\n.sheet-section-title {\n  padding: 4px 8px 6px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.sheet-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  background: transparent;\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.sheet-option:active {\n  background: var(--m-bg-input);\n}\n\n.sheet-option-selected {\n  border-color: var(--m-accent);\n  background: color-mix(in srgb, var(--m-accent) 12%, transparent);\n}\n\n.sheet-option:disabled {\n  opacity: 0.5;\n}\n\n.sheet-option-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sheet-option-title {\n  font-size: 14px;\n}\n\n.sheet-option-desc {\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.sheet-option-check {\n  flex: none;\n  color: var(--m-accent);\n  font-size: 15px;\n  font-weight: 700;\n}\n\n.sheet-confirm-desc {\n  margin: 0 4px 14px;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  line-height: 1.6;\n}\n\n.sheet-confirm-actions {\n  display: flex;\n  gap: 10px;\n  padding: 4px;\n}\n\n.sheet-confirm-actions .mobile-button {\n  flex: 1;\n}\n\n.sheet-confirm-danger {\n  flex: 1;\n  height: 38px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-danger);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.sheet-confirm-danger:disabled {\n  opacity: 0.5;\n}\n\n.chat-meta {\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-typing {\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  padding: 4px 2px;\n}\n\n.chat-inputbar {\n  display: flex;\n  gap: 8px;\n  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);\n  border-top: 1px solid var(--m-border);\n  background: var(--m-bg);\n}\n\n.chat-input {\n  flex: 1;\n  min-width: 0;\n  min-height: 40px;\n  max-height: 120px;\n  /* Grow with the content (still bounded by min/max-height); browsers\n     without field-sizing support ignore this line and keep the old size. */\n  field-sizing: content;\n  padding: 9px 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n  font-size: 14.5px;\n  resize: none;\n  outline: none;\n}\n\n.chat-input:focus {\n  border-color: var(--m-accent);\n}\n\n.chat-send {\n  flex: none;\n  align-self: flex-end;\n  height: 40px;\n  padding: 0 16px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-accent);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.chat-send:disabled {\n  opacity: 0.5;\n}\n\n.chat-load-older {\n  align-self: center;\n  margin: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  padding: 6px 10px;\n}\n\n/* Touch surfaces have no hover, so keyboard focus must be fully visible.\n   One shared ring keeps every interactive control consistent and readable\n   on both palettes. */\n.mobile-row:focus-visible,\n.mobile-button:focus-visible,\n.mobile-new:focus-visible,\n.mobile-presetSelect:focus-visible,\n.chat-send:focus-visible,\n.chat-chip:focus-visible,\n.chat-msg-toggle:focus-visible,\n.chat-load-older:focus-visible,\n.chat-disclosure-head:focus-visible,\n.sheet-option:focus-visible,\n.sheet-confirm-danger:focus-visible,\n.sheet-toggle-switch:focus-visible,\n.chat-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n/* \u2500\u2500 chat context usage chip (chat-tools row) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-context {\n  flex: none;\n  align-self: center;\n  padding: 2px 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--m-text-tertiary) 10%, transparent);\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n  line-height: 1.6;\n  white-space: nowrap;\n}\n\n.chat-context-warn {\n  border-color: var(--m-danger);\n  background: color-mix(in srgb, var(--m-danger) 14%, transparent);\n  color: var(--m-danger);\n}\n\n/* \u2500\u2500 display sheet toggle rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sheet-toggle-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 8px;\n  border-bottom: 1px solid var(--m-border);\n}\n\n.sheet-toggle-row:last-child {\n  border-bottom: none;\n}\n\n.sheet-toggle-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sheet-toggle-title {\n  font-size: 14px;\n}\n\n.sheet-toggle-desc {\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.sheet-toggle-switch {\n  position: relative;\n  flex: none;\n  width: 44px;\n  height: 26px;\n  border: none;\n  border-radius: 999px;\n  background: var(--m-border);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.sheet-toggle-switch-on {\n  background: var(--m-accent);\n}\n\n.sheet-toggle-switch-knob {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);\n  transition: transform 0.15s ease;\n}\n\n.sheet-toggle-switch-on .sheet-toggle-switch-knob {\n  transform: translateX(18px);\n}\n\n/* Accessibility: collapse every interaction/enter animation for\n   reduced-motion users; surface layout itself stays static. */\n@media (prefers-reduced-motion: reduce) {\n  .mobile-theme-toggle,\n  .mobile-back,\n  .mobile-row,\n  .mobile-button,\n  .mobile-new,\n  .chat-send,\n  .chat-chip,\n  .chat-msg-toggle,\n  .chat-load-older,\n  .chat-disclosure-head,\n  .chat-disclosure-caret,\n  .chat-msg-pending .chat-msg-text::after,\n  .sheet-backdrop,\n  .sheet,\n  .sheet-option,\n  .sheet-confirm-danger,\n  .sheet-toggle-switch,\n  .sheet-toggle-switch-knob,\n  .chat-input,\n  .chat-turn-status,\n  .chat-turn-dots span {\n    animation: none;\n    transition: none;\n  }\n  .chat-turn-status {\n    background: none;\n    -webkit-text-fill-color: var(--m-accent);\n  }\n}\n\n/* \u2500\u2500 installed-app pairing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-pair {\n  min-height: 100dvh;\n  display: grid;\n  place-items: center;\n  padding: 24px;\n}\n\n.mobile-pairCard {\n  display: grid;\n  width: min(100%, 420px);\n  gap: 12px;\n  padding: 24px;\n  border: 1px solid var(--m-border);\n  border-radius: 12px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow-raise);\n}\n\n.mobile-pairLabel {\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mobile-pairInput {\n  width: 100%;\n  min-height: 42px;\n  box-sizing: border-box;\n  padding: 9px 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 8px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n  outline: none;\n}\n\n.mobile-pairInput:focus-visible {\n  border-color: var(--m-accent);\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-pairSubmit {\n  width: 100%;\n}\n\n/* \u2500\u2500 directory browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.dir-browser {\n  display: flex;\n  flex-direction: column;\n}\n\n.dir-crumbs {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n  padding: 12px 16px;\n  background: var(--m-bg-raised);\n  border-bottom: 1px solid var(--m-border);\n  white-space: nowrap;\n}\n\n.dir-crumbs::-webkit-scrollbar {\n  display: none;\n}\n\n.dir-crumb {\n  border: none;\n  background: transparent;\n  padding: 4px 6px;\n  color: var(--m-text);\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.dir-crumb:active {\n  background: var(--m-bg-input);\n  border-radius: 4px;\n}\n\n.dir-crumb-separator {\n  color: var(--m-text-tertiary);\n  margin: 0 4px;\n  font-size: 14px;\n}\n\n.dir-entry {\n  padding-left: 16px;\n}\n\n.dir-entry-hidden {\n  opacity: 0.5;\n}\n\n.dir-select {\n  padding: 16px;\n  background: var(--m-bg);\n  border-top: 1px solid var(--m-border);\n}\n\n.dir-empty {\n  padding: 40px 0;\n}\n";
 //# sourceMappingURL=mobile-styles.d.ts.map

package/lib/types/mobile/mobile-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-styles.d.ts","sourceRoot":"","sources":["../../../src/mobile/mobile-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,SAAS,mtxBAglCrB,CAAA"}
+{"version":3,"file":"mobile-styles.d.ts","sourceRoot":"","sources":["../../../src/mobile/mobile-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,SAAS,wn/BA+4CrB,CAAA"}

package/lib/types/mobile/mobile-styles.js

@@ -588,16 +588,33 @@ body {
   gap: 8px;
 }
 
-.chat-tool-item {
+.chat-tool-card {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
+  padding: 6px 8px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-raised);
 }
 
-.chat-tool-name {
-  color: var(--m-text);
-  font-size: 12.5px;
+.chat-tool-pills {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.chat-tool-pill {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--m-accent-soft);
+  color: var(--m-accent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
   font-weight: 600;
+  white-space: nowrap;
 }
 
 .chat-tool-args {
@@ -611,8 +628,245 @@ body {
   line-height: 1.5;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* ── turn status indicator (#1017) ───────────────────────────────────── */
+
+.chat-turn-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  color: var(--m-accent);
+  font-size: 13px;
+  font-weight: 600;
+  background: linear-gradient(
+    90deg,
+    var(--m-accent) 0%,
+    color-mix(in srgb, var(--m-accent) 60%, #ffffff) 50%,
+    var(--m-accent) 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: dsh-shimmer 1.8s linear infinite;
+}
+
+.chat-turn-dots {
+  display: inline-flex;
+  gap: 3px;
+}
+
+.chat-turn-dots span {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--m-accent);
+  animation: dsh-dot-bounce 1.2s ease-in-out infinite;
+}
+
+.chat-turn-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.chat-turn-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes dsh-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+@keyframes dsh-dot-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40% { transform: translateY(-4px); opacity: 1; }
+}
+
+/* ── approval panel (#1025) ──────────────────────────────────────────── */
+
+.chat-approval-panel {
+  margin: 8px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--m-accent);
+  border-radius: var(--m-radius);
+  background: var(--m-bg-raised);
+  box-shadow: var(--m-shadow);
+}
+
+.chat-approval-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.chat-approval-reason {
+  color: var(--m-text-secondary);
+  font-size: 12.5px;
+}
+
+.chat-approval-error {
+  margin: 4px 0;
+  color: var(--m-danger);
+  font-size: 12px;
+}
+
+.chat-approval-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.chat-approval-allow {
+  flex: 1;
+  height: 34px;
+  border: none;
+  border-radius: 8px;
+  background: var(--m-accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.chat-approval-allow:disabled {
+  opacity: 0.6;
+}
+
+.chat-approval-reject {
+  flex: 1;
+  height: 34px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-raised);
+  color: var(--m-text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.chat-approval-reject:disabled {
+  opacity: 0.6;
+}
+
+/* ── question panel (#1025) ──────────────────────────────────────────── */
+
+.chat-question-panel {
+  margin: 8px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--m-accent);
+  border-radius: var(--m-radius);
+  background: var(--m-bg-raised);
+  box-shadow: var(--m-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chat-question-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chat-question-header {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--m-text);
+}
+
+.chat-question-text {
+  font-size: 13px;
+  color: var(--m-text);
+  line-height: 1.5;
+}
+
+.chat-question-detail {
+  font-size: 12px;
+  color: var(--m-text-secondary);
+  line-height: 1.5;
+}
+
+.chat-question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chat-question-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: border-color 0.12s, background 0.12s;
+}
+
+.chat-question-option input {
+  margin: 2px 0 0;
+  flex: none;
+}
+
+.chat-question-option-selected {
+  border-color: var(--m-accent);
+  background: var(--m-accent-soft);
+}
+
+.chat-question-option-label {
+  color: var(--m-text);
+  font-weight: 500;
+}
+
+.chat-question-option-desc {
+  display: block;
+  color: var(--m-text-tertiary);
+  font-size: 12px;
+}
+
+.chat-question-custom {
+  width: 100%;
+  min-height: 40px;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-input);
+  color: var(--m-text);
+  font: inherit;
+  font-size: 13px;
+  resize: vertical;
+  outline: none;
+}
+
+.chat-question-custom:focus-visible {
+  border-color: var(--m-accent);
 }
 
+.chat-question-submit {
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: var(--m-accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.chat-question-submit:disabled {
+  opacity: 0.6;
+}
+
+
 /* ── composer toolbar (model / permission chips) ─────────────────────── */
 
 .chat-tools {
@@ -1053,10 +1307,16 @@ body {
   .sheet-confirm-danger,
   .sheet-toggle-switch,
   .sheet-toggle-switch-knob,
-  .chat-input {
+  .chat-input,
+  .chat-turn-status,
+  .chat-turn-dots span {
     animation: none;
     transition: none;
   }
+  .chat-turn-status {
+    background: none;
+    -webkit-text-fill-color: var(--m-accent);
+  }
 }
 
 /* ── installed-app pairing ───────────────────────────────────────────── */
@@ -1106,4 +1366,63 @@ body {
 .mobile-pairSubmit {
   width: 100%;
 }
+
+/* ── directory browser ─────────────────────────────────────────────── */
+
+.dir-browser {
+  display: flex;
+  flex-direction: column;
+}
+
+.dir-crumbs {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  padding: 12px 16px;
+  background: var(--m-bg-raised);
+  border-bottom: 1px solid var(--m-border);
+  white-space: nowrap;
+}
+
+.dir-crumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.dir-crumb {
+  border: none;
+  background: transparent;
+  padding: 4px 6px;
+  color: var(--m-text);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dir-crumb:active {
+  background: var(--m-bg-input);
+  border-radius: 4px;
+}
+
+.dir-crumb-separator {
+  color: var(--m-text-tertiary);
+  margin: 0 4px;
+  font-size: 14px;
+}
+
+.dir-entry {
+  padding-left: 16px;
+}
+
+.dir-entry-hidden {
+  opacity: 0.5;
+}
+
+.dir-select {
+  padding: 16px;
+  background: var(--m-bg);
+  border-top: 1px solid var(--m-border);
+}
+
+.dir-empty {
+  padding: 40px 0;
+}
 `;

package/lib/types/mobile/views/ChatView.d.ts

@@ -42,4 +42,14 @@ export interface PermissionSelectValue {
  * @returns the chat surface.
  */
 export declare function ChatView({ session, mux, onBack }: ChatViewProps): import("react").JSX.Element;
+/**
+ * Minimum interval between full markdown re-parses of a live (pending)
+ * assistant message. Every streamed chunk replaces the message object, and
+ * re-parsing the whole accumulated text per chunk turns a long reply into
+ * O(n^2) work on mobile. Pending text keeps the last parsed result visible
+ * and re-parses at most once per interval; the moment the turn closes the
+ * final text parses immediately, so terminal messages render exactly as
+ * before.
+ */
+export declare const STREAM_RENDER_INTERVAL_MS = 120;
 //# sourceMappingURL=ChatView.d.ts.map

package/lib/types/mobile/views/ChatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAKjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAqCzC,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BAmX/D"}
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAMjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAqCzC,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BAsc/D;AAmGD;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAA"}