fix(ui): 顶栏模糊改三级渐进条带，根治新版内核 mask+backdrop-filter 同元素失效

- mask-image 与 backdrop-filter 同元素时模糊被新版浏览器内核静默丢弃（实测确认）
- 桌面 conversation-ribbon / 移动 mobile-panel-topbar 各加 __blur 元素：
  本体 blur(14px) + ::before blur(5px) + ::after blur(1.2px) 三级递减，
  模拟原 mask 渐隐模糊，无可见下边界
- 原 ::after 颜色渐隐层保持不变，盖在最上溶掉条带阶梯感

Co-authored-by: Astrion powered by Kimi-K3 <astrion-agent@users.noreply.github.com>

static/src/App.vue

@@ -128,6 +128,7 @@
           />
 
           <div v-if="titleRibbonVisible" class="conversation-ribbon" ref="titleRibbon">
+            <div class="conversation-ribbon__blur" aria-hidden="true"></div>
             <button
               type="button"
               class="conversation-ribbon__selector"
@@ -592,6 +593,7 @@
         ref="mobilePanelTrigger"
       >
         <div class="mobile-panel-topbar">
+          <div class="mobile-panel-topbar__blur" aria-hidden="true"></div>
           <button
             type="button"
             class="mobile-panel-fab"

static/src/styles/components/chat/_chat-area.scss

@@ -44,6 +44,46 @@
   gap: 12px;
 }
 
+/* 顶栏下方渐进模糊带：mask-image 与 backdrop-filter 写在同一元素上时，
+   新版浏览器内核中模糊会静默失效（2026-08 实测），单元素 mask 渐隐模糊不可用；
+   改用三级强度递减的条带（元素本体 + ::before + ::after）模拟渐进模糊，
+   上方再由 ::after 颜色渐隐层溶掉阶梯感 */
+.conversation-ribbon__blur {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 2px; /* 带 1（最强）：ribbon 底上 8px ~ 底上 2px */
+  height: 6px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  pointer-events: none;
+}
+
+.conversation-ribbon__blur::before,
+.conversation-ribbon__blur::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+/* 带 2（中等）：与带 1 重叠 1px 避免接缝 */
+.conversation-ribbon__blur::before {
+  top: 5px;
+  height: 7px;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+/* 带 3（极轻）：溶掉模糊下边界 */
+.conversation-ribbon__blur::after {
+  top: 11px;
+  height: 6px;
+  backdrop-filter: blur(1.2px);
+  -webkit-backdrop-filter: blur(1.2px);
+}
+
 .conversation-ribbon::after {
   content: '';
   position: absolute;

static/src/styles/components/overlays/_overlays.scss

@@ -1440,6 +1440,46 @@
   height: 44px;
 }
 
+/* 顶栏下方渐进模糊带：mask-image 与 backdrop-filter 写在同一元素上时，
+   新版浏览器内核中模糊会静默失效（2026-08 实测），单元素 mask 渐隐模糊不可用；
+   改用三级强度递减的条带（元素本体 + ::before + ::after）模拟渐进模糊，
+   上方再由 ::after 颜色渐隐层溶掉阶梯感 */
+.mobile-panel-topbar__blur {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 2px; /* 带 1（最强）：顶栏底上 8px ~ 底上 2px */
+  height: 6px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  pointer-events: none;
+}
+
+.mobile-panel-topbar__blur::before,
+.mobile-panel-topbar__blur::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+/* 带 2（中等）：与带 1 重叠 1px 避免接缝 */
+.mobile-panel-topbar__blur::before {
+  top: 5px;
+  height: 7px;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+/* 带 3（极轻）：溶掉模糊下边界 */
+.mobile-panel-topbar__blur::after {
+  top: 11px;
+  height: 6px;
+  backdrop-filter: blur(1.2px);
+  -webkit-backdrop-filter: blur(1.2px);
+}
+
 .mobile-panel-topbar::after {
   content: '';
   position: absolute;