// 与 widget 对齐的原生细滚动条（会话消息列表等）
// 在 app/layout.tsx 中随其它样式一并引入

$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;
  }
}