diff --git a/src/main/presenter/knowledgePresenter/knowledgeStorePresenter.ts b/src/main/presenter/knowledgePresenter/knowledgeStorePresenter.ts
index f7a775aba..8e59aeef9 100644
--- a/src/main/presenter/knowledgePresenter/knowledgeStorePresenter.ts
+++ b/src/main/presenter/knowledgePresenter/knowledgeStorePresenter.ts
@@ -75,9 +75,11 @@ export class KnowledgeStorePresenter {
         }
       } as KnowledgeFileMessage
 
-      fileId
-        ? await this.vectorP.updateFile(fileMessage)
-        : await this.vectorP.insertFile(fileMessage)
+      if (fileId) {
+        await this.vectorP.updateFile(fileMessage)
+      } else {
+        await this.vectorP.insertFile(fileMessage)
+      }
 
       this.processFileAsync(fileMessage)
 
diff --git a/src/renderer/src/assets/style.css b/src/renderer/src/assets/style.css
index 7d3383194..8136a0241 100644
--- a/src/renderer/src/assets/style.css
+++ b/src/renderer/src/assets/style.css
@@ -276,11 +276,13 @@
   }
 
   * {
-    @apply border-border outline-ring/50;
+    border-color: var(--border);
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
   }
 
   body {
-    @apply bg-background text-foreground;
+    background-color: var(--background);
+    color: var(--foreground);
     font-weight: var(--text-weight);
   }
 
diff --git a/src/renderer/src/components/message/MessageBlockThink.vue b/src/renderer/src/components/message/MessageBlockThink.vue
index 62fa512d8..fa6533cdd 100644
--- a/src/renderer/src/components/message/MessageBlockThink.vue
+++ b/src/renderer/src/components/message/MessageBlockThink.vue
@@ -1,50 +1,20 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
-  <div
-    class="text-xs text-secondary-foreground bg-muted rounded-lg border border-input flex flex-col gap-2 px-2 py-2"
-  >
-    <div class="flex flex-row gap-2 items-center cursor-pointer" @click="collapse = !collapse">
-      <Button variant="ghost" size="icon" class="w-4 h-4 text-muted-foreground">
-        <Icon icon="lucide:chevrons-up-down" class="w-4 h-4" />
-      </Button>
-      <span class="grow"
-        >{{
-          block.status === 'loading'
-            ? t('chat.features.deepThinkingProgress')
-            : t('chat.features.deepThinking')
-        }}
-        <span>{{
-          reasoningDuration > 0 ? t('chat.features.thinkingDuration', [reasoningDuration]) : ''
-        }}</span>
-      </span>
-    </div>
-    <div
-      v-show="!collapse"
-      ref="messageBlock"
-      class="w-full relative prose prose-sm dark:prose-invert max-w-full leading-7 break-all"
-    >
-      <NodeRenderer
-        :renderCodeBlocksAsPre="true"
-        :content="props.block.content || ''"
-      ></NodeRenderer>
-    </div>
-
-    <Icon
-      v-if="block.status === 'loading'"
-      icon="lucide:loader-circle"
-      class="w-4 h-4 text-muted-foreground animate-spin"
-    />
-  </div>
+  <ThinkContent
+    :label="headerText"
+    :expanded="!collapse"
+    :thinking="block.status === 'loading'"
+    :content-html="renderedContent"
+    @toggle="collapse = !collapse"
+  />
 </template>
 
 <script setup lang="ts">
-import { Button } from '@shadcn/components/ui/button'
+import { useI18n } from 'vue-i18n'
+import { ThinkContent } from '@/components/think-content'
+import { computed, onMounted, ref, watch } from 'vue'
 import { usePresenter } from '@/composables/usePresenter'
-import { Icon } from '@iconify/vue'
+import { renderMarkdown, getCommonMarkdown } from 'vue-renderer-markdown'
 import { AssistantMessageBlock } from '@shared/chat'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import NodeRenderer from 'vue-renderer-markdown'
 const props = defineProps<{
   block: AssistantMessageBlock
   usage: {
@@ -56,10 +26,9 @@ const { t } = useI18n()
 
 const configPresenter = usePresenter('configPresenter')
 
-const messageBlock = ref<HTMLDivElement | null>(null)
+// kept for potential future scroll anchoring; currently unused
 
 const collapse = ref(false)
-
 const reasoningDuration = computed(() => {
   let duration: number
   if (props.block.reasoning_time) {
@@ -71,6 +40,19 @@ const reasoningDuration = computed(() => {
   return parseFloat(duration.toFixed(2))
 })
 
+const md = getCommonMarkdown()
+const renderedContent = computed(() => {
+  return renderMarkdown(md, props.block.content || '')
+})
+
+const headerText = computed(() => {
+  // Format: "Thought for 20s" (localized)
+  const seconds = Math.max(0, Math.floor(reasoningDuration.value))
+  return props.block.status === 'loading'
+    ? t('chat.features.thoughtForSecondsLoading', { seconds })
+    : t('chat.features.thoughtForSeconds', { seconds })
+})
+
 watch(
   () => collapse.value,
   () => {
diff --git a/src/renderer/src/components/message/MessageItemAssistant.vue b/src/renderer/src/components/message/MessageItemAssistant.vue
index 8c7fd02d6..197867ec5 100644
--- a/src/renderer/src/components/message/MessageItemAssistant.vue
+++ b/src/renderer/src/components/message/MessageItemAssistant.vue
@@ -295,10 +295,14 @@ const handleAction = (action: HandleActionType) => {
   } else if (action === 'prev' || action === 'next') {
     switch (action) {
       case 'prev':
-        currentVariantIndex.value > 0 && currentVariantIndex.value--
+        if (currentVariantIndex.value > 0) {
+          currentVariantIndex.value--
+        }
         break
       case 'next':
-        currentVariantIndex.value < totalVariants.value - 1 && currentVariantIndex.value++
+        if (currentVariantIndex.value < totalVariants.value - 1) {
+          currentVariantIndex.value++
+        }
         break
     }
 
diff --git a/src/renderer/src/components/settings/ShortcutSettings.vue b/src/renderer/src/components/settings/ShortcutSettings.vue
index cafb93e90..5d99bbce4 100644
--- a/src/renderer/src/components/settings/ShortcutSettings.vue
+++ b/src/renderer/src/components/settings/ShortcutSettings.vue
@@ -13,7 +13,7 @@
         </Button>
       </div>
     </div>
-    <ScrollArea class="px-4 flex-1 w-full h-full">
+    <ScrollArea class="px-4 flex-1 w-full h-full pb-8">
       <div class="w-full h-full flex flex-col gap-1.5">
         <!-- 快捷键列表 -->
         <div class="flex flex-col gap-2">
@@ -31,7 +31,7 @@
               <div class="relative w-full group">
                 <Button
                   variant="outline"
-                  class="h-10 min-w-[200px] justify-end relative px-2"
+                  class="h-10 min-w-[140px] justify-end relative px-2"
                   :class="{
                     'ring-2 ring-primary': recordingShortcutId === shortcut.id && !shortcutError,
                     'ring-2 ring-destructive': recordingShortcutId === shortcut.id && shortcutError
@@ -444,25 +444,30 @@ const clearShortcut = async (shortcutId: string) => {
 <style scoped>
 .tw-keycap {
   display: inline-flex;
-  min-width: 2rem;
-  height: 2rem;
+  min-width: 1.6rem;
+  height: 1.6rem;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem 0.5rem;
+  padding: 0.125rem 0.375rem;
   margin: 0 0.125rem;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  border-radius: 0.3rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
   vertical-align: middle;
   border-width: 1px;
   border-style: solid;
-  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
+  box-shadow:
+    inset 0 -1px 0 rgb(15 23 42 / 0.08),
+    0 1px 2px rgb(15 23 42 / 0.06);
   transition:
     color 150ms ease,
     background-color 150ms ease,
     border-color 150ms ease;
   user-select: none;
-  background-color: hsl(var(--background));
+  background-color: hsl(var(--muted));
   border-color: hsl(var(--border));
+  color: hsl(var(--foreground));
 }
 </style>
diff --git a/src/renderer/src/components/think-content/ThinkContent.vue b/src/renderer/src/components/think-content/ThinkContent.vue
new file mode 100644
index 000000000..8aa864b52
--- /dev/null
+++ b/src/renderer/src/components/think-content/ThinkContent.vue
@@ -0,0 +1,75 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div
+    class="text-xs leading-4 text-[rgba(37,37,37,0.5)] dark:text-white/50 flex flex-col gap-[6px]"
+  >
+    <div
+      class="inline-flex items-center gap-[10px] cursor-pointer select-none self-start"
+      @click="$emit('toggle')"
+    >
+      <span class="whitespace-nowrap">{{ label }}</span>
+      <Icon
+        v-if="thinking && !expanded"
+        icon="lucide:ellipsis"
+        class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50 animate-pulse"
+      />
+      <Icon
+        v-else-if="expanded"
+        icon="lucide:chevron-down"
+        class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50"
+      />
+      <Icon
+        v-else
+        icon="lucide:chevron-right"
+        class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50"
+      />
+    </div>
+
+    <div v-show="expanded" class="w-full relative">
+      <div class="think-prose w-full max-w-full mt-[6px]" v-html="contentHtml"></div>
+    </div>
+
+    <Icon
+      v-if="thinking && expanded"
+      icon="lucide:ellipsis"
+      class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50 animate-pulse"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+defineProps<{
+  label: string
+  expanded: boolean
+  thinking: boolean
+  contentHtml?: string
+}>()
+
+defineEmits<{
+  (e: 'toggle'): void
+}>()
+</script>
+
+<style scoped>
+.think-prose :where(p, li, ol, ul) {
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0;
+  color: rgba(37, 37, 37, 0.5);
+}
+.think-prose :where(ol, ul) {
+  padding-left: 1.5em;
+}
+.think-prose :where(p, li, ol, ul) :where(a) {
+  color: rgba(37, 37, 37, 0.6);
+  text-decoration: underline;
+}
+.dark .think-prose :where(p, li, ol, ul) {
+  color: rgba(255, 255, 255, 0.5);
+}
+.dark .think-prose :where(p, li, ol, ul) :where(a) {
+  color: rgba(255, 255, 255, 0.6);
+}
+</style>
diff --git a/src/renderer/src/components/think-content/index.ts b/src/renderer/src/components/think-content/index.ts
new file mode 100644
index 000000000..709bc19b5
--- /dev/null
+++ b/src/renderer/src/components/think-content/index.ts
@@ -0,0 +1 @@
+export { default as ThinkContent } from './ThinkContent.vue'
diff --git a/src/renderer/src/i18n/en-US/chat.json b/src/renderer/src/i18n/en-US/chat.json
index 45a531a58..ffd723070 100644
--- a/src/renderer/src/i18n/en-US/chat.json
+++ b/src/renderer/src/i18n/en-US/chat.json
@@ -19,10 +19,9 @@
     "rateLimitWaitingTooltip": "Wait {seconds}s more, {interval}s interval"
   },
   "features": {
-    "deepThinking": "Deep Thinking",
     "webSearch": "Web Search",
-    "deepThinkingProgress": "Deep Thinking in progress...",
-    "thinkingDuration": "(Took {0} seconds)",
+    "thoughtForSeconds": "Thought for {seconds}s",
+    "thoughtForSecondsLoading": "Thinking for {seconds}s...",
     "artifactThinking": "Artifact Thinking"
   },
   "search": {
diff --git a/src/renderer/src/i18n/fa-IR/chat.json b/src/renderer/src/i18n/fa-IR/chat.json
index 475f0ae3c..34c674b70 100644
--- a/src/renderer/src/i18n/fa-IR/chat.json
+++ b/src/renderer/src/i18n/fa-IR/chat.json
@@ -19,11 +19,10 @@
     "rateLimitWaitingTooltip": "باید {seconds} ثانیه دیگر منتظر بمانید، فاصله {interval} ثانیه"
   },
   "features": {
-    "deepThinking": "تفکر عمیق",
     "webSearch": "جستجوی وب",
-    "deepThinkingProgress": "در حال تفکر عمیق...",
-    "thinkingDuration": "({0} ثانیه طول کشید)",
-    "artifactThinking": "تفکر مصنوعی"
+    "artifactThinking": "تفکر مصنوعی",
+    "thoughtForSeconds": "تفکر به مدت {seconds} ثانیه",
+    "thoughtForSecondsLoading": "در حال تفکر ({seconds} ثانیه)"
   },
   "search": {
     "results": "{0} صفحه وب یافت شد",
diff --git a/src/renderer/src/i18n/fr-FR/chat.json b/src/renderer/src/i18n/fr-FR/chat.json
index a84b59549..e57806bf0 100644
--- a/src/renderer/src/i18n/fr-FR/chat.json
+++ b/src/renderer/src/i18n/fr-FR/chat.json
@@ -19,11 +19,10 @@
     "rateLimitWaitingTooltip": "Attendre encore {seconds} secondes, intervalle {interval} secondes"
   },
   "features": {
-    "deepThinking": "Réflexion approfondie",
     "webSearch": "Recherche web",
-    "deepThinkingProgress": "Réflexion approfondie en cours...",
-    "thinkingDuration": "(A pris {0} secondes)",
-    "artifactThinking": "Réflexion sur les artefacts"
+    "artifactThinking": "Réflexion sur les artefacts",
+    "thoughtForSeconds": "Réflexion pendant {seconds}s",
+    "thoughtForSecondsLoading": "Réflexion en cours ({seconds}s)"
   },
   "search": {
     "results": "{0} pages web trouvées",
diff --git a/src/renderer/src/i18n/ja-JP/chat.json b/src/renderer/src/i18n/ja-JP/chat.json
index 9e5807348..2ef90ddba 100644
--- a/src/renderer/src/i18n/ja-JP/chat.json
+++ b/src/renderer/src/i18n/ja-JP/chat.json
@@ -19,11 +19,10 @@
     "rateLimitWaitingTooltip": "あと{seconds}秒待機、間隔{interval}秒"
   },
   "features": {
-    "deepThinking": "深い思考",
     "webSearch": "ウェブ検索",
-    "deepThinkingProgress": "深い思考中...",
-    "thinkingDuration": "({0}秒かかりました)",
-    "artifactThinking": "アーティファクト思考"
+    "artifactThinking": "アーティファクト思考",
+    "thoughtForSeconds": "{seconds}秒間思考しました",
+    "thoughtForSecondsLoading": "{seconds}秒間思考中..."
   },
   "search": {
     "results": "{0}件のウェブページが見つかりました",
diff --git a/src/renderer/src/i18n/ko-KR/chat.json b/src/renderer/src/i18n/ko-KR/chat.json
index 9c5b8d389..bd80bc80c 100644
--- a/src/renderer/src/i18n/ko-KR/chat.json
+++ b/src/renderer/src/i18n/ko-KR/chat.json
@@ -19,11 +19,10 @@
     "rateLimitWaitingTooltip": "{seconds}초 더 대기, 간격 {interval}초"
   },
   "features": {
-    "deepThinking": "심층 사고",
     "webSearch": "웹 검색",
-    "deepThinkingProgress": "심층 사고 진행 중...",
-    "thinkingDuration": "({0}초 소요)",
-    "artifactThinking": "아티팩트 추론"
+    "artifactThinking": "아티팩트 추론",
+    "thoughtForSeconds": "{seconds}초 동안 생각했습니다",
+    "thoughtForSecondsLoading": "{seconds}초째 생각 중..."
   },
   "search": {
     "results": "{0}개의 웹 페이지를 찾았습니다",
diff --git a/src/renderer/src/i18n/ru-RU/chat.json b/src/renderer/src/i18n/ru-RU/chat.json
index a88492158..66e65b93f 100644
--- a/src/renderer/src/i18n/ru-RU/chat.json
+++ b/src/renderer/src/i18n/ru-RU/chat.json
@@ -19,11 +19,10 @@
     "rateLimitWaitingTooltip": "Ещё {seconds} секунд ожидания, интервал {interval} секунд"
   },
   "features": {
-    "deepThinking": "Глубокое мышление",
     "webSearch": "Поиск в интернете",
-    "deepThinkingProgress": "Глубокое мышление...",
-    "thinkingDuration": "(Заняло {0} секунд)",
-    "artifactThinking": "Артефакт мышление"
+    "artifactThinking": "Артефакт мышление",
+    "thoughtForSeconds": "Мышление {seconds} секунд",
+    "thoughtForSecondsLoading": "Мышление ({seconds} секунд)"
   },
   "search": {
     "results": "Найдено {0} веб-страниц",
diff --git a/src/renderer/src/i18n/zh-CN/chat.json b/src/renderer/src/i18n/zh-CN/chat.json
index 669ab539d..6ec8b5b07 100644
--- a/src/renderer/src/i18n/zh-CN/chat.json
+++ b/src/renderer/src/i18n/zh-CN/chat.json
@@ -19,10 +19,9 @@
     "rateLimitWaitingTooltip": "还需等待 {seconds} 秒，间隔 {interval} 秒"
   },
   "features": {
-    "deepThinking": "深度思考",
     "webSearch": "联网搜索",
-    "deepThinkingProgress": "深度思考中...",
-    "thinkingDuration": "（用时 {0} 秒）",
+    "thoughtForSeconds": "思考了 {seconds} 秒",
+    "thoughtForSecondsLoading": "正在思考（第 {seconds} 秒）",
     "artifactThinking": "artifact 思考"
   },
   "search": {
diff --git a/src/renderer/src/i18n/zh-HK/chat.json b/src/renderer/src/i18n/zh-HK/chat.json
index 760828935..e8b218c03 100644
--- a/src/renderer/src/i18n/zh-HK/chat.json
+++ b/src/renderer/src/i18n/zh-HK/chat.json
@@ -19,11 +19,10 @@
     "rateLimitWaitingTooltip": "還需等待 {seconds} 秒，間隔 {interval} 秒"
   },
   "features": {
-    "deepThinking": "深度思考",
     "webSearch": "網絡搜索",
-    "deepThinkingProgress": "深度思考中...",
-    "thinkingDuration": "（用時 {0} 秒）",
-    "artifactThinking": "artifact 思考"
+    "artifactThinking": "artifact 思考",
+    "thoughtForSeconds": "思考了 {seconds} 秒",
+    "thoughtForSecondsLoading": "正在思考（第 {seconds} 秒）"
   },
   "search": {
     "results": "已搜索到{0}個網頁",
diff --git a/src/renderer/src/i18n/zh-TW/chat.json b/src/renderer/src/i18n/zh-TW/chat.json
index 903aabe18..df5bb4bd8 100644
--- a/src/renderer/src/i18n/zh-TW/chat.json
+++ b/src/renderer/src/i18n/zh-TW/chat.json
@@ -19,11 +19,10 @@
     "rateLimitWaitingTooltip": "還需等待 {seconds} 秒，間隔 {interval} 秒"
   },
   "features": {
-    "deepThinking": "深度思考",
     "webSearch": "網路搜尋",
-    "deepThinkingProgress": "深度思考中...",
-    "thinkingDuration": "（耗時 {0} 秒）",
-    "artifactThinking": "Artifact 思考"
+    "artifactThinking": "Artifact 思考",
+    "thoughtForSeconds": "思考了 {seconds} 秒",
+    "thoughtForSecondsLoading": "正在思考（第 {seconds} 秒）"
   },
   "search": {
     "results": "已搜尋到 {0} 個網頁",
diff --git a/src/renderer/src/views/PlaygroundTabView.vue b/src/renderer/src/views/PlaygroundTabView.vue
index 06d4192d5..0c18eca4b 100644
--- a/src/renderer/src/views/PlaygroundTabView.vue
+++ b/src/renderer/src/views/PlaygroundTabView.vue
@@ -42,6 +42,7 @@ import DialogDemo from './playground/demos/DialogDemo.vue'
 import TabsDemo from './playground/demos/TabsDemo.vue'
 import AccordionDemo from './playground/demos/AccordionDemo.vue'
 import FormDemo from './playground/demos/FormDemo.vue'
+import ThinkContentDemo from './playground/demos/ThinkContentDemo.vue'
 import CardDemo from './playground/demos/CardDemo.vue'
 import SelectDemo from './playground/demos/SelectDemo.vue'
 
@@ -112,6 +113,12 @@ const sections = computed(() => [
         description: 'Card layout with header, content, and footer.',
         componentName: '@shadcn/components/ui/card',
         render: CardDemo
+      },
+      {
+        title: 'Think Content',
+        description: 'Collapsible reasoning block used for model thoughts.',
+        componentName: '@/components/think-content',
+        render: ThinkContentDemo
       }
     ]
   },
diff --git a/src/renderer/src/views/playground/demos/ThinkContentDemo.vue b/src/renderer/src/views/playground/demos/ThinkContentDemo.vue
new file mode 100644
index 000000000..7acd5a0c5
--- /dev/null
+++ b/src/renderer/src/views/playground/demos/ThinkContentDemo.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center gap-2">
+      <Button size="sm" @click="expanded = !expanded">
+        {{ expanded ? 'Collapse' : 'Expand' }}
+      </Button>
+      <Button size="sm" variant="outline" @click="toggleThinking">
+        {{ thinking ? 'Stop thinking' : 'Simulate thinking' }}
+      </Button>
+      <Button size="sm" variant="ghost" @click="reset"> Reset </Button>
+    </div>
+
+    <ThinkContent
+      :label="label"
+      :expanded="expanded"
+      :thinking="thinking"
+      :content-html="contentHtml"
+      @toggle="expanded = !expanded"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { Button } from '@shadcn/components/ui/button'
+import { ThinkContent } from '@/components/think-content'
+
+const expanded = ref(true)
+const thinking = ref(false)
+const seconds = ref(12)
+const contentHtml = `
+  <p class="mb-2">Example reasoning output:</p>
+  <ol class="list-decimal list-inside space-y-1">
+    <li>Review the request.</li>
+    <li>Break it into actionable steps.</li>
+    <li>Draft a response and refine.</li>
+  </ol>
+`
+let timer: number | undefined
+
+const label = computed(() =>
+  thinking.value ? `Thinking for ${seconds.value}s...` : `Thought for ${seconds.value}s`
+)
+
+const stopTimer = () => {
+  if (timer !== undefined) {
+    window.clearInterval(timer)
+    timer = undefined
+  }
+}
+
+const toggleThinking = () => {
+  thinking.value = !thinking.value
+  if (thinking.value) {
+    seconds.value = 0
+    stopTimer()
+    timer = window.setInterval(() => {
+      seconds.value += 1
+    }, 1000)
+  } else {
+    stopTimer()
+  }
+}
+
+const reset = () => {
+  stopTimer()
+  thinking.value = false
+  seconds.value = 12
+  expanded.value = true
+}
+
+onBeforeUnmount(() => {
+  stopTimer()
+})
+</script>
diff --git a/src/types/i18n.d.ts b/src/types/i18n.d.ts
index e3a6ee79e..482bec59a 100644
--- a/src/types/i18n.d.ts
+++ b/src/types/i18n.d.ts
@@ -72,10 +72,9 @@ declare module 'vue-i18n' {
       historyPlaceholder: string
     }
     features: {
-      deepThinking: string
       webSearch: string
-      deepThinkingProgress: string
-      thinkingDuration: string
+      thoughtForSeconds: string
+      thoughtForSecondsLoading: string
       artifactThinking: string
     }
     search: {