/* ============================================================
   AI 组件样式 + 多地区法规对照矩阵
   设计意图（2026-10-05 改）：AI 区域改用品牌墨绿（--ai-* 重映射为 brand 墨绿族），
   与全站主题色 / 面板「我」气泡 / 发送按钮保持同一语言；
   法源仍用暖金铜（--accent-*），法规对照矩阵表头用中性墨。
   ============================================================ */

:root {
  /* AI 区身份色重映射为品牌墨绿（原紫蓝已弃用，2026-10-05） */
  --ai-700: #0F4C3F;
  --ai-600: #15614F;
  --ai-500: #1C7A63;
  --ai-100: #E3F0EB;
  --ai-50:  #F1F8F5;
}

/* ---------- AI 标识 ---------- */
.ai-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--ai-500), var(--brand-400));
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3px;
  line-height: 1.6;
  vertical-align: middle;
}

.ai-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--ai-100);
  border-radius: var(--r-full);
  background: var(--ai-50);
  color: var(--ai-600);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  vertical-align: middle;
}
.ai-inline:hover { background: var(--ai-100); border-color: var(--ai-500); color: var(--ai-700); }

/* ---------- AI 面板 ---------- */
.ai-panel {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ai-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.ai-panel + .ai-panel { margin-top: var(--sp-5); }

.ai-panel__rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ai-500), var(--brand-400));
}

.ai-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, var(--ai-50), var(--white));
  border-bottom: 1px solid var(--ai-100);
}
.ai-panel__icon {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ai-500), var(--brand-400));
  color: var(--white);
  display: grid;
  place-items: center;
}
.ai-panel__title-wrap { flex: 1; min-width: 0; }
.ai-panel__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.3; }
.ai-panel__sub { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: 1px; }
.ai-panel__model {
  flex: none;
  font-size: var(--fs-2xs);
  color: var(--ai-600);
  background: var(--white);
  border: 1px solid var(--ai-100);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.ai-panel__actions { flex: none; display: flex; gap: var(--sp-2); }
.ai-panel__body { padding: var(--sp-5); }
.ai-panel__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink-50);
  border-top: 1px solid var(--ink-150);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  line-height: 1.55;
}
.ai-panel__foot svg { flex: none; margin-top: 2px; color: var(--ai-500); }

/* ---------- 让 AI 帮我 ---------- */
.ai-delegate {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ai-100);
  border-radius: var(--r-md);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ai-delegate:hover { background: var(--ai-50); border-color: var(--ai-500); transform: translateX(2px); }
.ai-delegate__icon {
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--ai-100);
  color: var(--ai-600);
  display: grid;
  place-items: center;
}
.ai-delegate__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ai-delegate__text { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-900); }
.ai-delegate__desc { font-size: var(--fs-2xs); color: var(--ink-500); }
.ai-delegate > svg { color: var(--ink-400); flex: none; }

/* ---------- 正在分析 ---------- */
.ai-thinking {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ai-50);
  border: 1px dashed var(--ai-100);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--ai-700);
}
.ai-thinking__spinner {
  width: 14px; height: 14px;
  flex: none;
  border: 2px solid var(--ai-100);
  border-top-color: var(--ai-500);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-thinking__steps { margin-left: auto; display: flex; gap: var(--sp-2); }
.ai-thinking__steps i {
  font-style: normal;
  font-size: var(--fs-2xs);
  color: var(--ai-600);
  background: var(--white);
  border: 1px solid var(--ai-100);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

/* ---------- AI 结论 ---------- */
.ai-answer { display: flex; flex-direction: column; gap: var(--sp-3); }
.ai-answer__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  color: var(--ink-800);
  background: var(--white);
  border: 1px solid var(--ink-150);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.ai-answer__text b { color: var(--ai-700); font-weight: var(--fw-semibold); }
.ai-answer__refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-100);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent-500);
}
.ai-answer__refs-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--accent-700);
  margin-right: 2px;
}
.ai-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  color: var(--accent-700);
  background: var(--white);
  border: 1px solid var(--accent-300);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.ai-ref:hover { background: var(--accent-100); }
.ai-ref b { font-weight: var(--fw-semibold); }
.ai-answer__noref {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--warn-100);
  border-left: 3px solid var(--warn-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--warn-700);
  font-size: var(--fs-2xs);
}
.ai-answer__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}
.ai-conf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}
.ai-conf--ok { background: var(--ok-100); color: var(--ok-700); }
.ai-conf--warn { background: var(--warn-100); color: var(--warn-700); }
.ai-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink-500);
  font-size: var(--fs-2xs);
  cursor: pointer;
}
.ai-mini:hover { border-color: var(--ink-300); color: var(--ink-700); }

/* ---------- AI 问答框 ---------- */
.ai-ask { display: flex; flex-direction: column; gap: var(--sp-3); }
.ai-ask__input {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  height: 38px;
  border: 1px solid var(--ai-500);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--ai-50);
  cursor: text;
}
.ai-ask__input > svg { color: var(--ai-500); flex: none; }
.ai-ask__input > span:nth-child(2) { flex: 1; font-size: var(--fs-xs); color: var(--ink-400); }
.ai-ask__hint { font-size: var(--fs-2xs); color: var(--ink-400); }
.ai-ask__samples { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ai-sample {
  padding: 4px 10px;
  border: 1px solid var(--ai-100);
  border-radius: var(--r-full);
  background: var(--ai-50);
  color: var(--ai-700);
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: background var(--t-fast);
}
.ai-sample:hover { background: var(--ai-100); }

/* ---------- AI 抽取结果 ---------- */
.ai-extract { display: flex; flex-direction: column; gap: var(--sp-2); }
.ai-extract__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  background: var(--white);
}
.ai-extract__row.is-uncertain { background: var(--warn-100); border-color: rgba(180,120,15,0.25); }
.ai-extract__row > svg { color: var(--ink-300); flex: none; }
.ai-extract__raw { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--fs-2xs); min-width: 130px; }
.ai-extract__std { font-weight: var(--fw-medium); color: var(--ink-900); flex: 1; }
.ai-extract__cas { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-500); }
.ai-extract__conf {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  min-width: 34px;
  text-align: right;
}
.ai-extract__ok, .ai-extract__flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.ai-extract__ok { color: var(--ok-700); }
.ai-extract__flag { color: var(--warn-700); font-weight: var(--fw-medium); }
.ai-extract__note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  padding-top: var(--sp-2);
}
.ai-extract__note svg { color: var(--ai-500); }

/* ============================================================
   多地区法规对照矩阵
   ============================================================ */
.matrix-wrap { overflow-x: auto; }
table.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-xs);
}
.matrix thead th {
  background: var(--ink-50);
  border-bottom: var(--border);
  padding: 0 var(--sp-4);
  height: 34px;
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-600);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.matrix tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
  color: var(--ink-700);
  line-height: 1.5;
}
.matrix tbody tr:hover { background: var(--brand-50); }
.matrix tbody tr:last-child td { border-bottom: none; }
.matrix__corner { width: 104px; }
.matrix__region {
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  white-space: nowrap;
}
.matrix__flag { margin-right: 5px; }

.ev-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: var(--fs-2xs);
  line-height: 1.6;
}

/* ---------- 证据类型卡 ---------- */
.ev-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.ev-card {
  border: var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--white);
  position: relative;
}
.ev-card.is-highlight { border-color: var(--brand-400); background: var(--brand-50); }
.ev-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ev-card__no {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
  background: var(--brand-100);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  flex: none;
}
.ev-card__name { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-900); flex: 1; }
.ev-card__req { font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-600); }
.ev-card__limit {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--warn-100);
  border-left: 2px solid var(--warn-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-2xs);
  color: var(--warn-700);
  line-height: 1.55;
  display: flex;
  gap: var(--sp-2);
}
.ev-card__limit svg { flex: none; margin-top: 2px; }
.ev-card__proof {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  line-height: 1.6;
  display: flex;
  gap: var(--sp-2);
}
.ev-card__proof svg { flex: none; margin-top: 2px; color: var(--ink-400); }

/* ---------- AI 能力清单 ---------- */
.cap-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cap-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--ai-50);
  border: 1px solid var(--ai-100);
}
.cap-row__icon { flex: none; color: var(--ai-600); margin-top: 1px; }
.cap-row__body { flex: 1; min-width: 0; }
.cap-row__name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-900); margin-bottom: 2px; }
.cap-row__desc { font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.55; }
.cap-row__kind {
  flex: none;
  font-size: var(--fs-2xs);
  color: var(--ai-600);
  background: var(--white);
  border: 1px solid var(--ai-100);
  border-radius: var(--r-full);
  padding: 1px 7px;
}

/* ---------- AI 纪律清单 ---------- */
.discipline-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.discipline-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.discipline-row__icon { flex: none; color: var(--ai-500); margin-top: 2px; }
.discipline-row__name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-900); margin-bottom: 1px; }
.discipline-row__desc { font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.6; }

/* ---------- 页签 ---------- */
.tabs {
  display: flex;
  gap: var(--sp-6);
  border-bottom: var(--border-soft);
  padding: 0 var(--sp-5);
  background: var(--white);
}
.tab {
  padding: var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: var(--fw-medium);
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.tab:hover { color: var(--ink-800); }
.tab.is-active { color: var(--brand-700); border-bottom-color: var(--brand-600); font-weight: var(--fw-semibold); }
.tab__count {
  font-size: var(--fs-2xs);
  background: var(--ink-100);
  color: var(--ink-600);
  padding: 0 5px;
  border-radius: var(--r-full);
  margin-left: 5px;
}
.tab.is-active .tab__count { background: var(--brand-100); color: var(--brand-700); }

/* ---------- 内联页签（无边框容器） ---------- */
.tabs--bare { background: transparent; border: none; padding: 0; margin-bottom: var(--sp-5); }