/* ============================================================
   左侧全局图标栏（照 TECo Lab）：品牌 + 9 个图标
   - 桌面（≥1290px）固定在最左，给内容让出 72px
   - 窄屏隐藏（改由移动端顶栏/底栏承载导航）
   - 图标先只做视觉，不接功能（点击暂无反应）
   - 2026-10-13 视觉升级：样式与全站 token 对齐（白底 + 细边 + 品牌蓝 hover）
   ============================================================ */

.app-rail {
  display: none;
}

@media (min-width: 1290px) {
  .app-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 72px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 18px 0 22px;
    background: var(--n-0, var(--n-0));
    border-right: 1px solid var(--line, #e3e7ee);
  }

  .app-rail-brand {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm, 8px);
    background: var(--accent, #2f6feb);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
  }

  .app-rail-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    width: 48px;
    padding: 8px 0;
    background: var(--n-50, var(--n-50));
    border-radius: var(--r-lg, 16px);
  }

  .app-rail-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--r-sm, 8px);
    background: transparent;
    /* 关键：去掉浏览器原生按钮外观。
       否则 color-scheme: dark 下 Chrome 按原生控件给按钮画深灰底（~#6b6b6b），
       盖掉上面的 transparent，导致深色主题下导航按钮灰底灰字。 */
    appearance: none;
    -webkit-appearance: none;
    color: var(--n-600, var(--n-600));
    padding: 0;
    transition: background 150ms ease, color 150ms ease;
  }

  .app-rail-btn:hover {
    background: var(--accent-soft, #eff4ff);
    color: var(--accent, #2f6feb);
  }

  .app-rail-btn:active {
    background: var(--accent-line, #c8dbff);
  }

  .app-rail-btn svg {
    width: 21px;
    height: 21px;
  }

  /* 页面内容整体右移，避开图标栏 */
  body {
    padding-left: 72px;
  }
}

/* ============================================================
   深色主题适配（player 设置 body[data-player-theme="dark"]）
   注意：本文件用 var(--n-0/--n-50) 中性色阶做底，深色主题
   只反转语义变量、不反转色阶（保护深色 tooltip），所以这里单独覆盖。
   ============================================================ */
body[data-player-theme="dark"] .app-rail {
  background: #0d1117;
  border-right-color: #232a34;
}

body[data-player-theme="dark"] .app-rail-nav {
  background: #161b22;
}

body[data-player-theme="dark"] .app-rail-btn {
  color: #8b93a2;
}

body[data-player-theme="dark"] .app-rail-btn:hover {
  background: #16233f;
  color: #7fabff;
}

body[data-player-theme="dark"] .app-rail-btn:active {
  background: #1f3a6b;
}