diff --git a/web/src/components/Chat/UserMessage.tsx b/web/src/components/Chat/UserMessage.tsx
index 7601313b..80079431 100644
--- a/web/src/components/Chat/UserMessage.tsx
+++ b/web/src/components/Chat/UserMessage.tsx
@@ -14,7 +14,7 @@ export function UserMessage({ message }: { message: ChatMessage }) {
   const files = message.blocks.filter(b => b.type === 'file') as FileBlockData[];
 
   return (
-    <div className="py-4 px-5">
+    <div className="py-4 px-5 msg-user" data-role="user">
       <div className="max-w-[var(--chat-width)] mx-auto">
         <div className="flex gap-3">
           <div className="w-7 h-7 rounded-full bg-surface-raised flex items-center justify-center text-xs font-medium text-text-muted shrink-0 mt-0.5">
diff --git a/web/src/index.css b/web/src/index.css
index 35c633d8..68789f89 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -211,12 +211,17 @@ body {
 ::-webkit-scrollbar-thumb:hover { background: var(--theme-border); }
 
 /* ── Chat message backgrounds ── */
-/* Dark: assistant messages are slightly darker than the chat bg */
+/* Dark: assistant messages sink slightly below the chat bg; user prompts rise
+   to a greyer surface so the two roles read as distinct bands when scrolling. */
 .msg-assistant { background: var(--theme-bg-sunken); }
-/* Light: invert — assistant messages are lighter (white) to stand out */
+.msg-user { background: var(--theme-surface-hover); }
+/* Light: invert — assistant messages are lighter (white) to stand out; user
+   prompts stay on the page bg (already distinct from the white assistant band). */
 [data-theme="light"] .msg-assistant { background: var(--theme-surface); }
+[data-theme="light"] .msg-user { background: transparent; }
 @media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) .msg-assistant { background: var(--theme-surface); }
+  :root:not([data-theme="dark"]) .msg-user { background: transparent; }
 }
 
 /* Markdown rendering styles */