AIEC-new/AIEC-server/css/font-optimization.css

/* ===== 字体和行距优化 - Windows优先，兼容macOS/iOS ===== */

/* 1. 字体栈优化 - Windows优先 */
:root {
    /* Windows优先的字体栈 */
    --font-stack-sans: "Segoe UI", "Microsoft YaHei", "Noto Sans SC", 
                        "SF Pro Text", "PingFang SC", "Helvetica Neue", 
                        "Arial", sans-serif;
    
    /* Emoji字体栈 */
    --font-stack-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    
    /* 代码字体栈 */
    --font-stack-mono: "Cascadia Code", "Consolas", "SF Mono", "Monaco", 
                       "Roboto Mono", "Courier New", monospace;
}

/* 全局字体设置 */
body {
    font-family: var(--font-stack-sans), var(--font-stack-emoji);
    font-size: 16px; /* 确保 ≥16px，避免iOS焦点放大 */
    line-height: 1.6; /* 无单位行高，跨浏览器一致 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 2. 行距优化 */

/* 聊天消息区域 */
#chatMessages,
.chat-messages,
.message-content,
.message-bubble {
    line-height: 1.6; /* 无单位行高 */
    font-size: 16px;
    font-variant-emoji: text; /* 避免emoji拉高行距 */
}

/* 输入框 */
#messageInput,
#chatModeMessageInput,
textarea {
    font-family: var(--font-stack-sans), var(--font-stack-emoji);
    font-size: 16px !important; /* 防止iOS缩放 */
    line-height: 1.5;
    font-variant-emoji: text;
}

/* 3. 统一标题、段落、列表间距 */

/* 标题间距 - 更紧凑 */
h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 0 0.2em;
    line-height: 1.2;
    font-weight: 600;
}

/* 段落间距 - 更紧凑 */
p {
    margin: 0.3em 0;
    line-height: 1.5;
}

/* 列表间距 */
ul, ol {
    margin: 0.35em 0 0.5em;
    padding-left: 1.25em;
    line-height: 1.6;
}

/* 列表项间距 - 减小间距 */
li {
    margin: 0.15em 0;
    line-height: 1.5;
}

/* 列表项内的段落不需要额外间距 */
li > p {
    margin: 0;
    line-height: 1.5;
}

/* 强制移除所有br标签 */
.message-content br,
.chat-messages br,
#chatMessages br,
li br {
    display: none !important; /* 完全隐藏所有br标签 */
}

/* 嵌套列表调整 */
li > ul,
li > ol {
    margin: 0.2em 0 0.3em;
}

/* 4. 聊天消息中的特定元素优化 */

/* AI和用户消息 */
.ai-message,
.user-message {
    font-size: 16px;
    line-height: 1.6;
}

/* 消息内的标题 */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin: 0.45em 0 0.3em;
    line-height: 1.3;
}

/* 消息内的段落 */
.message-content p {
    margin: 0.45em 0;
    line-height: 1.6;
}

/* 消息内的列表 - 优化间距 */
.message-content ul,
.message-content ol,
#chatMessages ul,
#chatMessages ol {
    margin: 0.25em 0 0.4em;
    padding-left: 1.25em;
    line-height: 1.5;
}

.message-content li,
#chatMessages li {
    margin: 0.1em 0;
    line-height: 1.5;
}

.message-content li > p,
#chatMessages li > p {
    margin: 0;
    display: inline; /* 让p标签内联显示，避免换行 */
}

/* 强制处理列表项之间的间距 */
.message-content li + li,
#chatMessages li + li {
    margin-top: 0.15em;
}

/* 列表项内的强调文字 */
.message-content li strong,
#chatMessages li strong {
    font-weight: 600;
    margin-right: 0.2em;
}

/* 5. Safari/iOS特定修复 */
@supports (-webkit-touch-callout: none) {
    /* Safari特定样式 */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    /* 修复Safari中的行距问题 */
    p, li, div {
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
    }
}

/* iOS特定修复 */
@supports (-webkit-overflow-scrolling: touch) {
    /* 防止iOS文本缩放 */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    /* 输入框最小字体16px */
    input, textarea, select {
        font-size: 16px !important;
    }
    
    /* 修复iOS上的emoji显示 */
    .emoji {
        font-variant-emoji: emoji;
        line-height: 1;
    }
}

/* 6. 代码块样式 */
pre, code {
    font-family: var(--font-stack-mono);
    font-size: 14px;
    line-height: 1.4;
}

/* 行内代码 */
code {
    padding: 0.1em 0.3em;
    margin: 0 0.1em;
}

/* 代码块 */
pre {
    margin: 0.5em 0;
    padding: 1em;
    overflow-x: auto;
}

pre code {
    padding: 0;
    margin: 0;
}

/* 7. 中文优化 */
:lang(zh),
:lang(zh-CN),
:lang(zh-TW),
:lang(zh-HK) {
    font-family: "Segoe UI", "Microsoft YaHei", "Noto Sans SC", 
                 "PingFang SC", "Hiragino Sans GB", 
                 "Helvetica Neue", "Arial", sans-serif;
    line-height: 1.7; /* 中文稍微增加行高 */
}

/* 8. 按钮和UI元素 */
button, .button, .btn {
    font-family: var(--font-stack-sans);
    font-size: 14px;
    line-height: 1.4;
}

/* 9. 响应式字体大小 */
@media (max-width: 768px) {
    body {
        font-size: 15px; /* 移动端稍小但仍≥15px */
    }
    
    #chatMessages,
    .message-content {
        font-size: 15px;
    }
}

/* 10. 消除多余的间距 */

/* 第一个和最后一个元素不需要额外间距 */
.message-content > *:first-child,
#chatMessages > *:first-child {
    margin-top: 0;
}

.message-content > *:last-child,
#chatMessages > *:last-child {
    margin-bottom: 0;
}

/* 处理Markdown渲染可能产生的多余空白 */
.message-content p:empty,
#chatMessages p:empty {
    display: none; /* 隐藏空段落 */
}

/* br标签已在前面全部隐藏，这里不需要了 */

/* 连续段落间距优化 */
p + p {
    margin-top: 0.3em;
}

/* 标题后的段落间距 */
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
    margin-top: 0.3em;
}

/* 11. 引用块样式 */
blockquote {
    margin: 0.5em 0;
    padding-left: 1em;
    border-left: 3px solid #ddd;
}

blockquote p {
    margin: 0.3em 0;
}

/* 12. 表格样式 */
table {
    margin: 0.5em 0;
    line-height: 1.5;
}

th, td {
    padding: 0.4em 0.8em;
}

/* 13. 确保emoji不影响行高 */
.emoji,
[data-emoji] {
    font-variant-emoji: text;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* 14. 紧凑模式 - 进一步减小间距 */
.message-content.compact,
#chatMessages.compact {
    line-height: 1.4;
}

.message-content.compact li,
#chatMessages.compact li {
    margin: 0.05em 0;
}

/* 15. 强制覆盖可能的默认样式 */
#chatMessages * {
    margin-block-start: initial;
    margin-block-end: initial;
}

/* 16. 调试用 - 可临时启用查看间距 */
/*
* {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}
*/