diff --git a/docs/plans/2026-03-25-mobile-bottom-sheet-design.md b/docs/plans/2026-03-25-mobile-bottom-sheet-design.md
new file mode 100644
index 0000000..d5a6295
--- /dev/null
+++ b/docs/plans/2026-03-25-mobile-bottom-sheet-design.md
@@ -0,0 +1,75 @@
+# Mobile Bottom Sheet Design
+
+## Overview
+
+On mobile (<640px), the chat widget renders as a full-width bottom sheet instead of a floating card. Desktop behavior is unchanged.
+
+## Behavior
+
+- Slides up from bottom to ~90vh height
+- Dark scrim backdrop behind sheet (tap scrim to close)
+- Drag handle bar at top of sheet
+- Swipe-to-close: velocity > 500px/s OR drag distance > 30% of sheet height
+- `prefers-reduced-motion`: opacity fade instead of slide animation
+
+## Implementation
+
+### Files to change
+
+1. **`widget/src/hooks/useSwipeToDismiss.ts`** (new) - vanilla JS touch handler
+2. **`widget/src/components/ChatWindow.tsx`** - bottom sheet layout on mobile
+3. **`widget/src/components/ChatWidget.tsx`** - render scrim backdrop on mobile
+4. **`widget/src/styles.css`** - transitions, scrim, reduced-motion
+
+### Hook: useSwipeToDismiss
+
+```typescript
+useSwipeToDismiss(ref: RefObject<HTMLElement>, onDismiss: () => void): { offsetY: number }
+```
+
+- `touchstart`: record Y position
+- `touchmove`: calculate delta, apply `transform: translateY()` directly (no CSS transition during drag)
+- `touchend`: if velocity > 500px/s OR distance > 30% of sheet height, call onDismiss. Otherwise snap back.
+- Passive touch listeners for performance
+- No-op when `window.innerWidth >= 640`
+
+### ChatWindow changes
+
+- Below 640px: `fixed inset-x-0 bottom-0 h-[90vh] w-full rounded-t-2xl`
+- Add drag handle div (centered horizontal bar) at top
+- Remove floating-card positioning classes on mobile
+- Apply `translateY` offset from swipe hook
+
+### ChatWidget changes
+
+- Render scrim `<div>` behind ChatWindow when open on mobile
+- Scrim: `fixed inset-0 bg-black/50` with fade transition
+- Tap scrim calls `handleToggle`
+
+### CSS transitions
+
+```css
+.claudius-bottom-sheet {
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.claudius-scrim {
+  transition: opacity 300ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .claudius-bottom-sheet {
+    transition: opacity 200ms ease;
+    transform: none !important;
+  }
+  .claudius-scrim {
+    transition: opacity 150ms ease;
+  }
+}
+```
+
+### Gesture details
+
+- Only vertical swipe (ignore horizontal movement > 10px)
+- Resist upward drag (dampen by 0.3x when dragging above origin)
+- No scroll interference: only activate swipe when sheet is scrolled to top
diff --git a/docs/plans/2026-03-25-mobile-bottom-sheet.md b/docs/plans/2026-03-25-mobile-bottom-sheet.md
new file mode 100644
index 0000000..5508c3b
--- /dev/null
+++ b/docs/plans/2026-03-25-mobile-bottom-sheet.md
@@ -0,0 +1,665 @@
+# Mobile Bottom Sheet Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** On mobile (<640px), render the chat as a full-width bottom sheet with swipe-to-close gesture and reduced-motion support.
+
+**Architecture:** CSS transitions for slide/fade animations, vanilla JS touch handlers in a custom hook, media-query-based conditional rendering in ChatWidget/ChatWindow. No new dependencies.
+
+**Tech Stack:** React, TypeScript, Tailwind CSS, CSS transitions, Touch Events API
+
+---
+
+### Task 1: useSwipeToDismiss hook - tests
+
+**Files:**
+- Create: `widget/src/hooks/__tests__/useSwipeToDismiss.test.ts`
+
+**Step 1: Write tests for the hook**
+
+```typescript
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useSwipeToDismiss } from "../useSwipeToDismiss";
+
+describe("useSwipeToDismiss", () => {
+  const createRef = (scrollTop = 0) => {
+    const el = document.createElement("div");
+    Object.defineProperty(el, "scrollTop", { value: scrollTop, writable: true });
+    Object.defineProperty(el, "getBoundingClientRect", {
+      value: () => ({ height: 600 }),
+    });
+    return { current: el };
+  };
+
+  it("returns offsetY of 0 initially", () => {
+    const ref = createRef();
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, vi.fn(), true)
+    );
+    expect(result.current.offsetY).toBe(0);
+  });
+
+  it("does not attach listeners when disabled", () => {
+    const ref = createRef();
+    const spy = vi.spyOn(ref.current, "addEventListener");
+    renderHook(() => useSwipeToDismiss(ref, vi.fn(), false));
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it("tracks vertical drag distance", () => {
+    const ref = createRef();
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, vi.fn(), true)
+    );
+
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchstart", {
+          touches: [{ clientY: 300 } as Touch],
+        })
+      );
+    });
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchmove", {
+          touches: [{ clientY: 400, clientX: 300 } as Touch],
+        })
+      );
+    });
+
+    expect(result.current.offsetY).toBe(100);
+  });
+
+  it("calls onDismiss when dragged past 30% threshold", () => {
+    const ref = createRef();
+    const onDismiss = vi.fn();
+    renderHook(() => useSwipeToDismiss(ref, onDismiss, true));
+
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchstart", {
+          touches: [{ clientY: 100 } as Touch],
+        })
+      );
+    });
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchmove", {
+          touches: [{ clientY: 300, clientX: 0 } as Touch],
+        })
+      );
+    });
+    act(() => {
+      ref.current.dispatchEvent(new TouchEvent("touchend", { touches: [] }));
+    });
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  it("snaps back when drag is below threshold", () => {
+    const ref = createRef();
+    const onDismiss = vi.fn();
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, onDismiss, true)
+    );
+
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchstart", {
+          touches: [{ clientY: 300 } as Touch],
+        })
+      );
+    });
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchmove", {
+          touches: [{ clientY: 320, clientX: 300 } as Touch],
+        })
+      );
+    });
+    act(() => {
+      ref.current.dispatchEvent(new TouchEvent("touchend", { touches: [] }));
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+    expect(result.current.offsetY).toBe(0);
+  });
+
+  it("does not activate swipe when scrollTop > 0", () => {
+    const ref = createRef(100);
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, vi.fn(), true)
+    );
+
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchstart", {
+          touches: [{ clientY: 300 } as Touch],
+        })
+      );
+    });
+    act(() => {
+      ref.current.dispatchEvent(
+        new TouchEvent("touchmove", {
+          touches: [{ clientY: 400, clientX: 300 } as Touch],
+        })
+      );
+    });
+
+    expect(result.current.offsetY).toBe(0);
+  });
+});
+```
+
+**Step 2: Run tests to verify they fail**
+
+Run: `cd widget && pnpm test -- --run src/hooks/__tests__/useSwipeToDismiss.test.ts`
+Expected: FAIL - module not found
+
+**Step 3: Commit**
+
+```bash
+git add widget/src/hooks/__tests__/useSwipeToDismiss.test.ts
+git commit -m "test: add useSwipeToDismiss hook tests"
+```
+
+---
+
+### Task 2: useSwipeToDismiss hook - implementation
+
+**Files:**
+- Create: `widget/src/hooks/useSwipeToDismiss.ts`
+
+**Step 1: Implement the hook**
+
+```typescript
+import { useEffect, useRef, useState, useCallback, type RefObject } from "react";
+
+export function useSwipeToDismiss(
+  sheetRef: RefObject<HTMLElement | null>,
+  onDismiss: () => void,
+  enabled: boolean
+) {
+  const [offsetY, setOffsetY] = useState(0);
+  const startY = useRef(0);
+  const startTime = useRef(0);
+  const tracking = useRef(false);
+
+  const reset = useCallback(() => {
+    setOffsetY(0);
+    tracking.current = false;
+  }, []);
+
+  useEffect(() => {
+    const el = sheetRef.current;
+    if (!el || !enabled) return;
+
+    const onTouchStart = (e: TouchEvent) => {
+      // Only start swipe when content is scrolled to top
+      if (el.scrollTop > 0) return;
+      startY.current = e.touches[0].clientY;
+      startTime.current = Date.now();
+      tracking.current = true;
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (!tracking.current) return;
+      const currentY = e.touches[0].clientY;
+      const deltaY = currentY - startY.current;
+
+      // Ignore horizontal swipes
+      const deltaX = (e.touches[0].clientX ?? 0) - (e.touches[0].clientX ?? 0);
+      // We only care about downward drag
+      if (deltaY < 0) {
+        // Resist upward drag
+        setOffsetY(deltaY * 0.3);
+      } else {
+        setOffsetY(deltaY);
+      }
+    };
+
+    const onTouchEnd = () => {
+      if (!tracking.current) {
+        reset();
+        return;
+      }
+
+      const elapsed = Date.now() - startTime.current;
+      const velocity = Math.abs(offsetY) / (elapsed || 1) * 1000;
+      const sheetHeight = el.getBoundingClientRect().height;
+      const distanceRatio = offsetY / sheetHeight;
+
+      if (velocity > 500 || distanceRatio > 0.3) {
+        onDismiss();
+      }
+
+      reset();
+    };
+
+    el.addEventListener("touchstart", onTouchStart, { passive: true });
+    el.addEventListener("touchmove", onTouchMove, { passive: true });
+    el.addEventListener("touchend", onTouchEnd);
+
+    return () => {
+      el.removeEventListener("touchstart", onTouchStart);
+      el.removeEventListener("touchmove", onTouchMove);
+      el.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [sheetRef, onDismiss, enabled, offsetY, reset]);
+
+  return { offsetY };
+}
+```
+
+**Step 2: Run tests to verify they pass**
+
+Run: `cd widget && pnpm test -- --run src/hooks/__tests__/useSwipeToDismiss.test.ts`
+Expected: PASS
+
+**Step 3: Commit**
+
+```bash
+git add widget/src/hooks/useSwipeToDismiss.ts
+git commit -m "feat: add useSwipeToDismiss hook for mobile bottom sheet"
+```
+
+---
+
+### Task 3: useMediaQuery hook - tests and implementation
+
+**Files:**
+- Create: `widget/src/hooks/useMediaQuery.ts`
+- Create: `widget/src/hooks/__tests__/useMediaQuery.test.ts`
+
+**Step 1: Write test**
+
+```typescript
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useMediaQuery } from "../useMediaQuery";
+
+describe("useMediaQuery", () => {
+  let listeners: Array<(e: { matches: boolean }) => void>;
+
+  beforeEach(() => {
+    listeners = [];
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener: (_: string, cb: (e: { matches: boolean }) => void) => {
+          listeners.push(cb);
+        },
+        removeEventListener: vi.fn(),
+      })),
+    });
+  });
+
+  it("returns initial match state", () => {
+    const { result } = renderHook(() => useMediaQuery("(max-width: 639px)"));
+    expect(result.current).toBe(false);
+  });
+
+  it("updates when media query changes", () => {
+    const { result } = renderHook(() => useMediaQuery("(max-width: 639px)"));
+    act(() => {
+      listeners.forEach((cb) => cb({ matches: true }));
+    });
+    expect(result.current).toBe(true);
+  });
+});
+```
+
+**Step 2: Implement the hook**
+
+```typescript
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const mq = window.matchMedia(query);
+    setMatches(mq.matches);
+
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [query]);
+
+  return matches;
+}
+```
+
+**Step 3: Run tests**
+
+Run: `cd widget && pnpm test -- --run src/hooks/__tests__/useMediaQuery.test.ts`
+Expected: PASS
+
+**Step 4: Commit**
+
+```bash
+git add widget/src/hooks/useMediaQuery.ts widget/src/hooks/__tests__/useMediaQuery.test.ts
+git commit -m "feat: add useMediaQuery hook"
+```
+
+---
+
+### Task 4: CSS transitions and reduced-motion styles
+
+**Files:**
+- Modify: `widget/src/styles.css`
+
+**Step 1: Add bottom sheet CSS**
+
+Add to `widget/src/styles.css` after the Tailwind directives:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Bottom sheet slide-up animation */
+.claudius-bottom-sheet {
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.claudius-bottom-sheet[data-dragging="true"] {
+  transition: none;
+}
+
+/* Scrim fade */
+.claudius-scrim {
+  transition: opacity 300ms ease;
+}
+
+/* Reduced motion: replace slide with opacity, skip transforms */
+@media (prefers-reduced-motion: reduce) {
+  .claudius-bottom-sheet {
+    transition: opacity 200ms ease;
+    transform: none !important;
+  }
+
+  .claudius-scrim {
+    transition: opacity 150ms ease;
+  }
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add widget/src/styles.css
+git commit -m "feat: add bottom sheet and reduced-motion CSS transitions"
+```
+
+---
+
+### Task 5: ChatWindow bottom sheet layout
+
+**Files:**
+- Modify: `widget/src/components/ChatWindow.tsx`
+
+**Step 1: Update ChatWindow to accept isMobile prop and render bottom sheet layout**
+
+Changes to `ChatWindow.tsx`:
+
+1. Add `isMobile` prop to `ChatWindowProps`
+2. Import and use `useSwipeToDismiss`
+3. Conditionally apply bottom sheet classes when `isMobile` is true
+4. Add drag handle element when mobile
+5. Apply `translateY` from swipe hook
+6. Pass `messagesContainerRef` to swipe hook (only swipe when scrolled to top)
+
+The outer `<div>` should change from:
+
+```tsx
+<div className={`fixed ${windowPositionClasses[position]} z-50 flex h-[min(500px,calc(100vh-7rem))] w-[calc(100vw-1.5rem)] max-w-[380px] sm:max-w-[400px] md:max-w-[440px] flex-col overflow-hidden rounded-card bg-white dark:bg-gray-900 shadow-2xl font-body`}>
+```
+
+To conditionally render based on `isMobile`:
+
+```tsx
+const sheetRef = useRef<HTMLDivElement>(null);
+const { offsetY } = useSwipeToDismiss(sheetRef, onClose, isMobile);
+const isDragging = offsetY !== 0;
+
+const reducedMotion = typeof window !== "undefined"
+  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+
+const sheetStyle: React.CSSProperties | undefined = isMobile && !reducedMotion
+  ? { transform: `translateY(${Math.max(0, offsetY)}px)` }
+  : undefined;
+
+// ...
+
+<div
+  ref={isMobile ? sheetRef : undefined}
+  data-dragging={isDragging || undefined}
+  style={sheetStyle}
+  className={
+    isMobile
+      ? "claudius-bottom-sheet fixed inset-x-0 bottom-0 z-50 flex h-[90vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white dark:bg-gray-900 shadow-2xl font-body"
+      : `fixed ${windowPositionClasses[position]} z-50 flex h-[min(500px,calc(100vh-7rem))] w-[calc(100vw-1.5rem)] max-w-[380px] sm:max-w-[400px] md:max-w-[440px] flex-col overflow-hidden rounded-card bg-white dark:bg-gray-900 shadow-2xl font-body`
+  }
+>
+  {/* Drag handle (mobile only) */}
+  {isMobile && (
+    <div className="flex justify-center py-2" aria-hidden="true">
+      <div className="h-1 w-8 rounded-full bg-gray-300 dark:bg-gray-600" />
+    </div>
+  )}
+  {/* ... rest of header, messages, input */}
+</div>
+```
+
+**Step 2: Run all widget tests**
+
+Run: `cd widget && pnpm test`
+Expected: All existing tests PASS (they don't pass `isMobile`, so it defaults to `false` and the component behaves as before)
+
+**Step 3: Commit**
+
+```bash
+git add widget/src/components/ChatWindow.tsx
+git commit -m "feat: add bottom sheet layout to ChatWindow for mobile"
+```
+
+---
+
+### Task 6: ChatWidget scrim and mobile detection
+
+**Files:**
+- Modify: `widget/src/components/ChatWidget.tsx`
+
+**Step 1: Add mobile detection and scrim backdrop**
+
+Changes to `ChatWidget.tsx`:
+
+1. Import `useMediaQuery`
+2. Detect mobile: `const isMobile = useMediaQuery("(max-width: 639px)")`
+3. Render scrim backdrop when open on mobile
+4. Pass `isMobile` to `ChatWindow`
+5. Keep `ChatWindow` always mounted (for animation), control visibility with state
+
+```tsx
+import { useMediaQuery } from "../hooks/useMediaQuery";
+
+// Inside ChatWidget:
+const isMobile = useMediaQuery("(max-width: 639px)");
+
+// In JSX, replace the existing {isOpen && <ChatWindow ... />} with:
+
+{/* Scrim backdrop (mobile only) */}
+{isOpen && isMobile && (
+  <div
+    className="claudius-scrim fixed inset-0 z-40 bg-black/50"
+    onClick={handleClose}
+    aria-hidden="true"
+  />
+)}
+{isOpen && (
+  <ChatWindow
+    messages={messages}
+    isLoading={isLoading}
+    error={error}
+    onSend={sendMessage}
+    onClose={handleClose}
+    title={title ?? translations.title}
+    subtitle={subtitle ?? translations.subtitle}
+    welcomeMessage={welcomeMessage ?? translations.welcomeMessage}
+    placeholder={placeholder ?? translations.placeholder}
+    position={position}
+    translations={translations}
+    isMobile={isMobile}
+  />
+)}
+```
+
+**Step 2: Run all widget tests**
+
+Run: `cd widget && pnpm test`
+Expected: All tests PASS
+
+**Step 3: Commit**
+
+```bash
+git add widget/src/components/ChatWidget.tsx
+git commit -m "feat: add mobile scrim backdrop and pass isMobile to ChatWindow"
+```
+
+---
+
+### Task 7: Integration tests for bottom sheet behavior
+
+**Files:**
+- Modify: `widget/src/components/__tests__/ChatWidget.test.tsx`
+- Modify: `widget/src/components/__tests__/ChatWindow.test.tsx`
+
+**Step 1: Add mobile bottom sheet tests to ChatWidget.test.tsx**
+
+```typescript
+describe("ChatWidget - mobile bottom sheet", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: query === "(max-width: 639px)",
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      })),
+    });
+  });
+
+  it("renders scrim backdrop on mobile when open", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <ChatWidget apiUrl="https://test.workers.dev" />
+    );
+    await user.click(screen.getByRole("button", { name: /open chat/i }));
+    expect(container.querySelector(".claudius-scrim")).toBeInTheDocument();
+  });
+
+  it("does not render scrim on desktop", async () => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      })),
+    });
+    const user = userEvent.setup();
+    const { container } = render(
+      <ChatWidget apiUrl="https://test.workers.dev" />
+    );
+    await user.click(screen.getByRole("button", { name: /open chat/i }));
+    expect(container.querySelector(".claudius-scrim")).not.toBeInTheDocument();
+  });
+});
+```
+
+**Step 2: Add bottom sheet layout test to ChatWindow.test.tsx**
+
+```typescript
+describe("ChatWindow - mobile bottom sheet", () => {
+  it("renders drag handle when isMobile is true", () => {
+    const { container } = render(
+      <ChatWindow
+        messages={[]}
+        isLoading={false}
+        error={null}
+        onSend={vi.fn()}
+        onClose={vi.fn()}
+        isMobile={true}
+      />
+    );
+    expect(container.querySelector(".claudius-bottom-sheet")).toBeInTheDocument();
+  });
+
+  it("does not render drag handle when isMobile is false", () => {
+    const { container } = render(
+      <ChatWindow
+        messages={[]}
+        isLoading={false}
+        error={null}
+        onSend={vi.fn()}
+        onClose={vi.fn()}
+        isMobile={false}
+      />
+    );
+    expect(container.querySelector(".claudius-bottom-sheet")).not.toBeInTheDocument();
+  });
+});
+```
+
+**Step 3: Run all tests**
+
+Run: `cd widget && pnpm test`
+Expected: All tests PASS
+
+**Step 4: Commit**
+
+```bash
+git add widget/src/components/__tests__/ChatWidget.test.tsx widget/src/components/__tests__/ChatWindow.test.tsx
+git commit -m "test: add mobile bottom sheet integration tests"
+```
+
+---
+
+### Task 8: Manual testing and polish
+
+**Step 1: Run dev server and test on mobile viewport**
+
+Run: `cd widget && pnpm dev`
+
+Test in browser DevTools (toggle device toolbar, select mobile viewport <640px):
+- Bottom sheet slides up from bottom
+- Drag handle visible at top
+- Swipe down dismisses sheet
+- Dark scrim appears behind sheet
+- Tapping scrim closes sheet
+- Desktop (>=640px) shows floating card as before
+- Toggle `prefers-reduced-motion` in DevTools: Rendering > Emulate CSS media feature > prefers-reduced-motion: reduce. Verify opacity fade instead of slide.
+
+**Step 2: Fix any visual issues found during manual testing**
+
+**Step 3: Run full test suite**
+
+Run: `cd widget && pnpm test`
+Expected: All tests PASS
+
+**Step 4: Commit any polish fixes**
+
+```bash
+git add -u
+git commit -m "fix: polish mobile bottom sheet visual details"
+```
diff --git a/widget/src/components/ChatWidget.tsx b/widget/src/components/ChatWidget.tsx
index b0935f0..f642046 100644
--- a/widget/src/components/ChatWidget.tsx
+++ b/widget/src/components/ChatWidget.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { useChat } from "../hooks/useChat";
+import { useMediaQuery } from "../hooks/useMediaQuery";
 import { ChatToggleButton } from "./ChatToggleButton";
 import { ChatWindow } from "./ChatWindow";
 import {
@@ -40,6 +41,7 @@ export function ChatWidget({
   translations: translationOverrides,
 }: ChatWidgetProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const isMobile = useMediaQuery("(max-width: 639px)");
 
   const translations = useMemo(
     () => createTranslations(translationOverrides),
@@ -91,6 +93,13 @@ export function ChatWidget({
 
   return (
     <div data-claudius-dark={isDark ? "true" : "false"} style={wrapperStyle}>
+      {isOpen && isMobile && (
+        <div
+          className="claudius-scrim fixed inset-0 z-40 bg-black/50"
+          onClick={handleClose}
+          aria-hidden="true"
+        />
+      )}
       {isOpen && (
         <ChatWindow
           messages={messages}
@@ -104,15 +113,18 @@ export function ChatWidget({
           placeholder={placeholder ?? translations.placeholder}
           position={position}
           translations={translations}
+          isMobile={isMobile}
+        />
+      )}
+      {!(isOpen && isMobile) && (
+        <ChatToggleButton
+          ref={toggleRef}
+          isOpen={isOpen}
+          onClick={handleToggle}
+          position={position}
+          translations={translations}
         />
       )}
-      <ChatToggleButton
-        ref={toggleRef}
-        isOpen={isOpen}
-        onClick={handleToggle}
-        position={position}
-        translations={translations}
-      />
     </div>
   );
 }
diff --git a/widget/src/components/ChatWindow.tsx b/widget/src/components/ChatWindow.tsx
index a21e79b..477d81c 100644
--- a/widget/src/components/ChatWindow.tsx
+++ b/widget/src/components/ChatWindow.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { MessageBubble } from "./MessageBubble";
 import { ChatInput } from "./ChatInput";
 import { ChatSources } from "./ChatSources";
+import { useSwipeToDismiss } from "../hooks/useSwipeToDismiss";
 import type { WidgetPosition } from "./ChatWidget";
 import type { ClaudiusTranslations } from "../i18n";
 import type { Source } from "../api/types";
@@ -25,6 +26,7 @@ interface ChatWindowProps {
   placeholder?: string;
   position?: WidgetPosition;
   translations?: ClaudiusTranslations;
+  isMobile?: boolean;
 }
 
 function TypingIndicator() {
@@ -58,10 +60,18 @@ export function ChatWindow({
   placeholder,
   position = "bottom-right",
   translations,
+  isMobile = false,
 }: ChatWindowProps) {
   const messagesContainerRef = useRef<HTMLDivElement>(null);
   const [activeSources, setActiveSources] = useState<{ messageId: string; sources: Source[] } | null>(null);
 
+  const { offsetY } = useSwipeToDismiss(messagesContainerRef, onClose, isMobile);
+  const isDragging = offsetY !== 0;
+  const reducedMotion =
+    typeof window !== "undefined" && typeof window.matchMedia === "function"
+      ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      : false;
+
   useEffect(() => {
     const container = messagesContainerRef.current;
     if (container) {
@@ -74,8 +84,24 @@ export function ChatWindow({
 
   return (
     <div
-      className={`fixed ${windowPositionClasses[position]} z-50 flex h-[min(500px,calc(100vh-7rem))] w-[calc(100vw-1.5rem)] max-w-[380px] sm:max-w-[400px] md:max-w-[440px] flex-col overflow-hidden rounded-card bg-white dark:bg-gray-900 shadow-2xl font-body`}
+      className={
+        isMobile
+          ? "claudius-bottom-sheet fixed inset-x-0 bottom-0 z-50 flex h-[90vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white dark:bg-gray-900 shadow-2xl font-body"
+          : `fixed ${windowPositionClasses[position]} z-50 flex h-[min(500px,calc(100vh-7rem))] w-[calc(100vw-1.5rem)] max-w-[380px] sm:max-w-[400px] md:max-w-[440px] flex-col overflow-hidden rounded-card bg-white dark:bg-gray-900 shadow-2xl font-body`
+      }
+      style={
+        isMobile && !reducedMotion
+          ? { transform: `translateY(${Math.max(0, offsetY)}px)` }
+          : undefined
+      }
+      data-dragging={isDragging || undefined}
     >
+      {isMobile && (
+        <div className="flex justify-center py-2" aria-hidden="true">
+          <div className="h-1 w-8 rounded-full bg-gray-300 dark:bg-gray-600" />
+        </div>
+      )}
+
       {/* Header */}
       <div className="flex items-center gap-3 bg-claudius-primary px-5 py-4">
         <div
diff --git a/widget/src/components/__tests__/ChatWidget.test.tsx b/widget/src/components/__tests__/ChatWidget.test.tsx
index 3ea2b99..e54f21c 100644
--- a/widget/src/components/__tests__/ChatWidget.test.tsx
+++ b/widget/src/components/__tests__/ChatWidget.test.tsx
@@ -63,3 +63,44 @@ describe("ChatWidget", () => {
     expect(screen.getByText("Hello!")).toBeInTheDocument();
   });
 });
+
+describe("ChatWidget - mobile bottom sheet", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: query === "(max-width: 639px)",
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      })),
+    });
+  });
+
+  it("renders scrim backdrop on mobile when open", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <ChatWidget apiUrl="https://test.workers.dev" />
+    );
+    await user.click(screen.getByRole("button", { name: /open chat/i }));
+    expect(container.querySelector(".claudius-scrim")).toBeInTheDocument();
+  });
+
+  it("does not render scrim on desktop", async () => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      })),
+    });
+    const user = userEvent.setup();
+    const { container } = render(
+      <ChatWidget apiUrl="https://test.workers.dev" />
+    );
+    await user.click(screen.getByRole("button", { name: /open chat/i }));
+    expect(container.querySelector(".claudius-scrim")).not.toBeInTheDocument();
+  });
+});
diff --git a/widget/src/components/__tests__/ChatWindow.test.tsx b/widget/src/components/__tests__/ChatWindow.test.tsx
index b5b8eac..647fd7b 100644
--- a/widget/src/components/__tests__/ChatWindow.test.tsx
+++ b/widget/src/components/__tests__/ChatWindow.test.tsx
@@ -147,3 +147,49 @@ describe("ChatWindow", () => {
     expect(screen.getByText("Chat")).toBeInTheDocument();
   });
 });
+
+describe("ChatWindow - mobile bottom sheet", () => {
+  it("renders with bottom sheet classes when isMobile is true", () => {
+    const { container } = render(
+      <ChatWindow
+        messages={[]}
+        isLoading={false}
+        error={null}
+        onSend={vi.fn()}
+        onClose={vi.fn()}
+        isMobile={true}
+      />
+    );
+    expect(container.querySelector(".claudius-bottom-sheet")).toBeInTheDocument();
+  });
+
+  it("does not render bottom sheet classes when isMobile is false", () => {
+    const { container } = render(
+      <ChatWindow
+        messages={[]}
+        isLoading={false}
+        error={null}
+        onSend={vi.fn()}
+        onClose={vi.fn()}
+        isMobile={false}
+      />
+    );
+    expect(container.querySelector(".claudius-bottom-sheet")).not.toBeInTheDocument();
+  });
+
+  it("renders drag handle when isMobile is true", () => {
+    const { container } = render(
+      <ChatWindow
+        messages={[]}
+        isLoading={false}
+        error={null}
+        onSend={vi.fn()}
+        onClose={vi.fn()}
+        isMobile={true}
+      />
+    );
+    // Drag handle is a small rounded bar
+    const handle = container.querySelector("[aria-hidden='true'] .rounded-full");
+    expect(handle).toBeInTheDocument();
+  });
+});
diff --git a/widget/src/hooks/__tests__/useMediaQuery.test.ts b/widget/src/hooks/__tests__/useMediaQuery.test.ts
new file mode 100644
index 0000000..15b64b0
--- /dev/null
+++ b/widget/src/hooks/__tests__/useMediaQuery.test.ts
@@ -0,0 +1,35 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useMediaQuery } from "../useMediaQuery";
+
+describe("useMediaQuery", () => {
+  let listeners: Array<(e: { matches: boolean }) => void>;
+
+  beforeEach(() => {
+    listeners = [];
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener: (_: string, cb: (e: { matches: boolean }) => void) => {
+          listeners.push(cb);
+        },
+        removeEventListener: vi.fn(),
+      })),
+    });
+  });
+
+  it("returns initial match state", () => {
+    const { result } = renderHook(() => useMediaQuery("(max-width: 639px)"));
+    expect(result.current).toBe(false);
+  });
+
+  it("updates when media query changes", () => {
+    const { result } = renderHook(() => useMediaQuery("(max-width: 639px)"));
+    act(() => {
+      listeners.forEach((cb) => cb({ matches: true }));
+    });
+    expect(result.current).toBe(true);
+  });
+});
diff --git a/widget/src/hooks/__tests__/useSwipeToDismiss.test.ts b/widget/src/hooks/__tests__/useSwipeToDismiss.test.ts
new file mode 100644
index 0000000..06f4dee
--- /dev/null
+++ b/widget/src/hooks/__tests__/useSwipeToDismiss.test.ts
@@ -0,0 +1,115 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useSwipeToDismiss } from "../useSwipeToDismiss";
+
+const createRef = (scrollTop = 0) => {
+  const el = document.createElement("div");
+  Object.defineProperty(el, "scrollTop", { value: scrollTop, writable: true });
+  Object.defineProperty(el, "getBoundingClientRect", {
+    value: () => ({ height: 600 }),
+  });
+  return { current: el };
+};
+
+const fireTouch = (
+  el: HTMLElement,
+  type: "touchstart" | "touchmove" | "touchend",
+  clientY: number
+) => {
+  const event = new TouchEvent(type, {
+    touches: type === "touchend" ? [] : [{ clientY } as Touch],
+    changedTouches: [{ clientY } as Touch],
+  });
+  el.dispatchEvent(event);
+};
+
+describe("useSwipeToDismiss", () => {
+  let onDismiss: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    onDismiss = vi.fn();
+  });
+
+  it("returns offsetY of 0 initially", () => {
+    const ref = createRef();
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, onDismiss, true)
+    );
+
+    expect(result.current.offsetY).toBe(0);
+  });
+
+  it("does not attach listeners when disabled", () => {
+    const ref = createRef();
+    const addSpy = vi.spyOn(ref.current, "addEventListener");
+
+    renderHook(() =>
+      useSwipeToDismiss(ref, onDismiss, false)
+    );
+
+    expect(addSpy).not.toHaveBeenCalled();
+  });
+
+  it("tracks vertical drag distance", () => {
+    const ref = createRef();
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, onDismiss, true)
+    );
+
+    act(() => {
+      fireTouch(ref.current, "touchstart", 300);
+      fireTouch(ref.current, "touchmove", 400);
+    });
+
+    expect(result.current.offsetY).toBe(100);
+  });
+
+  it("calls onDismiss when dragged past 30% threshold", () => {
+    const ref = createRef();
+    renderHook(() =>
+      useSwipeToDismiss(ref, onDismiss, true)
+    );
+
+    // 30% of 600 = 180, so dragging 200 should exceed threshold
+    act(() => {
+      fireTouch(ref.current, "touchstart", 200);
+      fireTouch(ref.current, "touchmove", 400);
+      fireTouch(ref.current, "touchend", 400);
+    });
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("snaps back when drag is below threshold", () => {
+    const ref = createRef();
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, onDismiss, true)
+    );
+
+    // 30% of 600 = 180, so dragging 100 should snap back
+    act(() => {
+      fireTouch(ref.current, "touchstart", 300);
+      fireTouch(ref.current, "touchmove", 400);
+      fireTouch(ref.current, "touchend", 400);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+    expect(result.current.offsetY).toBe(0);
+  });
+
+  it("does not activate swipe when scrollTop > 0", () => {
+    const ref = createRef(50);
+    const { result } = renderHook(() =>
+      useSwipeToDismiss(ref, onDismiss, true)
+    );
+
+    act(() => {
+      fireTouch(ref.current, "touchstart", 200);
+      fireTouch(ref.current, "touchmove", 500);
+      fireTouch(ref.current, "touchend", 500);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+    expect(result.current.offsetY).toBe(0);
+  });
+});
diff --git a/widget/src/hooks/useMediaQuery.ts b/widget/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..f91d325
--- /dev/null
+++ b/widget/src/hooks/useMediaQuery.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const mq = window.matchMedia(query);
+    setMatches(mq.matches);
+
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [query]);
+
+  return matches;
+}
diff --git a/widget/src/hooks/useSwipeToDismiss.ts b/widget/src/hooks/useSwipeToDismiss.ts
new file mode 100644
index 0000000..57a8749
--- /dev/null
+++ b/widget/src/hooks/useSwipeToDismiss.ts
@@ -0,0 +1,73 @@
+import { RefObject, useEffect, useRef, useState } from "react";
+
+export function useSwipeToDismiss(
+  sheetRef: RefObject<HTMLElement | null>,
+  onDismiss: () => void,
+  enabled: boolean
+): { offsetY: number } {
+  const [offsetY, setOffsetY] = useState(0);
+  const offsetYRef = useRef(0);
+  const startYRef = useRef(0);
+  const startTimeRef = useRef(0);
+  const trackingRef = useRef(false);
+
+  useEffect(() => {
+    const el = sheetRef.current;
+    if (!enabled || !el) return;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      if (el.scrollTop > 0) {
+        trackingRef.current = false;
+        return;
+      }
+      trackingRef.current = true;
+      startYRef.current = e.touches[0].clientY;
+      startTimeRef.current = Date.now();
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!trackingRef.current) return;
+
+      let deltaY = e.touches[0].clientY - startYRef.current;
+
+      // Dampen upward drag
+      if (deltaY < 0) {
+        deltaY = deltaY * 0.3;
+      }
+
+      offsetYRef.current = deltaY;
+      setOffsetY(deltaY);
+    };
+
+    const handleTouchEnd = () => {
+      if (!trackingRef.current) return;
+      trackingRef.current = false;
+
+      const currentOffsetY = offsetYRef.current;
+      const elapsed = (Date.now() - startTimeRef.current) / 1000;
+      const height = el.getBoundingClientRect().height;
+      const isFastFlick =
+        elapsed > 0.05 && currentOffsetY > 0 && currentOffsetY / elapsed > 500;
+      const isLongDrag = currentOffsetY > height * 0.3;
+
+      if (isFastFlick || isLongDrag) {
+        onDismiss();
+      } else {
+        offsetYRef.current = 0;
+        setOffsetY(0);
+      }
+    };
+
+    el.addEventListener("touchstart", handleTouchStart, { passive: true });
+    el.addEventListener("touchmove", handleTouchMove, { passive: true });
+    el.addEventListener("touchend", handleTouchEnd);
+
+    return () => {
+      el.removeEventListener("touchstart", handleTouchStart);
+      el.removeEventListener("touchmove", handleTouchMove);
+      el.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [sheetRef, onDismiss, enabled]);
+
+  return { offsetY };
+}
diff --git a/widget/src/styles.css b/widget/src/styles.css
index b5c61c9..8f502e1 100644
--- a/widget/src/styles.css
+++ b/widget/src/styles.css
@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Bottom sheet slide-up animation */
+.claudius-bottom-sheet {
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.claudius-bottom-sheet[data-dragging="true"] {
+  transition: none;
+}
+
+/* Scrim fade */
+.claudius-scrim {
+  transition: opacity 300ms ease;
+}
+
+/* Reduced motion: replace slide with opacity, skip transforms */
+@media (prefers-reduced-motion: reduce) {
+  .claudius-bottom-sheet {
+    transition: opacity 200ms ease;
+    transform: none !important;
+  }
+
+  .claudius-scrim {
+    transition: opacity 150ms ease;
+  }
+}
diff --git a/widget/src/test-setup.ts b/widget/src/test-setup.ts
index a45afd3..28faca0 100644
--- a/widget/src/test-setup.ts
+++ b/widget/src/test-setup.ts
@@ -2,3 +2,18 @@ import "@testing-library/jest-dom/vitest";
 
 // jsdom does not implement scrollIntoView
 Element.prototype.scrollIntoView = () => {};
+
+// jsdom does not implement matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});