diff --git a/apps/web/components/chat/chat-graph-context-rail.tsx b/apps/web/components/chat/chat-graph-context-rail.tsx
index cb83141bd..c89c83396 100644
--- a/apps/web/components/chat/chat-graph-context-rail.tsx
+++ b/apps/web/components/chat/chat-graph-context-rail.tsx
@@ -13,10 +13,12 @@ export function ChatGraphContextRail({
 	messages,
 	containerTags,
 	className,
+	showBackdrop = true,
 }: {
 	messages: UIMessage[]
 	containerTags?: string[] | null
 	className?: string
+	showBackdrop?: boolean
 }) {
 	const { effectiveContainerTags } = useProject()
 	const graphContainerTags =
@@ -32,14 +34,22 @@ export function ChatGraphContextRail({
 		<div
 			id="chat-graph-context-rail"
 			className={cn(
-				"relative flex min-h-0 min-w-0 flex-1 flex-col bg-[#05080D] overflow-hidden",
+				"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+				showBackdrop && "bg-[#05080D]",
 				dmSansClassName(),
 				className,
 			)}
 		>
-			<AnimatedGradientBackground animateFromBottom={false} topPosition="55%" />
-			<div className="pointer-events-none absolute inset-0 z-0 bg-[#05080D]/50" />
-			<div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
+			{showBackdrop && (
+				<>
+					<AnimatedGradientBackground
+						animateFromBottom={false}
+						topPosition="55%"
+					/>
+					<div className="pointer-events-none absolute inset-0 z-0 bg-[#05080D]/50" />
+					<div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
+				</>
+			)}
 			<div className="pointer-events-none absolute top-3 left-4 z-20">
 				<p className="text-xs font-medium text-white/70">Memory map</p>
 				<p className="mt-0.5 max-w-[14rem] text-[10px] leading-snug text-white/35">
@@ -48,7 +58,6 @@ export function ChatGraphContextRail({
 						: "Memories used by Nova will be highlighted here"}
 				</p>
 			</div>
-			<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-r from-transparent to-[#05080D]" />
 			<div className="relative z-[2] min-h-0 flex-1 pt-10">
 				<MemoryGraph
 					containerTags={graphContainerTags}
diff --git a/apps/web/components/chat/index.tsx b/apps/web/components/chat/index.tsx
index 5ee10396c..73e45a21d 100644
--- a/apps/web/components/chat/index.tsx
+++ b/apps/web/components/chat/index.tsx
@@ -48,6 +48,7 @@ import { SuperLoader } from "../superloader"
 import { UserMessage } from "./message/user-message"
 import { AgentMessage } from "./message/agent-message"
 import { ChatGraphContextRail } from "./chat-graph-context-rail"
+import { AnimatedGradientBackground } from "@/components/animated-gradient-background"
 import { ChainOfThought } from "./input/chain-of-thought"
 import { useIsMobile } from "@hooks/use-mobile"
 import { useAuth } from "@lib/auth-context"
@@ -1601,17 +1602,35 @@ export function ChatSidebar({
 		>
 			{chatHistorySheet}
 			{isPageDesktop ? (
-				<div className="flex h-full min-h-0 w-full flex-1 flex-row">
+				<div className="relative flex h-full min-h-0 w-full flex-1 flex-row overflow-hidden bg-[#05080D]">
+					{/* Shared backdrop spanning both the graph rail and the chat so the
+					    gradient flows continuously across the whole panel instead of
+					    stopping at the graph edge. */}
+					<div className="pointer-events-none absolute inset-0 z-0">
+						<AnimatedGradientBackground
+							animateFromBottom={false}
+							topPosition="55%"
+						/>
+						<div className="absolute inset-0 bg-[#05080D]/50" />
+						<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
+					</div>
 					<ChatGraphContextRail
+						showBackdrop={false}
 						messages={messages}
 						containerTags={
 							chatProject === AUTO_CHAT_SPACE_ID ? null : [chatProject]
 						}
 					/>
-					<div className="flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] shrink-0 basis-[min(720px,50vw)] flex-col">
-						{pageDesktopToolbarRow}
-						<div className="relative mx-auto flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] flex-1 flex-col px-3 sm:px-4 md:px-0">
-							{shell}
+					<div className="relative z-[2] flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] shrink-0 basis-[min(720px,50vw)] flex-col">
+						{/* Soft left→right darkening so the chat reads as a distinct,
+						    recessed panel (like prod) while the dots/glow still show
+						    through. The gradient handles the separation — no hard line. */}
+						<div className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-r from-transparent via-[#05080D]/40 to-[#05080D]/80" />
+						<div className="relative z-[1] flex h-full min-h-0 w-full flex-col">
+							{pageDesktopToolbarRow}
+							<div className="relative mx-auto flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] flex-1 flex-col px-3 sm:px-4 md:px-0">
+								{shell}
+							</div>
 						</div>
 					</div>
 				</div>