diff --git a/web/src/components/playground/MessageContent.js b/web/src/components/playground/MessageContent.js
index 6d0e3974..77b10c5a 100644
--- a/web/src/components/playground/MessageContent.js
+++ b/web/src/components/playground/MessageContent.js
@@ -215,7 +215,15 @@ const MessageContent = ({
           >
             {message.isReasoningExpanded && (
               <div className="p-3 sm:p-5 pt-2 sm:pt-4">
-                <div className="bg-white/70 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 shadow-inner overflow-x-auto max-h-50 overflow-y-auto">
+                <div
+                  className="bg-white/70 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 shadow-inner overflow-x-auto overflow-y-auto thinking-content-scroll"
+                  style={{
+                    maxHeight: '200px',
+                    minHeight: '100px',
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: 'rgba(0, 0, 0, 0.3) transparent'
+                  }}
+                >
                   <div className="prose prose-xs sm:prose-sm prose-purple max-w-none text-xs sm:text-sm">
                     <MarkdownRenderer
                       content={finalExtractedThinkingContent}
diff --git a/web/src/index.css b/web/src/index.css
index d362dc0f..eb5c0705 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -74,11 +74,6 @@ body {
     height: 100% !important;
   }
 
-  /* 隐藏在移动设备上 */
-  .hide-on-mobile {
-    display: none !important;
-  }
-
   .semi-table-tbody,
   .semi-table-row,
   .semi-table-row-cell {
@@ -86,10 +81,12 @@ body {
     width: auto !important;
     padding: 2px !important;
   }
+
   .semi-table-row-cell {
     border-bottom: 0 !important;
   }
-  .semi-table-tbody > .semi-table-row {
+
+  .semi-table-tbody>.semi-table-row {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
 }
@@ -217,11 +214,28 @@ code {
   scrollbar-width: none;
 }
 
-/* 调试面板代码样式 */
-.debug-code {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 11px;
-  line-height: 1.4;
+/* 思考内容区域滚动条样式 */
+.thinking-content-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.thinking-content-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.thinking-content-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.thinking-content-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.thinking-content-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 }
 
 /* 调试面板标签样式 */