/* F2: 历史记录页专用样式（/history）
 *
 * 设计思路：
 *   - 100% 复用 style.css 的 .lib-grid / .lib-card / .lib-meta / .lib-badges / lib-badge
 *     / .lib-prompt / .lib-empty / .lib-pager / .lib-toolbar / .lib-image / .lib-refresh-btn
 *   - 仅补充历史记录页特有的：视频卡、视频角标、操作工具条、视频缩略占位
 *   - 颜色变量与现有页面一致（紫 4f46e5 / 红 ef4444 / 灰 6b7280）
 */

/* ===== C35：对齐达笔的设计 token（**页面级**，只影响本页；不动 style.css）===== */
:root {
  --dp-green-2: #F0FFF1;
  --dp-green-3: #D9FADD;
  --dp-green-4: #78FB60;
  --dp-green-5: #71DC68;
  --dp-green-6: #1EAA2A;
  --dp-text: #222722;
  --dp-text-2: rgba(34, 39, 34, 0.8);
  --dp-text-3: rgba(34, 39, 34, 0.6);
  --dp-line: rgba(34, 39, 34, 0.08);
  --dp-line-2: #22272214;
  --dp-active: #F2FFF0;
  --dp-font: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

body {
  font-family: var(--dp-font);
  font-size: 14px;
  color: var(--dp-text);
}

/* ---------- Toolbar 布局（让 time picker 不被挤压） ---------- */
.hist-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hist-toolbar select,
.hist-toolbar input[type="date"] {
  padding: 4px 8px;
  border: 1px solid var(--dp-line);
  border-radius: 4px; /* C35：控件圆角 4px（达笔口径） */
  background: #fff;
  font-size: 13px;
  color: var(--dp-text);
}
.hist-toolbar input[type="date"] {
  min-width: 130px;
}

/* ---------- C35：按日期分组（YYYY-MM-DD），组内时间倒序 ---------- */
#hist-grid.hist-grid-days {
  display: block; /* 容器改成纵向堆叠的「日」区块；卡片网格在 .hist-day-body 里 */
}

.hist-day {
  margin-bottom: 16px; /* 组间距 16px */
}

.hist-day-title {
  /* C50：日期头放大（老板：日期显示大一些） */
  margin: 0 0 10px;
  padding-left: 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--dp-text-2);
  font-family: var(--dp-font);
}

.hist-day-title.is-today {
  color: var(--dp-green-6); /* 今天用主色文字强调 */
}

.hist-day-body {
  display: grid;
  /* C50：缩略图缩小 —— 1600 视口 7 列 / 1440 视口 6 列（原 240px → 5 列） */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

/* C54：卡片瘦身 —— 卡里只剩缩略图（8 个徽标 / 提示词 / 操作按钮都搬进详情面板了）。
   目标：卡片高度 558 → ≤200（图 178 + 边框），一屏能看的张数翻 2~3 倍。 */
#hist-grid .lib-card {
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
}

#hist-grid .lib-card .lib-image,
#hist-grid .lib-card .hist-video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
}

/* C58：hover 才出现的外部操作条（图片下方外侧；绝对定位 → 不占位，卡片高度不变） */
#hist-grid .lib-card .hist-hover-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  gap: 6px;
  justify-content: center;
  padding: 6px 0 2px;
  z-index: 4;
}

#hist-grid .lib-card:hover .hist-hover-bar,
#hist-grid .lib-card:focus-within .hist-hover-bar {
  display: flex;
}

#hist-grid .lib-card .hist-hover-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 39, 34, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #222722;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

#hist-grid .lib-card .hist-hover-btn:hover {
  background: #f2fff0;
  border-color: #71dc68;
}

#hist-grid .lib-card .hist-hover-btn.is-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
  color: #dc2626;
}

/* 触屏没有 hover：常显（此时会占位，属于降级，可接受） */
@media (hover: none) {
  #hist-grid .lib-card .hist-hover-bar {
    position: static;
    display: flex;
  }
}

/* 筛选栏 label / 计数统一到 60% 墨色 */
.hist-toolbar label,
.hist-toolbar .lib-count {
  color: var(--dp-text-3);
}

/* 卡片与选中态对齐 token */
#hist-grid .lib-card {
  border: 1px solid var(--dp-line);
  border-radius: 8px;
  background: #fff;
}

#hist-grid .lib-card.is-selected,
#hist-grid .lib-card.is-checked {
  background: var(--dp-active);
}

/* ---------- 卡片内操作工具条 ---------- */
.hist-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px 10px;
  border-top: 1px solid #f3f4f6;
}
.hist-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* C50：缩略图缩小到一排 6~7 张后，卡片底部按钮条会挤成两行 —— 按 brief §2.3 允许的口径收紧 */
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.hist-action-btn:hover {
  background: #f4f6fa;
  border-color: #9ca3af;
}
/* ⭐ 收藏（黄底） */
.hist-fav-btn {
  border-color: #fbbf24;
  color: #92400e;
  background: #fff8dc;
}
.hist-fav-btn.is-fav {
  background: #fde68a;
  border-color: #d97706;
}
.hist-fav-btn:hover {
  background: #fde68a;
}
/* 🗑️ 删除（红边） */
.hist-del-btn {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff;
}
.hist-del-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

/* ---------- 视频缩略图 ---------- */
.hist-video-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #111;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  display: block;
}

/* 视频角标（右上角） */
.hist-media-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(217, 70, 239, 0.85); /* 紫色区分于图片 */
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

/* 当缩略图缺失（极少见：images_json 是 []） */
.lib-image-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  color: #6b7280;
  font-size: 13px;
  background: #f4f6fa;
  border-radius: 6px 6px 0 0;
}

/* ---------- C71：历史页视频全屏播放器（与共享查看器同风格；视频不走 <img> 查看器） ---------- */
.hist-video-player {
  position: fixed;
  inset: 0;
  z-index: 10020; /* 与 .image-viewer(9999) 同层略高，两者不会同时出现 */
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hist-video-stage {
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hist-video-full {
  max-width: 92vw;
  max-height: 84vh;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.hist-video-close {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.hist-video-close:hover { background: rgba(255, 255, 255, 0.26); }
.hist-video-tip {
  max-width: 80vw;
  color: #d1d5db;
  font-size: 13px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ======================== M32：多选 + 批量操作 ======================== */
#hist-grid .lib-card {
  position: relative;          /* 让 checkbox 绝对定位到左上角 */
}
#hist-grid .lib-card .lib-card-select {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  opacity: 0.35;
  z-index: 3;
  accent-color: var(--brand, #71DC68);
  transition: opacity 120ms ease;
}
#hist-grid .lib-card:hover .lib-card-select,
#hist-grid .lib-card .lib-card-select:focus,
#hist-grid .lib-card .lib-card-select:checked,
#hist-grid .lib-card.is-selected .lib-card-select {
  opacity: 1;
}
#hist-grid .lib-card.is-selected {
  outline: 2px solid var(--brand, #71DC68);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(113, 220, 104, 0.22);
}
.hist-day-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hist-day-title .hist-day-all {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand, #71DC68);
}
.hist-batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: var(--brand-soft, rgba(113, 220, 104, 0.10));
  border: 1px solid var(--brand-line, #A9EFA4);
  border-radius: 10px;
  font-size: 13px;
}
.hist-batch-bar .hist-batch-count {
  color: var(--brand-ink, #14331B);
  font-weight: 600;
}
.hist-batch-bar .hist-batch-count b {
  color: var(--brand-strong, #5BC85A);
  margin: 0 2px;
}
.hist-batch-bar .hist-batch-sep {
  color: #9ca3af;
  opacity: 0.6;
}
.hist-batch-bar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}