fix(webui): 手势与横向滚动分家 + 纵向滚动边缘淡出

用户给了两条具体信息（这比我自己猜五轮都管用）：
「横向滚动条会与切换视图的手势冲突，我觉得周视图需要卡严条件，
  同时我说的其他硬截断是对应内容项上下滑动会直接被切断」。

## ① 手势卡严（周视图）

冲突是真的：周视图窄屏下必须横向滚（`overflow-auto` + `min-w-[36rem]`），
而我又给整页加了左右滑动翻页 ⇒ 同一次横滑既想滚又想翻，两边都不好用。

规则定死：**手势从可横向滚动的区域里起手，就归滚动条，完全不参与翻页判断**
（触点沿祖先链查找 `overflow-x: auto/scroll` 且真的能滚的容器）。
想翻页就从别处滑（例如上方标题栏）。

## ② 纵向滚动边缘淡出

滚动条本身是"一刀切"：卡片滚到边缘被硬生生截断 —— 这就是用户说的"直接被切断"。
给纵向滚动容器（`.overflow-y-auto`）加 12px 上下渐隐遮罩，切得有交代。

只作用在**纵向**容器：横向滚动有自己的滚动条，加纵向遮罩会跟它打架。

## 过程记录（值得记）

这两条改动**第一次没有生效**，因为部署失败了：`/tmp` 是 tmpfs 且已 100% 满，
而部署脚本把构建产物写到硬编码的 `/tmp/agentmail-gateway-build-*` ⇒
`no space left on device`。我差点把"旧构建上的测量结果"当成"改动无效"。
清理后（清掉我自己的探针脚本/截图/旧构建，约 950MB）部署成功。
⚠️ `/tmp` 现在仍占 91%（`gocache` 4.5G 等不全是我的），**下次部署可能还会撞上**；
脚本改成尊重 `TMPDIR` 才是根治（未做）。

client/harmony/entry/src/main/ets/pages/MainPage.ets

@@ -53,6 +53,8 @@ const INBOX_PAGE_SIZE: number = 50;
 
 @Component
 struct InboxTab {
+  /** 背景是否开启：开着就让出页面底（WebUI 的做法是页面底完全透明） */
+  @Prop bgActive: boolean = false;
   @State mails: MailSummary[] = [];
   /** 按会话折叠后的列表（单封的组平铺渲染） */
   @State groups: SessionGroup[] = [];
@@ -409,7 +411,7 @@ struct InboxTab {
       .backgroundColor(Theme.surface)
     }
     .width('100%').height('100%')
-    .backgroundColor(Theme.pageBg)
+    .backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
   }
 
   /*
@@ -576,6 +578,8 @@ struct InboxTab {
 
 @Component
 struct SentTab {
+  /** 背景是否开启：开着就让出页面底（WebUI 的做法是页面底完全透明） */
+  @Prop bgActive: boolean = false;
   @State groups: SessionGroup[] = [];
   @State expandedKeys: string[] = [];
   @State loading: boolean = false;
@@ -778,7 +782,7 @@ struct SentTab {
       }
     }
     .width('100%').height('100%')
-    .backgroundColor(Theme.pageBg)
+    .backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
   }
 }
 
@@ -797,6 +801,8 @@ struct SentTab {
 
 @Component
 struct PermissionTab {
+  /** 背景是否开启：开着就让出页面底（WebUI 的做法是页面底完全透明） */
+  @Prop bgActive: boolean = false;
   @State requests: PermissionRequest[] = [];
   @State loading: boolean = false;
   @State error: string = '';
@@ -1008,7 +1014,7 @@ struct PermissionTab {
       }
     }
     .width('100%').height('100%')
-    .backgroundColor(Theme.pageBg)
+    .backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
   }
 }
 
@@ -1032,6 +1038,8 @@ struct PermissionTab {
 
 @Component
 struct CommPage {
+  /** 背景开启时，本页与其三个 pane 的页面底都要让出（否则壁纸全被盖住） */
+  @Prop bgActive: boolean = false;
   @State commTab: string = 'inbox';
   @State unreadCount: number = 0;
   @State pendingCount: number = 0;
@@ -1165,11 +1173,11 @@ struct CommPage {
         this.CommTabBar()
 
         if (this.commTab === 'sent') {
-          SentTab()
+          SentTab({ bgActive: this.bgActive })
         } else if (this.commTab === 'permissions') {
-          PermissionTab()
+          PermissionTab({ bgActive: this.bgActive })
         } else {
-          InboxTab()
+          InboxTab({ bgActive: this.bgActive })
         }
       }
       .width('100%').height('100%')
@@ -1188,12 +1196,13 @@ struct CommPage {
         .onClick(() => { this.openCompose(); })
     }
     .width('100%').height('100%')
-    .backgroundColor(Theme.pageBg)
+    .backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
   }
 }
 
 @Component
 struct ContactsTab {
+  @Prop bgActive: boolean = false;
   @State contacts: Contact[] = [];
   @State loading: boolean = false;
   @State error: string = '';
@@ -1298,7 +1307,7 @@ struct ContactsTab {
       }
     }
     .width('100%').height('100%')
-    .backgroundColor(Theme.pageBg)
+    .backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
   }
 
   /**
@@ -1459,6 +1468,15 @@ struct MainPage {
    * 现在补上：预设档画渐变、图片档画图 + 压暗。
    */
   @State bgPlan: BackgroundPlan = new BackgroundPlan();
+  /**
+   * 背景是否开着 —— 传给每个页面，让它们把**页面底**让出来（变成透明）。
+   *
+   * 这是"背景画出来了"这句话的另一半：只把壁纸铺在最底层、而每个页面自己又刷一层
+   * 系统页面底（`Theme.pageBg` 是不透明的），壁纸就**全被盖住**，等于没画。
+   * WebUI 侧对这件事的原话：「页面底 → 完全透明，让出背景；不改 27 个组件的 class，
+   * 逐个加 class 必然漏（漏掉的那块就是一张不透明卡片浮在背景上）」。
+   */
+  @State bgActive: boolean = false;
   @State wallpaperImage: image.PixelMap | null = null;
   private gridSettings: RenderingContextSettings = new RenderingContextSettings(true);
   private gridCtx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.gridSettings);
@@ -1488,6 +1506,7 @@ struct MainPage {
     const snap: AppearanceSnapshot = store.current();
     this.wallpaperImage = store.wallpaper;
     this.bgPlan = resolveBackground(snap.bgKind, snap.bgPresetId, scrimOpacity(snap.bgDim), store.wallpaper !== null);
+    this.bgActive = this.bgPlan.kind !== 'none';
   }
 
   /** 一层渐变的色标：`['色', 位置]` 成对（页面才拼，纯逻辑里只存两个数组） */
@@ -1619,12 +1638,12 @@ struct MainPage {
       this.WallpaperLayer()
       Tabs({ barPosition: BarPosition.End }) {
       TabContent() {
-        CommPage()
+        CommPage({ bgActive: this.bgActive })
       }
       .tabBar(this.TabBarBuilder('通信', '✉️', 0))
 
       TabContent() {
-        ContactsTab()
+        ContactsTab({ bgActive: this.bgActive })
       }
       .tabBar(this.TabBarBuilder('联系人', '👤', 1))
     }