feat: themed scrollbars and chiseled thumbnail chips

- Replace browser scrollbars with slim 6px overlay pills that tint to
  primary on hover (transparent track, Firefox + WebKit).
- Rework the thumbnail badge family: drop the mismatched white ring
  halo for a 1px dark frame + inset top highlight, and swap rounded-
  full pills for rounded-sm chips so the ornaments match the pixel-art
  aesthetic used elsewhere in the app.
- Soften the ActiveHeapCard desert backdrop so the fanned thumbnails
  read on top.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/index.css

@@ -24,22 +24,41 @@
   }
 }
 
-/* Custom scrollbar styles */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+/* Compact themed scrollbars. Track is fully transparent so the bar
+   floats over the panel surface, and the thumb is a slim translucent
+   pill that tints toward the primary on hover. Firefox uses the
+   `scrollbar-*` properties below; Chromium / WebKit uses the
+   `::-webkit-scrollbar*` rules. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(240, 230, 210, 0.18) transparent;
 }
 
-::-webkit-scrollbar-track {
-  @apply bg-surface;
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-surface-offset rounded;
+  background-color: rgba(240, 230, 210, 0.18);
+  border-radius: 9999px;
+  /* Inset border keeps the thumb visually slimmer than the track gutter
+     so it reads as a pill rather than a bar. */
+  border: 1px solid transparent;
+  background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-text-faint;
+  background-color: rgba(232, 150, 90, 0.55); /* primary, soft */
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(232, 150, 90, 0.85);
 }
 
 /* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds