/* 打印区域（仿“上图格式”） */
.print-area{
background:linear-gradient(180deg, var(–panel-2), var(–panel));
border:1px solid var(–border);
border-radius:16px;
padding:20px;
box-shadow:0 6px 24px rgba(0,0,0,.25);
}

.header{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-bottom:16px;border-bottom:1px solid var(–border);
}
.title{
display:flex;align-items:center;gap:10px;
}
.title .logo{
width:36px;height:36px;border-radius:10px;background:#0d1320;border:1px solid var(–border);
display:flex;align-items:center;justify-content:center;font-weight:700;color:var(–blue)
}
.title h1{margin:0;font-size:18px}
.title small{display:block;color:var(–subtext);font-weight:400}

.selects{display:flex;gap:12px;flex-wrap:wrap}
.select{
background:#0d1320;border:1px solid var(–border);color:var(–text);
padding:8px 10px;border-radius:10px;min-width:180px;
}

.tip{
margin:16px 0 20px;
background:rgba(43,124,255,.12);
border:1px solid rgba(43,124,255,.35);
color:#cfe0ff;
padding:12px 14px;border-radius:12px;
}

.section-title{
margin:10px 0 8px;font-size:15px;color:var(–subtext);
display:flex;align-items:center;gap:8px;
}
.section-title .dot{width:8px;height:8px;border-radius:999px;background:var(–blue)}

.history{
display:flex;flex-direction:column;gap:12px;
margin-top:8px;
}
.card{
background:#0e1423;
border:1px solid var(–border);
border-radius:14px;
padding:14px;
}
.card .meta{
display:flex;gap:10px;align-items:center;color:var(–subtext);font-size:12px;margin-bottom:6px;
}
.badge{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;color:#d1e7ff;background:rgba(43,124,255,.15);
border:1px solid rgba(43,124,255,.35);
padding:4px 8px;border-radius:999px;
}
.qa{
display:grid;grid-template-columns: 92px 1fr;gap:10px;align-items:start;
}
.qa .tag{color:var(–subtext)}
.qa .content{white-space:pre-wrap}
.ok{color:var(–green)}
.kbd{
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background:#0b0f1a;border:1px solid var(–border);padding:2px 6px;border-radius:6px;
}

/* 非打印的说明与底栏 */
.hint{color:var(–subtext);margin-top:10px}

/* 打印样式：仅打印 .print-area */
@media print {
body{background:#fff}
body *{visibility:hidden}
.print-area, .print-area *{visibility:visible}
.print-area{position:absolute;inset:0;margin:0;border:none;border-radius:0;box-shadow:none}
.toolbar{display:none !important}
}

<div class="tip">
  示例：什么是 Odoo ERP 系统？如何管理销售订单？/ 库存管理的最佳实践…
</div>

<div class="section-title"><span class="dot"></span><span>对话历史</span></div>

<div class="history">
  <!-- 示例卡片 1 -->
  <div class="card">
    <div class="meta">
      <span class="badge">查询成功</span>
      <span>找到 <b>19</b> 条记录 · 2025-08-28 20:48</span>
    </div>
    <div class="qa">
      <div class="tag">👤 提问</div>
      <div class="content">金额大于 <span class="kbd">1000</span> 的销售订单</div>
      <div class="tag">🤖 分析</div>
      <div class="content">
        查询 <b>金额大于 1000</b> 的销售订单信息，包括订单号、客户、总金额、状态和日期；按金额降序。<br/>
        模型：<span class="kbd">sale.order</span>；条件：<span class="kbd">[['amount_total','&gt;',1000]]</span>
      </div>
    </div>
  </div>

  <!-- 示例卡片 2 -->
  <div class="card">
    <div class="meta">
      <span class="badge">查询成功</span>
      <span>找到 <b>47</b> 条记录 · 2025-08-28 20:49</span>
    </div>
    <div class="qa">
      <div class="tag">👤 提问</div>
      <div class="content">查看产品的销售价格和成本价</div>
      <div class="tag">🤖 分析</div>
      <div class="content">
        查询产品的销售价和成本价，包含产品编码、名称、价格和成本。<br/>
        模型：<span class="kbd">product.product</span>；条件：<span class="kbd">[]</span>
      </div>
    </div>
  </div>

  <!-- 示例卡片 3 -->
  <div class="card">
    <div class="meta">
      <span class="badge ok">已完成</span>
      <span>2025-08-28 20:50</span>
    </div>
    <div class="qa">
      <div class="tag">📄 结论</div>
      <div class="content">
        本次会话共执行 2 次查询，均返回有效结果。可导出明细或继续细化筛选条件。
      </div>
    </div>
  </div>
</div>

<div class="hint">提示：点击右上角「下载 PDF」仅导出此区域；或用浏览器「系统打印」。</div>