# AI 对话 UI 样式重构与 SaaS 化设计方案

为了让 X-Financial AI 助手的对话界面展现更专业的金融与 SaaS 企业化视觉，我们对前端全局的 Markdown 渲染样式进行了重构。

## 设计目标
- **中性色打底**：对话块背景、边框移除饱和偏色，统一采用 Slate/Neutral 冷灰色调（如 `#f8fafc` 和 `#cbd5e1`）。
- **降低色彩冗余**：将非必须的高亮蓝色改为中性灰色，各单据卡片仅在状态字样与极淡头部透明底中体现状态点缀，避免彩色杂乱堆积。
- **界面扁平微阴影**：移除带有斜向彩色发光的阴影与复杂的背景图案，采用 1px 实线描边配合微阴影，契合 Stripe, Jira 等现代 SaaS 产品规范。

## 详细参数定义
- **引用块 (`blockquote` / `.ai-html-callout`)**：
  - 边框：`3px solid #cbd5e1`
  - 背景：`#f8fafc`
  - 文字：`#334155`
- **信息网格 (`.ai-html-focus-grid`)**：
  - 边框：`3px solid #cbd5e1`
  - 标题颜色：`#475569` (Slate-600)
- **单据卡片 (`.ai-document-card`)**：
  - 描边：`1px solid #e2e8f0`
  - 投影：`0 1px 2px 0 rgba(15, 23, 42, 0.05)`
  - 头部默认背景：`rgba(241, 245, 249, 0.5)`
  - 状态点缀色：
    - `is-success` (Teal-700): `#0f766e`
    - `is-warning` (Amber-700): `#b45309`
    - `is-danger` (Red-700): `#b91c1c`
    - is-pending (Blue-600): `#2563eb`

## 消息排版格式规范
- **限制 Alert 引用块为单条**：在警示/阻塞状态下，只允许包含一条 `>` 引用块用作 Alert 提示。
- **列表扁平化**：发起前核对结果等普通多维状态信息，一律不使用 `>` 引用块，合并为标准的无序列表展示，保持界面视觉扁平、整洁。
- **常规表单数据平铺**：时间、单据编号等字段，均采用扁平加粗文本平铺，不再触发 focus-grid 等具有边框线的额外容器。