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>