diff --git a/docs/systems/design-system.md b/docs/systems/design-system.md
index 6518dc73..04e49066 100644
--- a/docs/systems/design-system.md
+++ b/docs/systems/design-system.md
@@ -53,7 +53,7 @@ Font: DM Sans (primary) with system fallbacks
 |------|-------|-------------|
 | Structural | `bg-surface-*` | Permanent layout (sidebars, chat, member list) |
 | Strip | `.glass-strip` | Persistent edge chrome (space sidebar) |
-| Bubble | `.glass-bubble` | Persistent floating controls (voice bar, input pill) |
+| Bubble | `.glass-bubble` | Persistent floating controls (voice bar, **chat composer**, voice mini-bar). Chat composer is a floating bubble on **both** desktop and mobile (`position: absolute`, sits above the message-list scroll area; messages scroll behind it). On mobile, its `bottom` value is driven by `useVisualViewportInset()` so it lifts above the iOS soft keyboard when one is open. See `docs/systems/mobile-ui.md` "Floating Composer" for the full pattern. |
 | Popover | `.glass` | Small floating surfaces (context menus, popovers, tooltips) |
 | Tray dropdown | `.glass` (popover) | `TransferIndicator` global panel — anchored under the channel-header icon. |
 | Modal | `.glass-modal` | Large center-screen dialogs |
diff --git a/docs/systems/message-list.md b/docs/systems/message-list.md
index 6b420cb2..b0842877 100644
--- a/docs/systems/message-list.md
+++ b/docs/systems/message-list.md
@@ -11,6 +11,12 @@ The chat message list (`packages/web/src/components/chat/MessageList.tsx`) is re
 | `packages/web/src/components/chat/embeds/*.tsx` | Embed renderers — must obey the dimension reservation contract below. |
 | `packages/web/src/components/chat/AttachmentRenderer.tsx` | Reference for the dimension reservation pattern (`AttachmentRenderer.tsx:81-100`). |
 
+## Bottom clearance — `--composer-clearance`
+
+The MessageList content's `paddingBottom` is dynamic — it reads the CSS variable `var(--composer-clearance, 80px)` written to the chat region's wrapper element by `MessageInput` via a `ResizeObserver`. The variable's value is `composer.height + composer.bottom-offset + 12 px` so the last message always lands 12 px above the composer's top edge regardless of (a) composer height (reply banner, staged-attachment tile row, multi-line autosize), (b) the composer's own `bottom` style (desktop 12 px / mobile-keyboard-closed `env(safe-area-inset-bottom) + 6` / mobile-keyboard-open 0).
+
+The 80 px fallback is sized for the desktop case during the brief mount window before the first ResizeObserver tick — it matches the previous static `pb-20`. See `docs/systems/mobile-ui.md` "Floating Composer" for the full rationale; the short version is that any static value is wrong on iPhone (composer height + safe-area + 6 already exceeds 80 px) and wrong when the composer grows (replies, attachments).
+
 ## ContainerRef invariant
 
 `containerRef.current` (and `contentRef.current`) MUST be non-null for the entire lifetime of any chat view where messages may arrive or scroll-affecting effects can run. Every effect in this file (initial snap A, ResizeObserver B, capture-phase load handler C, scrollend final-pin D, jump-to-message) reads these refs and bails on a null guard. Each of those effects is keyed on `[messages.length, channelId]` or `[hasMessages, channelId]`, and the inbound transition (`0 → N` / `false → true`) is the *only* re-fire signal during a channel-load lifecycle. If a ref is null at the moment that signal fires, the effect bails — and no later dep change will retry it, leaving the channel permanently broken (initial scroll never lands at bottom, ResizeObserver never observes, scrollend never registers, saved-anchor restore never happens).
diff --git a/docs/systems/mobile-ui.md b/docs/systems/mobile-ui.md
index 0c496d8e..e5682dc5 100644
--- a/docs/systems/mobile-ui.md
+++ b/docs/systems/mobile-ui.md
@@ -17,6 +17,8 @@ Source files:
 - `packages/web/src/components/layout/MobileVoiceMiniBar.tsx` — Persistent mini-bar overlay during voice calls
 - `packages/web/src/components/layout/MobileFolderSheet.tsx` — Bottom sheet for space folder contents, rename, color, ungroup
 - `packages/web/src/hooks/useSwipeGesture.ts` — Edge swipe-back touch gesture hook
+- `packages/web/src/hooks/useDragToClose.ts` — Bottom-sheet drag-down-to-dismiss gesture hook (shared by `InputPopover.MobileSheet`, `MobileVoiceJoinSheet`, `MobileFolderSheet`)
+- `packages/web/src/hooks/useVisualViewportInset.ts` — Returns the bottom inset that floating overlays must use to sit above the iOS soft keyboard (when open) or above the home-indicator safe area (when closed). Used by `MessageInput` for the floating composer-bubble's `bottom` value.
 - `packages/web/src/stores/uiStore.ts` — Mobile navigation state (mobileScreen, mobileStack, push/pop actions)
 
 Cross-references:
@@ -580,8 +582,147 @@ Several mobile components respect the iOS safe area inset:
 | MobileVoiceFullScreen control bar | `marginBottom: calc(0.5rem + env(safe-area-inset-bottom))` |
 | MobileFolderSheet | `paddingBottom: env(safe-area-inset-bottom)` |
 | MobileSpacesScreen add sheet | `paddingBottom: env(safe-area-inset-bottom)` |
+| MessageInput | `bottom: calc(env(safe-area-inset-bottom) + 6px)` (keyboard closed) / `0px` (keyboard open) — see "Floating Composer" below |
 
-The root MobileShell uses `height: 100dvh` (dynamic viewport height) to account for mobile browser chrome.
+The root `MobileShell` normally uses `height: 100dvh` (dynamic viewport height) to account for mobile browser chrome. **When the iOS soft keyboard is open** (detected via `useVisualViewportInset().keyboardOpen`), the shell switches to `height: ${visualViewport.height}px` so the visible region of the shell is exactly the area above the keyboard. This is the load-bearing mechanism for the floating composer landing flush against the keyboard top — see "Floating Composer" below.
+
+---
+
+## Floating Composer (Chat MessageInput)
+
+The chat composer (`MessageInput.tsx`) is a `glass-bubble` floating overlay on **both** desktop and mobile — there is no flow-positioned mobile branch. The pattern is shared so feature parity is automatic.
+
+### Layout model
+
+```
+┌──────────────────────────────────────────────┐
+│  MobileChatScreen / MainContent              │  ← `relative flex flex-col`
+│  ┌────────────────────────────────────────┐  │
+│  │ <MessageList />                        │  │  ← fills the chat region
+│  │   (scrolls; content's `paddingBottom`  │  │
+│  │   = `var(--composer-clearance, 80px)`  │  │
+│  │   so the last message always clears    │  │
+│  │   the bubble with a 12px breathing gap)│  │
+│  └────────────────────────────────────────┘  │
+│  ┌────────────────────────────────────────┐  │
+│  │ <MessageInput />                       │  │  ← `position: absolute`
+│  │  glass-bubble, translucent             │  │     `left-2 right-2 z-[110]`
+│  │  bottom = 0 (kbd open) / safe+6 (kbd   │  │     (mobile) / `md:left-3 md:right-3 md:bottom-3` (desktop)
+│  │  closed). Writes --composer-clearance  │  │
+│  │  on its parent via ResizeObserver.     │  │
+│  └────────────────────────────────────────┘  │
+└──────────────────────────────────────────────┘
+```
+
+The MessageList scroll region fills the entire chat area. The composer is `position: absolute` and overlays the bottom; messages scroll *behind* the translucent bubble. **Containers must declare `position: relative`** for the composer's absolute positioning to resolve correctly — `MainContent` does this on its outermost flex column; `MobileChatScreen` does this on the inner messages-and-composer wrapper.
+
+### Last-message clearance — the `--composer-clearance` CSS variable
+
+The MessageList content's `paddingBottom` is **dynamic**, driven by a CSS variable named `--composer-clearance` written to the chat region's wrapper element by `MessageInput` via a `ResizeObserver`:
+
+```
+--composer-clearance = composer.height + composer.bottom-offset + 12 px
+```
+
+Where `bottom-offset` is the gap between the wrapper's bottom edge and the composer's bottom edge (i.e. the resolved value of the composer's `bottom` style — `12 px` on desktop, `env(safe-area-inset-bottom) + 6` ≈ `40 px` on iPhone with keyboard closed, `0` on mobile with keyboard open). The `+12 px` constant is the desired breathing-room gap between the last message's bottom edge and the composer's top edge.
+
+`MessageList` reads `var(--composer-clearance, 80px)` as `paddingBottom`. The `80px` fallback covers the brief mount window before the first measurement, plus any future surface that mounts a `MessageList` without a sibling `MessageInput`.
+
+**Why dynamic?** The previous static `pb-20` (80 px) was sized for the desktop case (composer ≈ 50 px tall + 12 px bottom = 62 px, leaving 18 px of gap). On iPhone with the keyboard closed, the composer's bottom-offset is `env(safe-area-inset-bottom) + 6` ≈ 40 px, so `composer-height + bottom-offset` ≈ `44 + 40` = `84 px` — already exceeding the 80 px `pb-20`, with **negative** breathing room. The composer also grows when the user replies to a message (banner adds 36 px) or stages attachments (tile row adds 184 px), so any static value is wrong for some configurations. The ResizeObserver-driven CSS variable is the only correct model.
+
+The variable is scoped to the chat region's wrapper rather than `:root` so future multi-pane layouts (e.g. side-by-side DM list + chat, voice chat side-panel) don't cross-talk; a wrapper-scoped variable inherits naturally to its `MessageList` descendant.
+
+### `useVisualViewportInset()` — keyboard-aware geometry
+
+iOS Safari's `env(safe-area-inset-bottom)` is defined relative to the **layout** viewport (full screen), not the **visual** viewport (the visible region above the soft keyboard). When the iOS soft keyboard slides up, the layout viewport stays the same height and `safe-area-inset-bottom` still reports ~34 px (the home-indicator inset). A composer pinned to `bottom: env(safe-area-inset-bottom) + 6 px` therefore ends up `~40 px` above the layout-bottom, which on iPhone 14 Pro is `300+ px` above the keyboard — there is a huge empty gap between the composer and the keyboard top.
+
+The hook subscribes to `window.visualViewport.resize` / `scroll` and computes:
+
+```
+keyboardOcclusion = window.innerHeight - (visualViewport.offsetTop + visualViewport.height)
+```
+
+It returns `{ value, keyboardOpen, height, offsetTop }`:
+- `value` — `'<n>px'` when the keyboard is open (the occlusion), or the literal `'env(safe-area-inset-bottom)'` string when it is not. Provided for legacy / fallback use.
+- `keyboardOpen` — `true` when `keyboardOcclusion > 1`.
+- `height` — live `visualViewport.height` in pixels (or `null` if `visualViewport` is unavailable).
+- `offsetTop` — live `visualViewport.offsetTop` in pixels.
+
+#### iOS PWA standalone — the load-bearing mechanism
+
+`MobileShell` consumes `{ keyboardOpen, height }` and sets its own `style.height` to `${vv.height}px` whenever the keyboard is open. The chat region's `bottom` edge is therefore exactly the keyboard's top edge, and `<MessageInput style={{ bottom: 0 }}>` lands flush. **This is the primary mechanism, not the inset arithmetic** — sizing the container is far more robust than arithmetic on a `bottom` value, because the math depends on `vv.resize` events firing reliably (which they do not in iOS standalone PWA on several iOS versions). The composer's `bottom` is a simple binary toggle: `0` when keyboard open, `env(safe-area-inset-bottom) + 6 px` when closed.
+
+To cover the case where `vv.resize` fails to fire on iOS PWA (a long-standing standalone-mode bug), the hook **also** listens to `focusin` / `focusout` on `window` for any text-entry element and **polls** `vv.height` at 32 ms intervals for up to 600 ms after the focus change. Polling exits early once the height is stable for two consecutive ticks. This catches the case where iOS silently updates `vv.height` without dispatching a `resize` event — the polling just re-reads the value and re-derives `keyboardOpen`, which then triggers the shell-height update.
+
+When the keyboard is closed, `MobileShell` reverts to `height: 100dvh` so the shell again extends through the home-indicator safe area, and the composer reverts to `bottom: env(safe-area-inset-bottom) + 6 px` so it sits 6 px above the home indicator.
+
+#### Viewport meta hint
+
+`packages/web/index.html`'s viewport `<meta>` includes `interactive-widget=resizes-content`. Chrome (Android) honors this by resizing the layout viewport when the soft keyboard opens, which is the cleaner native equivalent of what `MobileShell` does manually. Safari iOS does not honor it, but it's harmless there.
+
+### MessageInput's mobile vs. desktop class split
+
+The component declares one `composerClass` shared by both modes. Differences:
+
+- Mobile inline `style={{ bottom: keyboardOpen ? '0px' : 'calc(env(safe-area-inset-bottom) + 6px)' }}` — applied only when `useUIStore.isMobile === true`. The hook is safe to call on desktop (no-ops), but the `style` is only emitted on mobile so desktop's CSS-driven `md:bottom-3` (12 px) constant is unaffected by the inline override.
+- Tailwind: `absolute left-2 right-2 z-[110] glass-bubble rounded-[14px] md:left-3 md:right-3 md:bottom-3`. The `left-2/right-2` 8 px inset is mobile; `md:left-3/right-3/bottom-3` overrides to 12 px on desktop. `bottom` is intentionally NOT in the Tailwind class on mobile — the inline `style.bottom` provides the dynamic value.
+
+`TypingIndicator` is rendered inside `MessageInput` (anchored `absolute bottom-full` to the bubble) so it appears just above the composer. Mobile chat screens must NOT render an additional `TypingIndicator` themselves.
+
+#### Composer-element ref shape
+
+`MessageInput` tracks the live composer DOM element via a callback ref that fans out to (a) the existing imperative `popoverAnchorRef` (consumed by `InputPopover` and the mention popover for anchor positioning) AND (b) a state-backed `composerEl` slot that drives the `--composer-clearance` ResizeObserver effect. The state-backed slot is required because the component renders different JSX when `canSendMessages` is false (the no-permission early-return path) vs. true (the full composer): a plain `useEffect` keyed only on stable deps would not re-fire when the ref attaches as the JSX flips, leaving the CSS variable unset until the next dep change. Channel permissions arrive asynchronously, so the initial mount renders the no-permission JSX first and re-renders the full composer once permissions resolve — the callback ref's `setComposerEl` call re-fires the effect at that moment.
+
+---
+
+## Bottom-Sheet Drag-to-Close (`useDragToClose`)
+
+File: `packages/web/src/hooks/useDragToClose.ts`
+
+Three hand-rolled bottom sheets share this gesture hook so each surface gets identical iOS-native-feeling dismissal without depending on a third-party gesture library:
+
+| Sheet | File | Drag-handle area |
+|---|---|---|
+| Emoji / GIF picker | `packages/web/src/components/chat/InputPopover.tsx` (`MobileSheet`) | Visible pill + tab bar |
+| Voice-channel join sheet | `packages/web/src/components/voice/MobileVoiceJoinSheet.tsx` | Visible pill + title row |
+| Space-folder sheet | `packages/web/src/components/layout/MobileFolderSheet.tsx` | Visible pill + folder header row |
+
+### Hook contract
+
+```ts
+const { sheetStyle, handleProps, isDragging, isClosing, hasInteracted } = useDragToClose({
+  onClose,                  // required
+  closeThreshold = 100,     // px below resting → commits to close on release
+  velocityThreshold = 0.5,  // px/ms downward → commits to close on release
+  closeAnimationMs = 200,   // close-out transition duration (matches the open keyframe)
+  enabled = true,
+});
+```
+
+- `sheetStyle` — spread onto the sheet container's inline `style`. While dragging, applies `transform: translateY(<dy>px)` with `transition: none` so the sheet follows the finger 1:1. On release, `transition: transform <closeAnimationMs>ms cubic-bezier(0.22, 1, 0.36, 1)` engages and the inline `transform` glides smoothly. If the close gate is met, `dragOffset` is **animated from the current offset directly to viewport height** (no intermediate snap-back to 0), and `onClose` fires after the animation completes.
+- `handleProps` — `{ onTouchStart }`. Spread onto the **drag-handle area** (the visible pill + the sheet's header row, never the scrollable content). Scrollable regions and tappable buttons inside the body are unaffected because the document-level `touchmove` / `touchend` listeners are only installed once a drag is in flight.
+- `isDragging` — true between `touchstart` and `touchend`.
+- `isClosing` — true during the close-out animation phase (after the threshold/velocity gate fires, until `onClose` fires).
+- `hasInteracted` — flips `true` on the first touchstart and stays `true` for the lifetime of the consumer mount. **Consumers MUST gate their open-animation classes on `!hasInteracted`** (e.g. `${hasInteracted ? '' : 'animate-slide-up-sheet'}`) so the open keyframe doesn't re-run during snap-back / close-out and fight the inline `transform` driven by `sheetStyle`. Using `isDragging` alone is insufficient — once `isDragging` flips back to false (release), the keyframe re-applies on the next render and the `translateY(100%) → translateY(0)` ramp visually overrides the glide.
+
+### Gesture behaviour
+
+| Phase | Behaviour |
+|---|---|
+| Touch start on handle | Captures finger Y + `performance.now()`. No visible change yet. `hasInteracted` flips to `true`. |
+| Move dy < 6 px | Dead-zone — ignored, native scrolling/pull-to-refresh still possible. |
+| Move dy ≥ 6 px | Commits to drag. `e.preventDefault()` blocks scroll/pull-to-refresh. Sheet follows finger. |
+| Release dy < 100 px and v < 0.5 px/ms | Snap back: `dragOffset → 0` via inline `transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1)`. Sheet stays open. |
+| Release dy ≥ 100 px **or** v > 0.5 px/ms (and dy > 16 px) | Snap close: `isClosing` flips on, transition engages, `dragOffset` ramps from current value to `window.innerHeight` over `closeAnimationMs`, then `onClose()` fires. **No intermediate snap to 0.** |
+| Touch cancel | Snap back to 0 with the same transition (consistent with release-without-commit). |
+
+### Coexistence with other patterns
+
+- **Tap-outside-to-close** stays wired via the existing backdrop `<div>` — independent code path, unaffected by the gesture hook.
+- **Tap-on-handle** is treated as a no-op (touch starts and ends inside the dead-zone → no offset → no commit). `hasInteracted` does flip true, but with `dragOffset === 0` the inline transform stays at `translateY(0)` and the visible state matches the open state.
+- **iOS pull-to-refresh** is blocked because `touchmove` is non-passive and calls `preventDefault()` once we cross the dead-zone.
+- **Internal scrolling** (e.g. emoji grid, GIF results, folder space list) is **untouched** — `handleProps.onTouchStart` is bound to the header element only, so scroll containers below it never enter drag mode.
+- **Open animation** (`animate-slide-up-sheet` for `MobileFolderSheet` / `InputPopover.MobileSheet`, the `translate-y-full → translate-y-0` flip for `MobileVoiceJoinSheet`) is gated by `!hasInteracted`. After the first touch, the open class never re-applies for the rest of the sheet's lifetime — the inline `transform` + transition becomes the sole animator for both snap-back and close-out.
 
 ---
 
diff --git a/packages/web/index.html b/packages/web/index.html
index 71d407eb..1a29dc55 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="color-scheme" content="dark" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="description" content="The self-hosted Discord and TeamSpeak alternative. HD voice, video, and screen share — open-source and free." />
     <meta name="theme-color" content="#0b0b10" />
     <meta name="mobile-web-app-capable" content="yes" />
diff --git a/packages/web/src/components/chat/AttachmentRenderer.tsx b/packages/web/src/components/chat/AttachmentRenderer.tsx
index 4f6e6132..56c597fc 100644
--- a/packages/web/src/components/chat/AttachmentRenderer.tsx
+++ b/packages/web/src/components/chat/AttachmentRenderer.tsx
@@ -162,6 +162,16 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
     );
   }
 
+  // Generic-file chip (PDF / .zip / .exe / unknown mimetypes).
+  //
+  // Width contract: the chip must fit inside the message column on every
+  // viewport. We cap at 400 px on roomy layouts but `max-w-full` keeps it
+  // inside narrow columns (mobile, narrow desktop window, threaded reply
+  // contexts). `min-w-0` is the critical bit on the inner flex children — the
+  // outer button is a flex container with a fixed-size icon and a flexible
+  // text block; without `min-w-0` the long-filename child would refuse to
+  // shrink (flex children's min-content size defaults to their intrinsic
+  // content) and would push the entire chip past the parent's right edge.
   return (
     <button
       type="button"
@@ -173,9 +183,9 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
           tray: true,
         });
       }}
-      className="mt-1 max-w-[400px] flex items-center gap-3 p-4 bg-surface-channel/50 rounded-lg border border-border-hard hover:bg-interactive-hover transition-all group/att text-left w-full"
+      className="mt-1 max-w-full sm:max-w-[400px] flex items-center gap-3 p-4 bg-surface-channel/50 rounded-lg border border-border-hard hover:bg-interactive-hover transition-all group/att text-left w-full min-w-0"
     >
-      <div className="p-2 bg-surface-base rounded text-txt-tertiary group-hover/att:text-txt-primary transition-colors">
+      <div className="p-2 bg-surface-base rounded text-txt-tertiary group-hover/att:text-txt-primary transition-colors flex-shrink-0">
         <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path
             strokeLinecap="round"
@@ -185,9 +195,9 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
           />
         </svg>
       </div>
-      <div className="min-w-0">
+      <div className="min-w-0 flex-1">
         <p className="text-txt-link text-[15px] font-medium truncate hover:underline">{originalName}</p>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           <p className="text-[12px] text-txt-tertiary font-medium">{formatFileSize(size)}</p>
           {federationInlineBadge}
         </div>
diff --git a/packages/web/src/components/chat/InputPopover.tsx b/packages/web/src/components/chat/InputPopover.tsx
index f65bc56a..febac11c 100644
--- a/packages/web/src/components/chat/InputPopover.tsx
+++ b/packages/web/src/components/chat/InputPopover.tsx
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { EmojiPicker } from './EmojiPicker';
 import { GifPicker } from './GifPicker';
 import { useUIStore } from '../../stores/uiStore';
+import { useDragToClose } from '../../hooks/useDragToClose';
 
 export type InputPopoverTab = 'emoji' | 'gif';
 
@@ -170,6 +171,14 @@ function MobileSheet({
     return () => document.removeEventListener('keydown', handler);
   }, [onClose]);
 
+  // Drag-down-to-close. Only the handle + tab-bar area receives the touch;
+  // the picker grids manage their own scrolling and must not be hijacked.
+  // `hasInteracted` flips true on the first touchstart and stays true — we
+  // use it to suppress the `animate-slide-up-sheet` keyframe from re-running
+  // during snap-back / close-out, which would otherwise fight the inline
+  // transform the hook is animating.
+  const { sheetStyle, handleProps, hasInteracted } = useDragToClose({ onClose });
+
   return createPortal(
     <>
       {/* Backdrop — single tap (mousedown OR touchstart) closes */}
@@ -180,7 +189,9 @@ function MobileSheet({
       />
       {/* Sheet */}
       <div
-        className="fixed left-0 right-0 z-[301] rounded-t-2xl glass-modal animate-slide-up-sheet flex flex-col"
+        className={`fixed left-0 right-0 z-[301] rounded-t-2xl glass-modal flex flex-col ${
+          hasInteracted ? '' : 'animate-slide-up-sheet'
+        }`}
         style={{
           // Sit at the bottom of the visible viewport. On iOS 16.4+ the
           // `keyboard-inset-height` env var lifts us above the soft keyboard;
@@ -190,15 +201,21 @@ function MobileSheet({
           bottom: 'env(keyboard-inset-height, 0px)',
           paddingBottom: 'env(safe-area-inset-bottom)',
           maxHeight: 'min(60dvh, 60vh)',
+          ...sheetStyle,
         }}
         onMouseDown={(e) => e.stopPropagation()}
         onTouchStart={(e) => e.stopPropagation()}
       >
-        {/* Drag handle */}
-        <div className="w-10 h-1 bg-txt-tertiary/30 rounded-full mx-auto mt-2 mb-1 shrink-0" />
-
-        {/* Tab bar (only when multiple tabs available) */}
-        <TabBar activeTab={activeTab} availableTabs={availableTabs} onTabChange={onTabChange} />
+        {/* Drag handle + tab bar — both belong to the "header" drag area.
+            Spreading `handleProps` here means the user can grab anywhere in
+            this top region (handle pill, padding around it, tab buttons'
+            interstitial space) to dismiss; tab buttons themselves still
+            receive their own clicks because clicks aren't blocked, only
+            vertical drag past the dead-zone is. */}
+        <div {...handleProps} className="shrink-0 touch-none">
+          <div className="w-10 h-1 bg-txt-tertiary/30 rounded-full mx-auto mt-2 mb-1" />
+          <TabBar activeTab={activeTab} availableTabs={availableTabs} onTabChange={onTabChange} />
+        </div>
 
         {/* Content */}
         <div className="flex-1 min-h-0 overflow-hidden flex flex-col">
diff --git a/packages/web/src/components/chat/MessageInput.tsx b/packages/web/src/components/chat/MessageInput.tsx
index 4572841c..f06ede27 100644
--- a/packages/web/src/components/chat/MessageInput.tsx
+++ b/packages/web/src/components/chat/MessageInput.tsx
@@ -14,6 +14,7 @@ import { useComposerStore } from '../../stores/composerStore';
 import { useTransferStore, type Transfer } from '../../stores/transferStore';
 import { usePendingMessageStore } from '../../stores/pendingMessageStore';
 import { putHandle, supportsFsHandles, supportsDnDHandles } from '../../utils/idbHandles';
+import { useVisualViewportInset } from '../../hooks/useVisualViewportInset';
 
 interface MessageInputProps {
   channelId: string;
@@ -60,7 +61,13 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const inputContainerRef = useRef<HTMLDivElement>(null);
-  const popoverAnchorRef = useRef<HTMLDivElement>(null);
+  // Note: this ref is intentionally typed `HTMLDivElement | null` (mutable
+  // ref shape) rather than the more restrictive `RefObject<HTMLDivElement>`
+  // because we assign to `.current` from a callback ref below — the
+  // callback ref bridges the imperative `popoverAnchorRef` consumers
+  // (InputPopover / mention-popover anchoring) and the state-backed
+  // `composerEl` slot used by the clearance-measuring effect.
+  const popoverAnchorRef = useRef<HTMLDivElement | null>(null);
 
   // Object URLs for current-session image previews. transferStore doesn't hold
   // the raw File, so previews only exist for files picked in this session
@@ -566,12 +573,148 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
     !isOverLimit &&
     !anyUnshippable;
 
+  // Composer positioning model — IDENTICAL across desktop and mobile.
+  // ─────────────────────────────────────────────────────────────────
+  // The composer is a floating glass-bubble (`glass-bubble rounded-[14px]`)
+  // pinned to the bottom of the chat region with `position: absolute`. The
+  // MessageList sibling fills the entire chat area; the last messages scroll
+  // *behind* the translucent bubble. MessageList content carries a dynamic
+  // `paddingBottom` (CSS variable `--composer-clearance`, set by the
+  // ResizeObserver effect below) so the last message clears the bubble's
+  // top edge with a 12 px breathing gap regardless of bubble height.
+  //
+  // Vertical positioning differs only in the `bottom` value:
+  // - Desktop: `bottom: 12px` (the historical `md:bottom-3` constant).
+  // - Mobile, keyboard closed: `bottom: env(safe-area-inset-bottom) + 6px`
+  //   so the bubble clears the iOS home indicator with a small breathing gap.
+  // - Mobile, keyboard open: `bottom: 0`. `MobileShell` shrinks its container
+  //   to `visualViewport.height` (see `MobileShell.tsx`), so the chat region's
+  //   bottom edge already sits on the keyboard's top edge. The composer then
+  //   lands flush with the keyboard regardless of how reliably
+  //   `visualViewport` event delivery is on iOS PWA — the shell's height
+  //   shrinking is the load-bearing mechanism, not the inset arithmetic
+  //   here. This dodges the long-standing iOS-standalone bug where
+  //   `visualViewport.resize` fires late or not at all when the soft
+  //   keyboard opens. The hook's `focusin` polling fallback covers the
+  //   remaining gap by re-reading `vv.height` for ~600 ms after a text
+  //   input gains focus, even when no resize event ever lands.
+  //
+  // The horizontal inset is symmetric: `left-2 right-2` on mobile (matches
+  // `MobileVoiceMiniBar`'s `mx-2` and the `MobileBottomNav` spacing tier);
+  // `md:left-3 md:right-3` on desktop (the historical 12 px inset).
+  //
+  // `z-[110]` keeps the bubble above any in-chat overlays (mention popover,
+  // staged-attachment tiles) but below modals (`z-[300]+`).
+  const isMobile = useUIStore((s) => s.isMobile);
+  const { keyboardOpen } = useVisualViewportInset();
+  const composerStyle: React.CSSProperties | undefined = isMobile
+    ? { bottom: keyboardOpen ? '0px' : 'calc(env(safe-area-inset-bottom) + 6px)' }
+    : undefined;
+  const composerClass =
+    'absolute left-2 right-2 z-[110] glass-bubble rounded-[14px]' +
+    ' md:left-3 md:right-3 md:bottom-3';
+
+  // Dynamic message-list bottom padding ("composer clearance"):
+  //
+  // The composer is `position: absolute` and overlays the bottom of the
+  // chat region. The MessageList scroll content needs enough bottom padding
+  // that the last message can be scrolled fully into view above the bubble
+  // with a visible gap — otherwise the last message sticks flush to the
+  // bubble's top edge (the bug user reported on iOS PWA: a static `pb-20`
+  // = 80 px is smaller than `composer-bottom-offset (env safe-area + 6) +
+  // composer-height (~50–100 px depending on staged attachments / multi-
+  // line text)` on iPhone).
+  //
+  // Strategy: a single CSS custom property `--composer-clearance` is
+  // written to the nearest scrollable ancestor on every composer-size or
+  // composer-bottom-offset change. `MessageList` reads that variable as
+  // its content's `paddingBottom`, falling back to a static 80 px when
+  // unset (e.g. when no composer is mounted, or before the first measure).
+  // The 12 px constant below is the desired breathing-room gap between the
+  // last message's bottom edge and the composer's top edge.
+  //
+  // Why a CSS variable on the parent rather than a global:
+  //   - One MessageInput per chat region; the variable scopes to that
+  //     region so multi-pane layouts (DM list + chat in a future split
+  //     view, voice channel side-panel, etc.) don't cross-talk.
+  //   - The MessageList content already lives inside the same parent
+  //     subtree, so a CSS variable inheritance just works.
+  // We track the live composer DOM element via a state-backed ref. A plain
+  // ref isn't enough because the component renders different JSX when
+  // `canSendMessages` flips (the early-return permission-denied path doesn't
+  // attach the ref), and a useEffect on the ref's value would not re-fire on
+  // those re-renders. Channel permissions arrive asynchronously, so the
+  // initial mount renders the no-permission JSX first, then re-renders with
+  // the full composer once permissions resolve — we need to (re-)attach the
+  // ResizeObserver at that moment.
+  const [composerEl, setComposerEl] = useState<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!composerEl) return;
+    const target = composerEl.parentElement;
+    if (!target) return;
+    const el = composerEl;
+
+    const sync = () => {
+      // Total clearance = composer height + bottom offset + 12 px gap.
+      // We measure the bubble's visual height (including replyTo banner +
+      // staged-attachment tiles + textarea autosize) plus the distance from
+      // the parent's bottom edge to the bubble's bottom edge (which folds
+      // in `env(safe-area-inset-bottom) + 6` on mobile or `12 px` on
+      // desktop, whichever the composer's `bottom` resolves to).
+      const composerRect = el.getBoundingClientRect();
+      const parentRect = target.getBoundingClientRect();
+      const bottomOffset = Math.max(0, parentRect.bottom - composerRect.bottom);
+      const clearance = Math.round(composerRect.height + bottomOffset + 12);
+      target.style.setProperty('--composer-clearance', `${clearance}px`);
+    };
+
+    sync();
+    const ro = new ResizeObserver(sync);
+    ro.observe(el);
+    // Also re-sync when the parent itself resizes (keyboard open/close
+    // collapses the chat region's height; MobileShell drives this via
+    // visualViewport.height).
+    ro.observe(target);
+
+    // Re-sync on visual viewport changes — the parent's `getBoundingClientRect`
+    // updates with the layout, but if `MobileShell`'s height attribute
+    // updates between paints, we want a same-frame re-measure.
+    const vv = window.visualViewport;
+    const onVv = () => sync();
+    if (vv) {
+      vv.addEventListener('resize', onVv);
+      vv.addEventListener('scroll', onVv);
+    }
+
+    return () => {
+      ro.disconnect();
+      if (vv) {
+        vv.removeEventListener('resize', onVv);
+        vv.removeEventListener('scroll', onVv);
+      }
+      target.style.removeProperty('--composer-clearance');
+    };
+    // Re-arm the observer / listeners when keyboard transitions or the
+    // composer's content materially changes — the dependency list is the
+    // set of inputs that can change the bubble's height or its bottom
+    // offset between renders. The ResizeObserver itself is what catches
+    // continuous textarea-autosize growth; these deps just ensure we're
+    // attached to the live element after a remount.
+  }, [composerEl, isMobile, keyboardOpen, chatReplyTo, stagedTransfers.length]);
+
+  // Combined ref: keep `popoverAnchorRef` populated (InputPopover / mention
+  // popover anchor + scroll-into-view targets) AND notify the
+  // `composerEl` state slot so the clearance-measuring effect can re-run
+  // when the element materializes / changes between conditional render
+  // branches.
+  const setComposerRef = useCallback((node: HTMLDivElement | null) => {
+    popoverAnchorRef.current = node;
+    setComposerEl(node);
+  }, []);
+
   if (!canSendMessages) {
     return (
-      <div
-        data-pip-obstacle="bottom"
-        className="relative px-3 pb-3 flex-shrink-0 md:absolute md:bottom-3 md:left-3 md:right-3 md:z-[110] md:px-0 md:pb-0 md:glass-bubble md:rounded-[14px]"
-      >
+      <div ref={setComposerRef} data-pip-obstacle="bottom" className={composerClass} style={composerStyle}>
         <div className="flex items-center justify-center py-[14px] px-4">
           <span className="text-txt-tertiary text-[14px]">
             You do not have permission to send messages in this channel
@@ -583,9 +726,10 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
 
   return (
     <div
-      ref={popoverAnchorRef}
+      ref={setComposerRef}
       data-pip-obstacle="bottom"
-      className="relative px-3 pb-3 flex-shrink-0 md:absolute md:bottom-3 md:left-3 md:right-3 md:z-[110] md:px-0 md:pb-0 md:glass-bubble md:rounded-[14px]"
+      className={composerClass}
+      style={composerStyle}
     >
       <TypingIndicator channelId={channelId} />
 
@@ -623,7 +767,7 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
       )}
       <div
         ref={inputContainerRef}
-        className={`relative bg-surface-input md:bg-transparent ${chatReplyTo ? 'rounded-b-lg' : 'rounded-lg md:rounded-none'} overflow-visible`}
+        className={`relative ${chatReplyTo ? 'rounded-b-lg' : ''} overflow-visible`}
         onDrop={canAttachFiles ? handleDrop : undefined}
         onDragOver={canAttachFiles ? handleDragOver : undefined}
       >
diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index 6c2af831..8d4ca6f1 100644
--- a/packages/web/src/components/chat/MessageList.tsx
+++ b/packages/web/src/components/chat/MessageList.tsx
@@ -657,7 +657,11 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
 
         {!hasMore && <WelcomeHeader channelId={channelId} />}
 
-        <div ref={contentRef} className="pt-4 pb-6 md:pb-20">
+        <div
+          ref={contentRef}
+          className="pt-4"
+          style={{ paddingBottom: 'var(--composer-clearance, 80px)' }}
+        >
           {interleavedMessages.map((msg, i) => {
             const prevMsg = interleavedMessages[i - 1];
             const showDate = shouldShowDateDivider(prevMsg, msg);
diff --git a/packages/web/src/components/layout/MobileChatScreen.tsx b/packages/web/src/components/layout/MobileChatScreen.tsx
index 20d76f18..14429a28 100644
--- a/packages/web/src/components/layout/MobileChatScreen.tsx
+++ b/packages/web/src/components/layout/MobileChatScreen.tsx
@@ -5,7 +5,6 @@ import { useSpaceStore } from '../../stores/spaceStore';
 import { useAuthStore } from '../../stores/authStore';
 import { MessageList } from '../chat/MessageList';
 import { MessageInput } from '../chat/MessageInput';
-import { TypingIndicator } from '../chat/TypingIndicator';
 import { TransferIndicator } from './TransferIndicator';
 import { parseFederatedUsername } from '../../utils/identity';
 import { useCanonicalUserView } from '../../utils/userViewLookup';
@@ -95,14 +94,21 @@ export function MobileChatScreen({ params }: MobileChatScreenProps) {
         )}
       </header>
 
-      {/* Messages */}
-      <div className="flex-1 overflow-hidden min-h-0 flex flex-col">
+      {/* Messages + floating composer.
+          Mirrors the desktop pattern in `MainContent.tsx`: a single relative
+          flex-1 region holds both `<MessageList>` (filling the area) and
+          `<MessageInput>` (floating glass-bubble at the bottom). The bubble
+          is `position: absolute` and is positioned from `MessageInput.tsx`
+          via the `useVisualViewportInset` hook so it lifts above the iOS
+          soft keyboard when one is open and rests above the home-indicator
+          safe-area when not. MessageList content carries `pb-20` so the last
+          message can scroll fully into view above the bubble.
+          TypingIndicator is rendered inside MessageInput itself (anchored
+          `absolute bottom-full` to the bubble), so we don't render it here. */}
+      <div className="relative flex-1 min-h-0 flex flex-col overflow-hidden">
         {channelId && <MessageList channelId={channelId} />}
+        {channelId && <MessageInput channelId={channelId} channelName={channelName} />}
       </div>
-
-      {/* Typing indicator + Input */}
-      {channelId && <TypingIndicator channelId={channelId} />}
-      {channelId && <MessageInput channelId={channelId} channelName={channelName} />}
     </div>
   );
 }
diff --git a/packages/web/src/components/layout/MobileFolderSheet.tsx b/packages/web/src/components/layout/MobileFolderSheet.tsx
index 99d5cac2..363fbe06 100644
--- a/packages/web/src/components/layout/MobileFolderSheet.tsx
+++ b/packages/web/src/components/layout/MobileFolderSheet.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { SpaceFolder } from '@backspace/shared';
 import { useSpaceStore } from '../../stores/spaceStore';
 import { useContextMenuStore } from '../../stores/contextMenuStore';
+import { useDragToClose } from '../../hooks/useDragToClose';
 import { getSpaceGradient } from '../../utils/gradients';
 
 const FOLDER_COLORS = [
@@ -84,17 +85,31 @@ export function MobileFolderSheet({ folder, onClose, onSelectSpace, onUpdateFold
     ]);
   };
 
+  // Drag-down-to-close. Touches on the handle pill or the folder-header row
+  // initiate the gesture; the scrollable space-list is unaffected.
+  // `hasInteracted` flips on the first touchstart and stays true so the
+  // open keyframe doesn't re-run during snap-back / close-out.
+  const { sheetStyle: dragStyle, handleProps: dragHandleProps, hasInteracted } =
+    useDragToClose({ onClose });
+
   return (
     <>
       <div className="fixed inset-0 z-[300] bg-black/50" onClick={onClose} />
       <div
-        className="fixed bottom-0 left-0 right-0 z-[301] rounded-t-2xl glass-modal animate-slide-up-sheet max-h-[60vh] flex flex-col"
-        style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+        className={`fixed bottom-0 left-0 right-0 z-[301] rounded-t-2xl glass-modal max-h-[60vh] flex flex-col ${
+          hasInteracted ? '' : 'animate-slide-up-sheet'
+        }`}
+        style={{ paddingBottom: 'env(safe-area-inset-bottom)', ...dragStyle }}
       >
-        <div className="w-10 h-1 bg-txt-tertiary/30 rounded-full mx-auto mt-2 mb-1 shrink-0" />
+        {/* Drag handle + folder header — both belong to the drag-to-close
+            region. The folder-header row keeps its right-click → context menu
+            (`onContextMenu`); only vertical drag past the dead-zone is
+            captured by the gesture. */}
+        <div {...dragHandleProps} className="shrink-0 touch-none">
+          <div className="w-10 h-1 bg-txt-tertiary/30 rounded-full mx-auto mt-2 mb-1" />
 
         {/* Folder header */}
-        <div className="px-4 py-2 flex items-center gap-2 shrink-0" data-context-menu onContextMenu={handleFolderContextMenu}>
+        <div className="px-4 py-2 flex items-center gap-2" data-context-menu onContextMenu={handleFolderContextMenu}>
           <div
             className="w-5 h-5 rounded"
             style={{ background: folder.color || 'rgb(var(--text-tertiary))' }}
@@ -115,6 +130,7 @@ export function MobileFolderSheet({ folder, onClose, onSelectSpace, onUpdateFold
           )}
           <span className="text-xs text-txt-tertiary">{folderSpaces.length} spaces</span>
         </div>
+        </div>
 
         {/* Folder spaces */}
         <div className="flex-1 overflow-y-auto px-2 py-1">
diff --git a/packages/web/src/components/layout/MobileShell.tsx b/packages/web/src/components/layout/MobileShell.tsx
index 3b2c9a5a..e69d5509 100644
--- a/packages/web/src/components/layout/MobileShell.tsx
+++ b/packages/web/src/components/layout/MobileShell.tsx
@@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { MobileScreenStack } from './MobileScreenStack';
 import { MobileBottomNav } from './MobileBottomNav';
 import { useSwipeGesture } from '../../hooks/useSwipeGesture';
+import { useVisualViewportInset } from '../../hooks/useVisualViewportInset';
 
 import { MobileSpacesScreen } from './MobileSpacesScreen';
 import { MobileDmsScreen } from './MobileDmsScreen';
@@ -182,8 +183,19 @@ export function MobileShell() {
     you: <MobileYouScreen />,
   };
 
+  // Size the shell to the visual viewport when the iOS soft keyboard is open
+  // so a `position: absolute; bottom: 0` child (the chat composer) lands on
+  // the keyboard's top edge — independent of how reliably the
+  // `visualViewport.resize` event fires in standalone PWA mode. When the
+  // keyboard is closed we use `100dvh` so the shell extends through the
+  // home-indicator safe area as designed. See `useVisualViewportInset` for
+  // the iOS-PWA-specific fallback (focusin polling) that updates `height`
+  // even when no `resize` event ever lands.
+  const { keyboardOpen, height: vvHeight } = useVisualViewportInset();
+  const shellHeight = keyboardOpen && vvHeight !== null ? `${vvHeight}px` : '100dvh';
+
   return (
-    <div className="flex flex-col" style={{ height: '100dvh' }}>
+    <div className="flex flex-col" style={{ height: shellHeight }}>
       <MobileScreenStack
         rootScreen={rootScreens[mobileScreen]}
         screenMap={screenMap}
diff --git a/packages/web/src/components/voice/MobileVoiceJoinSheet.tsx b/packages/web/src/components/voice/MobileVoiceJoinSheet.tsx
index 0f94555a..815fe39a 100644
--- a/packages/web/src/components/voice/MobileVoiceJoinSheet.tsx
+++ b/packages/web/src/components/voice/MobileVoiceJoinSheet.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useVoiceStore } from '../../stores/voiceStore';
 import { useSpaceStore } from '../../stores/spaceStore';
+import { useDragToClose } from '../../hooks/useDragToClose';
 import { VoiceUserRow } from './VoiceUserRow';
 
 /**
@@ -319,6 +320,19 @@ export function MobileVoiceJoinSheet({
     onClose();
   }, [onClose]);
 
+  // Drag-down-to-close. The handle + header region owns the gesture; touches
+  // on the camera tile / user list / action bar are unaffected so internal
+  // scrolling and button taps still work.
+  // `hasInteracted` stays true after the first touchstart so we never re-
+  // apply the open-animation classes (`translate-y-full → translate-y-0`)
+  // mid-drag or mid-close — those classes would otherwise fight the inline
+  // transform the hook drives.
+  const {
+    sheetStyle: dragStyle,
+    handleProps: dragHandleProps,
+    hasInteracted,
+  } = useDragToClose({ onClose });
+
   // Explicit user gesture: open getUserMedia for the selected camera.
   const startPreviewFromUser = useCallback(async () => {
     setPreviewError(null);
@@ -384,19 +398,32 @@ export function MobileVoiceJoinSheet({
         onClick={handleBackdropClick}
       />
 
-      {/* Sheet container */}
+      {/* Sheet container.
+          Open animation: when `visible` is false we sit at translateY(100%);
+          flipping it true triggers the existing 300 ms slide-in.
+          Drag-to-close: while the user drags, `dragStyle.transform` overrides
+          the open transform with the live finger offset. Releasing past the
+          threshold extends the offset to off-screen and calls `onClose`. */}
       <div
-        className={`glass-bubble fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl transition-transform duration-300 ease-out ${
-          visible ? 'translate-y-0' : 'translate-y-full'
+        className={`glass-bubble fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl ${
+          hasInteracted
+            ? ''
+            : `transition-transform duration-300 ease-out ${visible ? 'translate-y-0' : 'translate-y-full'}`
         }`}
-        style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+        style={{
+          paddingBottom: 'env(safe-area-inset-bottom)',
+          ...dragStyle,
+        }}
       >
-        {/* Drag handle */}
-        <div className="w-10 h-1 rounded-full bg-white/20 mx-auto mt-3 mb-4" />
+        {/* Drag handle + header — both belong to the drag-to-close region.
+            The user can grab the visible pill OR the title row to drag down. */}
+        <div {...dragHandleProps} className="touch-none">
+          <div className="w-10 h-1 rounded-full bg-white/20 mx-auto mt-3 mb-4" />
 
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 mb-2">
-          <h2 className="text-base font-bold text-txt-primary truncate">{channelName}</h2>
+          {/* Header */}
+          <div className="flex items-center justify-between px-5 mb-2">
+            <h2 className="text-base font-bold text-txt-primary truncate">{channelName}</h2>
+          </div>
         </div>
 
         {/* User count */}
diff --git a/packages/web/src/hooks/useDragToClose.ts b/packages/web/src/hooks/useDragToClose.ts
new file mode 100644
index 00000000..83d29054
--- /dev/null
+++ b/packages/web/src/hooks/useDragToClose.ts
@@ -0,0 +1,278 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Drag-to-close gesture hook for bottom sheets.
+ *
+ * Returns the props you spread onto the *drag-handle area* (typically the
+ * sheet's top section: visible handle pill + header), plus the live
+ * `dragOffset` to apply as a `translateY` on the sheet container.
+ *
+ * Behaviour
+ * ─────────
+ * - The user must start the touch on the drag-handle/header area (the spread
+ *   props live on a single element). Touches on the body/scrollable region are
+ *   never captured, so internal scrolling is unaffected.
+ * - While the finger moves down, the sheet follows 1:1 via `translateY`. Up-
+ *   ward drag is clamped to 0 (rubber-band kept simple — we don't want any
+ *   visual feedback that suggests "drag up to expand", which we don't support).
+ * - On release:
+ *   - If the drag distance exceeds the close threshold *or* the user is
+ *     flicking down faster than the velocity threshold, we trigger the close
+ *     animation: `translateY` glides from the current offset to off-screen
+ *     (200 ms ease-out), THEN `onClose` fires. We never snap back to 0 first.
+ *   - Otherwise we snap back to 0 with the same easing.
+ * - Lateral scroll is not blocked; vertical drag past a small dead-zone calls
+ *   `preventDefault` so iOS Safari doesn't simultaneously scroll the page or
+ *   trigger pull-to-refresh on Chrome Android.
+ *
+ * Open-keyframe coexistence
+ * ─────────────────────────
+ * Consumers typically apply an `animate-slide-up-sheet` CSS keyframe on mount
+ * (a 200 ms `translateY(100%) → translateY(0)` ramp). That keyframe must be
+ * suppressed any time we're driving `transform` ourselves via inline style —
+ * otherwise React re-render cycles will re-add the class and the keyframe
+ * will fight (or replace) the inline transform. The hook exposes
+ * `hasInteracted` for this purpose: it flips `true` on the first touchstart
+ * and stays `true` for the lifetime of the consumer mount, so consumers can
+ * write `${hasInteracted ? '' : 'animate-slide-up-sheet'}`. This gates the
+ * keyframe both during drag (isDragging), during snap-back (isDragging=false
+ * + dragOffset transitioning back to 0), and during the close-out animation
+ * (isClosing=true + dragOffset = viewport height).
+ *
+ * The hook is otherwise animation-agnostic. The close-out transition uses
+ * `transform Xms ease-out` applied via inline style, where X is
+ * `closeAnimationMs` (defaults to 200, matching `slide-up-sheet`'s timing).
+ *
+ * Tap-on-handle is treated as a no-op: a touch that ends within the dead-zone
+ * without crossing the velocity/threshold gates simply snaps back, which
+ * matches iOS native sheet behaviour (a tap on the grabber doesn't dismiss).
+ */
+
+interface DragToCloseOptions {
+  onClose: () => void;
+  /**
+   * Threshold in pixels below the resting position above which the sheet
+   * commits to closing on release. If the consumer doesn't pass a height, we
+   * fall back to a fixed 100 px threshold.
+   */
+  closeThreshold?: number;
+  /**
+   * Velocity in px/ms; releasing faster than this in the down direction
+   * commits to a close regardless of distance.
+   */
+  velocityThreshold?: number;
+  /**
+   * Optional override for the closing animation duration (ms). Default 200
+   * matches `tailwind.config.js`'s `slide-up-sheet` keyframe.
+   */
+  closeAnimationMs?: number;
+  /** Disable the gesture without unmounting the consumer. */
+  enabled?: boolean;
+}
+
+interface DragToCloseResult {
+  /** Inline style to spread onto the sheet container. */
+  sheetStyle: React.CSSProperties;
+  /** Spread onto the drag-handle / header area. */
+  handleProps: {
+    onTouchStart: (e: React.TouchEvent) => void;
+  };
+  /** True while the user is actively dragging. */
+  isDragging: boolean;
+  /** True while the close-out animation is running (after threshold met). */
+  isClosing: boolean;
+  /**
+   * True once the user has touched the drag handle at least once. Stays true
+   * for the rest of the component's lifetime. Consumers use this to suppress
+   * their open-animation keyframe so it doesn't fight the inline transform on
+   * snap-back / close-out.
+   */
+  hasInteracted: boolean;
+}
+
+export function useDragToClose({
+  onClose,
+  closeThreshold = 100,
+  velocityThreshold = 0.5,
+  closeAnimationMs = 200,
+  enabled = true,
+}: DragToCloseOptions): DragToCloseResult {
+  const [dragOffset, setDragOffset] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
+
+  const startYRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number>(0);
+  const lastYRef = useRef<number>(0);
+  const lastTimeRef = useRef<number>(0);
+  const movedPastDeadzoneRef = useRef<boolean>(false);
+  // Latest values used inside document-level listeners. Refs avoid re-binding
+  // listeners every render.
+  const enabledRef = useRef(enabled);
+  const onCloseRef = useRef(onClose);
+  const closeThresholdRef = useRef(closeThreshold);
+  const velocityThresholdRef = useRef(velocityThreshold);
+  const closeAnimationMsRef = useRef(closeAnimationMs);
+
+  useEffect(() => { enabledRef.current = enabled; }, [enabled]);
+  useEffect(() => { onCloseRef.current = onClose; }, [onClose]);
+  useEffect(() => { closeThresholdRef.current = closeThreshold; }, [closeThreshold]);
+  useEffect(() => { velocityThresholdRef.current = velocityThreshold; }, [velocityThreshold]);
+  useEffect(() => { closeAnimationMsRef.current = closeAnimationMs; }, [closeAnimationMs]);
+
+  // Document-level move/end handlers are installed only while a drag is in
+  // progress. Installing them on every render would interfere with passive
+  // listeners elsewhere; installing them on demand keeps the gesture inert
+  // when the sheet is idle.
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!enabledRef.current || startYRef.current === null) return;
+      const touch = e.touches[0];
+      if (!touch) return;
+      const dy = touch.clientY - startYRef.current;
+      const now = performance.now();
+      lastYRef.current = touch.clientY;
+      lastTimeRef.current = now;
+
+      // Dead-zone: ignore the first ~6 px to avoid stealing taps and tiny
+      // scrolls. Once we cross it, we own the gesture.
+      if (!movedPastDeadzoneRef.current) {
+        if (Math.abs(dy) < 6) return;
+        movedPastDeadzoneRef.current = true;
+      }
+
+      // Block native scroll/pull-to-refresh while we drive the offset.
+      if (e.cancelable) e.preventDefault();
+
+      // Clamp to 0 on the upward side (no over-scroll).
+      const offset = Math.max(0, dy);
+      setDragOffset(offset);
+    };
+
+    const finalize = (commitClose: boolean, releaseDy: number) => {
+      if (commitClose) {
+        // Animate from the *current* offset to fully off-screen, then unmount.
+        // Critical: we must NOT reset to 0 first — that would visually bounce
+        // the sheet up before the close. We flip `isDragging` off (so the
+        // inline `transition` engages) and `isClosing` on (so consumers'
+        // `hasInteracted`-gated open-keyframe stays suppressed even after
+        // unmount), then push the offset to viewport height. The transition
+        // smoothly glides the sheet off the bottom; once `closeAnimationMs`
+        // elapses we fire `onClose` and the consumer unmounts us.
+        setIsDragging(false);
+        setIsClosing(true);
+        const startOffset = Math.max(0, releaseDy);
+        const exitDistance = window.innerHeight; // generous — sheet may be tall
+        // Apply the start offset on the same frame we flip transition on, so
+        // the browser has a stable "from" value before we animate to "to".
+        setDragOffset(startOffset);
+        requestAnimationFrame(() => {
+          setDragOffset(exitDistance);
+        });
+        window.setTimeout(() => {
+          onCloseRef.current();
+        }, closeAnimationMsRef.current);
+      } else {
+        // Snap back. `isDragging` flips to false → inline transition engages
+        // and the sheet glides from `dragOffset` back to 0.
+        setIsDragging(false);
+        setDragOffset(0);
+      }
+    };
+
+    const handleTouchEnd = () => {
+      if (!enabledRef.current || startYRef.current === null) {
+        startYRef.current = null;
+        setIsDragging(false);
+        setDragOffset(0);
+        return;
+      }
+      const totalDy = Math.max(0, lastYRef.current - startYRef.current);
+      const totalDt = Math.max(1, lastTimeRef.current - startTimeRef.current);
+      const velocity = totalDy / totalDt; // px/ms, positive = down
+
+      const overDistance = totalDy > closeThresholdRef.current;
+      const overVelocity = velocity > velocityThresholdRef.current && totalDy > 16;
+
+      const commitClose =
+        movedPastDeadzoneRef.current && (overDistance || overVelocity);
+
+      startYRef.current = null;
+      movedPastDeadzoneRef.current = false;
+      finalize(commitClose, totalDy);
+    };
+
+    const handleTouchCancel = () => {
+      startYRef.current = null;
+      movedPastDeadzoneRef.current = false;
+      // Same as snap-back — engage the transition by flipping isDragging off
+      // and letting dragOffset glide to 0.
+      setIsDragging(false);
+      setDragOffset(0);
+    };
+
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleTouchEnd);
+    document.addEventListener('touchcancel', handleTouchCancel);
+    return () => {
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+      document.removeEventListener('touchcancel', handleTouchCancel);
+    };
+  }, [isDragging]);
+
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    if (!enabledRef.current) return;
+    if (e.touches.length !== 1) return;
+    const touch = e.touches[0];
+    if (!touch) return;
+    startYRef.current = touch.clientY;
+    lastYRef.current = touch.clientY;
+    startTimeRef.current = performance.now();
+    lastTimeRef.current = startTimeRef.current;
+    movedPastDeadzoneRef.current = false;
+    setIsDragging(true);
+    setHasInteracted(true);
+    // Reset closing state in case the previous close was cancelled mid-flight
+    // (defensive — a successfully closed sheet has unmounted, so this branch
+    // only matters if a future consumer keeps the hook alive across close).
+    setIsClosing(false);
+  }, []);
+
+  // Build the inline style for the sheet container. While dragging we want NO
+  // transition (offset must follow the finger 1:1). When releasing without
+  // committing OR while closing, we want a transform transition so the
+  // movement glides smoothly. Always emit a `transform` value once
+  // `hasInteracted` is true so the browser has a stable from-value when
+  // dragOffset transitions; before any interaction we leave it undefined so
+  // the consumer's open keyframe (CSS `animation`) drives the entry without
+  // an inline `transform: translateY(0)` overriding it.
+  const transformValue =
+    dragOffset > 0
+      ? `translateY(${dragOffset}px)`
+      : hasInteracted
+        ? 'translateY(0)'
+        : undefined;
+
+  const sheetStyle: React.CSSProperties = {
+    transform: transformValue,
+    transition: isDragging
+      ? 'none'
+      : `transform ${closeAnimationMs}ms cubic-bezier(0.22, 1, 0.36, 1)`,
+    // While dragging or closing, ensure we sit on the GPU's compositor layer
+    // and don't re-layout — `transform` alone already does this, but explicit
+    // `willChange` prevents any flicker on lower-end devices.
+    willChange: isDragging || isClosing ? 'transform' : undefined,
+  };
+
+  return {
+    sheetStyle,
+    handleProps: { onTouchStart },
+    isDragging,
+    isClosing,
+    hasInteracted,
+  };
+}
diff --git a/packages/web/src/hooks/useVisualViewportInset.ts b/packages/web/src/hooks/useVisualViewportInset.ts
new file mode 100644
index 00000000..80f3f6df
--- /dev/null
+++ b/packages/web/src/hooks/useVisualViewportInset.ts
@@ -0,0 +1,211 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Live geometry of `window.visualViewport`, plus a derived `inset` string
+ * that floating overlays (e.g. the chat composer) can paste into a `bottom`
+ * style to sit just above the iOS / Android soft keyboard when one is open,
+ * or above the system home indicator when one is not.
+ *
+ * Why this hook exists
+ * --------------------
+ * On iOS Safari (and PWA), `env(safe-area-inset-bottom)` is defined relative
+ * to the **layout** viewport, not the **visual** viewport. When the soft
+ * keyboard slides up, the layout viewport stays the same height and the home-
+ * indicator inset still reports ~34 px — so a composer pinned to
+ * `bottom: env(safe-area-inset-bottom) + 6px` ends up `~40px` above the
+ * layout-bottom, which on iPhone 14 Pro is `300+ px` above the keyboard top.
+ *
+ * `window.visualViewport` reports the live size of the visible region. When
+ * the keyboard is open, `visualViewport.height` shrinks and
+ * `visualViewport.offsetTop` may become non-zero. The bottom of the visual
+ * viewport (in layout-viewport coordinates) is therefore
+ * `visualViewport.offsetTop + visualViewport.height`. The distance between
+ * that line and the layout-viewport bottom is the keyboard occlusion:
+ *   keyboardOcclusion = window.innerHeight - (offsetTop + height)
+ *
+ * When the keyboard is closed, that value is ~0 and we fall back to the
+ * standard `safe-area-inset-bottom` so the overlay sits above the home
+ * indicator. When the keyboard is open, we use the keyboard occlusion
+ * directly — `safe-area-inset-bottom` no longer applies because the home
+ * indicator is occluded by the keyboard.
+ *
+ * iOS PWA standalone caveats
+ * --------------------------
+ * In iOS Safari standalone PWA mode, `visualViewport.resize` events are
+ * known to fire late, fire only once after the keyboard finishes animating,
+ * or in some iOS versions not fire at all for the keyboard transition. To
+ * cover those cases we additionally:
+ *   1. Listen to `focusin` / `focusout` on `window` and re-measure (a focus
+ *      change on a text input is a strong signal that the keyboard is about
+ *      to open / close).
+ *   2. Poll `visualViewport` for ~600ms after a focus change so we catch the
+ *      shrunk height even when no `resize` event ever lands.
+ *   3. Listen to `vv.scroll` events too — on some iOS builds the keyboard
+ *      transition fires `scroll` (offsetTop change) without `resize`.
+ *
+ * Consumers
+ * ---------
+ * - `MobileShell.tsx` reads `{ height, keyboardOpen }` and uses `height` as
+ *   the container's CSS height when the keyboard is open. This is the
+ *   primary mechanism for the composer to sit flush above the keyboard:
+ *   the container shrinks to the visible region, so a `position: absolute;
+ *   bottom: 0` child naturally lands on the keyboard's top edge regardless
+ *   of how reliably the `inset` value tracks the keyboard.
+ * - `MessageInput.tsx` reads `{ value, keyboardOpen }` and uses them only
+ *   on desktop fallback paths and for the breathing-room toggle (above the
+ *   home indicator vs flush with the keyboard).
+ */
+export interface VisualViewportInset {
+  /** CSS string for `bottom`: either `env(safe-area-inset-bottom)` or `<n>px`. */
+  value: string;
+  /** True if the soft keyboard is occluding the bottom of the layout viewport. */
+  keyboardOpen: boolean;
+  /**
+   * Live `visualViewport.height` in pixels, or `null` if `visualViewport` is
+   * unavailable. Consumers that want to size a container to the visible
+   * region (e.g. MobileShell when the keyboard is open) read this directly.
+   */
+  height: number | null;
+  /**
+   * Live `visualViewport.offsetTop` in pixels (0 when no scroll occlusion at
+   * the top of the visible region), or `null` if `visualViewport` is
+   * unavailable.
+   */
+  offsetTop: number | null;
+}
+
+const FALLBACK: VisualViewportInset = {
+  value: 'env(safe-area-inset-bottom)',
+  keyboardOpen: false,
+  height: null,
+  offsetTop: null,
+};
+
+export function useVisualViewportInset(): VisualViewportInset {
+  const [inset, setInset] = useState<VisualViewportInset>(FALLBACK);
+
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+
+    let raf = 0;
+    let pollTimer: ReturnType<typeof setInterval> | null = null;
+    let pollDeadline = 0;
+
+    const measure = () => {
+      // Distance from the bottom of the layout viewport (window.innerHeight)
+      // to the bottom of the visual viewport (offsetTop + height). On iOS
+      // when the keyboard is up, this equals the keyboard's height.
+      const occlusion = window.innerHeight - (vv.offsetTop + vv.height);
+      // Sub-pixel noise on iOS — anything under 1 px we treat as "no
+      // keyboard" so we don't flap between safe-area and a 0.4 px offset.
+      const next: VisualViewportInset =
+        occlusion > 1
+          ? {
+              value: `${Math.round(occlusion)}px`,
+              keyboardOpen: true,
+              height: vv.height,
+              offsetTop: vv.offsetTop,
+            }
+          : {
+              value: 'env(safe-area-inset-bottom)',
+              keyboardOpen: false,
+              height: vv.height,
+              offsetTop: vv.offsetTop,
+            };
+
+      // Functional update + shallow compare so identical re-measurements
+      // don't churn React state every animation frame during keyboard
+      // transitions.
+      setInset((prev) =>
+        prev.value === next.value &&
+        prev.keyboardOpen === next.keyboardOpen &&
+        prev.height === next.height &&
+        prev.offsetTop === next.offsetTop
+          ? prev
+          : next,
+      );
+    };
+
+    const update = () => {
+      // Schedule a single rAF — `resize`/`scroll` on visualViewport can fire
+      // many times per frame on iOS during keyboard transitions; coalescing
+      // avoids redundant React state updates.
+      if (raf) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        measure();
+      });
+    };
+
+    /**
+     * iOS PWA fallback: poll for ~600 ms after a focus change. iOS Safari
+     * (especially in standalone PWA mode) often fails to dispatch a
+     * `visualViewport.resize` event when the soft keyboard opens — but the
+     * `vv.height` value itself does update once the keyboard finishes
+     * animating. Polling at ~16 ms intervals from `focusin` until the
+     * deadline ensures we observe the shrunk height even when no event
+     * fires. The interval clears as soon as we observe a steady state for
+     * two consecutive frames.
+     */
+    let lastPolledHeight = vv.height;
+    let stableFrames = 0;
+    const startPolling = (durationMs: number) => {
+      pollDeadline = performance.now() + durationMs;
+      lastPolledHeight = vv.height;
+      stableFrames = 0;
+      if (pollTimer) clearInterval(pollTimer);
+      pollTimer = setInterval(() => {
+        measure();
+        if (vv.height === lastPolledHeight) {
+          stableFrames += 1;
+        } else {
+          lastPolledHeight = vv.height;
+          stableFrames = 0;
+        }
+        if (stableFrames >= 3 || performance.now() > pollDeadline) {
+          if (pollTimer) {
+            clearInterval(pollTimer);
+            pollTimer = null;
+          }
+          // One last measurement after we stop, in case the value just
+          // settled this tick.
+          measure();
+        }
+      }, 32);
+    };
+
+    const onFocusChange = (e: FocusEvent) => {
+      // Only react to focus changes on text-entry elements — focusing a
+      // <button> never opens the soft keyboard, so polling for it would
+      // waste cycles.
+      const t = e.target as Element | null;
+      if (!t) return;
+      const tag = t.tagName;
+      const editable =
+        tag === 'INPUT' ||
+        tag === 'TEXTAREA' ||
+        (t as HTMLElement).isContentEditable === true;
+      if (!editable) return;
+      // Immediate measure + a polling window for laggy iOS PWA event flows.
+      update();
+      startPolling(600);
+    };
+
+    measure();
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    window.addEventListener('focusin', onFocusChange, true);
+    window.addEventListener('focusout', onFocusChange, true);
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      if (pollTimer) clearInterval(pollTimer);
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+      window.removeEventListener('focusin', onFocusChange, true);
+      window.removeEventListener('focusout', onFocusChange, true);
+    };
+  }, []);
+
+  return inset;
+}