From 95d786ef2c2b4c2cd3fccc10f49636d8249a28b4 Mon Sep 17 00:00:00 2001
From: Cynar <ingo.wagner1303@gmail.com>
Date: Fri, 23 Oct 2026 13:28:24 +0000
Subject: [PATCH] fix(web): restore bot bubble accent color and user bubble
 border after refactor regression

- Add --bot-accent CSS variable injection from speakerColorDef.hex to all bot bubbles
- Restore colored left border accent on bot bubbles via CSS custom property
- Improve bot bubble background with subtle accent tint (88% card + 12% accent)
- Add colored right border accent to user bubbles
- Add subtle accent halo shadow to bot bubbles for better visual hierarchy
---
 apps/web/src/pages/shell/transcript.tsx | 3 +++
 apps/web/src/styles.css                 | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/shell/transcript.tsx b/apps/web/src/pages/shell/transcript.tsx
index cdd8167..4ad47e1 100644
--- a/apps/web/src/pages/shell/transcript.tsx
+++ b/apps/web/src/pages/shell/transcript.tsx
@@ -1030,6 +1030,7 @@ const MessageView = memo(function MessageView({
                 ? "max-w-full space-y-2 border-s-2 border-success/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90"
                 : "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95"
             }
+            style={{ ["--bot-accent" as string]: speakerColorDef.hex }}
             dir="auto"
           >
             {visibleNarrationBlocks.map((block, i) => {
@@ -1152,6 +1153,7 @@ const MessageView = memo(function MessageView({
               <div
                 data-testid="message-bot-bubble"
                 className="chat-bubble-bot max-w-full rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95"
+                style={{ ["--bot-accent" as string]: speakerColorDef.hex }}
                 dir="auto"
               >
                 <ChatMarkdown streaming>{block.text}</ChatMarkdown>
@@ -1378,6 +1380,7 @@ const MessageView = memo(function MessageView({
                     ? "max-w-full space-y-2 border-s-2 border-success/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90"
                     : "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-6 py-4 text-ui-reading leading-[1.85] text-foreground/95"
                 }
+                style={{ ["--bot-accent" as string]: speakerColorDef.hex }}
                 dir="auto"
               >
                 <ChatMarkdown>{block.text}</ChatMarkdown>
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 002ffa3..c4987a8 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -55,17 +55,20 @@ body,
 .chat-bubble-user {
   background: var(--chat-user);
   border: 1px solid var(--border);
+  border-right: 2px solid color-mix(in srgb, var(--ring) 50%, var(--border) 50%);
   box-shadow:
     0 8px 24px -4px rgba(0, 0, 0, 0.5),
     inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .chat-bubble-bot {
-  background: color-mix(in srgb, var(--card) 72%, transparent);
+  background: color-mix(in srgb, var(--card) 88%, var(--bot-accent, transparent) 12%);
   border: 1px solid var(--border);
+  border-left: 2px solid color-mix(in srgb, var(--bot-accent, var(--ring)) 70%, transparent);
   box-shadow:
     0 10px 32px -4px rgba(0, 0, 0, 0.35),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 0 0 1px color-mix(in srgb, var(--bot-accent, transparent) 6%, var(--bot-accent, transparent) 6%);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }