/* ============================================================
   v6.2.5 桌面 drawer 定位与视觉分层改进
   问题：桌面端 drawer 展开后，紧贴 dock rail (右侧 4 键)，
        操作 🕹️ 按钮和 "操作提示"面板视觉挤压
   方案：
   1. drawer 右侧再向左拉 (96→160)，宽度稍缩，留出气眼
   2. drawer 打开时 dock rail 淡化 (opacity:.7 + scale)，视觉焦点集中
   3. drawer 加显式白底 + 更清晰阴影，跟场景有对比
   ============================================================ */

@media (min-width: 901px) {
  /* 桌面/大平板 drawer 定位：固定右上角，脱离 dock rail flex 布局 */
  .drawer-panel {
    /* v6.2.8：CRITICAL —— 覆盖 style.css 的 visibility transition
       原因：style.css line 119 用 visibility transition + line 120 .open visibility:visible
       但组合 !important + transition 造成 close 后 visibility 状态被卡死无法再 open
       解决：不用 visibility，用 display + pointer-events 控制显隐 */
    position: fixed !important;
    top: 100px !important;
    right: 160px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(400px, 32vw) !important;
    max-width: 400px !important;
    max-height: min(72vh, 620px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .22), 0 0 0 1px rgba(37, 48, 74, .06) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 8 !important;
    transform: scale(.98) !important;
    transform-origin: top right !important;
    transition: transform .22s cubic-bezier(.2, .9, .3, 1), opacity .22s ease !important;
    opacity: 0 !important;
    visibility: visible !important;   /* 保持 visible 让 transition 走顺；用 opacity+pointer-events 控制 */
    pointer-events: none !important;
    display: block !important;
  }
  .drawer-panel.open {
    transform: scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 大屏 (>=1400px) 空间充裕，drawer 大一点、离 dock 更远 */
  @media (min-width: 1400px) {
    .drawer-panel {
      right: 180px !important;
      width: min(420px, calc(100vw - 240px)) !important;
      max-width: 420px !important;
    }
  }

  /* v6.2.6：撤销 dock rail 淡化 —— 用户反馈"操作提示收缩后跑里面去了不便操作"
     rail 保持完全清晰可点，drawer 已经离 rail 足够远（right:160px），
     不需要视觉淡化来分层，反而让按钮变灰更难点 */
  .utility-dock .dock-rail {
    opacity: 1 !important;
    transform: none !important;
  }

  /* helpDrawer（操作提示）内容通常较长，允许更高 */
  #helpDrawer.drawer-panel {
    max-height: min(78vh, 620px) !important;
  }
}

/* ============================================================
   v6.2.5.1 桌面 drawer 白底 → rank 深色字重写
   问题：PC 端 drawer 变白底后，原本设计的深色主题浅字看不清
   ============================================================ */
@media (min-width: 901px) {
  /* drawer 标题深色 */
  .drawer-panel .drawer-header h2 { color: #1e293b !important; }
  .drawer-panel .drawer-close {
    color: #64748b !important;
    background: rgba(0, 0, 0, .04) !important;
  }
  .drawer-panel .drawer-close:hover { background: rgba(0, 0, 0, .08) !important; }

  /* ============ 排行榜内容深色版 ============ */
  .drawer-panel .rank-scope-tabs { border-bottom-color: rgba(0, 0, 0, .08) !important; }
  .drawer-panel .rank-tab {
    color: #64748b !important;
    background: rgba(0, 0, 0, .04) !important;
  }
  .drawer-panel .rank-tab:hover { background: rgba(37, 99, 235, .08) !important; color: #2563eb !important; }
  .drawer-panel .rank-tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3) !important;
  }
  .drawer-panel .rank-empty { color: #94a3b8 !important; }

  .drawer-panel .rank-item {
    background: rgba(255, 255, 255, .6) !important;
    border-color: rgba(0, 0, 0, .08) !important;
    color: #1e293b !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  .drawer-panel .rank-item:hover {
    background: rgba(37, 99, 235, .06) !important;
    border-color: rgba(37, 99, 235, .2) !important;
  }
  .drawer-panel .rank-item.is-me {
    background: linear-gradient(90deg, rgba(251, 191, 36, .22) 0%, rgba(139, 92, 246, .12) 100%) !important;
    border-color: rgba(217, 119, 6, .6) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, .18) !important;
  }
  .drawer-panel .rank-item.is-me .rank-name em {
    color: #b45309 !important;
    background: rgba(251, 191, 36, .25);
    padding: 2px 6px;
    border-radius: 6px;
  }
  .drawer-panel .rank-medal { color: #b45309 !important; font-size: 18px !important; }
  .drawer-panel .rank-name { color: #1e293b !important; font-weight: 700 !important; font-size: 14px !important; }
  .drawer-panel .rank-level {
    background: rgba(99, 102, 241, .18) !important;
    color: #4338ca !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
  }
  .drawer-panel .rank-xp {
    color: #b45309 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
  }
  .drawer-panel .rank-me {
    background: linear-gradient(135deg, rgba(251, 191, 36, .12) 0%, rgba(139, 92, 246, .08) 100%) !important;
    border-color: rgba(217, 119, 6, .5) !important;
  }
  .drawer-panel .rank-me-inner { color: #1e293b !important; }
  .drawer-panel .rank-me-tip { color: #92400e !important; }
  .drawer-panel .rank-tip {
    background: rgba(99, 102, 241, .08) !important;
    color: #4338ca !important;
    font-weight: 600;
  }

  /* mission / ai / help drawer 里的普通段落文字也修 */
  .drawer-panel p,
  .drawer-panel li,
  .drawer-panel .mission-panel,
  .drawer-panel .ai-panel-content {
    color: #1e293b !important;
  }
  .drawer-panel .mission-panel h3,
  .drawer-panel .mission-panel h4 { color: #0f172a !important; }
  .drawer-panel a { color: #2563eb !important; }
}