diff --git a/apps/web/src/layout/SurfaceHost.tsx b/apps/web/src/layout/SurfaceHost.tsx
index 45c6c81c9edf4..0101bbab39367 100644
--- a/apps/web/src/layout/SurfaceHost.tsx
+++ b/apps/web/src/layout/SurfaceHost.tsx
@@ -18,7 +18,7 @@ import { cn, isMacPlatform } from "../lib/utils";
 import { sidewaysWheelScrollsStrip, wheelDeltaPx } from "../motion/gesture";
 import { usePaneMotion } from "../motion/paneMotion";
 import {
-  PanelAnimationSuppressionProvider,
+  ChatPanelAnimationSuppressionProvider,
   usePanelNavigationSuppression,
 } from "../panelAnimations";
 import {
@@ -1500,8 +1500,8 @@ function LayoutChatSurface({
     paneId,
     // Staged, every pane draws its own; a window-fixed header cluster would
     // land in the stage's corner, over whichever workspace sits on top.
-    split: split || staged,
-    narrow,
+    split: visible && (split || staged),
+    narrow: visible && narrow,
     leadingEdge,
     trailingEdge,
     focused: focused && !background,
@@ -1682,7 +1682,7 @@ const LayoutChatSurfaceBody = memo(function LayoutChatSurfaceBody({
     });
   }, [rendered, shownTarget, tabId, target]);
   return (
-    <PanelAnimationSuppressionProvider value={panelAnimationsSuppressed}>
+    <ChatPanelAnimationSuppressionProvider value={panelAnimationsSuppressed}>
       <LayoutPaneContext value={paneState}>
         {rendered ? (
           <DeferredChatContext value={request.deferred}>
@@ -1714,7 +1714,7 @@ const LayoutChatSurfaceBody = memo(function LayoutChatSurfaceBody({
           <div aria-hidden className="min-h-0 min-w-0 flex-1 bg-background" />
         )}
       </LayoutPaneContext>
-    </PanelAnimationSuppressionProvider>
+    </ChatPanelAnimationSuppressionProvider>
   );
 });
 
diff --git a/apps/web/src/panelAnimations.ts b/apps/web/src/panelAnimations.ts
index 76b521ecb0f28..d78d99d75a03f 100644
--- a/apps/web/src/panelAnimations.ts
+++ b/apps/web/src/panelAnimations.ts
@@ -1,12 +1,14 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, use, useEffect, useState } from "react";
 import { type PanelAnimationDurationMs } from "@t3tools/contracts/settings";
 
 import { useMediaQuery } from "./hooks/useMediaQuery";
 import { useClientSettings } from "./hooks/useSettings";
 
 const PanelAnimationSuppressionContext = createContext(false);
+const ChatPanelAnimationSuppressionContext = createContext<boolean | null>(null);
 
 export const PanelAnimationSuppressionProvider = PanelAnimationSuppressionContext.Provider;
+export const ChatPanelAnimationSuppressionProvider = ChatPanelAnimationSuppressionContext.Provider;
 
 export function usePanelNavigationSuppression(navigationKey: string): boolean {
   const [paintedNavigationKey, setPaintedNavigationKey] = useState<string | null>(null);
@@ -34,7 +36,8 @@ export function usePanelAnimationSettings(): {
 } {
   const durationMs = useClientSettings((settings) => settings.panelAnimationDurationMs);
   const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
-  const suppressed = useContext(PanelAnimationSuppressionContext);
+  const suppressed =
+    use(ChatPanelAnimationSuppressionContext) ?? use(PanelAnimationSuppressionContext);
   return { active: durationMs > 0 && !prefersReducedMotion && !suppressed, durationMs };
 }