/*
 * knowledge.css — 「知识与记忆」面板样式。
 *
 * 配色承担三个产品判断（与 knowledge.js 完全对应）：
 *   ① boundary（红线）用危险红、blindspot（自认盲点）用警示琥珀 —— 它们必须比
 *      method/claim/fact 这些"他知道什么"的分类更刺眼。一个不知道自己不该说什么的
 *      专家，比一个知道得少的专家危险得多。
 *   ② 「永远必带」和「话题命中」是两种完全不同的语义：前者红系（硬约束），
 *      后者蓝系（按当前话题检索命中），一眼可分。
 *   ③ contested（前后矛盾）用红色描边 + 角标，并且把双方来源摊开显示。
 *
 * class 全部以 kn- 开头，避免和 panels.css / zoom.css / twins.css 抢命名。
 */

/* 这个面板要同时摆下"两列注入清单 + 分组卡片 + 记忆"，比默认抽屉宽 */
#panel-knowledge { width: min(820px, 96vw); }
.kn-body { display: flex; flex-direction: column; gap: 14px; }

/* ══════════════ 概览 ══════════════ */
.kn-hint {
  font-size: var(--fs-2);
  line-height: 1.7;
  color: var(--text-2, var(--text-2));
  background: var(--tint);
  border: 1px solid var(--line, var(--line));
  border-radius: var(--r, 12px);
  padding: 10px 12px;
}
.kn-hint b { color: var(--text, var(--text)); font-variant-numeric: tabular-nums; }
.kn-hint-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kn-hint .kn-sub { margin-top: 4px; }
.kn-error { color: var(--danger); }
.kn-sub { font-size: var(--fs-1); line-height: 1.6; color: var(--muted, var(--muted)); }

/* ══════════════ 专家选择 ══════════════ */
.kn-experts { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-expert {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line, var(--line));
  background: var(--panel, var(--panel));
  color: var(--text-2, var(--text-2));
  font-size: var(--fs-2); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.kn-expert:hover { border-color: var(--lamp-line, rgba(200,68,42,.38)); color: var(--text, var(--text)); }
.kn-expert.on {
  border-color: var(--lamp-line, rgba(200,68,42,.38));
  background: var(--lamp-soft, rgba(200,68,42,.14));
  color: var(--text, var(--text));
  font-weight: 600;
}
.kn-expert-name { font-weight: 600; }
.kn-expert-count, .kn-expert-mem { font-size: var(--fs-1); color: var(--faint, var(--faint)); font-variant-numeric: tabular-nums; }

/* ══════════════ 话题栏 ══════════════ */
.kn-topicbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kn-topicbar .input { flex: 1; min-width: 240px; }
.kn-topic-hint { flex-basis: 100%; font-size: var(--fs-1); line-height: 1.6; color: var(--muted, var(--muted)); }

/* ══════════════ 注入清单：两列，必带在左 ══════════════ */
.kn-inject { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .kn-inject { grid-template-columns: 1fr; } }
.kn-inject-col {
  border-radius: var(--r, 12px);
  border: 1px solid var(--line, var(--line));
  background: var(--tint);
  padding: 10px 11px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
/* 永远必带 = 硬约束 → 危险红描边 */
.kn-inject-col.mandatory {
  border-color: rgba(255,77,109,.45);
  background: linear-gradient(180deg, rgba(255,77,109,.08), rgba(255,77,109,.02));
}
/* 话题命中 = 按当前话题检索到的 → 蓝系 */
.kn-inject-col.retrieved {
  border-color: rgba(91, 140, 255, .4);
  background: linear-gradient(180deg, rgba(91, 140, 255, .08), rgba(91, 140, 255, .02));
}
.kn-inject-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kn-inject-title-main { font-size: var(--fs-2); font-weight: 650; }
.kn-inject-n { font-size: var(--fs-5); font-variant-numeric: tabular-nums; }
.kn-inject-col.mandatory .kn-inject-n { color: #ff8f83; }
.kn-inject-col.retrieved .kn-inject-n { color: #8fb0ff; }
.kn-inject-why { font-size: var(--fs-1); line-height: 1.6; color: var(--muted, var(--muted)); }
.kn-inject-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kn-inject-row {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 6px; border-radius: var(--r-sm, 8px);
  cursor: pointer; min-width: 0;
}
.kn-inject-row:hover { background: var(--tint-2); }
.kn-inject-title { font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════ kind 徽标 / 分段筛选 ══════════════ */
.kn-kind-badge {
  flex: none;
  display: inline-block;
  padding: 1px 7px; border-radius: 999px;
  font-size: var(--fs-1); line-height: 1.7;
  border: 1px solid var(--line, var(--line));
  background: var(--tint);
  color: var(--text-2, var(--text-2));
  white-space: nowrap;
}
/* 红线：全站最刺眼的一个分类 */
.kn-kind-badge[data-kind="boundary"] {
  color: var(--danger); border-color: rgba(255,77,109,.55);
  background: rgba(255,77,109,.18); font-weight: 650;
}
/* 自认盲点：次刺眼的琥珀 */
.kn-kind-badge[data-kind="blindspot"] {
  color: #c9f8ff; border-color: rgba(200,68,42,.5);
  background: rgba(200,68,42,.16); font-weight: 620;
}
.kn-kind-badge[data-kind="method"] { color: #a9e7e2; border-color: rgba(86, 200, 192, .38); background: rgba(86, 200, 192, .12); }
.kn-kind-badge[data-kind="voice"] { color: var(--violet); border-color: rgba(190, 140, 255, .38); background: rgba(190, 140, 255, .12); }

.kn-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-kind-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line, var(--line));
  background: transparent; color: var(--text-2, var(--text-2));
  font-size: var(--fs-1); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.kn-kind-chip:hover { border-color: var(--lamp-line, rgba(200,68,42,.38)); color: var(--text, var(--text)); }
.kn-kind-chip.on { border-color: var(--lamp-line, rgba(200,68,42,.38)); background: var(--lamp-soft, rgba(200,68,42,.14)); color: var(--text, var(--text)); }
.kn-kind-chip.empty { opacity: .45; }
.kn-kind-chip[data-kind="boundary"] { border-color: rgba(255,77,109,.45); }
.kn-kind-chip[data-kind="blindspot"] { border-color: rgba(200,68,42,.42); }

/* ══════════════ 卡列表 ══════════════ */
.kn-section-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: var(--fs-3); font-weight: 650; color: var(--text, var(--text));
  border-top: 1px solid var(--line-soft, var(--panel-2));
  padding-top: 12px;
}
.kn-section-hint { font-size: var(--fs-1); font-weight: 400; color: var(--faint, var(--faint)); }

.kn-cards, .kn-memories { display: flex; flex-direction: column; gap: 8px; }

.kn-group-head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 6px;
  padding: 5px 0 3px;
  border-bottom: 1px dashed var(--hairline);
}
.kn-group-icon { font-size: var(--fs-3); }
.kn-group-label { font-size: var(--fs-2); font-weight: 650; }
.kn-group-count { font-size: var(--fs-1); color: var(--faint, var(--faint)); font-variant-numeric: tabular-nums; }
.kn-group-why { font-size: var(--fs-1); color: var(--muted, var(--muted)); }
/* 红线/盲点分组头本身也要刺眼 */
.kn-group-head.kind-boundary { border-bottom-color: rgba(255,77,109,.45); }
.kn-group-head.kind-boundary .kn-group-label { color: var(--danger); }
.kn-group-head.kind-blindspot { border-bottom-color: rgba(200,68,42,.42); }
.kn-group-head.kind-blindspot .kn-group-label { color: var(--warn); }

.kn-card {
  border: 1px solid var(--line, var(--line));
  border-radius: var(--r, 12px);
  background: var(--panel, var(--panel));
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px;
  border-left-width: 3px;
  transition: border-color .15s, background .15s;
}
.kn-card:hover { background: var(--panel-2, var(--panel-2)); }
.kn-card[data-kind="boundary"] { border-left-color: rgba(255,77,109,.85); }
.kn-card[data-kind="blindspot"] { border-left-color: rgba(200,68,42,.8); }
.kn-card[data-kind="method"] { border-left-color: rgba(86, 200, 192, .6); }
.kn-card[data-kind="claim"] { border-left-color: rgba(122, 140, 255, .6); }
.kn-card[data-kind="case"] { border-left-color: rgba(190, 140, 255, .5); }
.kn-card[data-kind="voice"] { border-left-color: rgba(190, 140, 255, .6); }
.kn-card[data-inject="mandatory"] { box-shadow: inset 0 0 0 1px rgba(255,77,109,.16); }
.kn-card.flash { animation: kn-flash 1.5s ease-out; }
@keyframes kn-flash {
  0% { background: rgba(200,68,42,.22); }
  100% { background: var(--panel, var(--panel)); }
}
.kn-card.pending-delete { border-color: rgba(255,77,109,.7); }

.kn-card-top { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }
.kn-card-title { font-size: var(--fs-2); font-weight: 640; color: var(--text, var(--text)); }
.kn-card-badges { display: inline-flex; gap: 5px; }
.kn-card-del { margin-left: auto; flex: none; padding: 3px 9px; font-size: var(--fs-1); }
.kn-card-body { font-size: var(--fs-2); line-height: 1.7; color: var(--text-2, var(--text-2)); white-space: pre-wrap; }
.kn-card-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: var(--fs-1); color: var(--faint, var(--faint));
}
.kn-card-meta .kn-prov { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-tags { color: var(--muted, var(--muted)); }

/* 注入标记：必带=红，话题命中=蓝 */
.kn-badge {
  display: inline-block;
  padding: 0 6px; border-radius: 999px;
  font-size: var(--fs-1); line-height: 1.75;
  border: 1px solid var(--line, var(--line));
  color: var(--muted, var(--muted));
  white-space: nowrap;
}
.kn-badge.mandatory { color: var(--danger); border-color: rgba(255,77,109,.5); background: rgba(255,77,109,.16); font-weight: 640; }
.kn-badge.retrieved { color: #c3d3ff; border-color: rgba(91, 140, 255, .45); background: rgba(91, 140, 255, .14); }
.kn-badge.contested { color: var(--danger); border-color: rgba(255,77,109,.6); background: rgba(255,77,109,.2); font-weight: 650; }

/* ══════════════ 矛盾 ══════════════ */
.kn-conflicts { display: flex; flex-direction: column; gap: 8px; }
.kn-conflict-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--fs-2); }
.kn-conflict-icon { font-size: var(--fs-4); }
.kn-conflict {
  border: 1px solid rgba(255,77,109,.45);
  background: rgba(255,77,109,.06);
  border-radius: var(--r, 12px);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.kn-conflict-subject { font-size: var(--fs-2); font-weight: 650; color: var(--danger); }
.kn-conflict-side { display: flex; flex-direction: column; gap: 3px; }
.kn-side-line { font-size: var(--fs-2); line-height: 1.65; color: var(--text-2, var(--text-2)); }
.kn-side-tag {
  display: inline-block; margin-right: 6px;
  padding: 0 6px; border-radius: 999px;
  font-size: var(--fs-1); border: 1px solid rgba(91, 140, 255, .45); color: #c3d3ff;
}
.kn-side-tag.against { border-color: rgba(255,77,109,.55); color: var(--danger); }
.kn-side-src { font-size: var(--fs-1); color: var(--faint, var(--faint)); }

/* ══════════════ 记忆 ══════════════ */
.kn-mem {
  border: 1px solid var(--line, var(--line));
  border-radius: var(--r, 12px);
  background: var(--panel, var(--panel));
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px;
}
/* 前后矛盾：整条描红 + 左侧粗线，扫一眼就能看到 */
.kn-mem.contested {
  border-color: rgba(255,77,109,.55);
  border-left: 3px solid rgba(255,77,109,.9);
  background: rgba(255,77,109,.05);
}
.kn-mem-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kn-mem-subject { font-size: var(--fs-2); font-weight: 640; color: var(--text, var(--text)); }
.kn-mem-star { color: var(--lamp, var(--lamp)); font-size: var(--fs-1); letter-spacing: 1px; }
.kn-mem-meta { font-size: var(--fs-1); color: var(--faint, var(--faint)); font-variant-numeric: tabular-nums; }
.kn-mem-fix { margin-left: auto; flex: none; padding: 3px 9px; font-size: var(--fs-1); }
.kn-mem-content { font-size: var(--fs-2); line-height: 1.7; color: var(--text-2, var(--text-2)); white-space: pre-wrap; }
.kn-mem-against {
  border-top: 1px dashed rgba(255,77,109,.35);
  padding-top: 5px; margin-top: 2px;
  display: flex; flex-direction: column; gap: 3px;
}
.kn-against-title { font-size: var(--fs-1); color: var(--danger); font-weight: 620; }
.kn-against-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: var(--fs-1); color: var(--text-2, var(--text-2)); }
.kn-against-text { flex: 1; min-width: 180px; }
.kn-mem-src { font-size: var(--fs-1); color: var(--faint, var(--faint)); }
.kn-mem-editor { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.kn-mem-edit { width: 100%; }
.kn-mem-editor-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.kn-field { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-1); color: var(--muted, var(--muted)); }
.kn-field.inline { flex-direction: row; align-items: center; gap: 6px; }
.kn-field.inline .kn-mem-imp { width: 64px; }

/* ══════════════ 新增表单 ══════════════ */
.kn-add {
  border: 1px solid var(--line, var(--line));
  border-radius: var(--r, 12px);
  background: var(--tint);
  padding: 10px 12px;
}
.kn-add > summary { cursor: pointer; font-size: var(--fs-2); font-weight: 640; }
.kn-add-note { font-size: var(--fs-1); line-height: 1.6; color: var(--muted, var(--muted)); margin: 8px 0 6px; }
.kn-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kn-add .kn-field { margin-top: 8px; }
.kn-add-grid .kn-field { margin-top: 0; }
.kn-add-msg { margin-top: 8px; }
.kn-actions { display: flex; gap: 8px; margin-top: 10px; }
.kn-ok { font-size: var(--fs-1); color: #8fe3bb; }
.kn-warn { font-size: var(--fs-1); color: #c9f8ff; line-height: 1.6; }

.kn-empty {
  font-size: var(--fs-1); line-height: 1.6;
  color: var(--faint, var(--faint));
  border: 1px dashed var(--line, var(--line));
  border-radius: var(--r-sm, 8px);
  padding: 10px 12px;
}