Scrollbars: thumb appears on rail-strip hover (no drawn rail), driven by a page script + scrollbar-color; covers chat and raw views.

app.py

@@ -664,18 +664,18 @@ CSS = """
 /* live camera: no record/stop controls — the feed auto-starts (JS below) and
    frames only reach the model while a session is live (backend-gated) */
 #live-cam .button-wrap { display: none !important; }
-/* scrollbars: invisible until the pointer is over the thin scrollbar strip;
-   no track rail, no arrow buttons. (Firefox has no thumb-hover selector, so
-   it falls back to a thin transparent bar revealed on container hover.) */
-@supports not selector(::-webkit-scrollbar) {
-  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
-  *:hover { scrollbar-color: rgba(128, 128, 128, 0.45) transparent; }
-}
-::-webkit-scrollbar { width: 8px; height: 8px; background: transparent !important; }
+/* scrollbars: no rail is drawn; the thumb is invisible until the pointer
+   enters the rail strip at the scrollable edge (.sb-hot, set by the page
+   script) or grabs the thumb itself. scrollbar-color drives modern
+   Chrome/Firefox; the ::-webkit rules cover older WebKit. */
+* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+.sb-hot { scrollbar-color: rgba(128, 128, 128, 0.55) transparent !important; }
+::-webkit-scrollbar { width: 10px; height: 10px; background: transparent !important; }
 ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent !important; }
 ::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
-::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: rgba(128, 128, 128, 0.55) !important; }
+::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; }
+.sb-hot::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: rgba(128, 128, 128, 0.6) !important; }
 """
 
 # Page-load JS: (1) auto-start the live camera preview whenever the camera
@@ -689,6 +689,30 @@ CSS = """
 # the user has scrolled up to read.
 PAGE_JS = """
 () => {
+  if (!window.__mossSbHot) {
+    window.__mossSbHot = true;
+    let hot = null;
+    document.addEventListener('mousemove', (e) => {
+      let el = e.target instanceof Element ? e.target : null;
+      let found = null;
+      while (el && el !== document.documentElement) {
+        const vs = el.scrollHeight > el.clientHeight + 4;
+        const hs = el.scrollWidth > el.clientWidth + 4;
+        const cs = vs || hs ? getComputedStyle(el) : null;
+        if (cs && /(auto|scroll)/.test(cs.overflowY + cs.overflowX)) {
+          const r = el.getBoundingClientRect();
+          if ((vs && r.right - e.clientX <= 18) || (hs && r.bottom - e.clientY <= 18)) found = el;
+          break;
+        }
+        el = el.parentElement;
+      }
+      if (found !== hot) {
+        if (hot) hot.classList.remove('sb-hot');
+        if (found) found.classList.add('sb-hot');
+        hot = found;
+      }
+    }, {passive: true});
+  }
   if (window.__mossCamWatch) return;
   window.__mossCamWatch = setInterval(() => {
     if (!window.__mossRawScroll) {