/* ============================================================================
 * chat-render.css — 知识库原版「回答内容渲染」样式抽取件
 * ----------------------------------------------------------------------------
 * 来源:
 *   1) E:\Knowledge\ShineV1.01\frontend\public\css\style.css
 *      (回答内容容器原选择器为 .chat-md-host; 少数列表规则挂在 .chat-message .message-content 下)
 *   2) E:\Knowledge\ShineV1.01\frontend\public\pages\chat.html 的内联 <style> 段
 *      (callout / svg-container / timeline / cards / footnotes / 语义色 等扩展组件样式;
 *       这些规则不在 style.css 中, 但由 renderMarkdown 输出, 故一并抽取)
 *   抽取日期: 2026-10-03
 *   规则: 已剔除 .chat-message 外层气泡样式、.chat-sources 参考来源样式, 以及 dark-theme.css 暗色规则;
 *         选择器前缀统一改写为 .qa-body (官网页回答内容容器)。
 *
 * 变量映射 (官网页 assets/css/style.css 只定义 --ink/--line/--brand 等, 无知识库变量, 故替换为原值):
 *   var(--primary)        -> #00a8a8     var(--primary-hover) -> #008d8d
 *   var(--primary-bg)     -> rgba(0,168,168,0.08)
 *   var(--primary-bg-strong) -> rgba(0,168,168,0.15)
 *   var(--bg-primary)     -> #ffffff     var(--bg-secondary) -> #f8fafc
 *   var(--bg-tertiary)    -> #f1f5f9
 *   var(--border)         -> #e2e8f0
 *   var(--text-primary)   -> #0f172a     var(--text-secondary) -> #475569
 *   var(--text-tertiary)  -> #64748b
 *   var(--radius-xs)      -> 4px         var(--radius-sm) -> 6px
 *   var(--font-mono)      -> 'JetBrains Mono','Fira Code','Cascadia Code','Microsoft YaHei',Consolas,'Lucida Console','Courier New',sans-serif
 *   var(--transition-fast) -> 0.15s ease
 * ==========================================================================*/

/* ============================ 基础排版 / 换行 ============================ */
.qa-body {
    line-height: 1.7;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* 补 265: 强制子元素允许自动换行 — 防止 pre/code/table 覆盖继承 */
.qa-body :where(pre, code, kbd, samp, table, th, td, thead, tbody, tr) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 但 pre 里设了 pre-wrap, 恢复一下 */
.qa-body pre {
    white-space: pre-wrap;
}

/* ============================ 段落 / 列表 / 标题 ============================ */
.qa-body p,
.qa-body li,
.qa-body ul,
.qa-body ol {
    margin: 0;
    line-height: 1.7;
}

.qa-body p + p {
    margin-top: 0.8em;
}

.qa-body br:first-child,
.qa-body br:last-child {
    display: none;
}

.qa-body h1,
.qa-body h2,
.qa-body h3,
.qa-body h4 {
    margin: 1em 0 0.4em;
    font-weight: 600;
    line-height: 1.4;
}

.qa-body h1 { font-size: 17px; }
.qa-body h2 { font-size: 16px; }
.qa-body h3 { font-size: 15px; }
.qa-body h4 { font-size: 14px; }

/* 原 .chat-message .message-content ul/ol/li (内容列表间距; 排除气泡相关) */
.qa-body ul,
.qa-body ol {
    padding-left: 22px;
    margin: 0;
    list-style-position: outside;
}

.qa-body li {
    margin: 0;
    line-height: 1.55;
}

/* 块级元素统一间距 */
.qa-body > * + * {
    margin-top: 0.6em;
}

/* ============================ 强调 / 链接 / 分隔线 ============================ */
.qa-body strong {
    font-weight: 600;
}

.qa-body em {
    font-style: italic;
}

.qa-body a {
    color: #00a8a8; /* 原 var(--primary), 官网页无此变量, 取知识库原值 */
    text-decoration: none;
}

.qa-body a:hover {
    text-decoration: underline;
}

.qa-body hr {
    border: none;
    border-top: 1px solid #e2e8f0; /* 原 var(--border), 官网页无此变量, 取知识库原值 */
    margin: 14px 0;
}

/* ============================ 代码 ============================ */
.qa-body pre {
    background: #f1f5f9; /* 原 var(--bg-tertiary), 官网页无此变量, 取知识库原值 */
    border: 1px solid #e2e8f0; /* 原 var(--border) */
    border-radius: 6px; /* 原 var(--radius-sm) */
    padding: 14px 16px;
    margin: 10px 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Microsoft YaHei', Consolas, 'Lucida Console', 'Courier New', sans-serif; /* 原 var(--font-mono) */
    font-size: 13px;
    line-height: 1.5;
}

.qa-body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

.qa-body code {
    background: #f1f5f9; /* 原 var(--bg-tertiary) */
    border: 1px solid #e2e8f0; /* 原 var(--border) */
    border-radius: 4px; /* 原 var(--radius-xs) */
    padding: 1px 5px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Microsoft YaHei', Consolas, 'Lucida Console', 'Courier New', sans-serif; /* 原 var(--font-mono) */
    font-size: 13px;
}

/* highlight.js 代码块 (来源: chat.html 内联样式) */
.qa-body pre code.hljs {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
}
.qa-body pre code:not(.hljs) {
    background: #f1f5f9; /* 原 var(--bg-tertiary,#f5f5f5) */
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 12px;
    display: block;
    overflow-x: auto;
}

/* ============================ 引用 ============================ */
.qa-body blockquote {
    border-left: 4px solid #00a8a8; /* 原 var(--primary) */
    margin: 10px 0;
    padding: 6px 14px;
    color: #475569; /* 原 var(--text-secondary) */
    background: #f8fafc; /* 原 var(--bg-secondary) */
    border-radius: 0 6px 6px 0; /* 原 0 var(--radius-sm) var(--radius-sm) 0 */
    line-height: 1.6;
}

/* ============================ 表格 ============================ */
.qa-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    font-size: 13px;
    border-radius: 6px; /* 原 var(--radius-sm) */
    overflow: hidden;
}

.qa-body th,
.qa-body td {
    border: 1px solid #e2e8f0; /* 原 var(--border) */
    padding: 8px 12px;
    text-align: left;
    line-height: 1.5;
}

.qa-body th {
    background: #f1f5f9; /* 原 var(--bg-tertiary) */
    font-weight: 600;
}

/* ============================ 图片 / SVG ============================ */
/* 补 248: SVG 流程图自适应宽度 — 只防溢出, 不强制撑大 */
.qa-body svg {
    max-width: 100%;
    height: auto;
}

/* 未显式写 fill 的 SVG 文字默认褐色 (形状外标注) */
.qa-body svg text:not([fill]),
.qa-body svg tspan:not([fill]) {
    fill: #8B5A2B;
}

/* SVG 渲染容器 + 缩放工具条 (来源: chat.html 内联样式) */
.qa-body .svg-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 12px auto;
    padding: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    min-height: 200px;
}
.qa-body .svg-container:focus {
    outline: none;
    border-color: #00a8a8; /* 原 var(--primary,#009696) */
}
.qa-body .svg-container svg {
    max-width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}
.qa-body .svg-container .svg-viewport {
    display: block;
    width: 100%;
    line-height: 0;
    position: relative;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
}
.qa-body .svg-container .svg-viewport > svg {
    display: block;
    margin: 0 auto;
    max-width: none;
    vertical-align: top;
    overflow: hidden;
}
.qa-body .svg-container .svg-toolbar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 5px;
    background: #ffffff; /* 原 var(--bg-primary,#fff) */
    border: 1px solid #e2e8f0; /* 原 var(--border) */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.qa-body .svg-container:hover .svg-toolbar,
.qa-body .svg-container:focus-within .svg-toolbar {
    opacity: 1;
    pointer-events: auto;
}
.qa-body .svg-container .svg-tool-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: #0f172a; /* 原 var(--text-primary) */
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .12s;
}
.qa-body .svg-container .svg-tool-btn:hover {
    background: rgba(0,168,168,0.08); /* 原 var(--primary-bg,#e0f5f5) */
}
.qa-body .svg-container .svg-tool-btn:active {
    background: #00a8a8; /* 原 var(--primary,#009696) */
    color: #fff;
}
.qa-body .svg-container .svg-zoom-label {
    font-size: 11px;
    color: #475569; /* 原 var(--text-secondary) */
    min-width: 42px;
    text-align: center;
    user-select: none;
    font-variant-numeric: tabular-nums;
    font-family: Consolas, Monaco, monospace;
}

/* Chart.js 图表容器 (来源: chat.html 内联样式) */
.qa-body .chart-wrapper {
    display: flex;
    justify-content: center;
    margin: 12px 0;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0; /* 原 var(--border) */
}

/* 图表渲染失败提示 (由 initCharts 注入, 原样式为内联, 此处等价保留) */
.qa-body .chart-error {
    padding: 16px;
    background: #fff3f3;
    border: 1px solid #ffcccc;
    border-radius: 8px;
    color: #cc0000;
    font-size: 14px;
    text-align: center;
    margin: 12px 0;
}

/* 图号徽章 — 回答中的 "图5-26" 等图号引用 */
.qa-body .img-ref-badge {
    display: inline-block;
    padding: 0 4px;
    margin: 0 1px;
    font-size: 0.9em;
    font-weight: 500;
    color: #00a8a8; /* 原 var(--primary,#00a8a8) */
    background: rgba(0,168,168,0.08); /* 原 var(--primary-bg) */
    border: 1px solid rgba(0,168,168,0.15); /* 原 var(--primary-bg-strong) */
    border-radius: 4px; /* 原 var(--radius-xs,4px) */
    cursor: pointer;
    transition: all 0.15s ease; /* 原 var(--transition-fast) */
    vertical-align: baseline;
    user-select: none;
}
.qa-body .img-ref-badge:hover {
    background: #00a8a8; /* 原 var(--primary) */
    color: #fff;
    border-color: #00a8a8;
}
.qa-body .img-ref-badge:active {
    transform: scale(0.96);
}

/* ============================ 数学公式 (KaTeX) ============================ */
/* 公式块状显示 — 块级公式居中换行, 行内公式不换行 */
.qa-body .math-display {
    display: block;
    text-align: center;
    margin: 0.8em 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
}

.qa-body .math-inline {
    display: inline-block;
    vertical-align: middle;
}

/* KaTeX 公式字号微调 (补 160 定 1.2em) */
.qa-body .katex {
    font-size: 1.2em !important;
    line-height: 1.2;
}

.qa-body .katex-display {
    margin: 0.5em 0;
    font-size: 1.2em !important;
}

/* 公式字号兜底: 不被父级 p 字号影响 */
.qa-body p .katex,
.qa-body li .katex {
    font-size: 1.2em !important;
}

/* ============================ 扩展组件 (来源: chat.html 内联样式) ============================ */
/* 提示框 :::tip / :::info / :::warning */
.qa-body .callout {
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 4px solid;
    font-size: 13px;
    line-height: 1.6;
}
.qa-body .callout-tip { background: #e8f5e9; border-color: #4caf50; color: #1b5e20; }
.qa-body .callout-info { background: #e3f2fd; border-color: #2196f3; color: #0d47a1; }
.qa-body .callout-warning { background: #fff3e0; border-color: #ff9800; color: #e65100; }
.qa-body .callout strong:first-child { display: block; margin-bottom: 2px; font-size: 14px; }

/* 折叠详情 :::details */
.qa-body details.chat-details {
    margin: 8px 0;
    border: 1px solid #e2e8f0; /* 原 var(--border) */
    border-radius: 6px;
    overflow: hidden;
}
.qa-body details.chat-details summary {
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    background: #f1f5f9; /* 原 var(--bg-tertiary,#f5f5f5) */
}
.qa-body details.chat-details[open] summary {
    border-bottom: 1px solid #e2e8f0; /* 原 var(--border) */
}
.qa-body details.chat-details .details-body {
    padding: 10px 12px;
    font-size: 13px;
}

/* 进度条 [progress:50%] */
.qa-body .progress-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.qa-body .progress-fill {
    height: 18px;
    border-radius: 9px;
    background: linear-gradient(90deg,#4caf50,#8bc34a);
    min-width: 4px;
    transition: width .3s;
}
.qa-body .progress-label {
    font-size: 12px;
    color: #475569; /* 原 var(--text-secondary) */
    white-space: nowrap;
}

/* 定义列表 术语::解释 */
.qa-body dl.def-list { margin: 6px 0; font-size: 13px; }
.qa-body dl.def-list dt { display: inline; font-weight: 600; color: #0f172a; } /* 原 var(--text-primary) */
.qa-body dl.def-list dt::after { content: "："; }
.qa-body dl.def-list dd { display: inline; margin: 0; color: #475569; } /* 原 var(--text-secondary) */
.qa-body dl.def-list dd::after { content: "\A"; white-space: pre; }

/* 标签 / 徽章 【推荐】【注意】等 */
.qa-body .tag-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    margin: 0 1px;
}
.qa-body .tag-badge.tag-推荐,
.qa-body .tag-badge.tag-重要,
.qa-body .tag-badge.tag-关键 { background: #e8f5e9; color: #2e7d32; }
.qa-body .tag-badge.tag-注意,
.qa-body .tag-badge.tag-警告 { background: #fff3e0; color: #e65100; }
.qa-body .tag-badge.tag-总结,
.qa-body .tag-badge.tag-说明 { background: #e3f2fd; color: #1565c0; }
.qa-body .tag-badge.tag-新,
.qa-body .tag-badge.tag-更新 { background: #fce4ec; color: #c62828; }

/* 任务列表 */
.qa-body .task-list-item { list-style: none !important; margin-left: -20px; }
.qa-body .task-list-item input[type=checkbox] { margin-right: 6px; vertical-align: middle; }

/* 时间线 :::timeline */
.qa-body .timeline {
    position: relative;
    margin: 12px 0;
    padding-left: 28px;
    border-left: 3px solid #00a8a8; /* 原 var(--primary,#009696) */
}
.qa-body .timeline-item { position: relative; margin-bottom: 10px; padding-left: 8px; }
.qa-body .timeline-item::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #00a8a8; /* 原 var(--primary,#009696) */
    border: 2px solid #ffffff; /* 原 var(--bg-primary,#fff) */
}
.qa-body .tl-date {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #00a8a8; /* 原 var(--primary,#009696) */
    line-height: 1.4;
}
.qa-body .tl-desc {
    display: block;
    font-size: 13px;
    color: #0f172a; /* 原 var(--text-primary) */
    line-height: 1.5;
}

/* 卡片网格 :::cards */
.qa-body .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 10px 0;
}
.qa-body .mini-card {
    border: 1px solid #e2e8f0; /* 原 var(--border) */
    border-radius: 6px;
    padding: 10px 12px;
    background: #ffffff; /* 原 var(--bg-primary,#fff) */
}
.qa-body .mini-card .card-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a; /* 原 var(--text-primary) */
    margin-bottom: 4px;
    line-height: 1.4;
}
.qa-body .mini-card .card-body {
    font-size: 12px;
    color: #475569; /* 原 var(--text-secondary) */
    line-height: 1.5;
}

/* 脚注 */
.qa-body .footnotes {
    margin-top: 14px;
    padding-top: 6px;
    font-size: 12px;
    color: #475569; /* 原 var(--text-secondary) */
}
.qa-body .footnotes hr {
    margin: 0 0 6px 0;
    border: none;
    border-top: 1px solid #e2e8f0; /* 原 var(--border) */
}
.qa-body .footnotes ol { margin: 0; padding-left: 20px; }
.qa-body .footnotes li { margin-bottom: 3px; line-height: 1.5; }
.qa-body .fn-ref {
    font-size: 11px;
    color: #00a8a8; /* 原 var(--primary,#009696) */
    cursor: pointer;
    vertical-align: super;
    line-height: 0;
    margin: 0 1px;
}
.qa-body .fn-ref:hover { text-decoration: underline; }

/* 语义化文字颜色 (由 _autoColorSemanticText 输出) */
.qa-body .text-term { color: #1565c0; }
.qa-body .text-emphasis { color: #2e7d32; }
.qa-body .text-formula { color: #7b1fa2; }
.qa-body .text-warning { color: #e65100; }
.qa-body .text-info { color: #00838f; }
.qa-body .text-value { color: #ef6c00; }
.qa-body .text-reference { color: #546e7a; }