diff --git a/.gitignore b/.gitignore
index dd3e8e8..678a4da 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,8 @@
 !.vscode/launch.json
 !.vscode/tasks.json
 .idea/
+.cursor
+
 
 # OS
 .DS_Store
diff --git a/src/webview/src/components/ButtonArea.vue b/src/webview/src/components/ButtonArea.vue
index 9d0e182..7f895b9 100644
--- a/src/webview/src/components/ButtonArea.vue
+++ b/src/webview/src/components/ButtonArea.vue
@@ -28,6 +28,7 @@
         <button
           class="action-button think-button"
           :class="{ 'thinking-active': isThinkingOn }"
+          data-responsive="hide-small"
           @click="handleThinkingToggle"
           :aria-label="isThinkingOn ? 'Thinking on' : 'Thinking off'"
           :title="isThinkingOn ? 'Thinking on' : 'Thinking off'"
@@ -51,6 +52,7 @@
           <template #trigger>
             <button
               class="action-button"
+              data-responsive="hide-small"
               aria-label="Slash Commands"
             >
               <span class="codicon codicon-italic text-[16px]!" />
@@ -397,6 +399,8 @@ function handleMentionKeydown(event: KeyboardEvent) {
   flex-shrink: 0;
   cursor: auto;
   width: 100%;
+  container-type: inline-size;
+  container-name: toolbar;
 }
 
 .button-row {
diff --git a/src/webview/src/components/Messages/AssistantMessage.vue b/src/webview/src/components/Messages/AssistantMessage.vue
index a8c7166..5e89e5b 100644
--- a/src/webview/src/components/Messages/AssistantMessage.vue
+++ b/src/webview/src/components/Messages/AssistantMessage.vue
@@ -64,7 +64,7 @@ const messageClasses = computed(() => {
   left: 8px;
   padding-top: 2px;
   font-size: 10px;
-  color: var(--vscode-input-border);
+  color: color-mix(in srgb, var(--vscode-foreground) 60%, transparent);
   z-index: 1;
 }
 </style>
diff --git a/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue b/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue
index 0b4e8a7..339394b 100644
--- a/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue
+++ b/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue
@@ -136,7 +136,7 @@ function toggleExpand() {
 .tool-message-wrapper {
   display: flex;
   flex-direction: column;
-  padding: 0px 8px;
+  padding: 0px;
 }
 
 .main-line {
diff --git a/src/webview/src/components/TokenIndicator.vue b/src/webview/src/components/TokenIndicator.vue
index 07c9c58..2a4d97d 100644
--- a/src/webview/src/components/TokenIndicator.vue
+++ b/src/webview/src/components/TokenIndicator.vue
@@ -3,7 +3,7 @@
     class="progress-container"
     :style="containerStyle"
   >
-    <span class="progress-text">{{ formattedPercentage }}</span>
+    <span class="progress-text" data-responsive="hide-small">{{ formattedPercentage }}</span>
     <div class="progress-circle">
       <svg width="14" height="14" class="progress-svg">
         <circle
diff --git a/src/webview/src/styles/claude-theme.css b/src/webview/src/styles/claude-theme.css
index d599da7..4912c82 100644
--- a/src/webview/src/styles/claude-theme.css
+++ b/src/webview/src/styles/claude-theme.css
@@ -74,6 +74,12 @@ html {
   --app-link-color: var(--vscode-textLink-foreground);
 }
 
+/* Reset body */
+body {
+  margin: 0;
+  padding: 0;
+}
+
 /* Light 主题调整 */
 .vscode-light {
   --app-transparent-inner-border: rgba(0, 0, 0, 0.07);
@@ -506,6 +512,13 @@ html {
   gap: 4px;
 }
 
+/* 工具栏容器查询：宽度 ≤ 340px 时隐藏标记为 hide-small 的元素 */
+@container toolbar (max-width: 340px) {
+  [data-responsive="hide-small"] {
+    display: none !important;
+  }
+}
+
 
 /* 文件图标特殊样式 */
 .show-file-icons {