From 78d9494ed25bb489c98a95133fed0fd23cad06ce Mon Sep 17 00:00:00 2001
From: Sreeram Sreedhar <sreeram@supermemory.com>
Date: Sat, 6 Jun 2026 21:23:40 -0700
Subject: [PATCH] fix(web): recess the chat panel with a soft darkening overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sharing the gradient made the graph and chat equally bright, so they
blended with no separation. Match prod: add a gentle left→right
darkening over the chat column so it reads as a distinct, recessed
panel while the shared dots and glow still show through. The hairline
divider stays for definition.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/components/chat/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/chat/index.tsx b/apps/web/components/chat/index.tsx
index 45a86777..7743907a 100644
--- a/apps/web/components/chat/index.tsx
+++ b/apps/web/components/chat/index.tsx
@@ -1625,9 +1625,14 @@ export function ChatSidebar({
 					    line keeps the boundary legible without breaking the shared gradient. */}
 					<div className="pointer-events-none relative z-[2] w-px shrink-0 self-stretch bg-gradient-to-b from-transparent via-white/15 to-transparent" />
 					<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">
-						{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}
+						{/* Soft left→right darkening so the chat reads as a distinct,
+						    recessed panel (like prod) while the dots/glow still show through. */}
+						<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>