diff --git a/UI-DESIGN.md b/UI-DESIGN.md
index 09fe1231..58848db3 100644
--- a/UI-DESIGN.md
+++ b/UI-DESIGN.md
@@ -163,7 +163,7 @@
 - 页面顶部和底部内边距默认为 `32px`。
 - `master-detail` 的左栏建议为 `280px` 至 `360px`，右栏占剩余空间。分隔线和滚动容器属于壳层，不由内容卡片模拟。
 - 聊天输入区可以粘附在 `reading` 壳层底部，但消息内容和输入区必须共享同一阅读宽度。
-- 输入区顶部向消息区延伸 `--space-4`（16px）的透明到 `--surface-raised` 渐变，柔化消息裁切边缘；渐变不占布局空间、不拦截鼠标事件，并随主题切换。
+- 输入区外层不铺整块背景、不画横向分隔线。输入框上方保留 `--space-6`（24px）的透明到页面底色渐变，渐变终点对齐输入框上缘，让滚动的消息在输入框轮廓前自然淡出；渐变位于输入框之下、不拦截鼠标事件，并随主题切换。输入框上缘只保留自身 1px 描边，不加向上的阴影，避免与渐变终点叠成粗边界。
 - 宽表格可在 `dashboard` 内容区内部横向滚动，不得撑宽整个应用窗口。
 
 ## 5. 信息层级
diff --git a/src/renderer/src/WorkspacePrimitives.test.tsx b/src/renderer/src/WorkspacePrimitives.test.tsx
index 25e068db..9543f04b 100644
--- a/src/renderer/src/WorkspacePrimitives.test.tsx
+++ b/src/renderer/src/WorkspacePrimitives.test.tsx
@@ -364,7 +364,7 @@ describe('WorkspacePrimitives', () => {
 
   it('wraps native client and compaction actions without overlapping composer metadata', () => {
     expect(stylesheet).toMatch(
-      /\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*background:\s*var\(--surface-raised\);/u
+      /\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*\}/u
     )
     expect(stylesheet).toMatch(
       /\.composer-meta\s*\{[^}]*position:\s*relative;[^}]*min-height:\s*26px;[^}]*margin:\s*var\(--space-1\) 0 0;/u
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index e4c1b6cd..ddb26faf 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -7907,7 +7907,9 @@ button > svg {
 }
 
 .composer-wrap {
+  --composer-fade-color: var(--surface-raised);
   position: relative;
+  z-index: 1;
   width: 100%;
   max-width: 100%;
   min-width: 0;
@@ -7915,16 +7917,21 @@ button > svg {
     var(--space-3)
     var(--chat-inline-padding)
     var(--space-2);
-  background: var(--surface-raised);
 }
 
 .composer-wrap::before {
   position: absolute;
   right: 0;
-  bottom: 100%;
+  bottom: calc(100% - var(--space-3));
   left: 0;
-  height: var(--space-4);
-  background: linear-gradient(to bottom, transparent, var(--surface-raised));
+  z-index: -1;
+  height: var(--space-6);
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    color-mix(in srgb, var(--composer-fade-color) 72%, transparent) 55%,
+    var(--composer-fade-color)
+  );
   content: "";
   pointer-events: none;
 }
@@ -8400,7 +8407,7 @@ button > svg {
 .composer:focus-within {
   border-color: var(--accent);
   box-shadow:
-    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
     var(--shadow-card);
 }
 
@@ -17772,6 +17779,10 @@ textarea.field-control {
   background: var(--surface-canvas);
 }
 
+:root[data-theme='dark'] .composer-wrap {
+  --composer-fade-color: var(--surface-canvas);
+}
+
 :root[data-theme='dark'] :where(
   .sidebar,
   .topbar,