From 3ca76ebe266f04ba0b36a8df2e6e704b7a8dcf71 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Thu, 12 Feb 2026 23:10:03 +0000
Subject: [PATCH] style: rework user message styling from violet to cyan theme

Replace violet tint with cyan/teal tones to match the existing cyan accent
theme. User messages now use from-cyan-900/20 background gradient and
cyan-400/15 border, with cyan-200 user icon. Subtler and more cohesive
with the dark theme while remaining clearly distinct from assistant messages.

Fixes feedback #44
---
 FEEDBACK.md                    | 12 ++++++++++++
 src/components/ChatMessage.tsx |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/FEEDBACK.md b/FEEDBACK.md
index bc3f605..d100c53 100644
--- a/FEEDBACK.md
+++ b/FEEDBACK.md
@@ -465,3 +465,15 @@
   - It should only appear when the content exceeds the max height (overflow)
   - Use overflow-y: auto instead of overflow-y: scroll on the textarea
   - The scrollbar should be hidden when the textarea hasn't reached its max size
+
+## Item #44
+- **Date:** 2026-02-12
+- **Priority:** high
+- **Status:** pending
+- **Description:** User message styling from #42 needs rework — too dark and off-brand
+- **Details:**
+  - The violet tint from #42 is too dark and doesn't fit the color scheme
+  - Use a lighter, more visible differentiation — try cyan/teal tones instead of violet (matches the existing cyan accent theme)
+  - Could use a lighter background (slightly brighter than assistant messages) or a colored left border
+  - Keep it subtle but clearly distinguishable
+  - Test against the zinc dark theme to make sure it's readable for keratoconus (no harsh contrast)
diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx
index bb8ca79..d42fdcc 100644
--- a/src/components/ChatMessage.tsx
+++ b/src/components/ChatMessage.tsx
@@ -293,7 +293,7 @@ export function ChatMessageComponent({ message, onRetry }: { message: ChatMessag
       {/* Avatar */}
       <div className="shrink-0 mt-1 flex h-9 w-9 items-center justify-center rounded-2xl border border-white/8 bg-zinc-800/40">
         {isUser
-          ? <User className="h-4 w-4 text-violet-200" />
+          ? <User className="h-4 w-4 text-cyan-200" />
           : <Bot className="h-4 w-4 text-cyan-200" />
         }
       </div>
@@ -302,7 +302,7 @@ export function ChatMessageComponent({ message, onRetry }: { message: ChatMessag
       <div className={`min-w-0 max-w-[80%] ${isUser ? 'text-right' : ''}`}>
         <div className={`group relative inline-block text-left rounded-3xl px-4 py-3 text-sm leading-relaxed max-w-full overflow-hidden ${
           isUser
-            ? 'bg-gradient-to-b from-violet-900/20 to-zinc-900/60 text-zinc-200 border border-violet-400/15'
+            ? 'bg-gradient-to-b from-cyan-900/20 to-zinc-900/60 text-zinc-200 border border-cyan-400/15'
             : 'bg-zinc-800/40 text-zinc-300 border border-white/8 shadow-[0_0_0_1px_rgba(255,255,255,0.03)]'
         }`}>
           {/* Copy button (assistant messages only) */}