style(chatbot): 调整思考过程折叠块样式

css/history_detail/03-components/chatbot/index.css

@@ -381,10 +381,17 @@ body.dark #chatbot-toast {
 /* ==================== 思考过程块样式 (Redesigned) ==================== */
 
 .reasoning-block {
-  background: rgba(248, 250, 252, 0.6); /* Slate-50 with opacity */
+  display: inline-flex;
+  padding: 10px 15px;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  max-width: 100%;
+
+  background: #F8F9FA; /* Slate-50 with opacity */
   color: var(--slate-500);
-  padding: 8px 12px;
-  border: 1px solid var(--slate-200); /* 更细腻的边框 */
   border-radius: 8px; /* 圆角 */
   /*
     margin-top removed because .assistant-message padding handles the offset now.
@@ -392,58 +399,52 @@ body.dark #chatbot-toast {
   */
   margin: 0 0 16px 0;
   position: relative;
-  font-size: 13px; /* 稍微小一点的字体 */
 }
 
 .reasoning-header {
-  display: flex;
+  width: 100%;
+  display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 4px;
-}
-
-.reasoning-title {
-  font-weight: 600;
-  font-size: 12px;
-  color: var(--slate-400);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  display: flex;
-  align-items: center;
   gap: 6px;
 }
 
-.reasoning-title::before {
+.reasoning-title {
-  content: '';
+  color: var(--666666, #666);
-  display: inline-block;
+  font-family: "Microsoft YaHei";
-  width: 6px;
+  font-size: 14px;
-  height: 6px;
+  font-style: normal;
-  background: var(--slate-300);
+  font-weight: 400;
-  border-radius: 50%;
+  line-height: normal;
 }
 
 .reasoning-toggle-btn {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 4px;
+  padding: 0;
-  color: var(--slate-400);
+  display: inline-flex;
-  font-size: 12px;
+  align-items: center;
-  transition: color var(--transition-fast);
+  justify-content: center;
 }
 
-.reasoning-toggle-btn:hover {
+.reasoning-toggle-icon {
-  color: var(--slate-600);
+  display: block;
+  transform: rotate(180deg);
+  transition: transform var(--transition-fast);
+}
+
+.reasoning-block.is-collapsed .reasoning-toggle-icon {
+  transform: rotate(0deg);
 }
 
 .reasoning-content {
-  margin-top: 8px;
+  color: var(--999999, #999);
-  color: var(--slate-600);
+  font-family: "Microsoft YaHei";
-  font-size: 13px;
+  font-size: 14px;
-  line-height: 1.6;
+  font-style: normal;
-  padding-top: 4px;
+  font-weight: 400;
-  border-top: 1px solid var(--slate-100); /* 内部细线分隔 */
+  line-height: 21px;
-  font-family: var(--font-family-monospace); /* 使用等宽字体或更加技术感的字体 */
 }
 
 /* ==================== 输入指示器动画 ==================== */

css/history_detail/03-components/chatbot/message-actions.css

@@ -159,19 +159,19 @@
     background: none;
     border: none;
     cursor: pointer;
-    padding: 2px 6px;
+    padding: 0;
-    color: #64748b;
+    display: inline-flex;
-    font-size: 15px;
+    align-items: center;
-    transition: all var(--transition-fast) ease;
+    justify-content: center;
+    transition: opacity var(--transition-fast) ease;
 }
 
 .reasoning-toggle-btn:hover {
-    color: #475569;
+    opacity: 0.8;
-    transform: scale(1.1);
 }
 
 .reasoning-toggle-btn:active {
-    transform: scale(0.95);
+    opacity: 0.65;
 }
 
 /* ==================== 9. 思维导图打开按钮 ==================== */

js/chatbot/ui/chatbot-message-renderer.js

@@ -310,6 +310,7 @@ window.ChatbotMessageRenderer = {
     if (m.reasoningContent) {
       const reasoningId = `reasoning-block-${index}`;
       const collapsed = window[`reasoningCollapsed_${index}`] === true;
+      const collapsedClass = collapsed ? ' is-collapsed' : '';
       let renderedReasoningContent = '';
       try {
         if (typeof renderWithKatexStreaming === 'function') {
@@ -324,13 +325,17 @@ window.ChatbotMessageRenderer = {
       // Phase 3: 思考过程折叠按钮事件委托
       if (USE_EVENT_DELEGATION) {
         reasoningBlock = `
-          <div id="${reasoningId}" class="reasoning-block">
+          <div id="${reasoningId}" class="reasoning-block${collapsedClass}">
             <div class="reasoning-header">
               <span class="reasoning-title">思考过程</span>
               <button class="reasoning-toggle-btn"
                       data-action="toggle-reasoning"
-                      data-index="${index}">
+                      data-index="${index}"
-                ${collapsed ? '▼' : '▲'}
+                      aria-label="展开/收起思考过程"
+                      aria-expanded="${collapsed ? 'false' : 'true'}">
+                <svg class="reasoning-toggle-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12 6L8 10L4 6" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
               </button>
             </div>
             <div class="reasoning-content" style="${collapsed ? 'display:none;' : ''}">
@@ -341,11 +346,13 @@ window.ChatbotMessageRenderer = {
       } else {
         // 旧版本：内联事件
         reasoningBlock = `
-          <div id="${reasoningId}" class="reasoning-block">
+          <div id="${reasoningId}" class="reasoning-block${collapsedClass}">
             <div class="reasoning-header">
               <span class="reasoning-title">思考过程</span>
               <button class="reasoning-toggle-btn" onclick="(function(){window['reasoningCollapsed_${index}']=!window['reasoningCollapsed_${index}'];window.ChatbotUI.updateChatbotUI();})()">
-                ${collapsed ? '▼' : '▲'}
+                <svg class="reasoning-toggle-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12 6L8 10L4 6" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
               </button>
             </div>
             <div class="reasoning-content" style="${collapsed ? 'display:none;' : ''}">