feat(web): greifbarer Rollbalken, Zeitleiste in die Favoriten verlegt (3.1)

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

styles.css

@@ -20,7 +20,20 @@
 #app input,#app textarea,#app [contenteditable=true],#app .selectable,
 #app #np-lyrics-content,#app .lyrics-line,#app .lyrics-plain{-webkit-user-select:text;user-select:text}
 html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden}
-::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:2px}
+/* Rollbalken: 4 px waren zwar unauffaellig, aber mit der Maus kaum zu treffen — in einer langen
+   Playlist kam man nicht ans Ende. Jetzt 12 px Greiffläche mit einem schmalen sichtbaren Balken
+   (durchsichtiger Rand + background-clip), wie bei Spotify. min-height haelt ihn bei sehr langen
+   Listen greifbar, sonst schrumpft er bei 1900 Titeln auf wenige Pixel. */
+::-webkit-scrollbar{width:12px;height:12px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:8px;border:3px solid transparent;background-clip:content-box;min-height:44px}
+::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:content-box}
+::-webkit-scrollbar-thumb:active{background:var(--text2);background-clip:content-box}
+::-webkit-scrollbar-corner{background:transparent}
+/* Firefox kennt die ::-webkit-Regeln nicht. Dort NUR die Farbe setzen — der Standardbalken ist
+   ohnehin breit genug zum Greifen, "thin" wuerde ihn wieder verschmaelern. scrollbar-color wird
+   vererbt; die Ausnahmen (.scroll-row, Lyrics, Chips) setzen weiterhin scrollbar-width:none. */
+html{scrollbar-color:var(--surface2) transparent}
 
 /* ── SETUP ── */
 html.ns-authed #setup-screen{display:none}