/**
 * Theme-aware scrollbar: light thumb on dark theme, dark thumb on light theme.
 * WebKit (Chrome, Safari, Edge) + Firefox scrollbar-color.
 */
html[data-theme="dark"] {
  --scrollbar-thumb: rgba(255, 255, 255, 0.38);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.72);
  --scrollbar-track: transparent;
}

html[data-theme="light"] {
  --scrollbar-thumb: rgba(0, 0, 0, 0.32);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.58);
  --scrollbar-track: transparent;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-corner {
  background: transparent;
}