diff --git a/src/components/ChatBot/PlanCard.js b/src/components/ChatBot/PlanCard.js
index 53714598..bb35e3d4 100644
--- a/src/components/ChatBot/PlanCard.js
+++ b/src/components/ChatBot/PlanCard.js
@@ -23,8 +23,8 @@ import { FiTarget, FiCheckCircle, FiXCircle, FiClock, FiTool } from 'react-icons
  * 执行计划卡片组件
  */
 export const PlanCard = ({ plan, stepResults }) => {
-  const cardBg = useColorModeValue('blue.50', 'blue.900');
-  const borderColor = useColorModeValue('blue.200', 'blue.700');
+  const cardBg = useColorModeValue('blue.50', 'rgba(40, 45, 50, 0.8)');
+  const borderColor = useColorModeValue('blue.200', 'rgba(255, 215, 0, 0.3)');
   const successColor = useColorModeValue('green.500', 'green.300');
   const errorColor = useColorModeValue('red.500', 'red.300');
   const pendingColor = useColorModeValue('gray.400', 'gray.500');
@@ -73,7 +73,7 @@ export const PlanCard = ({ plan, stepResults }) => {
           <Icon as={FiTarget} color="blue.500" boxSize={5} />
           <Text fontWeight="bold" fontSize="md">执行目标</Text>
         </HStack>
-        <Text fontSize="sm" color="gray.600" pl={7}>
+        <Text fontSize="sm" color={useColorModeValue('gray.600', '#9BA1A6')} pl={7}>
           {plan.goal}
         </Text>
 
@@ -83,7 +83,7 @@ export const PlanCard = ({ plan, stepResults }) => {
         {plan.reasoning && (
           <>
             <Text fontSize="sm" fontWeight="bold">规划思路：</Text>
-            <Text fontSize="sm" color="gray.600">
+            <Text fontSize="sm" color={useColorModeValue('gray.600', '#9BA1A6')}>
               {plan.reasoning}
             </Text>
             <Divider />
@@ -106,7 +106,7 @@ export const PlanCard = ({ plan, stepResults }) => {
               <HStack
                 key={index}
                 p={2}
-                bg={useColorModeValue('white', 'gray.700')}
+                bg={useColorModeValue('white', 'rgba(50, 55, 60, 0.6)')}
                 borderRadius="md"
                 borderWidth="1px"
                 borderColor={stepColor}
@@ -129,7 +129,7 @@ export const PlanCard = ({ plan, stepResults }) => {
                        status === 'failed' ? '✗ 失败' : '⏳ 等待'}
                     </Badge>
                   </HStack>
-                  <Text fontSize="xs" color="gray.600">
+                  <Text fontSize="xs" color={useColorModeValue('gray.600', '#9BA1A6')}>
                     {step.reason}
                   </Text>
                 </VStack>
diff --git a/src/components/ChatBot/StepResultCard.js b/src/components/ChatBot/StepResultCard.js
index 282acaf9..7f33622c 100644
--- a/src/components/ChatBot/StepResultCard.js
+++ b/src/components/ChatBot/StepResultCard.js
@@ -23,8 +23,8 @@ import { FiChevronDown, FiChevronUp, FiCheckCircle, FiXCircle, FiClock, FiDataba
 export const StepResultCard = ({ stepResult }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const cardBg = useColorModeValue('white', 'gray.700');
-  const borderColor = useColorModeValue('gray.200', 'gray.600');
+  const cardBg = useColorModeValue('white', 'rgba(40, 45, 50, 0.8)');
+  const borderColor = useColorModeValue('gray.200', 'rgba(255, 215, 0, 0.2)');
   const successColor = useColorModeValue('green.500', 'green.300');
   const errorColor = useColorModeValue('red.500', 'red.300');
 
@@ -80,7 +80,7 @@ export const StepResultCard = ({ stepResult }) => {
         justify="space-between"
         cursor="pointer"
         onClick={() => setIsExpanded(!isExpanded)}
-        _hover={{ bg: useColorModeValue('gray.50', 'gray.600') }}
+        _hover={{ bg: useColorModeValue('gray.50', 'rgba(50, 55, 60, 0.7)') }}
       >
         <HStack flex={1}>
           <Icon as={StatusIcon} color={`${statusColorScheme}.500`} boxSize={5} />
@@ -94,7 +94,7 @@ export const StepResultCard = ({ stepResult }) => {
                  stepResult.status === 'failed' ? '失败' : '执行中'}
               </Badge>
             </HStack>
-            <Text fontSize="xs" color="gray.500">
+            <Text fontSize="xs" color={useColorModeValue('gray.500', '#9BA1A6')}>
               耗时: {stepResult.execution_time?.toFixed(2)}s
             </Text>
           </VStack>
@@ -140,7 +140,7 @@ export const StepResultCard = ({ stepResult }) => {
                 maxH="300px"
                 overflowY="auto"
                 p={2}
-                bg={useColorModeValue('gray.50', 'gray.800')}
+                bg={useColorModeValue('gray.50', 'rgba(25, 28, 32, 0.6)')}
                 borderRadius="md"
                 fontSize="xs"
               >
@@ -155,7 +155,7 @@ export const StepResultCard = ({ stepResult }) => {
                       </Code>
                     ))}
                     {stepResult.result.length > 3 && (
-                      <Text fontSize="xs" color="gray.500">
+                      <Text fontSize="xs" color={useColorModeValue('gray.500', '#9BA1A6')}>
                         ...还有 {stepResult.result.length - 3} 条记录
                       </Text>
                     )}
@@ -172,7 +172,7 @@ export const StepResultCard = ({ stepResult }) => {
           {stepResult.status === 'failed' && stepResult.error && (
             <VStack align="stretch" spacing={2}>
               <Text fontSize="xs" fontWeight="bold" color="red.500">错误信息:</Text>
-              <Text fontSize="xs" color="red.600" p={2} bg="red.50" borderRadius="md">
+              <Text fontSize="xs" color={useColorModeValue('red.600', 'red.300')} p={2} bg={useColorModeValue('red.50', 'rgba(220, 38, 38, 0.15)')} borderRadius="md">
                 {stepResult.error}
               </Text>
             </VStack>
diff --git a/src/views/AgentChat/index.js b/src/views/AgentChat/index.js
index d2ff7e2d..d4f8afe6 100644
--- a/src/views/AgentChat/index.js
+++ b/src/views/AgentChat/index.js
@@ -201,16 +201,17 @@ const AgentChatV4 = () => {
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
 
-  // 毛玻璃黑金配色主题
-  const glassBg = 'rgba(20, 20, 20, 0.7)';
-  const glassHoverBg = 'rgba(30, 30, 30, 0.8)';
+  // 毛玻璃深灰金配色主题（类似编程工具的深色主题）
+  const glassBg = 'rgba(30, 35, 40, 0.85)';  // 深灰色毛玻璃
+  const glassHoverBg = 'rgba(40, 45, 50, 0.9)';
   const goldAccent = '#FFD700';
   const goldGradient = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)';
-  const darkBg = '#0A0A0A';
+  const darkBg = '#1a1d23';  // VS Code 风格的深灰背景
   const borderGold = 'rgba(255, 215, 0, 0.3)';
   const textGold = '#FFD700';
-  const textWhite = '#FFFFFF';
-  const textGray = '#CCCCCC';
+  const textWhite = '#E8E8E8';  // 柔和的白色
+  const textGray = '#9BA1A6';  // 柔和的灰色
+  const cardBg = 'rgba(40, 45, 50, 0.6)';  // 卡片背景（深灰毛玻璃）
 
   // ==================== 会话管理函数 ====================
 
@@ -679,10 +680,11 @@ const AgentChatV4 = () => {
 
   return (
     <Flex
-      h="calc(100vh - 80px)"
+      h="100vh"
       bg={darkBg}
       position="relative"
       overflow="hidden"
+      pt="80px"  // 给导航栏留出空间
     >
       {/* 背景装饰 - 黄金光晕效果 */}
       <Box
@@ -1284,16 +1286,17 @@ const AgentChatV4 = () => {
 };
 
 /**
- * 消息渲染器（黑金毛玻璃风格）
+ * 消息渲染器（深灰毛玻璃风格）
  */
 const MessageRenderer = ({ message, userAvatar }) => {
-  const glassBg = 'rgba(20, 20, 20, 0.7)';
+  const glassBg = 'rgba(30, 35, 40, 0.85)';  // 深灰色毛玻璃
+  const cardBg = 'rgba(40, 45, 50, 0.6)';    // 卡片背景
   const goldAccent = '#FFD700';
   const goldGradient = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)';
-  const darkBg = '#0A0A0A';
+  const darkBg = '#1a1d23';
   const borderGold = 'rgba(255, 215, 0, 0.3)';
-  const textWhite = '#FFFFFF';
-  const textGray = '#CCCCCC';
+  const textWhite = '#E8E8E8';  // 柔和的白色
+  const textGray = '#9BA1A6';   // 柔和的灰色
 
   switch (message.type) {
     case MessageTypes.USER: