diff --git a/src/App.css b/src/App.css
index ba3f3ec8..de06d181 100644
--- a/src/App.css
+++ b/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 {