diff --git a/webui/src/components/MessageBubble.tsx b/webui/src/components/MessageBubble.tsx
index abf85f663..bd1d8c93b 100644
--- a/webui/src/components/MessageBubble.tsx
+++ b/webui/src/components/MessageBubble.tsx
@@ -92,7 +92,7 @@ export function MessageBubble({ message }: MessageBubbleProps) {
   return (
     <div className={cn("w-full text-[15px]", baseAnim)} style={{ lineHeight: "var(--cjk-line-height)" }}>
       {hasReasoning ? (
-        <ReasoningBubble text={reasoning} streaming={reasoningStreaming} />
+        <ReasoningBubble text={reasoning} streaming={reasoningStreaming} hasBodyBelow={!empty} />
       ) : null}
       {empty && message.isStreaming && !hasReasoning ? (
         <TypingDots />
@@ -443,6 +443,7 @@ function TraceGroup({ message, animClass }: TraceGroupProps) {
 interface ReasoningBubbleProps {
   text: string;
   streaming: boolean;
+  hasBodyBelow: boolean;
 }
 
 /**
@@ -456,7 +457,7 @@ interface ReasoningBubbleProps {
  *     the user can re-expand to inspect the chain of thought. The local
  *     toggle persists once the user interacts.
  */
-function ReasoningBubble({ text, streaming }: ReasoningBubbleProps) {
+function ReasoningBubble({ text, streaming, hasBodyBelow }: ReasoningBubbleProps) {
   const { t } = useTranslation();
   const [userToggled, setUserToggled] = useState(false);
   const [openLocal, setOpenLocal] = useState(true);
@@ -466,7 +467,12 @@ function ReasoningBubble({ text, streaming }: ReasoningBubbleProps) {
     setOpenLocal((v) => (userToggled ? !v : !open));
   };
   return (
-    <div className="mb-2 w-full animate-in fade-in-0 slide-in-from-top-1 duration-200">
+    <div
+      className={cn(
+        "w-full animate-in fade-in-0 slide-in-from-top-1 duration-200",
+        hasBodyBelow && "mb-2",
+      )}
+    >
       <button
         type="button"
         onClick={onToggle}
diff --git a/webui/src/tests/message-bubble.test.tsx b/webui/src/tests/message-bubble.test.tsx
index 33b7ac05f..4f5d504dd 100644
--- a/webui/src/tests/message-bubble.test.tsx
+++ b/webui/src/tests/message-bubble.test.tsx
@@ -119,6 +119,7 @@ describe("MessageBubble", () => {
     expect(screen.getByText("Thinking…")).toBeInTheDocument();
     expect(screen.getByText(/Step 1: parse intent\./)).toBeInTheDocument();
     expect(container.querySelector(".reasoning-shimmer")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /thinking/i }).parentElement).not.toHaveClass("mb-2");
   });
 
   it("collapses the reasoning section by default once streaming ends", () => {
@@ -136,6 +137,7 @@ describe("MessageBubble", () => {
     expect(screen.getByText("Thinking")).toBeInTheDocument();
     expect(screen.getByText("The answer is 42.")).toBeInTheDocument();
     expect(screen.queryByText("hidden until expanded")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /thinking/i }).parentElement).toHaveClass("mb-2");
 
     fireEvent.click(screen.getByRole("button", { name: /thinking/i }));
     expect(screen.getByText("hidden until expanded")).toBeInTheDocument();