/* ============================================================
 * 滚动条:由站点统一定制,替换浏览器与系统默认滚动条。
 * - 浅色 / 深色跟随 html[data-theme];
 * - 电脑宽屏、窄屏窗口与触屏使用不同粗细;
 * - WebKit/Blink 用 ::-webkit-scrollbar 绘制内缩圆角滑块,
 *   Firefox 只用标准 scrollbar-width / scrollbar-color。
 *   标准属性仅在浏览器不支持 ::-webkit-scrollbar 时启用,
 *   否则 Chrome 会忽略下面的圆角滑块样式。
 * - 滚动条不受容器 border-radius 裁切,滑块轨道两端需留出
 *   角部内缩,避免滑块末端从圆角弹窗/卡片上探出。
 * ============================================================ */

:root {
  --oe-scrollbar-size: 12px;
  --oe-scrollbar-gap: 3px;
  --oe-scrollbar-inset: 14px;
  --oe-scrollbar-thumb: rgba(39, 104, 70, 0.52);
  --oe-scrollbar-thumb-hover: rgba(39, 104, 70, 0.68);
  --oe-scrollbar-thumb-active: rgba(39, 104, 70, 0.84);
  --oe-scrollbar-track: transparent;
}

html[data-theme="dark"] {
  --oe-scrollbar-thumb: rgba(160, 205, 162, 0.34);
  --oe-scrollbar-thumb-hover: rgba(160, 205, 162, 0.5);
  --oe-scrollbar-thumb-active: rgba(160, 205, 162, 0.66);
}

/* ---------- WebKit / Blink(Chrome、Edge、Safari) ---------- */
*::-webkit-scrollbar {
  width: var(--oe-scrollbar-size);
  height: var(--oe-scrollbar-size);
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: var(--oe-scrollbar-track);
}
*::-webkit-scrollbar-button {
  display: none;
}
*::-webkit-scrollbar-thumb {
  border: var(--oe-scrollbar-gap) solid transparent;
  border-radius: 999px;
  background-color: var(--oe-scrollbar-thumb);
  background-clip: padding-box;
  transition: background-color 0.16s ease-out;
}
@media (hover: hover) {
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--oe-scrollbar-thumb-hover);
  }
}
*::-webkit-scrollbar-thumb:active {
  background-color: var(--oe-scrollbar-thumb-active);
}

/* 圆角容器保护:滚动条画在滚动容器的边角上,不会随 border-radius
 * 一起裁切。把轨道两端沿滚动方向内缩一圈,滑块就始终落在圆角以内,
 * 弹窗、卡片和下拉菜单的角上不会再出现探出的滑块末端。
 * 纵向与横向滚动条分别按各自的轴向内缩,避免互相压扁轨道。 */
*::-webkit-scrollbar-track:vertical {
  margin-block: var(--oe-scrollbar-inset);
}
*::-webkit-scrollbar-track:horizontal {
  margin-inline: var(--oe-scrollbar-inset);
}

/* ---------- Firefox 标准属性 ---------- */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--oe-scrollbar-thumb) var(--oe-scrollbar-track);
  }
}

/* ---------- 屏幕适配 ---------- */

/* 窄屏窗口(平板竖屏、分屏、小窗口) */
@media (max-width: 900px) {
  :root {
    --oe-scrollbar-size: 10px;
    --oe-scrollbar-gap: 3px;
  }
}

/* 触屏设备:更细的悬浮胶囊,不遮挡内容 */
@media (pointer: coarse) {
  :root {
    --oe-scrollbar-size: 8px;
    --oe-scrollbar-gap: 2px;
  }
}

/* ---------- 辅助场景 ---------- */
@media (prefers-reduced-motion: reduce) {
  *::-webkit-scrollbar-thumb {
    transition: none;
  }
}
@media (forced-colors: active) {
  *::-webkit-scrollbar-thumb {
    background-color: ButtonText;
  }
  *::-webkit-scrollbar-track {
    background-color: Canvas;
  }
}