/* ═══════════════════════════════════════════════════════════════════
   分页控件 —— 全平台列表共用（static/js/Pager.js）

   两个组件、两种形态，按列表形状选：
     .pgr   页码分页条  —— 表格 / 卡片网格，有“第几页”心智、需要跳页定位
     .lmr   加载更多    —— 会话侧栏 / 文件面板等流式浏览，页码会打断连续性

   设计令牌一律走 ZhiHe（--zh-*），并对老页面回退到 legacy 别名（--tx1 等），
   故在 index / mobile / skills / team / admin / creator / mcp 各页表现一致，
   且自动跟随明暗主题。字号只用 14 / 12（设计规范禁用 13、15 这类 off-scale 值）。
   ═══════════════════════════════════════════════════════════════════ */

.pgr {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 20px 0 8px;
  font-family: var(--zh-font-sans, var(--sans, inherit));
  user-select: none;
}

/* 页码 / 上下页按钮：同一套盒子，靠 modifier 区分 */
.pgr-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--zh-border, var(--brd, #E5E6EB));
  border-radius: 6px;                       /* 规范：按钮 6px */
  background: var(--zh-surface, var(--bg2, #fff));
  color: var(--zh-fg-2, var(--tx2, #4E5969));
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pgr-btn:hover:not(:disabled):not(.on) {
  background: var(--zh-brand-primary-lightest, var(--acc-m, #EDF4FF));
  border-color: var(--zh-brand-primary, var(--acc, #165DFF));
  color: var(--zh-brand-primary, var(--acc, #165DFF));
}
.pgr-btn:disabled { opacity: .38; cursor: not-allowed; }
/* 暗色悬停：底色是半透明蓝叠在深色画布上，品牌蓝原色压不住 —— 提亮前景 */
[data-theme="dark"] .pgr-btn:hover:not(:disabled):not(.on),
[data-theme="dark"] .lmr-btn:hover:not(:disabled) { color: #A3C4FF; }

/* 当前页：实心品牌蓝 + 白字（规范里的主操作配色） */
.pgr-btn.on {
  background: var(--zh-brand-primary, var(--acc, #165DFF));
  border-color: var(--zh-brand-primary, var(--acc, #165DFF));
  color: #fff;
  font-weight: 500;
  cursor: default;
}
/* 刻意**不**给暗色单独反色：`--zh-brand-primary` 在任何主题下都是 #165DFF
   （styles.css / mobile.css 的 dark 块都没覆盖它），白字在它上面是 5.9:1，
   两个主题一致达标。曾想改用 `--acc`（桌面 dark 会调亮成 #7FA6FF），但
   mobile.css 的 dark 块没覆盖 --acc —— 同一套规则在两个页面会得出相反的
   最佳前景色，反而更容易配错。 */

/* 数字用 TCloudNumber，页码等宽不跳动 */
.pgr-num { font-family: var(--zh-font-num, var(--mono, inherit)); }

.pgr-ell {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--zh-fg-4, var(--tx3, #86909C));
  cursor: default;
}

.pgr-total {
  font-size: 12px;
  color: var(--zh-fg-4, var(--tx3, #86909C));
  margin-left: 6px;
  white-space: nowrap;
}
.pgr-total b {
  font-family: var(--zh-font-num, var(--mono, inherit));
  font-weight: 500;
  color: var(--zh-fg-2, var(--tx2, #4E5969));
}

/* 跳页：只在页数多到翻不动时（> 8 页）出现，避免小列表上堆控件 */
.pgr-jump {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--zh-fg-4, var(--tx3, #86909C));
  margin-left: 4px;
}
.pgr-jump input {
  width: 46px;
  height: 32px;
  padding: 0 6px;
  text-align: center;
  font-family: var(--zh-font-num, var(--mono, inherit));
  font-size: 14px;
  border: 1px solid var(--zh-border, var(--brd, #E5E6EB));
  border-radius: 6px;
  background: var(--zh-surface, var(--bg2, #fff));
  color: var(--zh-fg-1, var(--tx1, #1D2129));
  outline: none;
}
.pgr-jump input:focus {
  border-color: var(--zh-brand-primary, var(--acc, #165DFF));
  box-shadow: 0 0 0 2px var(--zh-brand-primary-lightest, var(--acc-m, #EDF4FF));
}
/* 去掉 number 型的上下箭头（占宽且与设计不符） */
.pgr-jump input::-webkit-outer-spin-button,
.pgr-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pgr-jump input { -moz-appearance: textfield; }

/* 翻页进行中：整条降透明度并禁点，避免连点导致页码与数据错位 */
.pgr.loading { opacity: .6; pointer-events: none; }

/* “第 X / Y 页”默认藏起（宽屏有页码按钮，不需要它） */
.pgr-label {
  font-size: 12px;
  color: var(--zh-fg-4, var(--tx3, #86909C));
  white-space: nowrap;
  display: none;
}
.pgr-label b {
  font-family: var(--zh-font-num, var(--mono, inherit));
  font-weight: 500;
  color: var(--zh-fg-2, var(--tx2, #4E5969));
}

/* 紧凑模式（弹层 / 窄面板内的列表）：只留上下页 + “第 X / Y 页” */
.pgr.compact { padding: 12px 0 4px; gap: 4px; }
.pgr.compact .pgr-btn { height: 28px; min-width: 28px; padding: 0 7px; }
.pgr.compact .pgr-jump, .pgr.compact .pgr-total { display: none; }
.pgr.compact .pgr-label { display: inline; }

/* 窄屏：一排页码在手机上会折成两三行 —— 用“第 X / Y 页”顶替页码按钮，
   整条收成一行；总条数移到下一行居中。 */
@media (max-width: 560px) {
  .pgr { gap: 4px; padding: 16px 0 6px; }
  .pgr-jump, .pgr-ell { display: none; }
  .pgr-btn.pgr-num { display: none; }
  .pgr-label { display: inline; }
  .pgr-total { width: 100%; text-align: center; margin: 4px 0 0; }
}

/* ── 加载更多（流式列表）────────────────────────────────────────── */
.lmr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 14px;
  font-family: var(--zh-font-sans, var(--sans, inherit));
}
.lmr-btn {
  width: 100%;
  max-width: 260px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--zh-border, var(--brd, #E5E6EB));
  border-radius: 6px;
  background: var(--zh-surface, var(--bg2, #fff));
  color: var(--zh-fg-2, var(--tx2, #4E5969));
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lmr-btn:hover:not(:disabled) {
  background: var(--zh-brand-primary-lightest, var(--acc-m, #EDF4FF));
  border-color: var(--zh-brand-primary, var(--acc, #165DFF));
  color: var(--zh-brand-primary, var(--acc, #165DFF));
}
.lmr-btn:disabled { opacity: .55; cursor: default; }
.lmr-meta {
  font-size: 12px;
  color: var(--zh-fg-4, var(--tx3, #86909C));
}
.lmr-meta b {
  font-family: var(--zh-font-num, var(--mono, inherit));
  font-weight: 500;
  color: var(--zh-fg-3, var(--tx2, #4E5969));
}
/* 到底了：一句轻提示，替代按钮 —— 用户需要知道“没有更多”而不是按钮消失 */
.lmr-end {
  font-size: 12px;
  color: var(--zh-fg-4, var(--tx3, #86909C));
  padding: 2px 0 4px;
}

/* 侧栏（深色玻璃背景）里的加载更多：透明底更贴合 */
.side-convs .lmr, .m-drawer-convs .lmr { padding: 8px 6px 12px; }
.side-convs .lmr-btn, .m-drawer-convs .lmr-btn {
  background: transparent;
  border-color: var(--zh-border-subtle, var(--brd, #E5E6EB));
}

/* 载入指示点：加载更多按钮里的小转圈 */
.lmr-sp {
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: lmr-spin .7s linear infinite;
  opacity: .7;
}
@keyframes lmr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lmr-sp { animation-duration: 2s; } }