/* =====================================================================
 * b31-history.css —— 配置历史版本面板样式（批次32：内嵌面板 → 独立浮窗）
 * 约束：面板内部选择器一律以 #b31HistRoot 为前缀；浮层只用 .mask.b31h-nest /
 *       .b31h-modal 两个自造类名限定，绝不写裸 .modal / .mask 规则（站内 22 个弹窗共用它们）。
 * 颜色/边框跟随宿主 CSS 变量（--border / --fg-dim2），取不到时用兜底值。
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 浮层：叠在「配置管理」弹窗之上、可关闭的一层（照 biz.js:4849-4871 的 .mask.b25-nest 做法）
 *   · z-index 由 JS 内联写成 150 —— 高于外层 .mask 的 100，低于 #toasts 的 200，
 *     所以还原/改名后的 toast 仍看得见。
 *   · 遮罩比外层 .mask(rgba .5) 更淡：外层弹窗在背后仍然可见，不是一块盖住全页的黑板。
 *   · 点遮罩只关这一层（JS 里 ev.target === layer 才关）。
 * ------------------------------------------------------------------- */
.mask.b31h-nest {
  background: rgba(16, 22, 34, .28);
  padding: 24px;
  overflow: auto;                      /* 极窄视口下整层可滚，不裁掉对话框 */
}

.mask.b31h-nest > .b31h-modal {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 920px;
  height: 61.6vh;                      /* 定高 = 列表一定有可滚动区（最多 50 条）；批次33: 88vh × 0.7 = 61.6vh（高度 −30%） */
  max-height: 61.6vh;                  /* 与 height 同步按同一比例 ×0.7，保持「定高」语义不变 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 18, 32, .3);
}

/* 面板根在浮层里吃满对话框（不再依赖宿主高度，百分比高度在这里没有可解析的基准） */
.mask.b31h-nest > .b31h-modal > #b31HistRoot {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

#b31HistRoot {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  overflow: hidden;
}

#b31HistRoot .b31h-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #d0d7de);
  font-size: 12px;
}

#b31HistRoot .b31h-title {
  font-weight: 600;
  white-space: nowrap;
}

#b31HistRoot .b31h-count {
  color: var(--fg-dim2, #6b7280);
  white-space: nowrap;
}

#b31HistRoot .b31h-flex {
  flex: 1 1 auto;
}

#b31HistRoot .b31h-btn {
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  padding: 2px 8px;
  cursor: pointer;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

#b31HistRoot .b31h-btn:hover {
  border-color: var(--fg-dim2, #6b7280);
}

#b31HistRoot .b31h-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#b31HistRoot .b31h-primary {
  border-color: #2f6feb;
  color: #2f6feb;
}

#b31HistRoot .b31h-danger {
  border-color: #b42318;
  color: #b42318;
}

#b31HistRoot .b31h-icon {
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
}

#b31HistRoot .b31h-msg {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 12px;
  border-bottom: 1px solid var(--border, #d0d7de);
  color: var(--fg-dim2, #6b7280);
}

#b31HistRoot .b31h-msg-err {
  color: #b42318;
}

#b31HistRoot .b31h-msg-ok {
  color: #1a7f37;
}

#b31HistRoot .b31h-msg-warn {
  color: #9a6700;
}

#b31HistRoot .b31h-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#b31HistRoot .b31h-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-dim2, #6b7280);
}

#b31HistRoot .b31h-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border, #d0d7de);
  font-size: 12px;
}

#b31HistRoot .b31h-row:hover {
  background: rgba(127, 127, 127, 0.08);
}

#b31HistRoot .b31h-info {
  flex: 1 1 auto;
  min-width: 0;
}

#b31HistRoot .b31h-l1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;                    /* 窄屏不许顶出横向滚动条 */
}

/* 名字（批次32）：非空显示真实 name；为空显示由时间派生的兜底文案（淡色 + 斜体区分） */
#b31HistRoot .b31h-name {
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

#b31HistRoot .b31h-name-fb {
  font-weight: 400;
  font-style: italic;
  color: var(--fg-dim2, #6b7280);
}

#b31HistRoot .b31h-name-input {
  font: inherit;
  font-size: 12px;
  flex: 0 1 auto;
  width: 32ch;
  min-width: 8ch;
  max-width: 46ch;
  padding: 1px 4px;
  border: 1px solid #2f6feb;
  border-radius: 4px;
  outline: none;
  background: #fff;
  color: inherit;
}

#b31HistRoot .b31h-time {
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

#b31HistRoot .b31h-meta {
  color: var(--fg-dim2, #6b7280);
  font-variant-numeric: tabular-nums;
}

#b31HistRoot .b31h-note {
  margin-top: 2px;
  color: var(--fg-dim2, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#b31HistRoot .b31h-acts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

#b31HistRoot .b31h-confirm {
  display: flex;
  align-items: center;
  gap: 4px;
}

#b31HistRoot .b31h-confirm-text {
  color: #b42318;
  white-space: nowrap;
}