From edf019aaa728f094a433a2601d149d0ec9b28a21 Mon Sep 17 00:00:00 2001
From: mesalogo <pettygay757@gmail.com>
Date: Mon, 5 Oct 2026 21:00:44 +0800
Subject: [PATCH] fix: soften the transition above the chat composer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a theme-aware 16px fade above the composer to soften the clipped message edge without changing layout or pointer interactions. Document the treatment in the UI design system.

Release note: 聊天输入区顶部增加淡渐变，让消息与输入框之间的衔接更自然，并适配浅色和深色主题。
---
 UI-DESIGN.md                |  1 +
 src/renderer/src/styles.css | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/UI-DESIGN.md b/UI-DESIGN.md
index 6dc560e3..09fe1231 100644
--- a/UI-DESIGN.md
+++ b/UI-DESIGN.md
@@ -163,6 +163,7 @@
 - 页面顶部和底部内边距默认为 `32px`。
 - `master-detail` 的左栏建议为 `280px` 至 `360px`，右栏占剩余空间。分隔线和滚动容器属于壳层，不由内容卡片模拟。
 - 聊天输入区可以粘附在 `reading` 壳层底部，但消息内容和输入区必须共享同一阅读宽度。
+- 输入区顶部向消息区延伸 `--space-4`（16px）的透明到 `--surface-raised` 渐变，柔化消息裁切边缘；渐变不占布局空间、不拦截鼠标事件，并随主题切换。
 - 宽表格可在 `dashboard` 内容区内部横向滚动，不得撑宽整个应用窗口。
 
 ## 5. 信息层级
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index f36e7363..b128aadd 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -7785,6 +7785,7 @@ button > svg {
 }
 
 .composer-wrap {
+  position: relative;
   width: 100%;
   max-width: 100%;
   min-width: 0;
@@ -7795,6 +7796,17 @@ button > svg {
   background: var(--surface-raised);
 }
 
+.composer-wrap::before {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  height: var(--space-4);
+  background: linear-gradient(to bottom, transparent, var(--surface-raised));
+  content: "";
+  pointer-events: none;
+}
+
 .composer {
   width: 100%;
   max-width: 100%;