/* ============================================================
   长歌 LONGWAVE · 配置向导页（#/setup）滚动修复 + 底部操作条常驻
   文件：/assets/changge-scroll-fix.css
   ------------------------------------------------------------
   【问题根因】
     应用根样式：html,body,#root { height:100% } + body { overflow:hidden }
     向导页样式：.pg-setup { min-height:100vh; overflow-y:auto }
     min-height 是「最小高度」，所以 .pg-setup 会随内容无限长高，
     它自己那句 overflow-y:auto 永远等不到「内容超出自身」的情况，
     于是永远不产生滚动条；而长出来的部分被外层 body 直接裁掉。
     结果：既看不见滚动条，也滚不动，底部「测试并保存」「下一步」
     按钮无法点击。

   【修复方案】
     1) 把 .pg-setup 锁定为恰好一屏高（height 而非 min-height），
        让它成为真正的滚动容器 —— 这也是原设计意图，因为页头
        .pg-setup-top 本来就是 position:sticky。
     2) 给滚动条做常显样式（粉品牌色，可拖拽），浅色/深色主题自适应。
     3) 把底部操作条 .pg-setup-actions 做成 position:sticky; bottom:0，
        让「下一步」永远贴在视口底部，不必滚动即可点击。

   【影响范围】仅配置向导页；主界面（指挥舱）、路演模式等不受影响。
   【主题适配】全部引用应用已有的 CSS 变量，自动跟随浅色/深色主题。
   ============================================================ */

/* ---------- 1. 向导页 = 真正的一屏高滚动容器 ---------- */
.pg-setup {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Firefox 滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 157, 0.55) transparent;
}
@supports (height: 100dvh) {
  .pg-setup {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ---------- 2. 常显、可拖拽的滚动条（Chromium / Edge / Safari） ---------- */
.pg-setup::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.pg-setup::-webkit-scrollbar-track {
  background: rgba(128, 128, 128, 0.10);
  border-radius: 999px;
}
.pg-setup::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 157, 0.45);
  background: color-mix(in srgb, var(--brand, #ff6b9d) 45%, transparent);
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
  min-height: 48px;
}
.pg-setup::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 157, 0.72);
  background: color-mix(in srgb, var(--brand, #ff6b9d) 72%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
}
.pg-setup::-webkit-scrollbar-thumb:active {
  background: var(--brand, #ff6b9d);
  border: 3px solid transparent;
  background-clip: content-box;
}
.pg-setup::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- 3. 底部操作条（上一步 / 下一步）常驻视口底部 ---------- */
.pg-setup-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20;
  margin-top: 26px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--line-strong, rgba(255, 140, 190, 0.24)) !important;
  border-radius: var(--radius, 10px);
  background: var(--panel-bg-solid, #fffdfa) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, 0.45);
}

/* 深色主题：底色用更实的深色，保证按钮文字清晰不串色 */
:root[data-theme='dark'] .pg-setup-actions {
  background: var(--panel-bg-solid, #1d1329) !important;
}