From 792a34bfb94dafe14b62c7b15bc76c197372def4 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Thu, 12 Feb 2026 22:26:18 +0000
Subject: [PATCH] style: visually differentiate user vs assistant message
 bubbles

User messages now have a subtle violet tint (border + gradient) to
distinguish them from assistant messages, similar to WhatsApp/Telegram
style. Keeps the dark theme and soft palette.
---
 src/components/ChatMessage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx
index 26801a9..bb8ca79 100644
--- a/src/components/ChatMessage.tsx
+++ b/src/components/ChatMessage.tsx
@@ -300,10 +300,10 @@ export function ChatMessageComponent({ message, onRetry }: { message: ChatMessag
 
       {/* Bubble */}
       <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 border border-white/8 max-w-full overflow-hidden ${
+        <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-zinc-800/70 to-zinc-900/70 text-zinc-200'
-            : 'bg-zinc-800/40 text-zinc-300 shadow-[0_0_0_1px_rgba(255,255,255,0.03)]'
+            ? 'bg-gradient-to-b from-violet-900/20 to-zinc-900/60 text-zinc-200 border border-violet-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) */}
           {!isUser && !message.isStreaming && getPlainText(message).trim() && (