/* 根容器 */
.custom-scrollbar {
  scrollbar-gutter: stable both-edges;
  border-radius: 4px; /* Mantine 默认圆角 */
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin; /* 细滚动条 */
  scrollbar-color: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4))
    transparent;
  scroll-behavior: smooth;
  border-radius: 4px; /* Mantine 默认圆角 */
}

/* Webkit 滚动条（Chrome / Edge / Safari） */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px; /* Mantine 默认宽度 */
  height: 8px;
  border-radius: 4px; /* Mantine 默认圆角 */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent; /* Mantine 无轨道背景 */
  border-radius: 4px; /* Mantine 默认圆角 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25); /* Mantine 默认 thumb 颜色 */
  border-radius: 4px; /* Mantine 默认圆角 */
  transition: background-color 150ms ease;
  border-radius: 4px; /* Mantine 默认圆角 */
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.35); /* hover 时更深 */
  border-radius: 4px; /* Mantine 默认圆角 */
}

/* Active（按住拖动） */
.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
  border-radius: 4px; /* Mantine 默认圆角 */
}

/* Hover 效果（Firefox） */
.custom-scrollbar:hover {
  scrollbar-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.3))
    transparent;
  scroll-behavior: smooth;
  border-radius: 4px; /* Mantine 默认圆角 */
}

/**
 * 支持垂直 + 水平滚动条交汇区域（ScrollArea 的 corner）
 */
.custom-scrollbar-corner {
  background-color: transparent;
  border-radius: 4px; /* Mantine 默认圆角 */
}