v3: chat message list gets a slim scrollbar whose thumb only shows on hover or focus

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/App.css

@@ -3924,10 +3924,38 @@ body.has-player .chat-fab {
      messages — without this, overlay scrollbars overlap the content. The extra
      padding keeps the text clear of the scrollbar rather than right against it. */
   scrollbar-gutter: stable;
+  /* A slim, theme-tinted scrollbar whose thumb stays hidden until the list is
+     hovered or focused, instead of the heavy native bar. */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
-  padding-right: 1rem;
+  padding-right: 0.6rem;
+}
+
+.chat-messages:hover,
+.chat-messages:focus-within {
+  scrollbar-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent)
+    transparent;
+}
+
+.chat-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 999px;
+}
+
+.chat-messages:hover::-webkit-scrollbar-thumb,
+.chat-messages:focus-within::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
 }
 
 .chat-empty {