From 4e603323c4a0bc3d38cd2cea856b8bdda4ceaa19 Mon Sep 17 00:00:00 2001
From: 7418 <7418@openclaw.ai>
Date: Wed, 11 Mar 2026 11:49:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20user=20bubble=20color=20not=20rendering?=
 =?UTF-8?q?=20=E2=80=94=20use=20Tailwind=20v4=20variable=20syntax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bg-[var(--user-bubble)] arbitrary value syntax wasn't working with
Tailwind v4's Lightning CSS pipeline. Switch to bg-(--user-bubble) which
is Tailwind v4's native CSS variable reference syntax.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/ai-elements/message.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ai-elements/message.tsx b/src/components/ai-elements/message.tsx
index f4b1e8a..a486b53 100644
--- a/src/components/ai-elements/message.tsx
+++ b/src/components/ai-elements/message.tsx
@@ -56,7 +56,7 @@ export const MessageContent = ({
   <div
     className={cn(
       "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
-      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-[var(--user-bubble)] group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-[var(--user-bubble-foreground)]",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-(--user-bubble) group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-(--user-bubble-foreground)",
       "group-[.is-assistant]:w-full group-[.is-assistant]:text-foreground",
       className
     )}