/* ============================================================
       主题循环 BGM 控制浮条（右下角 / 可拖放）
       全局常驻：进入主页（html.boot-done）后才显示，开屏期隐藏。
       支持缩小 + 按住左侧 grip 句柄拖到屏幕任意位置（位置持久化，
       由 js/bgm.js 以 left/top 百分比 + .is-dragged 控制）。
       含：播放/暂停、音量滑条、一键静音。赛博红 + 半透明 void 底。
       ============================================================ */
    .bgm-dock {
      /* 默认隐藏：仅在开屏结束（boot-done）后显现，避免遮挡 HACK IN gate */
      display: none;
      position: fixed;
      /* 默认锚在右下角（无拖拽记忆时）；一旦 .is-dragged 则由 JS 的 left/top 覆盖 */
      right: max(var(--space-2xs), calc(env(safe-area-inset-right) + var(--space-2xs)));
      bottom: max(var(--space-2xs), calc(env(safe-area-inset-bottom) + var(--space-2xs)));
      z-index: 12000;                     /* 普通内容之上、弹窗/开屏之下 */
      pointer-events: auto;
      /* 紧凑：跟随内容收缩到最窄，用于「缩小浮条」 */
      width: max-content;
      max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--space-sm));
    }
    html.boot-done .bgm-dock { display: flex; }
    /* 拖拽定位态：JS 注入 left/top，覆盖默认 right/bottom 锚点 */
    .bgm-dock.is-dragged { right: auto; bottom: auto; }

    .bgm-dock { align-items: center; gap: 0; }
    .bgm-dock__panel {
      display: flex;
      align-items: center;
      gap: var(--space-3xs);
      padding: 2px var(--space-3xs) 2px 0;
      background: color-mix(in srgb, var(--cyber-void-800) 82%, transparent);
      border: 1px solid var(--cyber-red-700);
      border-left: none;                   /* 与 grip 拼成一体 */
      border-radius: var(--radius-cyber);
      box-shadow: 0 0 14px color-mix(in srgb, var(--cyber-red-500) 28%, transparent),
                  inset 0 0 0 1px rgb(0 0 0 / 40%);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      font-family: var(--font-mono);
    }

    /* 拖拽句柄：左侧竖向三条杠，独占整条 dock 高度，光标告知可拖 */
    .bgm-dock__grip {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 14px;
      height: 30px;
      padding: 0 2px;
      background: color-mix(in srgb, var(--cyber-void-800) 82%, transparent);
      border: 1px solid var(--cyber-red-700);
      border-right: none;
      border-radius: var(--radius-cyber);
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      cursor: grab;
      touch-action: none;                 /* 让触摸拖动不被浏览器手势接管 */
      flex: none;
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 40%);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
    .bgm-dock__grip:hover { border-color: var(--cyber-green-500); box-shadow: var(--glow-green); }
    .bgm-dock__grip:active { cursor: grabbing; }
    .bgm-dock__grip i {
      display: block;
      width: 6px;
      height: 1px;
      background: var(--cyber-green-500);
      box-shadow: 0 0 4px var(--cyber-green-500);
      opacity: 0.9;
    }

    /* 通用小按钮（reset 全局 button）—— 缩小尺寸 */
    .bgm-dock__btn {
      appearance: none;
      border: 1px solid var(--cyber-red-600);
      background: var(--cyber-void-700);
      color: var(--cyber-chrome-100);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: 1;
      width: 1.55rem; height: 1.55rem;
      padding: 0;
      cursor: pointer;
      border-radius: var(--radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      transition: border-color var(--transition-fast), color var(--transition-fast),
                  box-shadow var(--transition-fast), background var(--transition-fast);
    }
    .bgm-dock__btn:hover {
      border-color: var(--cyber-green-500);
      color: var(--cyber-green-500);
      box-shadow: var(--glow-green);
    }
    .bgm-dock__btn[aria-pressed="true"] {
      border-color: var(--cyber-green-500);
      color: var(--cyber-green-500);
      text-shadow: 0 0 6px var(--cyber-green-500);
    }

    /* 音量滑条：赛博红自定义轨道 + 滑块（收窄以适应缩小浮条） */
    .bgm-dock__vol {
      appearance: none;
      -webkit-appearance: none;
      width: clamp(4rem, 16vw, 6.5rem);
      height: 1.55rem;
      background: transparent;
      cursor: pointer;
      margin: 0 var(--space-3xs);
    }
    .bgm-dock__vol:focus-visible {
      outline: 2px solid var(--cyber-red-500); outline-offset: 2px;
    }
    /* 轨道 */
    .bgm-dock__vol::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--cyber-green-500), var(--cyber-red-500));
      border: 1px solid var(--cyber-void-200);
    }
    .bgm-dock__vol::-moz-range-track {
      height: 4px;
      border-radius: 2px;
      background: var(--cyber-red-500);
    }
    /* 滑块 */
    .bgm-dock__vol::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 11px; height: 11px;
      margin-top: -3.5px;               /* (thumb-track)/2 居中 */
      border-radius: 2px;
      background: var(--cyber-green-500);
      border: 1px solid var(--cyber-chrome-100);
      box-shadow: 0 0 8px var(--cyber-green-500);
    }
    .bgm-dock__vol::-moz-range-thumb {
      width: 11px; height: 11px;
      border-radius: 2px;
      background: var(--cyber-green-500);
      border: 1px solid var(--cyber-chrome-100);
      box-shadow: 0 0 8px var(--cyber-green-500);
    }
    /* 火狐轨道需透明填充以对齐 */
    .bgm-dock__vol::-moz-range-progress { background: var(--cyber-green-500); height: 4px; }

    /* 窄屏：进一步压缩滑条，避免挤占；grip 保持可拖 */
    @media (max-width: 640px) {
      .bgm-dock__panel { gap: 2px; padding: 2px 2px 2px 0; }
      .bgm-dock__grip { width: 12px; height: 28px; }
      .bgm-dock__vol { width: clamp(2.6rem, 18vw, 4.2rem); }
    }
    /* 极窄屏 + 拖拽态下 dock 可能超宽：允许面板内部收缩（滑条已被 clamp，按钮固定） */
    @media (max-width: 340px) {
      .bgm-dock__vol { width: 2.4rem; }
    }