/* 聊天记录面板(P397 微信式四 Tab + 跳转高亮,P398 加思维导图 5 Tab)
 *
 * 抽屉:PC 右侧 480px,移动端全屏覆盖
 * 跳转落点标亮在 05-messages.css(.round-jump-highlight,按回合打开共用)。
 *
 * 主题感知:全部走 75 个 CSS 变量,暗/浅色自适应。
 */

/* ═══ 抽屉容器 ═══ */
.ch-drawer { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.ch-drawer.hidden { display: none; }
.ch-drawer .ch-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4); opacity: 0;
  transition: opacity 0.22s ease; pointer-events: auto;
}
.ch-drawer.show .ch-backdrop { opacity: 1; }
.ch-drawer .ch-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: 480px;
  background: var(--bg-surface); border-left: 1px solid var(--border-light);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto; box-shadow: var(--shadow-ambient);
}
.ch-drawer.show .ch-panel { transform: translateX(0); }

/* ═══ 头部 ═══ */
.ch-header {
  display: flex; align-items: center; gap: 12px;
  /* P508: PWA standalone 顶部状态栏会覆盖 viewport,关闭按钮必须避开安全区。 */
  padding:
    calc(14px + var(--app-top-inset))
    calc(18px + env(safe-area-inset-right, 0px))
    14px
    calc(18px + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--border-light);
}
.ch-title { flex: 1; font-size: 16px; font-weight: 600; color: var(--text-main); }
.ch-close-btn {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--text-muted); cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ch-close-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.ch-close-btn svg { width: 18px; height: 18px; }

/* ═══ Tab 切换条 ═══ */
.ch-tabs {
  display: flex; gap: 4px; padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
}
.ch-tab {
  flex: 1; padding: 8px 4px; font-size: 13px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted); border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.ch-tab:hover { background: var(--bg-hover); color: var(--text-main); }
.ch-tab.active {
  background: var(--brand-bg-light); color: var(--brand-primary); font-weight: 500;
}

/* ═══ 内容区 ═══ */
.ch-content { flex: 1; overflow-y: auto; padding: 16px; }
.ch-empty, .ch-loading {
  text-align: center; padding: 60px 20px;
  color: var(--text-muted); font-size: 14px;
}

/* ═══ 日期 Tab — 月历 ═══ */
.ch-cal-wrap { display: flex; flex-direction: column; gap: 24px; }
.ch-cal-month { background: transparent; }
.ch-cal-title { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; padding-left: 4px; }
.ch-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.ch-cal-grid.head { margin-bottom: 4px; }
.ch-cal-cell {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-dim);
  border: 0; background: transparent; cursor: default;
  border-radius: 8px;
}
.ch-cal-cell.head { color: var(--text-muted); font-size: 11px; cursor: default; aspect-ratio: auto; padding: 4px 0; }
.ch-cal-cell.empty { visibility: hidden; }
.ch-cal-cell .d { font-variant-numeric: tabular-nums; }
.ch-cal-cell.hit {
  background: var(--brand-bg-light); color: var(--brand-primary);
  font-weight: 500; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.ch-cal-cell.hit:hover { background: var(--brand-bg); transform: scale(1.02); }
.ch-cal-cell.hit:active { transform: scale(0.98); }
.ch-cal-cell .dot {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand-primary);
}

/* ═══ 图片 Tab — 缩略图网格 ═══ */
.ch-img-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.ch-img-cell {
  position: relative; aspect-ratio: 1 / 1; border: 0; padding: 0;
  background: var(--bg-subtle); border-radius: 8px; overflow: hidden;
  cursor: pointer; transition: transform 0.12s;
}
.ch-img-cell:hover { transform: scale(1.02); }
.ch-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-img-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 6px; font-size: 10px; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  display: flex; align-items: center; gap: 4px;
}
.ch-img-meta .ai-tag {
  font-style: normal; font-size: 9px; padding: 1px 4px;
  background: var(--brand-primary); color: var(--text-on-color); border-radius: 3px;
  margin-left: auto;
}

/* ═══ 文件 Tab — 列表 ═══ */
.ch-file-list { display: flex; flex-direction: column; gap: 2px; }
.ch-file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  transition: background 0.15s;
}
.ch-file-row:hover { background: var(--bg-hover); }
.ch-file-ext {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg-subtle); color: var(--brand-primary);
  border-radius: 8px; font-size: 11px; font-weight: 600;
}
.ch-file-main { flex: 1; min-width: 0; }
.ch-file-name {
  font-size: 14px; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-file-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ch-file-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ch-file-link, .ch-file-jump {
  font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-light); background: transparent;
  color: var(--text-secondary); cursor: pointer; text-decoration: none;
  transition: all 0.15s;
}
.ch-file-link:hover, .ch-file-jump:hover {
  background: var(--brand-bg-light); color: var(--brand-primary); border-color: var(--brand-border);
}

/* ═══ 链接 Tab — 列表 ═══ */
.ch-link-list { display: flex; flex-direction: column; gap: 2px; }
.ch-link-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  transition: background 0.15s;
}
.ch-link-row:hover { background: var(--bg-hover); }
.ch-link-main { flex: 1; min-width: 0; }
.ch-link-title {
  display: block; font-size: 14px; color: var(--brand-primary);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-link-title:hover { text-decoration: underline; }
.ch-link-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ch-link-jump {
  flex-shrink: 0; font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-light); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.15s;
}
.ch-link-jump:hover {
  background: var(--brand-bg-light); color: var(--brand-primary); border-color: var(--brand-border);
}

/* ═══ 搜索条 + 搜索结果(P399 微信式会话内搜索)═══ */
.ch-search-bar {
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--border-light);
}
.ch-search-input-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--bg-input, var(--bg-elevated));
  border: 1px solid var(--border-light); border-radius: 8px;
  padding: 0 36px 0 32px; height: 34px;
  transition: border-color 0.15s, background 0.15s;
}
.ch-search-input-wrap:focus-within {
  border-color: var(--brand-border);
  background: var(--bg-surface);
}
.ch-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-muted); pointer-events: none;
}
.ch-search-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  font-size: 13px; color: var(--text-main); padding: 0;
}
.ch-search-input::placeholder { color: var(--text-muted); }
/* 隐藏 type=search 浏览器原生 ✕(避免和自定义 .ch-search-clear 撞两个叉) */
.ch-search-input::-webkit-search-cancel-button,
.ch-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ch-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  color: var(--text-muted); cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.ch-search-clear:hover { background: var(--bg-hover); color: var(--text-main); }
.ch-search-clear svg { width: 12px; height: 12px; }
.ch-search-clear.hidden { display: none; }

/* 搜索结果接管区(取代 .ch-tabs + .ch-content 显示) */
.ch-search-results {
  flex: 1; overflow-y: auto; padding: 8px 14px 14px;
}
.ch-search-results.hidden { display: none; }
.ch-search-summary {
  font-size: 11px; color: var(--text-muted);
  padding: 6px 4px 10px;
}
.ch-search-list { display: flex; flex-direction: column; gap: 2px; }
.ch-search-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; transition: background 0.15s;
}
.ch-search-row:hover { background: var(--bg-hover); }
.ch-search-main { flex: 1; min-width: 0; }
.ch-search-snippet {
  font-size: 13px; color: var(--text-main); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.ch-search-hit {
  background: var(--brand-bg-light); color: var(--brand-primary);
  padding: 0 2px; border-radius: 2px; font-weight: 600;
}
.ch-search-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.ch-search-jump {
  flex-shrink: 0; font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-light); background: transparent;
  color: var(--text-secondary); cursor: pointer; transition: all 0.15s;
}
.ch-search-jump:hover {
  background: var(--brand-bg-light); color: var(--brand-primary); border-color: var(--brand-border);
}
.ch-search-more {
  display: block; margin: 12px auto 4px; padding: 6px 18px;
  font-size: 12px; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border-light);
  border-radius: 16px; cursor: pointer; transition: all 0.15s;
}
.ch-search-more:hover {
  background: var(--brand-bg-light); color: var(--brand-primary); border-color: var(--brand-border);
}

/* tabs/content 隐藏时让出 flex 空间给 search-results */
.ch-tabs.hidden, .ch-content.hidden { display: none; }

/* ═══ 思维导图 Tab — 列表(P398)═══ */
.ch-mm-list { display: flex; flex-direction: column; gap: 2px; }
.ch-mm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  transition: background 0.15s;
}
.ch-mm-row:hover { background: var(--bg-hover); }
.ch-mm-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg-subtle); color: var(--brand-primary);
  border-radius: 8px;
}
.ch-mm-icon svg { width: 22px; height: 22px; }
.ch-mm-main { flex: 1; min-width: 0; }
.ch-mm-title {
  font-size: 14px; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-mm-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ch-mm-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ch-mm-open, .ch-mm-jump {
  font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-light); background: transparent;
  color: var(--text-secondary); cursor: pointer; text-decoration: none;
  transition: all 0.15s;
}
.ch-mm-open:hover, .ch-mm-jump:hover {
  background: var(--brand-bg-light); color: var(--brand-primary); border-color: var(--brand-border);
}

/* ═══ topbar 聊天记录入口按钮(沿用现有 icon-btn 样式)═══ */
#btn-chat-history svg { width: 20px; height: 20px; }

/* ═══ 移动端适配 ═══ */
@media (max-width: 768px) {
  .ch-drawer .ch-panel {
    width: 100%;
    height: var(--app-height, 100dvh);
    border-left: 0;
  }
  .ch-img-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-search-bar {
    padding:
      8px
      calc(14px + env(safe-area-inset-right, 0px))
      6px
      calc(14px + env(safe-area-inset-left, 0px));
  }
  .ch-tabs {
    padding:
      8px
      calc(8px + env(safe-area-inset-right, 0px))
      8px
      calc(8px + env(safe-area-inset-left, 0px));
  }
  .ch-content {
    padding:
      12px
      calc(12px + env(safe-area-inset-right, 0px))
      calc(12px + env(safe-area-inset-bottom, 0px))
      calc(12px + env(safe-area-inset-left, 0px));
  }
  .ch-search-results {
    padding:
      8px
      calc(14px + env(safe-area-inset-right, 0px))
      calc(14px + env(safe-area-inset-bottom, 0px))
      calc(14px + env(safe-area-inset-left, 0px));
  }
}

/* P624 冷加载失败错误态(替换骨架屏);class 刻意不在 HistoryReconciler 真实/live DOM 选择器内 */
.chat-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  color: var(--text-secondary);
}
.chat-load-error-text { font-size: 14px; }
.chat-load-error-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  height: auto;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 999px);
}
.chat-load-error-btn span { font-size: 13px; }