diff --git a/apps/web/src/chat/chat.tsx b/apps/web/src/chat/chat.tsx
index 8b9d0fbb3..b2e13b24d 100644
--- a/apps/web/src/chat/chat.tsx
+++ b/apps/web/src/chat/chat.tsx
@@ -683,7 +683,11 @@ export function Chat(
 				</div>
 			)}
 
-			<div ref={composerRoot} className="chat-composer relative shrink-0 px-2.5 pb-2.5">
+			<div
+				ref={composerRoot}
+				className="chat-composer relative shrink-0 px-2.5 pb-2.5"
+				data-planner={agent ? undefined : "off"}
+			>
 				{referencesEnabled && (
 					<p className="sr-only" id={instructionsId}>
 						Type # to reference a document.
@@ -981,27 +985,30 @@ export function Chat(
 										)}
 									</div>
 									<div className="composer-actions">
-										{/* Always mounted, so the live region hears its first word. */}
-										<span className="composer-connection" id={connectionId} role="status">
-											{connectionLabel && (
-												<span
-													className="composer-connection-label"
-													data-offline={connectionLabel === "Offline" || undefined}
+										{/* A row of its own on a phone; see composer.css. */}
+										<span className="composer-connection-group">
+											{/* Always mounted, so the live region hears its first word. */}
+											<span className="composer-connection" id={connectionId} role="status">
+												{connectionLabel && (
+													<span
+														className="composer-connection-label"
+														data-offline={connectionLabel === "Offline" || undefined}
+													>
+														{connectionLabel}
+													</span>
+												)}
+											</span>
+											{/* Where the document header is out of view; see composer.css. */}
+											{connectionNotice === "offline" && wire && (
+												<button
+													className="composer-reconnect btn btn-sm btn-ghost"
+													onClick={() => wire.reconnect()}
+													type="button"
 												>
-													{connectionLabel}
-												</span>
+													Reconnect
+												</button>
 											)}
 										</span>
-										{/* Where the document header is out of view; see composer.css. */}
-										{connectionNotice === "offline" && wire && (
-											<button
-												className="composer-reconnect btn btn-sm btn-ghost"
-												onClick={() => wire.reconnect()}
-												type="button"
-											>
-												Reconnect
-											</button>
-										)}
 										<span className="composer-run-control">
 											{agent && (busy || counts.active > 0) && (
 												<button
diff --git a/apps/web/src/chat/composer.css b/apps/web/src/chat/composer.css
index c0fd3d70d..94b4aa178 100644
--- a/apps/web/src/chat/composer.css
+++ b/apps/web/src/chat/composer.css
@@ -151,6 +151,11 @@
 }
 .chat-composer [data-chat-reference-picker] {
 	right: calc(-1 * var(--edge-width));
+	max-height: min(16rem, 45dvh, 45vh);
+}
+/* At most eight rows show before the list scrolls: 8 × 2rem plus the 0.25rem padding. */
+.chat-composer [data-chat-mention-picker] {
+	max-height: min(16.5rem, 45dvh, 45vh);
 }
 .chat-composer [data-chat-reference-picker] [role="option"] {
 	height: 2rem;
@@ -230,6 +235,9 @@
 	display: inline-flex;
 	min-width: 0;
 }
+.chat-composer .composer-connection-group {
+	display: contents;
+}
 .chat-composer .composer-connection-label {
 	display: inline-flex;
 	align-items: center;
@@ -272,3 +280,156 @@
 [data-workspace-mode="split"] .chat-composer .composer-reconnect {
 	display: none;
 }
+
+/*
+ * Phones: one pill. The draft sits between a leading reference button and a
+ * trailing mode switch and send, so the composer rests at one line and the
+ * transcript keeps the space above the keyboard. Every phone-only rule lives
+ * in this block, behind this one condition.
+ */
+/* Landscape phones too; the shared `:root[data-phone]` hook can replace this condition. */
+@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
+	.chat-composer {
+		padding-inline: 0.5rem;
+		/* The home indicator's inset, but not while the keyboard covers it. */
+		padding-bottom: max(0.5rem, calc(env(safe-area-inset-bottom) - var(--keyboard-inset, 0px)));
+	}
+	.chat-composer .composer-surface {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		padding: 0.25rem;
+		border-radius: var(--radius-composer-pill);
+	}
+	.chat-composer :is(.composer-footer, .composer-left, .composer-actions) {
+		display: contents;
+	}
+	.chat-composer .composer-draft-input {
+		order: 2;
+		flex: 1 1 0;
+		min-width: 0;
+		/* One line at rest; five before it scrolls, fewer above an open keyboard. */
+		min-height: var(--composer-pill-control);
+		max-height: min(calc(5lh + 0.75rem), calc(var(--app-height, 100dvh) * 0.3));
+		padding: 0.375rem 0.5rem;
+		/* theme.css keeps touch text at 16px or more, so focus never zooms. */
+		line-height: 1.5;
+	}
+	/* A narrow pill shortens the hint rather than wrapping it out of view. */
+	.chat-composer .composer-draft-input[data-empty]::before {
+		inset-inline: 0.5rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.chat-composer .composer-left > button {
+		order: 1;
+	}
+	.chat-composer .composer-mode-trigger {
+		order: 3;
+	}
+	.chat-composer .composer-run-control {
+		order: 4;
+	}
+	.chat-composer .composer-run-control:empty {
+		display: none;
+	}
+	/* Room enough that the mode switch and send keep separate 44px targets. */
+	.chat-composer .send-action {
+		order: 5;
+		margin-inline-start: calc(var(--spacing) * 2);
+	}
+	/* Without the Planner the switch can never be used; the line above says why. */
+	.chat-composer[data-planner="off"] .composer-mode-trigger {
+		display: none;
+	}
+	:root[data-plan-coarse-pointer] .chat-composer .composer-surface button:not([role="option"]) {
+		min-width: var(--composer-pill-control);
+		min-height: var(--composer-pill-control);
+	}
+	.chat-composer .composer-surface :is(.btn-icon, .composer-mode) {
+		width: var(--composer-pill-control);
+		height: var(--composer-pill-control);
+		border-radius: var(--radius-full);
+	}
+	.chat-composer .composer-surface :is(.btn-icon, .composer-mode-symbol) svg {
+		width: var(--composer-pill-icon);
+		height: var(--composer-pill-icon);
+	}
+	/* The switch keeps its accessible name and drops the visible word. */
+	.chat-composer .composer-mode {
+		column-gap: 0;
+		padding-inline: calc((var(--composer-pill-control) - var(--composer-pill-icon)) / 2);
+	}
+	.chat-composer .composer-mode-label {
+		width: 0;
+		overflow: hidden;
+		opacity: 0;
+	}
+	.chat-composer .send-action:disabled {
+		background-color: var(--color-inset);
+		color: var(--color-text-tertiary);
+		box-shadow: none;
+		/* The primary edge would ring a control that cannot be focused while disabled. */
+		outline-color: var(--color-inset);
+		opacity: 1;
+	}
+	/* Connection state becomes a slim first row inside the pill. */
+	.chat-composer .composer-connection-group:has(.composer-connection-label) {
+		display: flex;
+		order: 0;
+		flex-basis: 100%;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.125rem 0.25rem 0 0.5rem;
+	}
+	.chat-composer
+		.composer-connection-group:not(:has(.composer-connection-label))
+		.composer-connection {
+		position: absolute;
+	}
+	.chat-composer .composer-connection-group .composer-reconnect {
+		min-height: var(--control-height-compact);
+	}
+	/* Status above the pill is one quiet line rather than a tab behind it. */
+	.chat-composer .composer-notice {
+		min-height: 0;
+		margin-bottom: 0;
+		padding: 0.25rem 0.75rem 0.375rem;
+		border-radius: var(--radius-md);
+		background: transparent;
+		font-size: var(--text-xs);
+		line-height: var(--text-xs--line-height);
+	}
+	.chat-composer .composer-notice[data-error] {
+		margin-bottom: 0.375rem;
+		background: var(--color-danger-surface);
+	}
+	.chat-composer .composer-unavailable {
+		flex-basis: 100%;
+		min-height: 0;
+	}
+	/* Pickers become a list resting on the composer, as wide as it is. */
+	.chat-composer
+		:is([data-chat-reference-picker], [data-chat-mention-picker], [data-chat-command-picker]) {
+		/* Out to the pill's border, as the desktop dropdowns align. */
+		left: calc(-1 * var(--edge-width));
+		right: calc(-1 * var(--edge-width));
+		width: auto;
+		min-width: 0;
+		max-width: none;
+		max-height: calc(var(--app-height, 100dvh) * 0.4);
+		margin-bottom: 0.375rem;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		border-radius: var(--radius-lg);
+	}
+	.chat-composer
+		:is([data-chat-reference-picker], [data-chat-mention-picker], [data-chat-command-picker])
+		[role="option"] {
+		height: auto;
+		min-height: var(--control-target-coarse);
+		font-size: var(--text-base);
+	}
+}
diff --git a/apps/web/src/chat/markdown.css b/apps/web/src/chat/markdown.css
index 3a4a083f3..a2839539f 100644
--- a/apps/web/src/chat/markdown.css
+++ b/apps/web/src/chat/markdown.css
@@ -93,3 +93,16 @@
 .chat-markdown[data-chat-mention-lead] > p:first-of-type {
 	display: inline;
 }
+
+/* Phones read Chat at the document's prose size, and a code block wraps rather than scrolling sideways. */
+@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
+	.chat-markdown {
+		font-size: var(--text-base);
+		line-height: var(--text-base--line-height);
+	}
+
+	.chat-markdown pre {
+		overflow-x: visible;
+		white-space: pre-wrap;
+	}
+}
diff --git a/apps/web/src/chat/mention-picker.tsx b/apps/web/src/chat/mention-picker.tsx
index 595de0f13..a7a86fe7c 100644
--- a/apps/web/src/chat/mention-picker.tsx
+++ b/apps/web/src/chat/mention-picker.tsx
@@ -5,9 +5,6 @@ import { referenceOptionId } from "./reference-picker";
 
 import type { MentionCandidate } from "./mentions";
 
-/** At most this many rows show before the list scrolls: 8 × 2rem plus the 0.25rem padding. */
-const LIST_HEIGHT = "16.5rem";
-
 export function MentionPicker(
 	{
 		active,
@@ -36,7 +33,6 @@ export function MentionPicker(
 			data-chat-mention-picker=""
 			data-menu-enter=""
 			data-focus-boundary=""
-			style={{ maxHeight: `min(${LIST_HEIGHT}, 45dvh, 45vh)` }}
 		>
 			<div aria-label="Mentions" id={id} role="listbox">
 				{options.map((option, index) => (
diff --git a/apps/web/src/chat/reference-picker.tsx b/apps/web/src/chat/reference-picker.tsx
index 49befb0b0..024030372 100644
--- a/apps/web/src/chat/reference-picker.tsx
+++ b/apps/web/src/chat/reference-picker.tsx
@@ -247,7 +247,6 @@ export function ReferencePicker(
 			data-animate={animate || undefined}
 			data-menu-enter=""
 			data-focus-boundary=""
-			style={{ maxHeight: "min(16rem, 45dvh, 45vh)" }}
 		>
 			<div aria-busy={state.status === "loading"} aria-label={label} id={id} role="listbox">
 				{state.status === "loading" && (
diff --git a/e2e/chat-composer.e2e.ts b/e2e/chat-composer.e2e.ts
index ce640358e..c5189dbfb 100644
--- a/e2e/chat-composer.e2e.ts
+++ b/e2e/chat-composer.e2e.ts
@@ -21,7 +21,7 @@ test("touch chat input stays at least 16px to avoid focus zoom", async ({ join }
 });
 
 for (let touch of [false, true]) {
-	test(`chat input rests at two lines and grows to its cap on ${touch ? "touch" : "desktop"}`, async ({ join }) => {
+	test(`chat input rests at ${touch ? "one line" : "two lines"} and grows to its cap on ${touch ? "a touch phone" : "desktop"}`, async ({ join }) => {
 		let page = await join("ana", {
 			hasTouch: touch,
 			viewport: touch ? { width: 390, height: 844 } : { width: 1440, height: 900 },
@@ -41,7 +41,8 @@ for (let touch of [false, true]) {
 				maximum: parseFloat(style.maxHeight),
 			};
 		});
-		expect(initial.height).toBeCloseTo(initial.padding + 2 * initial.line, 0);
+		// A phone's pill composer rests at one line; desktop keeps room for two.
+		expect(initial.height).toBeCloseTo(initial.padding + (touch ? 1 : 2) * initial.line, 0);
 		await fillChat(input, "One\nTwo\nThree\nFour");
 		await expect.poll(() => input.evaluate(element => element.getBoundingClientRect().height))
 			.toBeGreaterThan(initial.height);
diff --git a/e2e/chat-phone.e2e.ts b/e2e/chat-phone.e2e.ts
new file mode 100644
index 000000000..825acc2fa
--- /dev/null
+++ b/e2e/chat-phone.e2e.ts
@@ -0,0 +1,220 @@
+import { chatInput } from "./chat-input";
+import { expectInsideViewport, expectNoHorizontalOverflow } from "./responsive";
+import { expect, openIsolatedRoom, test } from "./room";
+import { installVisualViewport, setVisualViewport } from "./visual-viewport";
+
+import type { Page } from "@playwright/test";
+
+const PHONE = { hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } };
+
+function chatPane(page: Page) {
+	return page.getByRole("complementary", { includeHidden: true, name: "Chat" });
+}
+
+async function openPhoneChat(page: Page): Promise<void> {
+	await page.getByRole("navigation", { name: "Workspace view" })
+		.getByRole("button", { name: /^Chat/ }).click();
+	await expect(chatInput(chatPane(page))).toBeVisible();
+}
+
+/** From the top of the pill to the bottom of the composer, leaving out the status line above it. */
+function pillHeight(page: Page): Promise<number> {
+	return chatPane(page).locator(".chat-composer").evaluate(composer => {
+		let surface = composer.querySelector(".composer-surface")!.getBoundingClientRect();
+		return composer.getBoundingClientRect().bottom - surface.top;
+	});
+}
+
+test("a phone composer rests as one pill with a reference button, draft and send", async ({ join }) => {
+	let page = await join("ana", PHONE);
+	await openPhoneChat(page);
+	let chat = chatPane(page);
+	let draft = chatInput(chat);
+	let send = chat.getByRole("button", { name: "Send message" });
+	let reference = chat.getByRole("button", { name: "Mention docs" });
+
+	expect(await pillHeight(page)).toBeLessThanOrEqual(64);
+	let [draftBox, sendBox, referenceBox] = await Promise.all([
+		draft.boundingBox(),
+		send.boundingBox(),
+		reference.boundingBox(),
+	]);
+	// One row: the reference button leads, the send button trails the draft.
+	expect(referenceBox!.x + referenceBox!.width).toBeLessThanOrEqual(draftBox!.x + 1);
+	expect(sendBox!.x).toBeGreaterThanOrEqual(draftBox!.x + draftBox!.width - 1);
+	expect(Math.abs(sendBox!.y + sendBox!.height - (draftBox!.y + draftBox!.height)))
+		.toBeLessThanOrEqual(1);
+	expect(sendBox!.width).toBeCloseTo(36, 0);
+	expect(sendBox!.height).toBeCloseTo(36, 0);
+	// The status stays readable as one line above the pill.
+	let notice = chat.getByRole("status").filter({ hasText: "Chopin unavailable" });
+	await expect(notice).toBeVisible();
+	expect((await notice.boundingBox())!.height).toBeLessThanOrEqual(28);
+	// Disabled send is drawn solid rather than faded.
+	await expect(send).toBeDisabled();
+	expect(await send.evaluate(element => getComputedStyle(element).opacity)).toBe("1");
+
+	await draft.click();
+	await page.keyboard.type("One more line to send");
+	await expect(send).toBeEnabled();
+	await expectNoHorizontalOverflow(page);
+});
+
+test("phone mention and reference pickers rest on the composer as a full-width list", async ({ join }) => {
+	let page = await join("ana", PHONE);
+	await join("cy");
+	await expect(page.getByRole("group", { name: /People here: ana, cy$/ })).toBeVisible();
+	await openPhoneChat(page);
+	let chat = chatPane(page);
+	let draft = chatInput(chat);
+	let surface = chat.locator(".composer-surface");
+
+	await draft.click();
+	await page.keyboard.type("@");
+	let mentions = chat.locator("[data-chat-mention-picker]");
+	await expect(mentions.getByRole("option", { name: "cy" })).toBeVisible();
+	let pill = (await surface.boundingBox())!;
+	// The list scales in from the menu entrance; measure once it has settled.
+	await expect.poll(async () => Math.abs((await mentions.boundingBox())!.width - pill.width))
+		.toBeLessThanOrEqual(1);
+	let list = (await mentions.boundingBox())!;
+	expect(Math.abs(list.x - pill.x)).toBeLessThanOrEqual(1);
+	expect(list.y + list.height).toBeLessThanOrEqual(pill.y);
+	expect(pill.y - (list.y + list.height)).toBeLessThanOrEqual(8);
+	// Layout height: the entrance's scale can leave the drawn box a hair short.
+	expect(
+		await mentions.getByRole("option", { name: "cy" }).evaluate(row =>
+			(row as HTMLElement).offsetHeight
+		),
+	)
+		.toBeGreaterThanOrEqual(44);
+	expect(await mentions.evaluate(element => getComputedStyle(element).overscrollBehaviorY))
+		.toBe("contain");
+
+	await page.keyboard.press("Backspace");
+	await page.keyboard.type("#");
+	let references = chat.locator("[data-chat-reference-picker]");
+	await expect(references).toBeVisible();
+	await expect.poll(async () => Math.abs((await references.boundingBox())!.width - pill.width))
+		.toBeLessThanOrEqual(1);
+	expect((await references.boundingBox())!.height).toBeLessThanOrEqual(844 * 0.4 + 1);
+});
+
+test("an open keyboard leaves the phone transcript most of the exposed height", async ({ baseURL, browser, room }) => {
+	let emulation = await openIsolatedRoom(
+		browser,
+		baseURL!,
+		room,
+		"ana",
+		PHONE,
+		context =>
+			installVisualViewport(context, {
+				height: 844,
+				offsetLeft: 0,
+				offsetTop: 0,
+				pageLeft: 0,
+				pageTop: 0,
+				scale: 1,
+				width: 390,
+			}),
+	);
+	try {
+		let page = emulation.page;
+		await openPhoneChat(page);
+		let chat = chatPane(page);
+		let draft = chatInput(chat);
+		await draft.click();
+		await setVisualViewport(page, { event: "resize", height: 508 });
+		await page.keyboard.type(
+			"A draft long enough to wrap onto a second line in the phone composer pill",
+		);
+		let send = chat.getByRole("button", { name: "Send message" });
+		await expectInsideViewport(draft);
+		await expectInsideViewport(send);
+		let transcript = await chat.locator(".chat-composer").evaluate(composer => {
+			let pane = composer.parentElement!.getBoundingClientRect();
+			return composer.getBoundingClientRect().top - pane.top;
+		});
+		// The composer sits on the keyboard and the transcript keeps the rest.
+		expect((await send.boundingBox())!.y + 36).toBeGreaterThan(508 - 64);
+		expect(transcript).toBeGreaterThanOrEqual(200);
+	} finally {
+		await emulation.close();
+	}
+});
+
+test("a phone transcript at the bottom stays pinned when a message arrives with the keyboard open", async ({ baseURL, browser, join, room }) => {
+	let cy = await join("cy", { viewport: { width: 1440, height: 900 } });
+	let cyChat = chatPane(cy);
+	let cyDraft = chatInput(cyChat);
+	for (let index = 1; index <= 12; index++) {
+		await cyDraft.fill(`Earlier message ${index} long enough to take a line or two on a phone`);
+		await cyChat.getByRole("button", { name: "Send message" }).click();
+		await expect(cyChat.getByText(`Earlier message ${index} `)).toBeVisible();
+	}
+	let emulation = await openIsolatedRoom(
+		browser,
+		baseURL!,
+		room,
+		"ana",
+		PHONE,
+		context =>
+			installVisualViewport(context, {
+				height: 844,
+				offsetLeft: 0,
+				offsetTop: 0,
+				pageLeft: 0,
+				pageTop: 0,
+				scale: 1,
+				width: 390,
+			}),
+	);
+	try {
+		let page = emulation.page;
+		await openPhoneChat(page);
+		let chat = chatPane(page);
+		await chatInput(chat).click();
+		await setVisualViewport(page, { event: "resize", height: 508 });
+		await page.keyboard.type("Typing while cy talks");
+
+		await cyDraft.fill("The newest message from cy");
+		await cyChat.getByRole("button", { name: "Send message" }).click();
+		let newest = chat.getByText("The newest message from cy");
+		await expect(newest).toBeVisible();
+		let composer = chat.locator(".chat-composer");
+		await expect.poll(async () => {
+			let [message, below] = await Promise.all([newest.boundingBox(), composer.boundingBox()]);
+			return message!.y + message!.height <= below!.y && message!.y >= 0;
+		}).toBe(true);
+	} finally {
+		await emulation.close();
+	}
+});
+
+test("the desktop composer keeps its labelled mode switch, footer and dropdown pickers", async ({ join }) => {
+	let page = await join("ana", { viewport: { width: 1440, height: 900 } });
+	await join("cy");
+	let chat = chatPane(page);
+	let draft = chatInput(chat);
+	await expect(draft).toBeVisible();
+	await expect(chat.locator(".composer-mode-label")).toHaveText("Chat");
+	expect(
+		await chat.locator(".composer-surface").evaluate(element => getComputedStyle(element).display),
+	)
+		.not.toBe("flex");
+	let [draftBox, sendBox] = await Promise.all([
+		draft.boundingBox(),
+		chat.getByRole("button", { name: "Send message" }).boundingBox(),
+	]);
+	expect(sendBox!.y).toBeGreaterThanOrEqual(draftBox!.y + draftBox!.height - 1);
+
+	await draft.click();
+	await page.keyboard.type("@");
+	let mentions = chat.locator("[data-chat-mention-picker]");
+	await expect(mentions.getByRole("option", { name: "cy" })).toBeVisible();
+	let [list, pill] = await Promise.all([
+		mentions.boundingBox(),
+		chat.locator(".composer-surface").boundingBox(),
+	]);
+	expect(list!.width).toBeLessThan(pill!.width / 2);
+});
diff --git a/packages/visuals/theme.css b/packages/visuals/theme.css
index 7aaffc850..49335321b 100644
--- a/packages/visuals/theme.css
+++ b/packages/visuals/theme.css
@@ -215,6 +215,9 @@
 		(var(--icon-button-size-compact) - var(--icon-size-compact)) / 2
 	);
 	--count-control-size: calc(var(--spacing) * 4.5);
+	/* The phone composer pill: its 36px controls, their icons, and its 44px resting height. */
+	--composer-pill-control: calc(var(--spacing) * 9);
+	--composer-pill-icon: calc(var(--spacing) * 4.5);
 	--count-control-padding: calc(var(--spacing) / 4);
 	--menu-item-height-normal: calc(var(--spacing) * 8.5);
 	--menu-item-height-compact: calc(var(--spacing) * 7);
@@ -264,6 +267,7 @@
 	--radius-lg: 0.5rem; /* 8px — popovers and panels */
 	--radius-xl: 0.625rem; /* 10px — the document page */
 	--radius-full: 9999px; /* saturated pill rounding */
+	--radius-composer-pill: calc(var(--spacing) * 5.5); /* 22px — half the phone composer at rest */
 
 	/*
 	 * Warm-tinted depth, copied from the settled Figma shadow table.