Update web/src/styles/globals.css

web/src/styles/globals.css

@@ -1,5 +1,3 @@
-/* web/src/styles/globals.css */
-
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -136,7 +134,7 @@
     @apply bg-background text-foreground;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    overflow: hidden; /* 禁用页面滚动：滚动只发生在 panelScroll/chatScroll 内 */
+    overflow: hidden; /* 你这里锁页面滚动没问题：让内部面板各自滚 */
   }
 }
 
@@ -144,7 +142,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);
@@ -193,90 +191,51 @@ 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;
-}
+/* ============================
+   Scroll / Layout hardening
+   ============================ */
 
-/* 固定区：比如顶部栏、标题栏 */
-.colFixed {
-  flex: 0 0 auto;
-}
-
-/* 弹性区：通常里面放 panelScroll/chatScroll */
-.colFlex {
-  flex: 1 1 auto;
+/* 关键：让任何 flex 子项允许变矮，否则 overflow 不生效 */
+.min-h-0 {
   min-height: 0;
-  overflow: hidden;
 }
 
-/* 2) 侧边栏/面板通用滚动容器 */
+/* 你想要的统一滚动容器：可滚动 + 不联动外层 + 有滚动条 */
 .panelScroll {
   overflow-y: auto;
   overflow-x: hidden;
   min-height: 0;
   padding-right: 10px;
 
-  /* 关键：阻断滚动链，避免滚到底把外层一起带着滚 */
-  overscroll-behavior: contain;
-
-  /* iOS/移动端更顺 */
+  /* iOS/trackpad smoother */
   -webkit-overflow-scrolling: touch;
-}
-
-/* 3) Chat 消息区专用滚动容器（建议只让它滚） */
-.chatScroll {
-  overflow-y: auto;
-  overflow-x: hidden;
-  min-height: 0;
 
+  /* 阻断 scroll chaining（非常关键） */
   overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
+
+  /* Firefox scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
 }
 
-/* 4) 统一滚动条样式（Chrome/Safari） */
-.panelScroll::-webkit-scrollbar,
-.chatScroll::-webkit-scrollbar {
+.panelScroll::-webkit-scrollbar {
   width: 10px;
 }
 
-.panelScroll::-webkit-scrollbar-thumb,
-.chatScroll::-webkit-scrollbar-thumb {
+.panelScroll::-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 {
+.panelScroll::-webkit-scrollbar-track {
   background: transparent;
 }
 
-/* Firefox scrollbar */
-.panelScroll,
-.chatScroll {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+/* dark 下的滚动条稍亮一点 */
+.dark .panelScroll {
+  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
 }
 
-/* 5) 可选：强制禁止滚动（排查时很好用） */
-.noScroll {
-  overflow: hidden !important;
+.dark .panelScroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.22);
 }