/* ══════════════════════════════════════
   电脑版外壳（方案 A · 侧栏工作台）
   布局切换完全由下面的 @media (min-width: 1100px) 决定，不靠 JS 事件——拖窗口、缩放、
   iPad 转屏时浏览器自己重算，没有「事件没来就卡在旧布局」的可能。
   html.lp-shell 由 desktop-shell.js 在 <head> 里加上、侧栏挂载失败时撤掉：没有它，
   宽屏也照旧显示手机布局，绝不会出现「Tab 栏藏了、侧栏又没有」。
   断点改动要同步 desktop-shell.js 的 WIDE_MIN_PX（只供 JS 查询用）。
   规划与已定事项：进行中的任务/电脑版布局-方案A落地.md
══════════════════════════════════════ */

.desktop-shell { display: none; }

@keyframes lpDialogIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes lpShellSpin { to { transform: rotate(360deg); } }

/* ── 侧栏内部元素（只有侧栏显示时才看得到，不必再按宽度限定）── */
.ds-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 18px;
}
.ds-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #1c1c1e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  white-space: nowrap;
}
.ds-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #3a3a3c;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.ds-item[hidden] { display: none; }
.ds-item:hover { background: rgba(0, 0, 0, 0.04); }
.ds-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ds-item[aria-current="page"] {
  background: rgba(255, 138, 0, 0.12);
  color: #b45000;
  font-weight: 700;
}
.ds-item svg { flex-shrink: 0; }
.ds-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 11px;
  background: rgba(255, 138, 0, 0.16);
  color: #b45000;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-badge[hidden] { display: none; }
/* 已经在记忆页里时，页面自己的「今日待复习」就是这个数，徽章不再重复 */
.ds-item[aria-current="page"] .ds-badge { display: none; }

.ds-section-label {
  margin: 22px 12px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #6e6e73;
}
.ds-section-label[hidden],
.ds-goal[hidden] { display: none; }
.ds-goal {
  margin: 0 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-goal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #3a3a3c;
}
.ds-goal-row strong { color: var(--text); font-weight: 700; }
.ds-goal-track {
  height: 6px;
  border-radius: 3px;
  background: #e2e2e7;
  overflow: hidden;
}
.ds-goal-fill {
  height: 6px;
  width: 0;
  background: #ff8a00;
  transition: width 0.3s;
}
.ds-goal-fill.is-met { background: var(--green); }
.ds-goal-hint { font-size: 12px; color: #3a3a3c; }
.ds-goal-streak {
  padding-top: 10px;
  border-top: 1px solid var(--separator);
}
.ds-goal-streak strong { color: #b45000; font-weight: 800; }

.ds-spacer { flex: 1; min-height: 12px; }

.ds-footer-item {
  height: 40px;
  font-size: 13px;
  font-weight: 500;
}
.ds-sync[data-state="success"] svg,
.ds-sync[data-state="idle"] svg,
.ds-sync[data-state="pending"] svg { color: #2e7d32; }
.ds-sync[data-state="error"],
.ds-sync[data-state="error"] svg { color: #c62828; }
.ds-sync[data-state="offline"] svg { color: #8e8e93; }
.ds-sync[data-state="syncing"] svg { animation: lpShellSpin 1.2s linear infinite; }

/* ══ 宽屏：以下全部只在 ≥1100px 且侧栏已就绪时生效 ══ */
@media (min-width: 1100px) {
  html.lp-shell {
    --shell-w: 248px;
    /* 底部浮动 Tab 栏在宽屏隐藏，原先给它让的底部留白收回来 */
    --tab-h: 24px;
    /* 内容区（侧栏右边）的水平中线：原先按视口 50% 居中的浮层改按它居中 */
    --content-cx: calc(var(--shell-w) + (100vw - var(--shell-w)) / 2);
  }
  /* data-lp-shell 由 desktop-shell.js 按当前页面写：full 整栏 / rail 图标栏（播放器等沉浸页）/ off 不显示（登录页） */
  html.lp-shell[data-lp-shell="rail"] { --shell-w: 68px; }
  html.lp-shell[data-lp-shell="off"]  { --shell-w: 0px; }

  /* ── 页面让位：一次只显示一个 .page 的模型不变，只是左边让出侧栏 ── */
  html.lp-shell .page { left: var(--shell-w); }
  html.lp-shell #mainTabBar { display: none !important; }

  /* 原先按视口居中的浮层改按内容区居中 */
  html.lp-shell #srs-quick-resume {
    left: var(--content-cx);
    bottom: calc(24px + var(--safe-bottom));
  }
  html.lp-shell .lp-toast,
  html.lp-shell .training-drill-badge { left: var(--content-cx); }

  /* ── 底部弹出的 sheet 改成居中对话框 ── */
  html.lp-shell .modal-overlay {
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
  }
  html.lp-shell .modal-sheet {
    border-radius: 20px;
    padding-bottom: 16px;
    max-height: 84vh;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    animation: lpDialogIn 0.18s ease-out;
  }
  /* 拖动条在对话框里没有意义，但它原本撑着标题上方的留白：只藏条、留位置 */
  html.lp-shell .modal-sheet .sheet-handle {
    visibility: hidden;
    height: 0;
    margin: 22px auto 0;
  }
  html.lp-shell .action-sheet-overlay {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  html.lp-shell .action-sheet {
    max-width: 360px;
    animation: lpDialogIn 0.18s ease-out;
  }

  /* ── 侧栏本体 ── */
  html.lp-shell .desktop-shell {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 90; /* 只需压过 .page（无 z-index）；弹层 1000+、继续上次浮条 850 都在它上面 */
    width: var(--shell-w);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: calc(var(--safe-top) + 22px) 14px 18px;
    background: var(--card);
    border-right: 1px solid var(--separator);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-select: none;
    user-select: none;
  }
  html.lp-shell[data-lp-shell="off"] .desktop-shell { display: none; }

  /* ── 图标栏模式（播放器 / 训练 / 后台听）：只留图标，68px ── */
  html.lp-shell[data-lp-shell="rail"] .desktop-shell {
    padding: calc(var(--safe-top) + 18px) 0 18px;
    align-items: center;
  }
  html.lp-shell[data-lp-shell="rail"] .ds-brand { padding: 0 0 14px; }
  html.lp-shell[data-lp-shell="rail"] .ds-name,
  html.lp-shell[data-lp-shell="rail"] .ds-label,
  html.lp-shell[data-lp-shell="rail"] .ds-section-label,
  html.lp-shell[data-lp-shell="rail"] .ds-goal { display: none; }
  html.lp-shell[data-lp-shell="rail"] .ds-nav { align-items: center; }
  html.lp-shell[data-lp-shell="rail"] .ds-item {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  html.lp-shell[data-lp-shell="rail"] .ds-badge {
    position: absolute;
    top: 2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    background: #b45000;
    color: #fff;
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-shell .modal-sheet,
  html.lp-shell .action-sheet { animation: none; }
  .ds-sync[data-state="syncing"] svg { animation: none; }
}