@guowenzhang/dsh-pocket 0.0.0-stage → 2.12.2

package/client/mobile/mobile.css.ts

@@ -0,0 +1,1052 @@
+/**
+ * Mobile stylesheet for the DSH web shell.
+ *
+ * Hooks are the stable framework attributes only — no hashed classes:
+ * - `[data-mobile-nav="frame"]`     our marker on the AppFrame element (value-scoped so
+ *                                   it never matches the plugin's own controls)
+ * - `[data-sidebar-collapsed]`     AppFrame: sidebar is in the compact rail state
+ * - `[data-side="sidebar"|"details"]` AppFrame drag handles
+ * - `[data-shell-overlay]`         AppFrame overlay layer (used to locate the frame)
+ * - `[data-phase]`                 conversation root phase (hero|active|settling)
+ *
+ * Below the official auto-collapse breakpoint (1024px) the rail is removed
+ * from the grid entirely; the sidebar column becomes an overlay drawer that
+ * slides in when the frame leaves the collapsed state (narrowExpanded).
+ */
+export const MOBILE_CSS = `
+/* ---------- base control styles (rendered at any width, hidden where unused) ---------- */
+
+[data-mobile-nav="toggle"],
+[data-mobile-nav="files"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: none;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, inherit);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="toggle"]:hover,
+[data-mobile-nav="files"]:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+}
+[data-mobile-nav="toggle"]:focus-visible,
+[data-mobile-nav="files"]:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #4f6ef7);
+  outline-offset: 1px;
+}
+
+/* Drawer footer actions: the relocated Session log download plus the Files
+   action that opens the dsh-web-ui explorer sheet. */
+[data-mobile-nav="drawer-actions"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+/* 宿主没有 aionui explorer 列（官方 DSH 无 dsh-web-ui，issue #48）时隐藏
+   移动端「文件浏览」入口（header 图标 + drawer footer 项）——不然点了没反应。 */
+[data-mobile-nav-explorer="0"] [data-mobile-nav="files"],
+[data-mobile-nav-explorer="0"] [data-mobile-nav="explorer"] {
+  display: none !important;
+}
+[data-mobile-nav="session-log"],
+[data-mobile-nav="explorer"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12));
+  border-radius: 12px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, inherit);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="session-log"]:hover:not(:disabled),
+[data-mobile-nav="explorer"]:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+}
+[data-mobile-nav="session-log"]:disabled {
+  color: var(--dsw-alias-label-dimmed, rgba(0, 0, 0, .35));
+  cursor: default;
+}
+
+/* Floating fallback button (hero / blank phases without a session header).
+   The top clears the camera band below the status bar; when the client has
+   set viewport-fit=cover the safe-area inset moves it below the notch too. */
+[data-mobile-nav="fab"] {
+  position: absolute;
+  top: calc(env(safe-area-inset-top, 0px) + 72px);
+  left: 10px;
+  z-index: 21;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12));
+  border-radius: 50%;
+  background: var(--dsw-alias-button-floating-fill, #ffffff);
+  color: var(--dsw-alias-label-primary, inherit);
+  cursor: pointer;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="fab"]:hover {
+  background: var(--dsw-alias-button-floating-hover, rgba(0, 0, 0, .08));
+}
+[data-mobile-nav="fab"]:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #4f6ef7);
+  outline-offset: 2px;
+}
+
+/* Dimmed backdrop under the open drawer; above every column, below the drawer.
+   pointer-events: none —— 点击穿透（issue #38）：backdrop 只负责视觉压暗，
+   不抢点击。关闭抽屉改由 MobileNavOverlay 的 document 级「抽屉外点击」监听处理
+   （等价于原来的点击遮罩关闭，且抽屉内点击不再被 backdrop 吃掉）。 */
+[data-mobile-nav="backdrop"] {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  background: rgba(0, 0, 0, .45);
+  pointer-events: none;
+  animation: dsh-mobile-nav-fade .2s var(--ds-ease-in-out, ease-in-out);
+  -webkit-tap-highlight-color: transparent;
+}
+@keyframes dsh-mobile-nav-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+/* Settings sheet entrance: the official dialog mounts with no animation at
+   all, so it snaps in. Fade + slight rise/scale reads as a proper sheet. */
+@keyframes dsh-mobile-nav-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+/* Preview sheet rise: the aionui preview column opens as a bottom sheet. */
+@keyframes dsh-mobile-nav-sheet-up {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ---------- mobile-only layout ---------- */
+
+@media (max-width: 1023px) {
+  /* --- Phone chrome ---
+     The system status bar stays visible (no fullscreen). Two adjustments
+     make it behave:
+     - touch-action: manipulation kills double-tap-to-zoom (and the 300ms
+       tap delay) while keeping pan and pinch zoom; the client also
+       suppresses legacy-iOS gesturestart as a fallback.
+     - With the client's viewport-fit=cover, env(safe-area-inset-top) is the
+       status bar / notch height; the rules below push the app content below
+       it so the status bar never covers anything. Off notched phones (or in
+       a normal browser tab where the layout viewport already sits below the
+       status bar) the inset is 0 and nothing shifts. */
+  html,
+  body {
+    touch-action: manipulation !important;
+  }
+
+  /* AppFrame: the drawer takes the sidebar column out of grid flow, so the
+     remaining in-flow items (center, details) land in tracks 1..2: give the
+     center every pixel and keep the details track at zero. The top padding
+     clears the status bar / notch for every in-flow surface (session header,
+     messages, composer); the absolutely-positioned drawer is unaffected (its
+     containing block is the frame's padding box, i.e. still the frame top).
+
+     DSH 0.2.2+ ships its own phone drawer: below 768px the frame carries a
+     data-sidebar-drawer attribute, the sidebar column is absolutely positioned
+     by the host, and the host writes its own inline
+     grid-template-columns: 0px minmax(0px, 1fr) minmax(0px, 0px) plus a
+     first-child drawerMask. Our old restructure then landed on the wrong
+     elements: the mask (child 1) got the drawer box while :nth-child(2) hit
+     the sidebar instead of the center column, so the center column fell into a
+     0px track — the whole app rendered 0px wide with the session list stranded
+     off-screen: it had data, but nothing showed and nothing could be tapped.
+     Every restructure rule below is therefore scoped to hosts WITHOUT a native
+     drawer; on 0.2.2+ only the safe-area padding and typography rules apply. */
+  [data-mobile-nav="frame"] {
+    position: relative !important;
+    padding-top: env(safe-area-inset-top, 0px) !important;
+  }
+
+  [data-mobile-nav="frame"]:not([data-sidebar-drawer]) {
+    grid-template-columns: minmax(0, 1fr) 0 0 !important;
+  }
+
+  /* 主内容列（第 2 个网格子元素）在官方样式里有显式 grid-column: 2——
+     网格被压缩成 [1fr, 0, 0] 后它会落在 0px 的第 2 轨，整个主界面被挤出
+     视口（只剩背景图）。必须显式把它拉回第 1 轨（issue #5）。
+     第 3 列（details）保持 0 轨即可，无需处理。 */
+  [data-mobile-nav="frame"]:not([data-sidebar-drawer]) > :nth-child(2) {
+    grid-column: 1 !important;
+    grid-row: 1 !important;
+    min-width: 0 !important;
+  }
+
+  /* The sidebar column (first grid child) becomes a left drawer. The drawer
+     hugs the sidebar content exactly (the wide sidebar carries an inline
+     width, ~280px): a fixed 92vw box would leave a white strip where the
+     container background shows beside the content.
+     Closed state: translateX(-110%) — more than -100% of the max-content
+     width — guarantees the whole drawer (and its shadow, had it one) leaves
+     the viewport. A mere -100% leaves a sliver on screen; -105% (as used
+     before) left 14px of the drawer plus a long 32px-blur shadow gradient
+     visible along the left edge of the main UI. No box-shadow at all: the
+     dimmed backdrop already separates drawer from content.
+     Z-index note: the backdrop renders inside the shell's overlay layer
+     ([data-shell-overlay]), which forms its own stacking context. Third-party
+     plugins can force that layer up with !important (dsh-update-checker sets
+     it to 500), and when the layer outranks the drawer, the backdrop paints
+     ABOVE the drawer and swallows every tap — the drawer opens but no row
+     can be pressed (every tap just closes it). The drawer must therefore
+     outrank any such raise.
+     1200 (was 600) clears the mobile layers shipped by
+     @linxin666/dsh-web-ui-all — its sidebar pane is z-index 1100, its
+     details pane 1000 and its full-screen frame ::after mask 1050 (issue
+     #67: that mask sat on top of the 600 drawer and ate every tap). Still
+     far under the fixed-position banners/toasts (z 9999) that float at the
+     viewport level. */
+  [data-mobile-nav="frame"]:not([data-sidebar-drawer]) > :first-child {
+    position: absolute !important;
+    inset: 0 auto 0 0 !important;
+    width: max-content !important;
+    max-width: 92vw !important;
+    z-index: 1200 !important;
+    transform: translateX(-110%);
+    transition: transform .28s var(--ds-ease-in-out, ease-in-out);
+    background: var(--dsw-alias-bg-base, #ffffff);
+    /* Keep the drawer's own content below the status bar / notch: the drawer
+       spans the full frame height (its absolute containing block is the
+       frame's padding box, so the frame's own safe-area padding does NOT
+       reach it). The drawer background paints the status-bar strip, which
+       the client's theme-color meta matches, so the strip reads seamless. */
+    padding-top: env(safe-area-inset-top, 0px) !important;
+    /* Kill the official sidebarCol right border: with the backdrop the edge
+       reads cleanly, and the settings dialog (width:100% of this box) stays
+       pixel-flush with the drawer. */
+    border-right: none !important;
+  }
+
+  /* Expanded state (frame without data-sidebar-collapsed) slides the drawer in.
+     The open state must be transform:none — NOT translateX(0): an identity
+     transform still makes the drawer the containing block for fixed-position
+     descendants (the settings dialog's .VOzbGW_overlay is portaled into the
+     sidebar DOM). With the identity transform the wide settings sheet
+     (100vw-16) overflows the 280px drawer, the dialog's focus scrolls the
+     overflow:hidden drawer to scrollLeft=102, and every static child (plus the
+     fixed overlay) shifts 102px off-screen. With transform:none the overlay is
+     viewport-anchored: it dims the full screen and the sheet sits at left:8. */
+  [data-mobile-nav="frame"]:not([data-sidebar-drawer]):not([data-sidebar-collapsed]) > :first-child {
+    transform: none !important;
+  }
+
+  /* 宿主自带抽屉时，遮罩（含点外部关闭）由它的 drawerMask 负责。插件自己的
+     那层只做重复压暗，还会让「点一下关不掉」看起来像卡住，直接不显示。 */
+  [data-mobile-nav="frame"][data-sidebar-drawer] [data-mobile-nav="backdrop"] {
+    display: none !important;
+  }
+
+  /* Kill a competing full-screen mask (issue #67).
+     @linxin666/dsh-web-ui-all ships its own mobile drawer, and part of it is
+
+       [data-dsh-frame]:not([data-sidebar-collapsed])::after {
+         content: ""; position: fixed; inset: 0; z-index: 1050;
+         background: rgb(0 0 0 / 24%);
+       }
+
+     The pseudo-element belongs to the frame we already mark, and the frame
+     carries only "position: relative" with z-index auto — no stacking context
+     — so this mask competes with the drawer in the parent stacking context
+     and, at 1050, paints over it. It covers the whole viewport, so every tap
+     on a session row lands on the mask instead: the drawer opens but nothing
+     inside it can be pressed, and the page behind cannot be scrolled.
+     Removing it is safe: the mobile stylesheet already renders its own
+     backdrop, and tapping outside the drawer is handled in JS.
+
+     The attribute selector is repeated on purpose. Their rule has the same
+     specificity (0,2,1) once ours is written the obvious way, and plugin
+     stylesheets are injected in load order, so a tie would be decided by
+     whichever plugin happened to load last. Doubling the attribute makes it
+     (0,3,1) and deterministic. */
+  [data-mobile-nav="frame"][data-mobile-nav="frame"]:not([data-sidebar-collapsed])::after {
+    content: none !important;
+  }
+
+  /* Drag handles are useless on touch and would float over the drawer. */
+  [data-side="sidebar"],
+  [data-side="details"] {
+    display: none !important;
+  }
+
+  /* --- Conversation text on mobile ---
+     The official message flow keeps desktop's 32px side gutters and 16px
+     type. On a phone: shrink the type a notch and widen the lines by
+     trimming the gutters (the sidebar drawer list keeps its size). The
+     flow's scroll container is the only _scroll element holding markdown
+     <p> paragraphs — the composer's own scroll (textarea) is excluded
+     via :has(p). */
+  /* The official main scroll body reserves scrollbar-gutter for desktop
+     scrollbars (8px), which shoves every column off-center on a phone.
+     Classic desktop scrollbars (Edge/Chrome) also occupy ~8-17px in a
+     phone-sized viewport, shifting the column further. Mobile scrolling
+     is touch/wheel, so remove the scrollbar entirely on phones: the
+     column is then exactly centered in every browser. */
+  [data-phase] [class$="_scrollBody"] {
+    scrollbar-gutter: auto !important;
+    scrollbar-width: none !important;
+  }
+  [data-phase] [class$="_scrollBody"]::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+  /* Message action rows (copy / run-time badges) can overflow the right
+     edge on narrow screens — keep them inside the message width. */
+  [data-phase] [class$="_actions"] {
+    overflow: hidden !important;
+  }
+  [data-phase] [class$="_actions"] [class$="_timeEnd"] {
+    flex: 0 1 auto !important;
+    min-width: 0 !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  [data-phase] [class$="_scroll"]:has(p) {
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+    font-size: 15px !important;
+  }
+  /* The official markdown styles set an explicit 16px on paragraphs and
+     list items, so the container's inherited 15px is not enough. User
+     messages render their text in a div whose class carries _text_
+     (16px too) — cover it as well. */
+  [data-phase] [class$="_scroll"]:has(p) p,
+  [data-phase] [class$="_scroll"]:has(p) li,
+  [data-phase] [class$="_scroll"]:has(p) [class*="_text_"] {
+    font-size: 15px !important;
+  }
+
+  /* Keep DSH's own process disclosures and their expand/collapse behaviour,
+     but remove desktop-sized vertical breathing room between consecutive
+     context, Skill, and system-prompt entries. */
+  [data-phase] [data-turn-process] {
+    height: 28px !important;
+    padding-bottom: 4px !important;
+    margin-bottom: 4px !important;
+  }
+  [data-phase] [data-turn-process][data-open] {
+    margin-bottom: 4px !important;
+  }
+  [data-phase] [data-disclosure-row] {
+    min-height: 24px !important;
+  }
+  [data-phase] :is([data-context-injection-body], [data-system-prompt-body]) {
+    margin-top: 2px !important;
+  }
+
+  /* --- Composer bottom row on mobile ---
+     Let the row wrap instead of locking it to one line (issue #170): any
+     plugin can register extra non-shrinking controls here, and a hard
+     "nowrap" plus ":last-child { flex:1 1 0 }" squeezed the model pill (long
+     text, max-width:220px upstream) down to 0 width at 360px. Allowing
+     wrap keeps every control visible; the row simply spans two lines on
+     narrow screens. DSH's stable data-composer-card hook survives the
+     editor's textarea -> contenteditable migration. */
+  [data-phase] [data-composer-card="true"] > [class$="_row"] {
+    flex-wrap: wrap !important;
+    gap: 6px !important;
+  }
+  [data-phase] [data-composer-card="true"] > [class$="_row"] > :first-child {
+    gap: 8px !important;
+    min-width: 0 !important;
+  }
+  [data-phase] [data-composer-card="true"] > [class$="_row"] > :first-child > :nth-child(2) {
+    flex: 0 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  /* --- Composer popups as bottom sheets on mobile ---
+     Two composer-anchored popups break on phones (field: bottom + side
+     cut, only part of the popup visible):
+     1. the model pill menu ([role=menu], max 360px, opens upward from the
+        pill inside the composer card);
+     2. the "/" command palette (max 320px card with the search box — it
+        hosts the /model popupSelect list: search + provider-grouped rows).
+     Both are position:absolute INSIDE the conversation scrollBody
+     (overflow:hidden) and the shell center column (overflow:hidden), so
+     the scroll containers clip them mid-list. Forensics showed neither
+     layer creates a containing block (no transform/contain/will-change),
+     so on mobile we snap whichever popup is open to a viewport-anchored
+     sheet: fixed positioning escapes the scroll clip entirely, width is
+     deterministic, safe-area keeps it off the gesture bar. A transient
+     picker covering the composer is standard mobile UX; selection or an
+     outside tap still dismisses it. */
+  [data-phase] [class$="_root"]:has(> [aria-haspopup="menu"]) > [role="menu"],
+  [data-phase] [class$="_card"]:has(> [class$="_search"]) {
+    position: fixed !important;
+    left: 12px !important;
+    right: 12px !important;
+    top: auto !important;
+    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    max-height: min(65vh, 480px) !important;
+    max-height: min(65dvh, 480px) !important;
+    z-index: 130 !important;
+    border-radius: 14px !important;
+    box-shadow: 0 -4px 28px rgba(0, 0, 0, .18) !important;
+  }
+
+  /* --- Session header on mobile ---
+     Layout goal: [toggle] [session title] [mode badge] in a row. The optional
+     rightbar entry uses the shell's stable header-corner hook. */
+  [data-phase] header {
+    padding: 8px 12px 0 !important;
+  }
+  /* The directory and Files controls are absolutely positioned, so reserve
+     their lanes and let the title use the remaining width without squeezing. */
+  [data-phase] header > :first-child {
+    min-height: 36px !important;
+    padding: 0 32px !important;
+  }
+  [data-phase] header [class$="_titleCluster"],
+  [data-phase] header [class$="_crumbs"] {
+    min-width: 0 !important;
+  }
+  [data-phase] header button[class*="_crumb"] {
+    max-width: calc(100vw - 104px) !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  /* The directory toggle sits at the far left of the header (the header
+     is position:relative; the data-slot wrappers are display:contents). */
+  [data-mobile-nav="toggle"] {
+    position: absolute !important;
+    left: 8px !important;
+    top: 12px !important;
+    z-index: 2 !important;
+  }
+  /* The Files action sits at the FAR RIGHT of the header so it reads as a
+     distinct control from the directory toggle on the left (which opens
+     the history sidebar). */
+  [data-mobile-nav="files"] {
+    position: absolute !important;
+    left: auto !important;
+    right: 8px !important;
+    top: 12px !important;
+    z-index: 2 !important;
+  }
+  /* The native rightbar entry is visible by default. Users who prefer the
+     compact header can turn it off in Pocket settings. */
+  body[data-dsh-pocket-mobile-rightbar="off"] [data-conversation-header-corner] {
+    display: none !important;
+  }
+  body:not([data-dsh-pocket-mobile-rightbar="off"]) [data-mobile-nav="files"] {
+    right: 44px !important;
+  }
+
+  /* --- Settings dialog on mobile ---
+     Desktop: 800px two-column flex (188px nav + content). Mobile: a
+     near-full-width sheet — nav tabs wrap into rows on top, option rows
+     stay horizontal (title+description left, control right). Structural
+     selectors are scoped to the unique aria-modal dialog; every
+     settings-specific rule is gated with
+     :has(> :first-child > :last-child > button) — the settings nav tab
+     list holds <button> tabs, so the transient export dialog (the same
+     primitives Modal, header(title+close)+description+body) keeps its
+     official centered card layout. Requires :has() support
+     (Chromium 105+, 2022). */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) {
+    position: absolute !important;
+    left: 8px !important;
+    /* Fixed top (no translateY): a transform on the panel combined with the
+       panel overflowing the max-content drawer shifts the fixed overlay's
+       coordinate frame, dragging the whole sidebar content off-screen. The
+       safe-area inset keeps the sheet below the status bar / notch. */
+    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
+    width: calc(100vw - 16px) !important;
+    max-width: calc(100vw - 16px) !important;
+    /* Height follows the content (no dead space under a short page); it
+       caps at 100dvh-24 (less the safe-area top) and the options area
+       scrolls only then. */
+    height: auto !important;
+    max-height: min(800px, calc(100vh - 24px - env(safe-area-inset-top, 0px))) !important;
+    max-height: min(800px, calc(100dvh - 24px - env(safe-area-inset-top, 0px))) !important;
+    flex-direction: column !important;
+    border-radius: 14px !important;
+    animation: dsh-mobile-nav-sheet-in .22s var(--ds-ease-out, ease-in-out);
+  }
+  /* The settings sheet's dimmed mask fades in with the panel (the mask is
+     the first child of the overlay that directly contains the sheet). */
+  :has(> [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"]))) > :first-child {
+    animation: dsh-mobile-nav-fade .18s var(--ds-ease-out, ease-in-out);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])),
+    :has(> [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"]))) > :first-child {
+      animation: none !important;
+    }
+  }
+  /* The export dialog (not the settings sheet) must never overflow the
+     viewport: the official centered card can be wider than 390px. */
+  [aria-modal="true"]:not(:has(> :first-child > :last-child > button)) {
+    max-width: calc(100vw - 32px) !important;
+  }
+  /* Nav bar: hide the "Settings" caption (redundant on a full-width sheet)
+     and wrap the tab list so every tab is visible — a horizontal scroll cut
+     the last tab ("Plugins") off with no affordance to scroll. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child {
+    width: 100% !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    gap: 6px !important;
+    padding: 10px 12px 8px !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child > :first-child {
+    display: none !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child > :last-child {
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    width: 100% !important;
+    gap: 6px !important;
+    overflow: visible !important;
+  }
+  /* Content toolbar (Open configuration file + close): spread to the edges
+     instead of clustering right with a dead zone on the left. The toolbar
+     children carry official auto-margins that would defeat space-between,
+     so neutralize them. The close button gets a round tappable base so it
+     reads as its own control, not part of the outline button. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :first-child {
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: 0 12px !important;
+    min-height: 40px !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :first-child > * {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :first-child > :last-child {
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: 50% !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06)) !important;
+  }
+  /* Appearance mode cards: the official cube row renders three tall
+     vertical cards (~268px) that eat half the sheet. Turn them into a
+     compact horizontal trio (icon + label inline, equal widths).
+     Relies on the official cube-row class name of this version. */
+  [aria-modal="true"] [class$="_cubeRow"] {
+    gap: 6px !important;
+  }
+  [aria-modal="true"] [class$="_cubeRow"] > * {
+    flex: 1 1 0 !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    padding: 10px 8px !important;
+    min-height: 0 !important;
+  }
+  /* Content: the options scroll area gets bottom breathing room so the last
+     row never sits flush against the sheet's rounded corner. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :last-child {
+    padding: 0 12px 24px !important;
+  }
+
+  /* ---------- dsh-web-ui family compatibility ----------
+     The linxin666 plugin suite extends the shell frame directly:
+       - aionui-panel appends two trailing grid columns (explorer / preview)
+         plus absolute drag handles to [data-dsh-frame]; its 5-track inline
+         grid is already overridden above, but the handles and columns would
+         still float over the main UI. On mobile the columns leave the grid
+         as floating bottom sheets and keep their own visibility state —
+         the suite's collapse chevron / preview tabs still work, so no
+         feature is lost. The task-board / ssh plugins inject sidebar
+         entries and center-column takeover panels; the entries need
+         spacing and the kanban needs scrollable columns. */
+
+  /* Touch devices: the drag handles are useless — the floating expand
+     button is the opener. */
+  .aionui-explorer-handle,
+  .aionui-preview-handle {
+    display: none !important;
+  }
+
+  /* Shared base: both columns leave the grid as floating panels. The
+     explorer is gated shut by default (its own persisted expanded state
+     must never cover the mobile UI on load); the header Files action opens
+     it via the frame marker below, and the sheet's own collapse chevron
+     clears it. Preview stays owned by the suite (hidden while no tab is
+     open). The per-column rules below override the geometry. */
+  [data-aionui-explorer-col],
+  [data-aionui-preview-col] {
+    position: fixed !important;
+    z-index: 55 !important;
+    background: var(--aion-bg-base, #ffffff) !important;
+    border-left: none !important;
+  }
+  /* Explorer (file tree) bottom sheet: bottom edge aligned exactly with
+     the composer card's bottom line — the card sits 36px above the
+     viewport bottom (8px composer padding + the 28px stats strip below
+     the card), so the sheet uses the same 36px bottom offset. */
+  [data-aionui-explorer-col] {
+    visibility: hidden !important;
+    left: 8px !important;
+    right: 8px !important;
+    top: auto !important;
+    bottom: 36px !important;
+    width: auto !important;
+    height: min(55dvh, 460px) !important;
+    max-height: calc(100dvh - 44px) !important;
+    border-radius: 14px !important;
+    overflow: hidden !important;
+    box-shadow: 0 -4px 28px rgba(0, 0, 0, .18) !important;
+    animation: dsh-mobile-nav-sheet-up .24s var(--ds-ease-out, ease-in-out) !important;
+  }
+  /* Preview (file content) bottom sheet. Gated shut by default: the suite
+     persists open preview tabs in localStorage and restores them on load,
+     which would pop the sheet over the fresh UI. The client only sets the
+     frame marker after the user taps a file row in the explorer; the
+     suite's own collapse chevron clears it via the visibility watcher. */
+  [data-aionui-preview-col] {
+    visibility: hidden !important;
+    position: fixed !important;
+    left: 8px !important;
+    right: 8px !important;
+    top: auto !important;
+    bottom: 40px !important;
+    width: auto !important;
+    height: min(50dvh, 420px) !important;
+    max-height: calc(100dvh - 48px) !important;
+    border-radius: 14px !important;
+    overflow: hidden !important;
+    box-shadow: 0 -4px 28px rgba(0, 0, 0, .18) !important;
+    z-index: 56 !important;
+    animation: dsh-mobile-nav-sheet-up .24s var(--ds-ease-out, ease-in-out) !important;
+  }
+  /* User-opened preview sheet (frame marker, set on file-row tap). */
+  [data-mobile-nav="frame"][data-aionui-preview-open] [data-aionui-preview-col] {
+    visibility: visible !important;
+  }
+  /* The Files action opens the explorer sheet (frame marker). */
+  [data-mobile-nav="frame"][data-aionui-explorer-open] [data-aionui-explorer-col] {
+    visibility: visible !important;
+  }
+  /* The open drawer must never sit under a sheet: while the frame is in the
+     narrow-expanded state both sheets yield (later in the file than the
+     open marker rule, so it wins at equal specificity). */
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) [data-aionui-explorer-col],
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) [data-aionui-preview-col] {
+    visibility: hidden !important;
+  }
+  /* The suite's own expand button reads the store state we bypass on
+     mobile — hide it; the header Files action is the opener. */
+  .aionui-floating-expand {
+    display: none !important;
+  }
+
+  /* dsh-web-ui sidebar entries (task board / ssh) sit flush against each
+     other — give the injected rows breathing room. */
+  button[data-dsh-taskboard-entry],
+  button[data-dsh-ssh-entry] {
+    margin-bottom: 8px !important;
+  }
+
+  /* Task board: five kanban columns at minmax(0,1fr) crush into ~78px phone
+     strips. Give every column a usable minimum and let the row scroll. */
+  [data-dsh-taskboard-board] > [class$="_columns"] {
+    grid-template-columns: repeat(5, minmax(240px, 1fr)) !important;
+    overflow-x: auto !important;
+  }
+  /* The floating button must not float over a takeover panel (task board /
+     ssh own the center column while active). */
+  html[data-dsh-taskboard-active] [data-mobile-nav="fab"],
+  html[data-dsh-ssh-active] [data-mobile-nav="fab"],
+  html[data-dsh-taskboard-active] [data-mobile-nav="backdrop"],
+  html[data-dsh-ssh-active] [data-mobile-nav="backdrop"] {
+    display: none !important;
+  }
+  /* Board header: let the search field take the slack instead of squeezing
+     the action buttons. */
+  [data-dsh-taskboard-board] > [class$="_boardHeader"] [class$="_search"] {
+    flex: 1 1 auto !important;
+    min-width: 80px !important;
+  }
+
+  /* ---------- dsh-web-ui polish: plugin market search ----------
+     The market tab row (Discover / Themes / Installed + the plugin search
+     box) is a no-wrap flex: at 390px the tabs plus the ~218px search box
+     (~475px total) overflow the ~334px sheet and the search box runs off
+     the right edge of the screen (it also forces a horizontal scrollbar on
+     the sheet's options area). Let the row wrap: the tabs keep the first
+     line and the search box gets its own full-width second line. */
+
+  [aria-modal="true"] [class$="_tabs"] {
+    flex-wrap: wrap !important;
+    row-gap: 8px !important;
+  }
+  [aria-modal="true"] [class$="_searchInline"] {
+    flex: 1 1 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* ---------- dsh-usage-stats polish: usage & balance panel ----------
+     The panel's stats row shows three token counters side by side
+     (today / month / total). The counters use tabular nowrap figures whose
+     min-content width overflows the ~336px panel body on a phone: figures
+     clip at the row's edges and the panel grows a horizontal scrollbar.
+     Stack the three counters vertically — full-width rows, so the figures
+     always fit. */
+
+  [class*="usg_"][class$="_statsRow"] {
+    flex-direction: column !important;
+  }
+  [class*="usg_"][class$="_stat"] {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  /* ---------- dsh-web-ui polish: settings sheet ----------
+     The official dialog is a desktop two-column form; on a phone the
+     label/control split leaves a huge dead gap and long descriptions wrap
+     into tall stacks. Stack each row (text above, control full-width) and
+     compact the nav tabs into an even wrap. */
+
+  /* Nav tabs: a stable 3-per-row grid (two clean rows instead of a ragged
+     wrap) with tighter cells. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child > :last-child {
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 6px !important;
+  }
+  [aria-modal="true"] [class$="_navCell"] {
+    padding: 6px 8px !important;
+    gap: 6px !important;
+    font-size: 13px !important;
+    justify-content: flex-start !important;
+  }
+  [aria-modal="true"] [class$="_navCell"] svg {
+    width: 14px !important;
+    height: 14px !important;
+    flex: none !important;
+  }
+  /* Setting rows: text on top, control below at full width. */
+  [aria-modal="true"] [class$="_section"] [class$="_row"] {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: 8px !important;
+  }
+  [aria-modal="true"] [class$="_section"] [class$="_row"] > :first-child {
+    width: 100% !important;
+    max-width: none !important;
+  }
+  [aria-modal="true"] [class$="_section"] [class$="_row"] > :last-child {
+    width: 100% !important;
+    max-width: none !important;
+  }
+  /* Appearance mode group: give the cube row a consistent bordered
+     segmented look (the official borders differ per state). */
+  [aria-modal="true"] [class$="_cubeRow"] > * {
+    border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)) !important;
+  }
+
+  /* ---------- dsh-web-ui polish: explorer sheet ----------
+     The aionui explorer was designed for a desktop side column: compact the
+     header, search box and tree rows so a phone shows more entries, and pad
+     the scroll bottom so the last row never sits flush on the edge. */
+
+  [data-aionui-explorer-col] [class$="_tabBar"] {
+    height: 36px !important;
+  }
+  [data-aionui-explorer-col] [class$="_tabBtn"],
+  [data-aionui-explorer-col] [class$="_tabBtnActive"] {
+    padding: 0 12px !important;
+    font-size: 13px !important;
+  }
+  [data-aionui-explorer-col] [class$="_searchBox"] {
+    height: 32px !important;
+    font-size: 13px !important;
+  }
+  [data-aionui-explorer-col] [class$="_treeRow"] {
+    height: 30px !important;
+    font-size: 13px !important;
+  }
+  [data-aionui-explorer-col] [class$="_treeRow"] svg {
+    width: 14px !important;
+    height: 14px !important;
+  }
+  [data-aionui-explorer-col] [class$="_scrollArea"] {
+    padding-bottom: 28px !important;
+  }
+
+  /* ---------- dsh-web-ui polish: drawer footer ----------
+     The injected footer actions (Files + Session log) become two equal pill
+     buttons instead of text-width capsules. */
+
+  /* The official footerActions row also hosts the remote-web-ui entry
+     row (two icon buttons); without wrapping the two groups squeeze each
+     other on one line. Wrap so each group gets its own full-width row. */
+  [data-mobile-nav="frame"] [class$="_footerActions"] {
+    flex-wrap: wrap !important;
+    gap: 6px !important;
+  }
+  [data-mobile-nav="drawer-actions"] {
+    width: 100% !important;
+  }
+  [data-mobile-nav="drawer-actions"] > button {
+    flex: 1 1 0 !important;
+    padding: 0 8px !important;
+    white-space: nowrap !important;
+  }
+
+  /* ---------- dsh-web-ui polish: floating pet ----------
+     The whale-girl pet (dsh-pet) floats at the viewport corner with a
+     persisted, draggable position. On phones the pet is scaled down so
+     it does not dominate the screen; the plugin's own drag + persist
+     still work (the position itself is left alone — the mobile default
+     position is seeded via the pet API to just above the composer). */
+
+  body > [class$="_float"]:has([class$="_sprite"][role="button"]) {
+    transform: scale(.66);
+    transform-origin: bottom right;
+  }
+  /* While a modal dialog (settings sheet / export) owns the screen the pet
+     floats ABOVE it and covers the dialog content; modal semantics say the
+     background is inert, so hide the pet for the modal's lifetime. */
+  body:has([aria-modal="true"]) > [class$="_float"]:has([class$="_sprite"][role="button"]) {
+    display: none !important;
+  }
+
+  /* ---------- dsh-web-ui polish: conversation stats line ----------
+     The official session-status row (turns / steps / LLM time / TTFT /
+     cache) is long. The client marks the exact row with
+     [data-mobile-nav="stats"] (text-anchored, hashed classes can't be
+     targeted). Layout: ONE fixed-height (28px) flex strip that scrolls
+     horizontally — the full metrics stream stays reachable by swiping,
+     the row never grows vertically, no ellipsis or fade, 12px gaps
+     between metric groups, a 2px scrollbar as the swipe affordance.
+
+     Opt-out: the strip is scoped under body:not([data-pocket-stats="off"])
+     so a skin/operator plugin can legally reclaim this 28px band by
+     setting document.body.dataset.pocketStats = 'off' (avoids the
+     !important weight war that let two footers print on top of each
+     other — issue #165). Default behavior is unchanged.
+
+     Opt-out is two halves, not one. The rules above only stand pocket's
+     styling down; the row itself is the CORE's (conversation StatsPills
+     dock), so it keeps occupying the band with the core's own styling and
+     still collides with whoever took the band over (issue #172).
+     [data-mobile-nav="stats"] is a mark pocket writes itself
+     (mobile-apply.tsx), so opting out hides that element too — together with
+     the core readouts it carries (turns / steps / LLM time / TTFT / cache) and
+     the TPS figure pocket folds into it. That is what reclaiming the band
+     costs: whoever takes it over renders their own footer. */
+
+  body:not([data-pocket-stats="off"]) [data-mobile-nav="stats"] {
+    display: flex !important;
+    flex-flow: row nowrap !important;
+    align-items: center !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    height: 28px !important;
+    min-height: 28px !important;
+    max-height: 28px !important;
+    box-sizing: border-box !important;
+    white-space: nowrap !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin !important;
+    scrollbar-color: var(--dsw-alias-border-l1, rgba(0, 0, 0, .28)) transparent !important;
+    padding: 0 0 4px !important;
+    line-height: 20px !important;
+    font-size: 12px !important;
+  }
+  body:not([data-pocket-stats="off"]) [data-mobile-nav="stats"]::-webkit-scrollbar {
+    height: 2px !important;
+  }
+  body:not([data-pocket-stats="off"]) [data-mobile-nav="stats"]::-webkit-scrollbar-thumb {
+    background: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .3)) !important;
+    border-radius: 2px !important;
+  }
+  body:not([data-pocket-stats="off"]) [data-mobile-nav="stats"]::-webkit-scrollbar-track {
+    background: transparent !important;
+  }
+  body:not([data-pocket-stats="off"]) [data-mobile-nav="stats"] > * {
+    display: flex !important;
+    flex: 0 0 auto !important;
+    flex-flow: row nowrap !important;
+    align-items: center !important;
+    width: max-content !important;
+    min-width: max-content !important;
+    max-width: none !important;
+    white-space: nowrap !important;
+    margin-right: 12px !important;
+    padding: 0 !important;
+  }
+  body:not([data-pocket-stats="off"]) [data-mobile-nav="stats"] > *:last-child {
+    margin-right: 0 !important;
+  }
+  body:not([data-pocket-stats="off"]) [data-mobile-nav="stats"] * {
+    white-space: nowrap !important;
+  }
+
+  /* The other half of that opt-out: standing pocket's styling down leaves
+     the core's own row in the band, so a skin that took the band over still
+     prints underneath it (issue #172). [data-mobile-nav="stats"] is a mark
+     pocket writes itself (mobile-apply.tsx) — opting out hides it with the
+     mark, and with it the core readouts that row carries. The default path
+     never matches this rule.
+     (A skin that wants the band *and* the row can take it back with an equally
+     specific rule plus !important — this rule carries no extra specificity.) */
+  body[data-pocket-stats="off"] [data-mobile-nav="stats"] {
+    display: none !important;
+  }
+
+  /* ---------- hero composer on mobile ----------
+     The official hero card carries a 2-line textarea plus a tall tool row,
+     which reads oversized on a phone. Tighten the empty-state rhythm: keep
+     the official centered hero, shrink the textarea line box, slim the card
+     padding and the tool row, and close the gap under the headline. */
+
+  [data-phase="hero"] [class$="_card"]:has(textarea) {
+    padding-top: 6px !important;
+    gap: 8px !important;
+  }
+  /* The official composer autosizes the textarea and writes an inline
+     height (2 lines on the hero empty state) on the textarea's scroll/grow
+     wrappers. :placeholder-shown lets us collapse the EMPTY state to one
+     line with !important; as soon as the user types, the pseudo-class no
+     longer matches and the autosizer's inline height takes over again — so
+     multi-line growth keeps working. */
+  [data-phase="hero"] textarea:placeholder-shown {
+    height: 28px !important;
+  }
+  [data-phase="hero"] [class$="_card"]:has(textarea:placeholder-shown) > [class$="_scroll"],
+  [data-phase="hero"] [class$="_card"]:has(textarea:placeholder-shown) [class$="_grow"] {
+    height: 28px !important;
+  }
+  [data-phase="hero"] [class$="_card"]:has(textarea) > [class$="_row"] {
+    padding-top: 2px !important;
+  }
+  [data-phase="hero"] [class$="_headline"] {
+    line-height: 1.15 !important;
+    margin-bottom: 0 !important;
+  }
+  [data-phase="hero"] [class$="_stack"] {
+    gap: 0 !important;
+  }
+
+  /* ---------- 隐藏「添加工作区」入口（手机上配工作区无意义，issue #17 修正） ----------
+     图标按钮的 aria-label 随语言变化（zh「添加工作区」/ en「Add workspace」），
+     两种都覆盖；下拉菜单里的「添加工作区…」项由 fileGuard.ts 的 MutationObserver
+     按文案兜底隐藏（CSS 选不到纯文本节点）。只在窄屏生效——桌面端照常保留。 */
+  button[aria-label="添加工作区"],
+  button[aria-label="添加工作区…"],
+  button[aria-label="Add workspace"],
+  button[aria-label="Add workspace…"] {
+    display: none !important;
+  }
+
+  /* ---------- 文件链接旁的「复制」按钮（issue #17：复制文件内容） ----------
+     挂在对话里的文件链接（<button>/<a>，文案即路径）紧邻位置，由 fileGuard.ts
+     注入。只屏内可见：桌面端不注入、不显示；这里再兜底一层，避免任何遗漏。
+     文件链接多为 inline，按钮用 inline-flex 紧跟其后即可。 */
+  [data-mobile-nav="copy-file"] {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    margin-left: 6px !important;
+    vertical-align: baseline !important;
+    height: 22px !important;
+    padding: 0 8px !important;
+    border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .14)) !important;
+    border-radius: 6px !important;
+    background: var(--dsw-alias-bg-layer-1, #fff) !important;
+    color: var(--dsw-alias-label-primary, inherit) !important;
+    font-family: inherit !important;
+    font-size: 11px !important;
+    line-height: 1 !important;
+    cursor: pointer !important;
+    -webkit-tap-highlight-color: transparent !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important;
+  }
+  [data-mobile-nav="copy-file"]:active {
+    background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06)) !important;
+  }
+  [data-mobile-nav="copy-file"][disabled] {
+    opacity: .55 !important;
+    cursor: default !important;
+  }
+}
+
+/* ---------- mobile: stop iOS Safari forced zoom on input focus ----------
+ * Inputs are rendered with inline fontSize 13-14px, below the 16px threshold
+ * that makes iOS Safari zoom the whole page on focus (and never recover).
+ * Force the safe 16px minimum on narrow viewports only, so desktop keeps its
+ * tighter metrics. !important is required to beat the inline styles. */
+@media (max-width: 1024px) {
+  input,
+  textarea,
+  [contenteditable="true"] {
+    font-size: 16px !important;
+  }
+}
+
+/* ---------- desktop: the mobile controls must never appear ---------- */
+
+@media (min-width: 1024px) {
+  [data-mobile-nav="toggle"],
+  [data-mobile-nav="files"],
+  [data-mobile-nav="fab"],
+  [data-mobile-nav="backdrop"],
+  [data-mobile-nav="session-log"],
+  [data-mobile-nav="explorer"],
+  [data-mobile-nav="drawer-actions"] {
+    display: none !important;
+  }
+}
+
+`