// Native thin scrollbar aligned with the widget, used by chat message lists.
// Imported from app/layout.tsx with the rest of the global styles.

$thumb: #cbd5e1;
$thumb-hover: #94a3b8;

.cs-agent-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: $thumb transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: $thumb;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: $thumb-hover;
    background-clip: padding-box;
  }
}

.dark .cs-agent-scrollbar {
  scrollbar-color: hsl(var(--border)) transparent;

  &::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.45);
    background-clip: padding-box;
  }
}