diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index e628f6ea6..0f36f5ec7 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -142,6 +142,7 @@ import {
   type TerminalContextSelection,
 } from "../lib/terminalContext";
 import { shouldUseCompactComposerFooter } from "./composerFooterLayout";
+import { useMediaQuery } from "../hooks/useMediaQuery";
 import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";
 import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "./ComposerPromptEditor";
 import { PullRequestThreadDialog } from "./PullRequestThreadDialog";
@@ -336,6 +337,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const [expandedWorkGroups, setExpandedWorkGroups] = useState<Record<string, boolean>>({});
   const [planSidebarOpen, setPlanSidebarOpen] = useState(false);
   const [isComposerFooterCompact, setIsComposerFooterCompact] = useState(false);
+  const [isComposerFocused, setIsComposerFocused] = useState(false);
+  const isMobileViewport = useMediaQuery("max-sm");
+  const isComposerCollapsedMobile = isMobileViewport && !isComposerFocused;
   // Tracks whether the user explicitly dismissed the sidebar for the active turn.
   const planSidebarDismissedForTurnRef = useRef<string | null>(null);
   // When set, the thread-change reset effect will open the sidebar instead of closing it.
@@ -375,6 +379,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const pendingInteractionAnchorFrameRef = useRef<number | null>(null);
   const composerEditorRef = useRef<ComposerPromptEditorHandle>(null);
   const composerFormRef = useRef<HTMLFormElement>(null);
+  const composerSurfaceRef = useRef<HTMLDivElement>(null);
   const composerFormHeightRef = useRef(0);
   const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
   const composerSelectLockRef = useRef(false);
@@ -384,6 +389,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const attachmentPreviewHandoffByMessageIdRef = useRef<Record<string, string[]>>({});
   const attachmentPreviewHandoffTimeoutByMessageIdRef = useRef<Record<string, number>>({});
   const sendInFlightRef = useRef(false);
+  const composerBlurFrameRef = useRef<number | null>(null);
   const dragDepthRef = useRef(0);
   const terminalOpenByThreadRef = useRef<Record<string, boolean>>({});
   const setMessagesScrollContainerRef = useCallback((element: HTMLDivElement | null) => {
@@ -1193,6 +1199,24 @@ export default function ChatView({ threadId }: ChatViewProps) {
       focusComposer();
     });
   }, [focusComposer]);
+  const scheduleComposerCollapseCheck = useCallback(() => {
+    if (composerBlurFrameRef.current !== null) {
+      window.cancelAnimationFrame(composerBlurFrameRef.current);
+    }
+    composerBlurFrameRef.current = window.requestAnimationFrame(() => {
+      composerBlurFrameRef.current = null;
+      const composerSurface = composerSurfaceRef.current;
+      const activeElement = document.activeElement;
+      if (
+        composerSurface &&
+        activeElement instanceof Node &&
+        composerSurface.contains(activeElement)
+      ) {
+        return;
+      }
+      setIsComposerFocused(false);
+    });
+  }, []);
   const addTerminalContextToDraft = useCallback(
     (selection: TerminalContextSelection) => {
       if (!activeThread) {
@@ -1854,6 +1878,14 @@ export default function ChatView({ threadId }: ChatViewProps) {
     );
   }, [composerMenuItems, composerMenuOpen]);
 
+  useEffect(() => {
+    return () => {
+      if (composerBlurFrameRef.current !== null) {
+        window.cancelAnimationFrame(composerBlurFrameRef.current);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     setIsRevertingCheckpoint(false);
   }, [activeThread?.id]);
@@ -3581,42 +3613,114 @@ export default function ChatView({ threadId }: ChatViewProps) {
                 onDrop={onComposerDrop}
               >
                 <div
+                  ref={composerSurfaceRef}
                   className={cn(
                     "rounded-[20px] border bg-card transition-colors duration-200 focus-within:border-ring/45",
                     isDragOverComposer ? "border-primary/70 bg-accent/30" : "border-border",
                     composerProviderState.composerSurfaceClassName,
                   )}
+                  onFocusCapture={() => {
+                    if (composerBlurFrameRef.current !== null) {
+                      window.cancelAnimationFrame(composerBlurFrameRef.current);
+                      composerBlurFrameRef.current = null;
+                    }
+                    setIsComposerFocused(true);
+                  }}
+                  onBlurCapture={() => {
+                    scheduleComposerCollapseCheck();
+                  }}
+                  onClick={() => {
+                    if (isComposerCollapsedMobile) {
+                      // First expand the composer, then focus the editor after it renders
+                      setIsComposerFocused(true);
+                      requestAnimationFrame(() => {
+                        composerEditorRef.current?.focusAtEnd();
+                      });
+                    }
+                  }}
                 >
-                  {activePendingApproval ? (
-                    <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
-                      <ComposerPendingApprovalPanel
-                        approval={activePendingApproval}
-                        pendingCount={pendingApprovals.length}
-                      />
-                    </div>
-                  ) : pendingUserInputs.length > 0 ? (
-                    <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
-                      <ComposerPendingUserInputPanel
-                        pendingUserInputs={pendingUserInputs}
-                        respondingRequestIds={respondingRequestIds}
-                        answers={activePendingDraftAnswers}
-                        questionIndex={activePendingQuestionIndex}
-                        onSelectOption={onSelectActivePendingUserInputOption}
-                        onAdvance={onAdvanceActivePendingUserInput}
-                      />
-                    </div>
-                  ) : showPlanFollowUpPrompt && activeProposedPlan ? (
-                    <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
-                      <ComposerPlanFollowUpBanner
-                        key={activeProposedPlan.id}
-                        planTitle={proposedPlanTitle(activeProposedPlan.planMarkdown) ?? null}
-                      />
+                  {!isComposerCollapsedMobile &&
+                    (activePendingApproval ? (
+                      <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
+                        <ComposerPendingApprovalPanel
+                          approval={activePendingApproval}
+                          pendingCount={pendingApprovals.length}
+                        />
+                      </div>
+                    ) : pendingUserInputs.length > 0 ? (
+                      <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
+                        <ComposerPendingUserInputPanel
+                          pendingUserInputs={pendingUserInputs}
+                          respondingRequestIds={respondingRequestIds}
+                          answers={activePendingDraftAnswers}
+                          questionIndex={activePendingQuestionIndex}
+                          onSelectOption={onSelectActivePendingUserInputOption}
+                          onAdvance={onAdvanceActivePendingUserInput}
+                        />
+                      </div>
+                    ) : showPlanFollowUpPrompt && activeProposedPlan ? (
+                      <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
+                        <ComposerPlanFollowUpBanner
+                          key={activeProposedPlan.id}
+                          planTitle={proposedPlanTitle(activeProposedPlan.planMarkdown) ?? null}
+                        />
+                      </div>
+                    ) : null)}
+                  {isComposerCollapsedMobile && (
+                    <div className="flex items-center justify-between gap-2 px-3 py-2">
+                      <span
+                        className={cn(
+                          "min-w-0 truncate text-[14px]",
+                          (
+                            activePendingProgress
+                              ? activePendingProgress.customAnswer
+                              : prompt.trim()
+                          )
+                            ? "text-foreground"
+                            : "text-muted-foreground/35",
+                        )}
+                      >
+                        {activePendingProgress
+                          ? activePendingProgress.customAnswer ||
+                            "Type your own answer, or leave this blank to use the selected option"
+                          : prompt.trim() || "Ask anything..."}
+                      </span>
+                      <button
+                        type="button"
+                        className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/90 text-primary-foreground disabled:opacity-30"
+                        disabled={
+                          isSendBusy || isConnecting || !composerSendState.hasSendableContent
+                        }
+                        aria-label="Send message"
+                        onPointerDown={(e) => e.preventDefault()}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSend();
+                        }}
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          aria-hidden="true"
+                        >
+                          <path
+                            d="M8 3L8 13M8 3L4 7M8 3L12 7"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </button>
                     </div>
-                  ) : null}
+                  )}
                   <div
                     className={cn(
                       "relative px-3 pb-2 sm:px-4",
                       hasComposerHeader ? "pt-2.5 sm:pt-3" : "pt-3.5 sm:pt-4",
+                      isComposerCollapsedMobile && "hidden",
                     )}
                   >
                     {composerMenuOpen && !isComposerApprovalState && (
@@ -3633,7 +3737,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
                       </div>
                     )}
 
-                    {!isComposerApprovalState &&
+                    {!isComposerCollapsedMobile &&
+                      !isComposerApprovalState &&
                       pendingUserInputs.length === 0 &&
                       composerImages.length > 0 && (
                         <div className="mb-3 flex flex-wrap gap-2">
@@ -3738,7 +3843,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                   </div>
 
                   {/* Bottom toolbar */}
-                  {activePendingApproval ? (
+                  {isComposerCollapsedMobile ? null : activePendingApproval ? (
                     <div className="flex items-center justify-end gap-2 px-2.5 pb-2.5 sm:px-3 sm:pb-3">
                       <ComposerPendingApprovalActions
                         requestId={activePendingApproval.requestId}
@@ -3916,6 +4021,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                               type="submit"
                               size="sm"
                               className="rounded-full px-4"
+                              onPointerDown={(e) => e.preventDefault()}
                               disabled={
                                 activePendingIsResponding ||
                                 (activePendingProgress.isLastQuestion
@@ -3954,6 +4060,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                                 type="submit"
                                 size="sm"
                                 className="h-9 rounded-full px-4 sm:h-8"
+                                onPointerDown={(e) => e.preventDefault()}
                                 disabled={isSendBusy || isConnecting}
                               >
                                 {isConnecting || isSendBusy ? "Sending..." : "Refine"}
@@ -3964,6 +4071,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                                   type="submit"
                                   size="sm"
                                   className="h-9 rounded-l-full rounded-r-none px-4 sm:h-8"
+                                  onPointerDown={(e) => e.preventDefault()}
                                   disabled={isSendBusy || isConnecting}
                                 >
                                   {isConnecting || isSendBusy ? "Sending..." : "Implement"}
@@ -3997,6 +4105,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                             <button
                               type="submit"
                               className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100 sm:h-8 sm:w-8"
+                              onPointerDown={(e) => e.preventDefault()}
                               disabled={
                                 isSendBusy || isConnecting || !composerSendState.hasSendableContent
                               }
diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 338d9f7bf..547fcf9ce 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -1093,7 +1093,7 @@ function ComposerPromptEditorInner({
           contentEditable={
             <ContentEditable
               className={cn(
-                "block max-h-[200px] min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent text-[14px] leading-relaxed text-foreground focus:outline-none",
+                "block max-h-[200px] min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent text-[16px] leading-relaxed text-foreground focus:outline-none sm:text-[14px]",
                 className,
               )}
               data-testid="composer-editor"
@@ -1104,7 +1104,7 @@ function ComposerPromptEditorInner({
           }
           placeholder={
             terminalContexts.length > 0 ? null : (
-              <div className="pointer-events-none absolute inset-0 text-[14px] leading-relaxed text-muted-foreground/35">
+              <div className="pointer-events-none absolute inset-0 text-[16px] leading-relaxed text-muted-foreground/35 sm:text-[14px]">
                 {placeholder}
               </div>
             )