/* =====================================================================
   IBPSX · Claude 风格排版主题（运行时注入版）
   适配：LibreChat v0.8.7 前端（Tailwind + CSS 变量）
   注入方式：bind-mount 到 /app/client/dist/assets/ibpsx-theme.css，
            并在 dist/index.html 的 </head> 前加 <link>（本 link 排在
            编译 CSS 之后，故同名变量以本文件为准，无需 !important）。
   来源 token：网页升级_施工图_V1 第六节。0 运行时 LLM token。
   ===================================================================== */

/* ---------- 1) 配色：覆盖 LibreChat 语义变量（浅色主题在 html{}）---------- */
html {
  --surface-primary: #FAF9F5;          /* 主底色 */
  --presentation: #FAF9F5;             /* 大面板/欢迎页底 */
  --surface-primary-alt: #FAF9F5;
  --surface-secondary: #F0EEE6;        /* 用户气泡 / 次级面 */
  --surface-secondary-alt: #F0EEE6;
  --surface-tertiary: #F0EEE6;
  --surface-submit: #D97757;           /* 发送按钮 = 强调色 */
  --surface-submit-hover: #C9663F;
}

/* 暗色主题（.dark{}）——只改底色，其余沿用官方暗色 */
.dark {
  --surface-primary: #262624;
  --presentation: #262624;
  --surface-primary-alt: #2F2E2B;
}

/* ---------- 2) 字体 / 字号 / 行高 ---------- */
:root {
  --ibpsx-font-serif: Georgia, "Noto Serif SC", "Songti SC", serif;
  --ibpsx-font-body: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
}

body {
  font-family: var(--ibpsx-font-body);
}

/* 正文渲染容器（Markdown/prose 较稳定）：16px / 1.75 */
.markdown,
.prose,
.message-content {
  font-size: 16px;
  line-height: 1.75;
}

/* 代码 13px */
.markdown code,
.prose code,
pre code,
code {
  font-size: 13px;
}

/* ---------- 3) 标题：衬线 + 字重 600 ---------- */
.markdown h1, .markdown h2, .markdown h3, .markdown h4,
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--ibpsx-font-serif);
  font-weight: 600;
}

/* 欢迎语 / landing 大标题衬线 */
h1.text-4xl, h1.text-3xl,
[class*="landing"] h1,
[class*="welcome"] {
  font-family: var(--ibpsx-font-serif);
}

/* ---------- 4) 表格行高加大到 1.6 ---------- */
.markdown table td, .markdown table th,
.prose table td, .prose table th {
  line-height: 1.6;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

/* ---------- 5) 手机端防溢出：宽表格横向滚动 ---------- */
@media (max-width: 640px) {
  .markdown table,
  .prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
}