/*
 * chat-typography.css
 * Text-level styles for .message-content. All values reference
 * chat-tokens.css variables. No hex codes allowed.
 *
 * 2026-04-20 nested-fix: agent backend 用標準 markdown 渲染 (marked.js)，
 * 容器 class 是 .agent-response-markdown 不是我們的 .markdown-content。
 * li 內部會有 <p> + nested <ul>/<ol>。下方規則用 .message-content 直接
 * 套到所有 markdown 渲染容器（兩條路徑都涵蓋）。
 */

.message-content h1 {
  font-size: var(--type-h1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* H2 (Claude-tighten 2026-04-20): 純粗體 + 收斂上下 margin (16/8 → 12/4) */
.message-content h2 {
  font-size: var(--type-h2);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: var(--space-3) 0 var(--space-1) 0;
}

.message-content h3 {
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.4;
  /* 與 h1/h2 同用 primary，避免跟下方 <strong> 形成反層次（標題比內文粗體淡）。
     14px + weight 600 已足夠跟 body 15px/400 區別。 */
  color: var(--color-text-primary);
  margin: var(--space-3) 0 var(--space-1) 0;
}

/* Label/overline utility — keeps the 11px uppercase style for places
   that deliberately opt in (metric labels, section overlines) rather
   than auto-applying to every <h3>. */
.message-content .label,
.message-content .overline {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--space-4) 0 var(--space-2) 0;
}

/* Body p (Claude-tighten 2026-04-20): 行高 1.7 → 1.6, 段距 16px → 12px */
.message-content p {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-claude-response);
}
.message-content p.lead {
  font-size: var(--type-lead);
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.message-content p:last-child { margin-bottom: 0; }

.message-content strong { font-weight: 700; color: var(--color-text-primary); }
.message-content em { font-style: italic; color: var(--color-text-secondary); }

/* ---------- Unordered list (Claude-tighten 2026-04-20: 上下緊湊) ----------
   用 ul > li direct child 避免影響 nested ol/ul 內部 li。 */
.message-content ul {
  list-style: none;
  padding-left: 0;
  margin: var(--space-3) 0;
}
.message-content ul > li {
  position: relative;
  padding: 0 0 0 36px;
  margin: 2px 0;
  line-height: 1.6;
  font-size: var(--type-body);
  color: var(--color-text-primary);
}
.message-content ul > li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--color-text-secondary);
  border-radius: 50%;
}
.message-content ul > li strong { color: var(--color-text-primary); }

/* ---------- Ordered list (Claude-tighten 2026-04-20: 上下緊湊) ----------
   用 ol > li direct child，避免 nested ul/ol 內部 li 也被遞增 counter。 */
.message-content ol {
  list-style: none;
  padding-left: 0;
  margin: var(--space-3) 0;
  counter-reset: step;
}
.message-content ol > li {
  position: relative;
  padding: 0 0 0 36px;
  margin: 2px 0;
  counter-increment: step;
  line-height: 1.6;
  font-size: var(--type-body);
  color: var(--color-text-primary);
}
.message-content ol > li::before {
  content: counter(step) ".";
  position: absolute;
  left: 8px;
  top: 0;
  color: var(--color-text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- Blockquote (Claude-tighten 2026-04-20: 行高 1.65→1.55) ---------- */
.message-content blockquote {
  margin: var(--space-3) 0;
  padding: 4px 16px;
  border-left: 2px solid var(--color-brand-500);
  background: rgba(249, 115, 22, 0.03);
  border-radius: 0 4px 4px 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body);
  line-height: 1.55;
}
.message-content blockquote cite {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-style: normal;
}
.message-content blockquote cite::before { content: '— '; }

/* ---------- Link ---------- */
.message-content a,
.message-content a.analysis-link {
  color: var(--color-brand-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 65, 12, 0.3);
  transition: border-color 0.15s, color 0.15s;
}
.message-content a:hover,
.message-content a.analysis-link:hover {
  color: #9A3412;
  border-bottom-color: var(--color-brand-accent);
}

/* ---------- Horizontal rule (Claude-polish 2026-04-20) ---------- */
.message-content hr,
.message-content hr.markdown-divider {
  border: none;
  border-top: 0.5px solid var(--stroke-hairline);
  margin: var(--space-4) 4px;
  height: auto;
  background: none;
}

/* Inline code (Claude-flat-flow 2026-04-20): 改回 Claude 原版深紅字 + 細邊（不再用品牌橘） */
.message-content code:not(pre code):not(.code-block code):not(.code-block-content code),
.message-content .inline-code {
  background: var(--surface-code-inline);
  border: 0.5px solid var(--stroke-subtle);
  color: var(--color-code-inline-fg);
  padding: 1px 4px;
  border-radius: 6.4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 400;
  white-space: pre-wrap;
}

/* ---------- Tables ---------- */
.message-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 14px;
  background: var(--color-bg-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.message-content thead th {
  text-align: left;
  padding: 10px 14px;
  background: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border-default);
}
.message-content tbody td {
  padding: 11px 14px;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-bg-subtle);
}
.message-content tbody tr:last-child td { border-bottom: none; }
.message-content tbody tr:hover { background: var(--color-bg-canvas); }
.message-content td.num,
.message-content th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================================
 * Nested list 修正 (Claude-nested-fix 2026-04-20)
 * agent backend 渲染 ol/ul li 內部會包 <p> 和 nested ul/ol，
 * 預設 margin 累加導致 li 高度被撐到 60-80px、間距巨大。
 * ============================================================ */

/* li 內第一個 p 移除上下 margin（li 已有自己的 margin 控制間距） */
.message-content li > p {
  margin: 0;
}

/* li 內 nested 子清單（ul/ol）緊貼上一個 p，不再撐空白 */
.message-content li > ul,
.message-content li > ol {
  margin: 2px 0 0 0;
}

/* nested li 的字級稍小、再緊湊（視覺層次：父 14px、子 13px） */
.message-content li li {
  font-size: 0.95em;
  margin: 0;
}

/* ol li 的 ::before（counter "N."）若被 wrap 到下一行，
   強制 nowrap + 給足 min-width 24px 確保「N.」在同一行 */
.message-content ol > li::before {
  white-space: nowrap;
  min-width: 24px;
}

/* 頂層 ol/ul（不在 li 內）距離前後段保持 12px。
   注意用 `>` 直系子代避免 nested ul 也被命中（nested 走前面 li > ul 規則 = 2px）。 */
.message-content > ol,
.message-content > ul,
.message-content > .agent-response-markdown > ol,
.message-content > .agent-response-markdown > ul {
  margin: var(--space-3) 0;
}

/* h2/h3 後緊接段落（p）時，p 不要再加 top-margin */
.message-content h2 + p,
.message-content h3 + p {
  margin-top: 0;
}

/* h2/h3 後緊接 ul/ol 時，清單不要再加 12px 上距
   （否則標題下方累加 16px 看起來太空，Claude 原版極 tight）
   注意：agent backend 用 .agent-response-markdown 容器，原本的
   `.message-content > .agent-response-markdown > ul { margin: 12px 0 }`
   specificity (0,0,2,1) 會蓋過短選擇器，這裡加完整路徑提權 (0,0,2,2)。 */
.message-content h2 + ul,
.message-content h2 + ol,
.message-content h3 + ul,
.message-content h3 + ol,
.message-content .agent-response-markdown h2 + ul,
.message-content .agent-response-markdown h2 + ol,
.message-content .agent-response-markdown h3 + ul,
.message-content .agent-response-markdown h3 + ol {
  margin-top: 0;
}

/* ul/ol 後緊接下一個 h2/h3 時，標題上距收斂
   （ul mBot 12 + h3 mTop 12 = 24px 太鬆，改為 ul 12 + h3 4 = 16px） */
.message-content ul + h2,
.message-content ol + h2,
.message-content ul + h3,
.message-content ol + h3 {
  margin-top: var(--space-1);
}