Update web/src/styles/globals.css

web/src/styles/globals.css

@@ -1,3 +1,5 @@
+/* web/src/styles/globals.css */
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -134,7 +136,7 @@
     @apply bg-background text-foreground;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    overflow: hidden; /* 禁用页面滚动，避免左右中面板滚动联动（scroll chaining） */
+    overflow: hidden; /* 禁用页面滚动：滚动只发生在 panelScroll/chatScroll 内 */
   }
 }
 
@@ -142,7 +144,7 @@
  * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
  */
 @layer base {
-  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
     h1 {
       font-size: var(--text-2xl);
       font-weight: var(--font-weight-medium);
@@ -189,4 +191,92 @@
 
 html {
   font-size: var(--font-size);
-}
+}
+
+/* =========================================================
+   ✅ NEW: 分区滚动基础设施（全局统一）
+   ========================================================= */
+
+/* 1) 三列/整体布局骨架：父容器必须 min-height:0 才能允许子元素滚动 */
+.appShell {
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  min-height: 0;
+}
+
+/* 每列容器：自身不滚，只允许内部滚动容器滚 */
+.col {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 固定区：比如顶部栏、标题栏 */
+.colFixed {
+  flex: 0 0 auto;
+}
+
+/* 弹性区：通常里面放 panelScroll/chatScroll */
+.colFlex {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* 2) 侧边栏/面板通用滚动容器 */
+.panelScroll {
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+  padding-right: 10px;
+
+  /* 关键：阻断滚动链，避免滚到底把外层一起带着滚 */
+  overscroll-behavior: contain;
+
+  /* iOS/移动端更顺 */
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 3) Chat 消息区专用滚动容器（建议只让它滚） */
+.chatScroll {
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 4) 统一滚动条样式（Chrome/Safari） */
+.panelScroll::-webkit-scrollbar,
+.chatScroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.panelScroll::-webkit-scrollbar-thumb,
+.chatScroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.18);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.panelScroll::-webkit-scrollbar-track,
+.chatScroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Firefox scrollbar */
+.panelScroll,
+.chatScroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+}
+
+/* 5) 可选：强制禁止滚动（排查时很好用） */
+.noScroll {
+  overflow: hidden !important;
+}