/* ========== 全站滚动条外观美化 ========== */

/* 默认隐藏滚动条（但保留滚动功能） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

/* 滚动条轨道（背景部分） */
::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: rgba(162, 136, 93, 0.4); /* 金色调 */
  border-radius: 4px;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  opacity: 0; /* 默认隐藏 */
}

/* 当用户滚动时（通过 hover 或 active 模拟“滚动中”） */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  opacity: 1;
  background: rgba(162, 136, 93, 0.65);
}

/* 暗色模式自动调亮 */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: rgba(216, 201, 167, 0.4);
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: rgba(216, 201, 167, 0.65);
  }
}

/* Firefox 支持（隐藏但保留滚动） */
html, body {
  scrollbar-width: thin;
  scrollbar-color: rgba(162, 136, 93, 0.45) transparent;
}

/* Windows 下也使用 Overlay 式滚动条（不推挤内容） */
:body {
  scrollbar-gutter: stable overlay;
  overflow-y: overlay; /* 让滚动条悬浮，不占位 */
}