From 62a4414968fc350e8b4ce618d56992f2509393fb Mon Sep 17 00:00:00 2001
From: Cynar <ingo.wagner1303@gmail.com>
Date: Fri, 23 Oct 2026 13:35:23 +0000
Subject: [PATCH] fix(web): inject --bot-accent CSS variable into bot bubbles
 for colored accent borders

The CSS uses --bot-accent for the tinted background and left border, but the
inline style injection was missing after the remote merge. Add speakerColorDef.hex
to the two bot bubble render locations so the accent color actually applies.
---
 apps/web/src/pages/shell/transcript.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/web/src/pages/shell/transcript.tsx b/apps/web/src/pages/shell/transcript.tsx
index 9662fe7..0d2ce12 100644
--- a/apps/web/src/pages/shell/transcript.tsx
+++ b/apps/web/src/pages/shell/transcript.tsx
@@ -1708,6 +1708,7 @@ const MessageView = memo(function MessageView({
           <div
             data-testid="message-bot-bubble"
             className="chat-bubble-bot max-w-full space-y-3 rounded-[24px] rounded-tl-md 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) => {
@@ -2103,6 +2104,7 @@ const MessageView = memo(function MessageView({
                 <div
                   data-testid="message-bot-bubble"
                   className="chat-bubble-bot max-w-full space-y-3 rounded-[24px] rounded-tl-md px-6 py-4 text-ui-reading leading-[1.85] text-foreground/95"
+                  style={{ ["--bot-accent" as string]: speakerColorDef.hex }}
                   dir="auto"
                 >
                   <BotTextBlockContent