u

src/components/chat/ChatFlowList.jsx

@@ -2,6 +2,13 @@ import React, { PureComponent, createRef } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import HealingMarkdown from './HealingMarkdown';
+import {
+  SHADOW_BUBBLE_ASSISTANT,
+  SHADOW_BUBBLE_USER,
+  SURFACE_RAISED,
+  SURFACE_SUBTLE_PAIR,
+  byMode,
+} from '../../colors';
 
 function formatMessageTime(isoString) {
   if (!isoString) return '';
@@ -109,7 +116,7 @@ function MessageRow({ msg, showTime = true }) {
       <Box sx={{ display: 'flex', justifyContent: 'flex-start', py: 0.35, px: 2 }}>
         <Box
           sx={(theme) => ({
-            bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)',
+            bgcolor: byMode(theme, SURFACE_SUBTLE_PAIR),
             color: 'text.secondary',
             px: 1.25,
             py: 0.35,
@@ -193,7 +200,7 @@ function MessageRow({ msg, showTime = true }) {
       <Box sx={{ display: 'flex', justifyContent: 'flex-start', py: 0.35, px: 2 }}>
         <Box
           sx={(theme) => ({
-            bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)',
+            bgcolor: byMode(theme, SURFACE_SUBTLE_PAIR),
             color: 'text.secondary',
             px: 1.25,
             py: 0.35,
@@ -272,13 +279,13 @@ function MessageRow({ msg, showTime = true }) {
               ? theme.palette.primary.main
               : theme.palette.mode === 'dark'
                 ? 'background.paper'
-                : '#f4f6f8',
+                : SURFACE_RAISED,
             color: isUser
               ? theme.palette.primary.contrastText
               : theme.palette.text.primary,
             boxShadow: isUser
-              ? '0 2px 8px rgba(59, 91, 219, 0.25)'
-              : '0 1px 4px rgba(0, 0, 0, 0.05)',
+              ? SHADOW_BUBBLE_USER
+              : SHADOW_BUBBLE_ASSISTANT,
             border: isUser ? 'none' : `1px solid ${theme.palette.divider}`,
             wordBreak: 'break-word',
             whiteSpace: isUser ? 'pre-wrap' : 'normal',