/* 1. 全局字体与排版优化：引入系统级无衬线字体，对标 Claude 的清晰度 */
.prose {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important; /* 增大行高，增加呼吸感 */
    color: #333333 !important; /* 避免纯黑，使用深灰提升阅读舒适度 */
}

/* 2. 段落与列表的间距微调 */
.prose p {
    margin-bottom: 1.2em !important; /* 段落之间拉开距离 */
}
.prose ul, .prose ol {
    margin-top: 0.5em !important;
    margin-bottom: 1.2em !important;
    padding-left: 1.5em !important;
}
.prose li {
    margin-bottom: 0.5em !important;
}

/* 3. 代码块的“高级感”改造 */
.prose pre {
    background-color: #fffcf6  !important; /* 类似 VS Code Dark 的底色 */
    border-radius: 12px !important; /* 更柔和的圆角 */
    padding: 1rem !important;
    margin: 1.5em 0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; /* 增加弥散阴影 */
}

.prose code {
    font-family: "Fira Code", "JetBrains Mono", Consolas, Monaco, monospace !important;
    font-size: 0.9em !important;
}

/* 行内代码的样式柔化 (不带背景色的那种短代码) */
.prose :not(pre) > code {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #eb5757 !important; /* 给一点点强调色 */
    padding: 0.2em 0.4em !important;
    border-radius: 4px !important;
}

/* 4. 表格样式重置 (开源项目默认的表格通常极其简陋) */
.prose table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.5em 0 !important;
    font-size: 0.95em !important;
}
.prose th, .prose td {
    border: 1px solid #e5e7eb !important;
    padding: 12px 16px !important;
}
.prose th {
    background-color: #f9fafb !important;
    font-weight: 600 !important;
    text-align: left !important;
}

/* 5. 引用块 (Blockquote) 优化 */
.prose blockquote {
    border-left: 4px solid #d1d5db !important;
    background-color: #f9fafb !important;
    padding: 0.5em 1em !important;
    margin: 1.5em 0 !important;
    color: #4b5563 !important;
    border-radius: 0 8px 8px 0 !important;
}
/* 优化对话内容的整体排版（Typography） */
.prose {
    line-height: 1.75 !important; /* 增大行高，这是增加呼吸感的核心 */
    letter-spacing: 0.01em;
}

/* 拉开段落之间的间距 */
.prose p {
    margin-bottom: 1.2em !important;
    margin-top: 0 !important;
}

/* 优化列表的展示，防止列表项挤在一起 */
.prose ul, .prose ol {
    margin-top: 0.5em !important;
    margin-bottom: 1.2em !important;
    padding-left: 1.5em !important;
}
.prose li {
    margin-bottom: 0.5em !important;
}

/* 优化代码块的视觉包裹感，降低视觉突兀感 */
.prose pre {
    border-radius: 8px !important;
    margin-top: 1em !important;
    margin-bottom: 1.5em !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* 给代码块加一点悬浮阴影 */
}
/* ========== LibreChat 用户消息：右侧气泡 ========== */

/* 1. 只翻转"含 .user-turn 的那一行"的 flex 方向，头像跑到右边
      AI 的 .agent-turn 行完全不受影响 */
.message-render:has(> .user-turn) {
  flex-direction: row-reverse;
}

/* 2. 覆盖 .user-turn 原本的 w-11/12（91.67% 宽）
      让它按内容自适应，最多占 75% */
.user-turn {
  width: fit-content !important;
  max-width: 75%;
}

/* 3. 用户名 "admin" 靠右、淡化一点 */
.user-turn > h2 {
  text-align: right;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* 4. 真正的"气泡"：只给 .text-message 加背景和圆角
      用 CSS 变量，自动适配明/暗主题 */
.user-turn .text-message {
  background-color: var(--surface-tertiary);
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;  /* 右下角收一点，像 iMessage */
}

/* 5. 气泡里最后一段去掉默认下边距，单行消息才紧凑 */
.user-turn .text-message p:last-child {
  margin-bottom: 0;
}

/* 6. 操作按钮行（复制/编辑/朗读/分叉）也跟着靠右 */
.user-turn .mt-1 {
  justify-content: flex-end !important;
}