/* ============================================================================
 * 玖客 · 扩展样式
 * ----------------------------------------------------------------------------
 * theme.css 是玖伴/玖客共用的基础样式（配色、按钮、卡片、表单）。
 * 这里只放玖客独有的组件：KPI 数字块、站点卡片、资料库条目、内容卡片、
 * Markdown 表格样式等。改配色仍然只改 theme.css 顶部的变量。
 * ========================================================================== */

/* ------------------------------------------------------------ KPI 数字块 */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.stat-label { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.stat-num {
  font-size: 30px; font-weight: 800; color: var(--navy-700);
  line-height: 1.15; margin: 6px 0 2px; font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }
.stat-foot { font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------ 卡片头工具条 */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sect-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; flex-wrap: wrap;
}
.sect-head h2 { font-size: 20px; }

/* ------------------------------------------------------------ 站点卡片 */
.site-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.site-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-name { font-weight: 700; font-size: 15.5px; }
.site-url {
  font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.site-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* 区域标记：国内 / 国外 */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg); color: var(--ink-2); border: 1px solid var(--line);
}
.badge--cn { background: #fdeceb; color: #a3372f; border-color: #f6d5d2; }
.badge--ov { background: #e9f2fb; color: #1d5a8c; border-color: #cfe2f5; }
.badge--ai { background: var(--gold-bg); color: #8a6412; border-color: var(--gold-soft); }

/* ------------------------------------------------------------ 资料库条目 */
.lib-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; background: #fff; margin-bottom: 10px;
}
.lib-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-title { font-weight: 700; font-size: 14.5px; }
.lib-body {
  font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap;
  margin-top: 7px; line-height: 1.7; max-height: 260px; overflow: auto;
}

/* ------------------------------------------------------------ 内容卡片 */
.doc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.doc-title { font-weight: 700; font-size: 15px; line-height: 1.45; }
.doc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.doc-excerpt { font-size: 13px; color: var(--ink-2); line-height: 1.65; }

/* ------------------------------------------------------------ 流水线工位 */
.station {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; margin-bottom: 12px; overflow: hidden;
}
.station-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; cursor: pointer; user-select: none;
}
.station-head:hover { background: var(--bg); }
.station-name { font-weight: 700; font-size: 14.5px; }
.station-sub { font-size: 12px; color: var(--ink-3); }
.station-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.station-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.station-body .md { padding-top: 10px; }

.avatar-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--navy-100); color: var(--navy-700);
}

/* ------------------------------------------------------------ 分栏布局 */
.cols { display: grid; gap: 18px; grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Markdown 表格 */
.md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13.5px; }
.md th, .md td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--bg); font-weight: 700; }
.md h2 { font-size: 16px; margin: 18px 0 8px; }
.md h3 { font-size: 14.5px; margin: 14px 0 6px; color: var(--navy-700); }
.md p { font-size: 14px; line-height: 1.75; margin: 0 0 9px; }
.md ul { margin: 0 0 10px; padding-left: 20px; }
.md li { font-size: 14px; line-height: 1.72; margin-bottom: 4px; }
.md blockquote {
  margin: 8px 0; padding: 8px 14px; border-left: 3px solid var(--gold);
  background: var(--gold-bg); border-radius: 0 8px 8px 0;
  font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap;
}
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.md strong { color: var(--navy-700); }

/* ------------------------------------------------------------ 占位标记 */
.ph {
  background: var(--gold-bg); border: 1px dashed var(--gold); color: #8a6412;
  border-radius: 4px; padding: 0 4px; font-weight: 600; font-size: .94em;
}

/* ------------------------------------------------------------ 其他 */
.empty {
  text-align: center; color: var(--ink-3); font-size: 13.5px;
  padding: 34px 16px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: #fff;
}
.kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 8px; font-size: 13.5px; padding: 4px 0; }
.checklist li::before { content: "✓"; color: var(--ok); font-weight: 700; }

/* ==================================================================== 资料库 */
/* 资料完整度：灰=这一类空的，蓝=已有条目。视觉上一眼看出缺口。 */
.kb-gaps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kb-gap {
  flex: 1 1 150px; min-width: 140px; padding: 9px 12px;
  border: 1px dashed var(--line); border-radius: 10px; background: #fff;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}
.kb-gap b { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 2px; }
.kb-gap.is-on { border-style: solid; border-color: var(--navy-300); background: #f4f8fb; }
.kb-gap.is-on b { color: var(--navy-700); }

/* ------------------------------------------------------ 键值列表（排期/台账） */
.kvlist { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.kvlist > .kv-row:first-child { padding-top: 0; }
.kv-row {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13.5px; padding: 4px 0; border-bottom: 1px dashed var(--line);
}
.kv-row:last-child { border-bottom: 0; }
.kv-k { flex: none; min-width: 104px; color: var(--ink-3); font-size: 13px; }
.kv-v { min-width: 0; word-break: break-word; }

/* ============================================================ 顶栏（十个入口） */
/* 入口变多了，窄屏要能折行，否则最后几个会被挤没。 */
.topbar-inner { flex-wrap: wrap; row-gap: 6px; }

/* ================================================================ 客服台 */
/* 未接入小红点：挂在顶栏「客服台」上。客人等着的时候，老板得看得见。 */
.navdot {
  display: inline-block; margin-left: 5px; padding: 0 5px; min-width: 16px;
  height: 16px; line-height: 16px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  text-align: center; vertical-align: 1px;
}
.pill--hot { background: #fdeceb; color: var(--danger); }

.chat-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.chat-side { max-height: 74vh; overflow: auto; }
.chat-pane { min-height: 420px; display: flex; flex-direction: column; }

.conv-list { display: flex; flex-direction: column; gap: 7px; }
.conv-item {
  border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px;
  cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
}
.conv-item:hover { border-color: var(--navy-300); background: #f8fbfd; }
.conv-item.is-on { border-color: var(--navy-600); background: #f2f8fc; box-shadow: inset 3px 0 0 var(--navy-600); }
.conv-top { display: flex; align-items: center; gap: 7px; }
.conv-name { font-weight: 600; font-size: 13.5px; }
.conv-top .pill { margin-left: auto; }
.conv-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.conv-last {
  font-size: 12.5px; color: var(--ink-2); margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.conv-head { border-bottom: 1px dashed var(--line); padding-bottom: 11px; margin-bottom: 12px; }
.cmsg-list {
  flex: 1 1 auto; overflow-y: auto; max-height: 46vh; min-height: 200px;
  display: flex; flex-direction: column; gap: 9px; padding: 4px 2px 10px;
}
.cmsg {
  border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px;
  background: #fff; max-width: 88%;
}
.cmsg--visitor { align-self: flex-start; background: #f6f9fc; }
.cmsg--ai { align-self: flex-start; border-style: dashed; }
.cmsg--agent { align-self: flex-end; background: var(--gold-bg); border-color: var(--gold-soft); }
.cmsg--system { align-self: center; max-width: 96%; background: #f2f5f8; }
.cmsg--lead { border-left: 3px solid var(--gold); background: #fffdf6; }
.cmsg--handoff { border-left: 3px solid var(--danger); }
.cmsg--card { border-left: 3px solid var(--navy-600); }
.cmsg-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.cmsg-who { font-size: 11.5px; font-weight: 700; color: var(--navy-600); letter-spacing: .2px; }
.cmsg-b { font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

.chat-bar { display: flex; gap: 9px; align-items: flex-end; margin-top: 11px; }
.chat-bar textarea {
  flex: 1 1 auto; resize: vertical; min-height: 74px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px;
  font: inherit; font-size: 13.5px;
}
.chat-bar textarea:focus { outline: none; border-color: var(--navy-500); }
.chat-bar .btn { flex: none; height: 38px; }

.embed-row { border-top: 1px dashed var(--line); padding: 11px 0; }
.embed-row:first-child { border-top: 0; }
.embed-code {
  margin-top: 6px; padding: 9px 11px; background: #f5f7fa; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-all;
}

@media (max-width: 900px) {
  .chat-wrap { grid-template-columns: 1fr; }
  .chat-side { max-height: 40vh; }
  .cmsg-list { max-height: none; }
}

/* ================================================================ 线索台 A1 */
/* 顶栏红点分两种颜色：客服台是「有人在等你」（红），线索台是「你该主动找谁」（金）。
   同色同形的两个红点会让人分不清哪边更急。 */
.navdot--gold { background: var(--gold); }

/* 分数徽章 */
.sbadge {
  flex: none; display: inline-flex; align-items: baseline; gap: 1px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sbadge-u { font-size: 10px; font-weight: 600; }
.sbadge--high { background: #e9f7ef; border-color: #b8e0c8; color: #1f7a4d; }
.sbadge--mid { background: var(--gold-bg); border-color: var(--gold-soft); color: #97701c; }
.sbadge--low { background: #f2f5f8; border-color: var(--line); color: var(--ink-3); }

/* 今日跟进清单 */
.lead-todo { display: grid; gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .lead-todo { grid-template-columns: 1fr; } }

.ltodo { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.ltodo-top { display: flex; align-items: center; gap: 10px; }
.ltodo-name {
  flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px;
  display: flex; align-items: baseline; gap: 7px;
}
.ltodo-who { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.ltodo-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lbucket {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #f2f5f8; color: var(--ink-2); border: 1px solid var(--line);
}
.lbucket--overdue { background: #fdeceb; color: var(--danger); border-color: #f6d5d2; }
.lbucket--due { background: var(--gold-bg); color: #97701c; border-color: var(--gold-soft); }
.lbucket--hot { background: #e9f7ef; color: #1f7a4d; border-color: #b8e0c8; }
.ltodo-reason { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.ltodo-act { margin-top: 7px; font-size: 13px; color: var(--ink); }

/* AI 写的今日打法 */
.lead-advice { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.lead-advice-body {
  margin-top: 6px; padding: 11px 13px; font-size: 13.5px; line-height: 1.75;
  color: var(--ink-2); white-space: pre-wrap;
  background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.lead-advice-body.is-live { border-color: var(--navy-300); }

/* 评分卡 */
.lead-score, .lead-fields, .lead-events {
  border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 13px;
}
.lead-why {
  font-size: 14px; font-weight: 700; color: var(--navy-700);
  background: var(--gold-bg); border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 11px;
}
.ldim { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ldim-n { flex: none; width: 62px; font-size: 12.5px; color: var(--ink-3); }
.ldim-bar { flex: 1 1 auto; height: 7px; background: #eef2f6; border-radius: 999px; overflow: hidden; }
.ldim-fill { height: 100%; background: var(--navy-500); border-radius: 999px; }
.ldim-v {
  flex: none; width: 30px; text-align: right; font-weight: 700; font-size: 12.5px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}

/* 详情里的表单收紧一点（默认的 .field 是给建档页用的，太松） */
.lead-fields .field--tight, .lead-new .field--tight { margin-bottom: 9px; }
.field--tight > label { font-size: 12px; margin-bottom: 4px; }
.lead-fields .input, .lead-fields .select,
.lead-new .input, .lead-new .select { font-size: 13.5px; padding: 8px 10px; }

/* 写一条跟进 */
.ltouch { display: flex; gap: 9px; margin-bottom: 9px; }
.ltouch .select { flex: 1 1 0; }
.lead-events .textarea { min-height: 70px; }
.ltouch-next { display: flex; gap: 9px; margin: 9px 0; }
.ltouch-next .input { flex: 2 1 0; }
.ltouch-next .input[type=date] { flex: 1 1 0; }

/* 跟进流水时间线 */
.ltl { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.ltl-row { border-left: 3px solid var(--line); padding: 2px 0 2px 11px; }
.ltl-row--reply { border-left-color: var(--ok); }
.ltl-row--touch { border-left-color: var(--navy-300); }
.ltl-h { display: flex; align-items: baseline; gap: 7px; }
.ltl-kind { font-size: 11.5px; font-weight: 700; color: var(--navy-600); }
.ltl-way { font-size: 11.5px; color: var(--ink-3); }
.ltl-b {
  font-size: 13px; color: var(--ink-2); margin-top: 3px;
  white-space: pre-wrap; word-break: break-word;
}

/* 新线索表单 */
.lead-new {
  border: 1px solid var(--gold-soft); background: var(--gold-bg);
  border-radius: 12px; padding: 12px 13px; margin-bottom: 11px;
}

/* ---------------------------------------------------------- 提示块 / 分隔标题 */
/* ⚠️ 这两个类名原来是从一份独立报告 HTML 里抄过来的（.note .n-blue），
   主题里根本没有 —— 页面上就变成了裸文本，还看不出来是错。
   教训：类名只能从 theme.css / jiuke.css 里挑，不许从别的文件抄。 */
.note {
  border-radius: 10px; padding: 10px 12px; margin-top: 12px;
  font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
  background: var(--bg); border-left: 3px solid var(--line);
}
.note--blue { background: #f2f7fc; border-left-color: var(--navy-500); }
.note--warn { background: #fff8ed; border-left-color: var(--warn); }
.note--gold { background: var(--gold-bg); border-left-color: var(--gold); }

/* 同一张卡里出现第二个 card-title 时，用一条横线把它和上面隔开 */
.card-title--sep {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}