From 395a9467ec0171b824c9cbb88acf03b80b951152 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sun, 30 Aug 2026 10:03:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=A1=B6?=
 =?UTF-8?q?=E6=A0=8F=E7=95=99=E7=99=BD=E6=8C=AA=E5=88=B0=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=EF=BC=8C=E6=A0=B9=E6=B2=BB=20backdrop-filter?=
 =?UTF-8?q?=20=E6=97=A0=E5=86=85=E5=AE=B9=E5=8F=AF=E6=A8=A1=E7=B3=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- chat-container--mobile 的 padding-top 会把滚动区整体下推（父容器 overflow:hidden），
  fixed 顶栏的三级模糊条带背后只剩纯色背景，移动端模糊失效只剩颜色渐隐层
- 留白改到 .chat-container--mobile .messages-area（52px=44 顶栏+8 间距），
  与桌面端 has-title-ribbon 机制对齐，消息滚动时可进入顶栏背后
- monitor 模式无滚动区，保留容器级留白防面板被顶栏遮盖
- 顺带清理媒体查询外永不生效的 52px 死代码（断点与 isMobileViewport 同源）

Co-authored-by: Astrion powered by Kimi-K3 <astrion-agent@users.noreply.github.com>
---
 .../styles/components/chat/_chat-area.scss    | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index 87dcda5e..32c43c78 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -414,9 +414,24 @@
 
 .chat-container--mobile {
   --chat-rail-fluid: 100%;
+  /* 顶部留白必须放在滚动容器 .messages-area 上（见下），不能放父容器：
+     父容器 overflow:hidden + padding-top 会把滚动区整体下推，fixed 顶栏
+     （.mobile-panel-trigger）的 backdrop-filter 条带背后只剩纯色背景、
+     无消息内容可模糊，移动端模糊因此失效只剩颜色渐隐层（2026-08-30 实测） */
+}
+
+/* 顶栏占位 44px + 原消息区间距 8px；滚动容器自身的 padding-top 允许消息
+   滚动时进入 fixed 顶栏背后区域（与桌面端 .has-title-ribbon 同理），
+   三级渐进模糊条带才有内容可模糊 */
+.chat-container--mobile .messages-area {
   padding-top: 52px;
 }
 
+/* monitor 面板是 flex 文档流子项、无滚动区，保留容器级留白避开 fixed 顶栏 */
+.chat-container--mobile.chat-container--monitor {
+  padding-top: 44px;
+}
+
 .chat-container--mobile.chat-container--app-shell {
   --chat-scrollbar-width: 0px !important;
   --chat-message-rail-width: var(--chat-rail-width) !important;
@@ -429,9 +444,8 @@
     --composer-reserved-height: var(--composer-base-height);
   }
 
-  .chat-container--mobile {
-    padding-top: 44px;
-  }
+  /* .chat-container--mobile 不再设 padding-top：留白已统一挪到滚动容器
+     .messages-area（见上方注释），保证顶栏模糊条带背后有可模糊的消息内容 */
 
   .messages-area {
     padding-top: 8px;