diff --git a/packages/web-shell/client/App.module.css b/packages/web-shell/client/App.module.css
index 2e39548727..5372644fd6 100644
--- a/packages/web-shell/client/App.module.css
+++ b/packages/web-shell/client/App.module.css
@@ -13,6 +13,18 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  /*
+   * Safe-area padding for mobile devices with notch / home indicator.
+   * With `viewport-fit=cover` in index.html the page extends behind the
+   * status-bar, home-indicator, and landscape notch regions; these env()
+   * insets push the content back into the visible safe area. On desktop
+   * or phones without notches every inset evaluates to 0 so nothing
+   * changes.
+   */
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-mono);
@@ -101,6 +113,14 @@
     pointer-events: auto;
     /* Show immediately on open; only the close path needs the delay above. */
     transition-delay: 0s;
+    /* With `viewport-fit=cover`, the fixed drawer extends behind the status
+       bar, home indicator, and landscape notch. Push the sidebar content
+       into the safe area while keeping the backdrop full-screen (it is a
+       sibling, not a child). */
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
   }
 
   .mobileBackdrop {
diff --git a/packages/web-shell/client/components/ChatEditor.tsx b/packages/web-shell/client/components/ChatEditor.tsx
index 6fa6d13b1d..32f579e5dd 100644
--- a/packages/web-shell/client/components/ChatEditor.tsx
+++ b/packages/web-shell/client/components/ChatEditor.tsx
@@ -1261,7 +1261,7 @@ export const ChatEditor = memo(
     const showCancelButton = isRunning && !core.hasContent;
 
     return (
-      <div className={styles.editorShell}>
+      <div className={styles.editorShell} data-composer>
         <div
           ref={containerRef}
           className={styles.container}
diff --git a/packages/web-shell/client/components/MessageItem.tsx b/packages/web-shell/client/components/MessageItem.tsx
index d11aea11c8..738d380878 100644
--- a/packages/web-shell/client/components/MessageItem.tsx
+++ b/packages/web-shell/client/components/MessageItem.tsx
@@ -149,21 +149,29 @@ export const MessageItem = memo(function MessageItem({
     </ErrorBoundary>
   );
 
+  // Re-enable text selection on every message row so users can long-press /
+  // drag-select reply text. The blanket `html * { user-select: none }` in
+  // standalone.css disables selection on UI chrome (native-app feel); this
+  // attribute opts the message subtree back in, including descendants
+  // (Markdown body, code blocks, tool panels, sub-messages).
+  const selectableSafeBody = <div data-user-selectable="true">{safeBody}</div>;
+
   if (message.role === 'assistant') {
     if (showAssistantActions) {
-      return safeBody;
+      return selectableSafeBody;
     }
     return (
       <MessageTimestamp timestamp={message.timestamp}>
-        {safeBody}
+        {selectableSafeBody}
       </MessageTimestamp>
     );
   }
 
-  // The cancellation marker is a right-aligned, full-width turn-terminal row; a
-  // hover timestamp would overlap its text, so render it without the wrapper.
+  // The cancellation marker is a right-aligned, full-width turn-terminal row;
+  // a hover timestamp would overlap its text, so skip the MessageTimestamp
+  // wrapper. The data-user-selectable div is still applied for consistency.
   if (message.role === 'system' && message.source === 'prompt_cancelled') {
-    return safeBody;
+    return selectableSafeBody;
   }
 
   return (
@@ -173,7 +181,7 @@ export const MessageItem = memo(function MessageItem({
       copyText={message.role === 'user' ? message.content : undefined}
       copyTitle="Copy"
     >
-      {safeBody}
+      {selectableSafeBody}
     </MessageTimestamp>
   );
 }, areMessageItemPropsEqual);
diff --git a/packages/web-shell/client/index.html b/packages/web-shell/client/index.html
index 37efbd16dd..30564df443 100644
--- a/packages/web-shell/client/index.html
+++ b/packages/web-shell/client/index.html
@@ -2,8 +2,33 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--
+      `interactive-widget=resizes-content` is Chrome-on-Android-only (108+);
+      iOS Safari silently ignores it — the virtual keyboard always overlays
+      the viewport there. Keyboard-aware layout on iOS requires the
+      VirtualKeyboard API or `visualViewport` resize events instead.
+    -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
+    />
+    <!--
+      Status bar color follows the active theme; the inline script below
+      updates this meta tag in the same tick it applies the theme class so
+      mobile browsers never flash the default (white) bar.
+    -->
+    <meta name="theme-color" content="#0d0d0d" />
     <title>Qwen Code Web chat</title>
+    <!--
+      Apply the stored theme class + theme-color before first paint so the
+      <html> background matches the app theme on mobile. Without this, the
+      iOS Safari rubber-band overscroll and the status-bar / home-indicator
+      safe areas briefly show the default white canvas. Storage key mirrors
+      THEME_STORAGE_KEY in main.tsx.
+    -->
+    <script>
+      !function(){try{var k='qwen-code-web-shell-theme',p=new URLSearchParams(location.search),t=p.get('theme');if(t!=='dark'&&t!=='light'){try{t=localStorage.getItem(k)}catch(_){t=null}}if(t!=='dark'&&t!=='light')t='dark';document.documentElement.classList.add('theme-'+t);var m=document.querySelector('meta[name=theme-color]');if(m)m.setAttribute('content',t==='light'?'#ffffff':'#0d0d0d')}catch(e){console.warn('theme-init:',e)}}();
+    </script>
     <!--
       Favicon is inlined as a data: URI rather than a /favicon.svg file because
       the daemon's static server only exposes /assets/* and / (see
diff --git a/packages/web-shell/client/main.tsx b/packages/web-shell/client/main.tsx
index baefe7a4e7..eed19aa775 100644
--- a/packages/web-shell/client/main.tsx
+++ b/packages/web-shell/client/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   DaemonWorkspaceProvider,
   DaemonSessionProvider,
@@ -93,6 +93,11 @@ function getSessionIdFromUrl(): string | undefined {
 function replaceStandaloneSessionUrl(sessionId: string | undefined): void {
   const url = new URL(window.location.href);
   url.pathname = sessionId ? `/session/${encodeURIComponent(sessionId)}` : '/';
+  // Strip one-shot query params so bookmarked / shared URLs do not
+  // permanently override stored preferences on every page load.
+  url.searchParams.delete('theme');
+  url.searchParams.delete('language');
+  url.searchParams.delete('lang');
   if (!import.meta.env.DEV) {
     url.searchParams.delete('token');
     url.searchParams.delete('daemon');
@@ -107,6 +112,18 @@ function StandaloneApp({ daemonToken }: { daemonToken?: string }) {
   );
   const [sessionId] = useState<string | undefined>(() => getSessionIdFromUrl());
   const baseUrl = DAEMON_BASE_URL || window.location.origin;
+  // Keep the <html> theme class and <meta name="theme-color"> in sync with
+  // the React theme so mobile status bars / overscroll backgrounds stay
+  // consistent when the user toggles or when ?theme= lands via URL.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('theme-dark', 'theme-light');
+    root.classList.add(`theme-${theme}`);
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) {
+      meta.setAttribute('content', theme === 'light' ? '#ffffff' : '#0d0d0d');
+    }
+  }, [theme]);
   const handleThemeChange = useCallback((nextTheme: WebShellTheme) => {
     setTheme(nextTheme);
     storeTheme(nextTheme);
diff --git a/packages/web-shell/client/styles/standalone.css b/packages/web-shell/client/styles/standalone.css
index a58f3f11c4..eaf71f7df2 100644
--- a/packages/web-shell/client/styles/standalone.css
+++ b/packages/web-shell/client/styles/standalone.css
@@ -4,3 +4,129 @@ body,
   height: 100%;
   margin: 0;
 }
+
+/*
+ * Mobile overscroll / safe-area fix:
+ *
+ * On iOS Safari the rubber-band pull exposes whatever sits behind the page
+ * canvas. With `viewport-fit=cover` the status-bar and home-indicator areas
+ * also reveal the html background. Paint html/body with the active theme's
+ * background and pin overscroll so the white browser chrome never peeks
+ * through. The .theme-* classes are applied to <html> by the inline script
+ * in index.html (and kept in sync by StandaloneApp's useEffect).
+ *
+ * `overscroll-behavior-y: none` disables the pull-to-refresh / bounce; the
+ * chat pane handles its own scroll internally so this does not affect chat
+ * scrolling.
+ */
+html,
+body {
+  background: #0d0d0d;
+  color: #fafafa;
+  overscroll-behavior-y: none;
+}
+
+html.theme-light,
+html.theme-light body {
+  background: #ffffff;
+  color: #0a0a0b;
+  color-scheme: light;
+}
+
+html.theme-dark,
+html.theme-dark body {
+  background: #0d0d0d;
+  color: #fafafa;
+  color-scheme: dark;
+}
+
+/*
+ * Native-app feel (P0):
+ *
+ * `touch-action: manipulation` removes the 300ms tap delay and disables
+ * double-tap zoom — the two main giveaways that a page is "just a website".
+ * We do NOT set `user-scalable=no` / `maximum-scale=1` because those break
+ * WCAG 1.4.4 and iOS 10+ already ignores them; users can still pinch-zoom
+ * message content for accessibility.
+ *
+ * `-webkit-tap-highlight-color: transparent` removes the blue flash iOS
+ * shows on tap. `-webkit-text-size-adjust: 100%` stops iOS from silently
+ * bumping font size on orientation change.
+ *
+ * `user-select: none` + `-webkit-touch-callout: none` suppress the
+ * long-press "Copy / Look Up" callout and accidental text selection on
+ * UI chrome (buttons, nav, composer shell). Scoped to touch devices via
+ * `@media (hover: none) and (pointer: coarse)` so desktop users retain
+ * normal text selection in sidebar, error messages, toasts, etc.
+ * Message content and the editor re-enable both via
+ * `[data-user-selectable]` below so users can still copy code and
+ * long-press links inside replies.
+ */
+html,
+body {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  html *,
+  html *::before,
+  html *::after {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+
+/*
+ * Re-enable selection on user-facing text regions: message bodies, code
+ * blocks, the editor's contenteditable surface, any dialog / panel whose
+ * root opts in via `data-user-selectable`, and all ARIA dialogs (tool
+ * approval, MCP config, theme picker, etc.). Plain attribute selectors
+ * have specificity (0,1,0) which beats the blanket `html *` at (0,0,1).
+ */
+[data-user-selectable],
+[data-user-selectable] *,
+[role='dialog']:not([data-mobile-drawer]),
+[role='dialog']:not([data-mobile-drawer]) *,
+.cm-content,
+.cm-line,
+input,
+textarea,
+[contenteditable='true'] {
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+/*
+ * iOS Safari auto-zooms any <input> / <textarea> / contenteditable whose
+ * computed font-size is < 16px when focused. The composer editor sits at
+ * 14px in the desktop theme (EditorView.theme at specificity 0,2,0 and
+ * `.editorArea .cm-content` in ChatEditor.module.css also at 0,2,0), so
+ * bump it to 16px on all touch devices (iPhone, iPad). The composer uses
+ * `#root [data-composer]` at specificity (1,2,0) to beat the EditorView
+ * theme. Other text inputs use `#root input[type=...]` at (1,1,0).
+ * `@supports (-webkit-touch-callout: none)` scopes to WebKit (Safari);
+ * `(hover: none) and (pointer: coarse)` matches touch devices including
+ * iPad — and avoids the deprecated `max-device-width`.
+ */
+@supports (-webkit-touch-callout: none) {
+  @media (hover: none) and (pointer: coarse) {
+    #root [data-composer] .cm-content,
+    #root [data-composer] .cm-line,
+    #root input[type='text'],
+    #root input[type='search'],
+    #root input[type='password'],
+    #root input[type='email'],
+    #root input[type='url'],
+    #root input[type='tel'],
+    #root input[type='number'],
+    #root textarea,
+    #root [contenteditable='true'] {
+      font-size: 16px;
+    }
+  }
+}