diff --git a/UI-DESIGN.md b/UI-DESIGN.md
index 58848db3..6eac934f 100644
--- a/UI-DESIGN.md
+++ b/UI-DESIGN.md
@@ -163,7 +163,7 @@
 - 页面顶部和底部内边距默认为 `32px`。
 - `master-detail` 的左栏建议为 `280px` 至 `360px`，右栏占剩余空间。分隔线和滚动容器属于壳层，不由内容卡片模拟。
 - 聊天输入区可以粘附在 `reading` 壳层底部，但消息内容和输入区必须共享同一阅读宽度。
-- 输入区外层不铺整块背景、不画横向分隔线。输入框上方保留 `--space-6`（24px）的透明到页面底色渐变，渐变终点对齐输入框上缘，让滚动的消息在输入框轮廓前自然淡出；渐变位于输入框之下、不拦截鼠标事件，并随主题切换。输入框上缘只保留自身 1px 描边，不加向上的阴影，避免与渐变终点叠成粗边界。
+- 输入区外层不铺整块背景、不画横向分隔线。输入区以上内边距的高度向上叠入消息区，输入框上方保留 `--space-4`（16px）的透明到页面底色渐变，渐变终点对齐输入框上缘，让滚动的消息一直延伸到输入框轮廓前再淡出；输入框上缘以下才使用实色底；渐变位于输入框之下、不拦截鼠标事件，并随主题切换。输入框上缘只保留自身 1px 描边，不加向上的阴影，避免与渐变终点叠成粗边界。
 - 宽表格可在 `dashboard` 内容区内部横向滚动，不得撑宽整个应用窗口。
 
 ## 5. 信息层级
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index ddb26faf..6421ba5f 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -6483,7 +6483,7 @@ button > svg {
 .chat-scroll-to-bottom {
   position: absolute;
   z-index: 2;
-  bottom: var(--space-3);
+  bottom: var(--space-6);
   left: 50%;
   display: grid;
   width: 40px;
@@ -7913,10 +7913,18 @@ button > svg {
   width: 100%;
   max-width: 100%;
   min-width: 0;
+  /* Overlap the message region by the top padding so messages run under the
+     fade right up to the composer outline instead of stopping at a solid band. */
+  margin-top: calc(-1 * var(--space-3));
   padding:
     var(--space-3)
     var(--chat-inline-padding)
     var(--space-2);
+  pointer-events: none;
+}
+
+.composer-wrap > * {
+  pointer-events: auto;
 }
 
 .composer-wrap::before {
@@ -7925,17 +7933,32 @@ button > svg {
   bottom: calc(100% - var(--space-3));
   left: 0;
   z-index: -1;
-  height: var(--space-6);
+  height: var(--space-4);
   background: linear-gradient(
     to bottom,
     transparent,
-    color-mix(in srgb, var(--composer-fade-color) 72%, transparent) 55%,
+    color-mix(in srgb, var(--composer-fade-color) 55%, transparent) 35%,
+    color-mix(in srgb, var(--composer-fade-color) 90%, transparent) 70%,
     var(--composer-fade-color)
   );
   content: "";
   pointer-events: none;
 }
 
+/* Below the composer the wrap stays opaque so nothing shows through its
+   bottom padding and metadata row. */
+.composer-wrap::after {
+  position: absolute;
+  top: var(--space-3);
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  background: var(--composer-fade-color);
+  content: "";
+  pointer-events: none;
+}
+
 .composer {
   width: 100%;
   max-width: 100%;
@@ -17773,7 +17796,6 @@ textarea.field-control {
   .settings-page,
   .workspace,
   .chat,
-  .composer-wrap,
   .workspace-panel-scroll
 ) {
   background: var(--surface-canvas);