/* ============================================================================
   心途启境 · 全站统一滚动条样式（v3 · 隐式胶囊）
   - Chromium / Edge / Safari：::-webkit-scrollbar
   - Firefox：scrollbar-width / scrollbar-color（仅 Firefox 启用，避免覆盖 WebKit 精细样式）
   - 深色模式自动换色；触屏设备更细
   - 各页面更具体的选择器优先级更高，不受影响
   ----------------------------------------------------------------------------
   【关于"滑块太长"】WebKit 无法直接设定滑块长度，它由
       「容器可视高度 ÷ 内容总高度 × 容器可视高度」自动计算。
   内容只比一屏多一点时（如聊天区只有几条消息），滑块就会接近占满 → 看着"很长"。
   CSS 没有 max-height 可以限制它，因此本文件用两个纯视觉技巧让它明显变短：
     ① 两端渐隐（linear-gradient 首尾透明）→ 实心部分只占滑块约 70%
     ② 上下内缩（border-top/bottom 透明 + background-clip: padding-box）
        → 可见胶囊再各缩进 6px，整体看起来像悬浮短胶囊
   若需要"长度固定不变"的滚动条，必须用 JS 覆盖式自绘（见文末说明）。
   ----------------------------------------------------------------------------
   调参入口：
     --sb-size / --sb-size-inner  粗细
     --sb-inset                   上下内缩量（越大越"短"）
     ::-webkit-scrollbar-thumb 的 min-height  滑块最短长度下限
   ============================================================================ */
:root {
    --sb-size: 6px;
    --sb-size-inner: 5px;
    --sb-inset: 6px;                 /* 上下内缩：视觉缩短的关键 */
    /* 首尾透明的渐变 → 实心部分更集中，看起来更短 */
    --sb-thumb: linear-gradient(180deg,
        rgba(155, 89, 182, 0) 0%,
        rgba(155, 89, 182, 0.30) 18%,
        rgba(52, 152, 219, 0.30) 82%,
        rgba(52, 152, 219, 0) 100%);
    --sb-thumb-h: linear-gradient(90deg,
        rgba(155, 89, 182, 0) 0%,
        rgba(155, 89, 182, 0.30) 18%,
        rgba(52, 152, 219, 0.30) 82%,
        rgba(52, 152, 219, 0) 100%);
    --sb-thumb-hover: linear-gradient(180deg,
        rgba(142, 68, 173, 0) 0%,
        rgba(142, 68, 173, 0.62) 15%,
        rgba(52, 152, 219, 0.62) 85%,
        rgba(52, 152, 219, 0) 100%);
    --sb-thumb-hover-h: linear-gradient(90deg,
        rgba(142, 68, 173, 0) 0%,
        rgba(142, 68, 173, 0.62) 15%,
        rgba(52, 152, 219, 0.62) 85%,
        rgba(52, 152, 219, 0) 100%);
    --sb-thumb-solid: rgba(142, 68, 173, 0.38);
    --sb-track: transparent;
}
body.dark-theme, .dark-theme {
    --sb-thumb: linear-gradient(180deg,
        rgba(162, 155, 254, 0) 0%,
        rgba(162, 155, 254, 0.26) 18%,
        rgba(116, 185, 255, 0.26) 82%,
        rgba(116, 185, 255, 0) 100%);
    --sb-thumb-h: linear-gradient(90deg,
        rgba(162, 155, 254, 0) 0%,
        rgba(162, 155, 254, 0.26) 18%,
        rgba(116, 185, 255, 0.26) 82%,
        rgba(116, 185, 255, 0) 100%);
    --sb-thumb-hover: linear-gradient(180deg,
        rgba(162, 155, 254, 0) 0%,
        rgba(162, 155, 254, 0.60) 15%,
        rgba(116, 185, 255, 0.60) 85%,
        rgba(116, 185, 255, 0) 100%);
    --sb-thumb-hover-h: linear-gradient(90deg,
        rgba(162, 155, 254, 0) 0%,
        rgba(162, 155, 254, 0.60) 15%,
        rgba(116, 185, 255, 0.60) 85%,
        rgba(116, 185, 255, 0) 100%);
    --sb-thumb-solid: rgba(162, 155, 254, 0.38);
}

/* ---------- Chromium / Safari ---------- */
::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); background: transparent; }
*:not(html)::-webkit-scrollbar { width: var(--sb-size-inner); height: var(--sb-size-inner); }
::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 999px; }

::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 999px;
    /* 上下内缩让胶囊更短：透明边框 + padding-box 裁切 */
    border-top: var(--sb-inset) solid transparent;
    border-bottom: var(--sb-inset) solid transparent;
    border-left: 1px solid transparent;   /* 配合 6px 宽度，实际显示约 4px */
    border-right: 1px solid transparent;
    background-clip: padding-box;
    min-height: 34px;                     /* 保证内缩后仍有 ≥22px 可见长度 */
    transition: background .2s ease;
}

::-webkit-scrollbar-thumb:horizontal {
    background: var(--sb-thumb-h);
    border-left: var(--sb-inset) solid transparent;
    border-right: var(--sb-inset) solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background-clip: padding-box;
    min-width: 34px;
    min-height: 0;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-hover); background-clip: padding-box; }

::-webkit-scrollbar-thumb:horizontal:hover,
::-webkit-scrollbar-thumb:horizontal:active { background: var(--sb-thumb-hover-h); background-clip: padding-box; }

::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ---------- Firefox ---------- */
@supports (-moz-appearance: none) {
    * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb-solid) transparent; }
}

/* ---------- 触屏设备：最细、不抢视觉（触屏本就自动隐藏） ---------- */
@media (hover: none) and (pointer: coarse) {
    ::-webkit-scrollbar, *:not(html)::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-thumb {
        border-width: 0;
        min-height: 16px;
        background: linear-gradient(180deg, rgba(155, 89, 182, 0.35), rgba(52, 152, 219, 0.35));
    }
}

/* 选中文本配色与品牌一致（提升视觉统一感） */
::selection { background: rgba(142, 68, 173, 0.22); }

/* ============================================================================
   【可选进阶】若要让滑块"长度固定、自动隐藏、带缓动"——必须用 JS 覆盖式自绘：
   WebKit 的 ::-webkit-scrollbar 无法固定长度（长度由内容比例决定）。
   自绘方案要点：隐藏原生滚动条 → 监听 scroll → 用一个绝对定位的 div 画滑块
   （可固定 48px、滚动时淡入、停止 800ms 后淡出）。
   代价：需新增 1 个 JS 文件并在页面引入；建议先只在主站 index.php 生效。
   ============================================================================ */