/* 基础容器样式 */
.apple-scroll-container {
  overflow: auto;
  overflow: overlay;
  /* scrollbar-gutter: stable; */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */

  /* Firefox 标准属性 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* 默认隐藏 */
  position: relative;
}

.hide-scroll-bar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  will-change: scroll-position;
}

.hide-scroll-bar::-webkit-scrollbar {
  display: none;
}

/* ========== 桌面端样式（宽度 ≥ 768px）========== */
@media (min-width: 768px) {
  .apple-scroll-container {
    /* Firefox：鼠标悬停时显示滚动条 */
    transition: scrollbar-color 0.3s ease;
  }

  .apple-scroll-container:hover,
  .apple-scroll-container:focus-within,
  .apple-scroll-container:active {
    scrollbar-color: rgba(120, 120, 120, 0.4) transparent;
  }

  /* WebKit 内核浏览器样式 (Chrome, Safari, Edge) */
  .apple-scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease, width 0.3s ease;
    transition: opacity 0.3s ease, width 0.3s ease;
    /* 滚动条悬浮在内容上方 */
    position: absolute;
  }

  /* 鼠标交互时显示滚动条 */
  .apple-scroll-container:hover::-webkit-scrollbar,
  .apple-scroll-container:focus-within::-webkit-scrollbar,
  .apple-scroll-container:active::-webkit-scrollbar {
    opacity: 1;
  }

  .apple-scroll-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
    margin: 4px;
  }

  .apple-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.4);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-clip: padding-box;
    min-height: 40px;
    -webkit-transition: background 0.2s ease, width 0.3s ease;
    transition: background 0.2s ease, width 0.3s ease;
  }

  /* 悬停时滚动条略微加宽 */
  .apple-scroll-container:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.6);
  }

  .apple-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(80, 80, 80, 0.8);
    width: 10px;
  }

  .apple-scroll-container::-webkit-scrollbar-thumb:active {
    background: rgba(60, 60, 60, 0.9);
  }

  .apple-scroll-container::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* ========== 移动端样式（宽度 < 768px）========== */
@media (max-width: 767px) {
  /* 完全隐藏滚动条但保持可滚动 */
  .apple-scroll-container {
    -ms-overflow-style: none; /* IE 和 Edge */
    scrollbar-width: none; /* Firefox */
  }

  .apple-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}

/* ========== 深色模式适配 ========== */
@media (prefers-color-scheme: dark) {
  @media (min-width: 768px) {
    .apple-scroll-container:hover,
    .apple-scroll-container:focus-within,
    .apple-scroll-container:active {
      scrollbar-color: rgba(200, 200, 200, 0.3) transparent;
    }

    .apple-scroll-container::-webkit-scrollbar-thumb {
      background: rgba(200, 200, 200, 0.3);
      border-color: rgba(0, 0, 0, 0.2);
    }

    .apple-scroll-container:hover::-webkit-scrollbar-thumb {
      background: rgba(220, 220, 220, 0.4);
    }

    .apple-scroll-container::-webkit-scrollbar-thumb:hover {
      background: rgba(240, 240, 240, 0.5);
    }

    .apple-scroll-container::-webkit-scrollbar-thumb:active {
      background: rgba(255, 255, 255, 0.6);
    }
  }
}

/* ========== 增强交互反馈 ========== */
/* 滚动时的微动效 */
@keyframes scrollbar-appear {
  from {
    opacity: 0;
    transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (min-width: 768px) {
  .apple-scroll-container:hover::-webkit-scrollbar-thumb,
  .apple-scroll-container:focus-within::-webkit-scrollbar-thumb,
  .apple-scroll-container:active::-webkit-scrollbar-thumb {
    animation: scrollbar-appear 0.3s ease;
  }
}

/* 滚动容器获得焦点时的样式 */
.apple-scroll-container:focus {
  outline: 2px solid rgba(0, 103, 244, 0.2);
  outline-offset: 2px;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .apple-scroll-container::-webkit-scrollbar {
    width: 12px; /* 触摸设备上稍宽一些 */
  }

  /* 触摸设备上总是显示滚动条，便于触摸操作 */
  .apple-scroll-container::-webkit-scrollbar {
    opacity: 0.5;
  }

  .apple-scroll-container:active::-webkit-scrollbar {
    opacity: 1;
  }
}