/* ===== 消息宽度和换行修复 ===== */

/* 1. 设置消息容器的最大宽度 */
.message,
.message-item,
.ai-message,
.user-message {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. 确保消息内容不会溢出 */
.message-content,
.message-item > div,
.ai-message > div,
.user-message > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. 列表容器宽度设置 */
.message ul,
.message ol,
.ai-message ul,
.ai-message ol,
.user-message ul,
.user-message ol {
    max-width: calc(100% - 1.2em) !important; /* 减去列表缩进 */
    width: auto !important;
    box-sizing: border-box !important;
}

/* 4. 列表项强制换行 */
.message li,
.ai-message li,
.user-message li {
    max-width: 100% !important;
    white-space: pre-wrap !important; /* 保留空格但允许换行 */
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important; /* 最激进的换行策略 */
}

/* 5. 处理列表项中的文本节点 - 直接子文本 */
.message li,
.ai-message li,
.user-message li {
    /* 针对中文的换行 */
    word-break: break-all !important;
    line-break: anywhere !important;
}

/* 6. 确保父容器有正确的宽度 */
#chatMessages {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 7. 处理可能的flex容器 */
.message-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 8. 移除可能阻止换行的white-space设置 */
.message *,
.ai-message *,
.user-message * {
    white-space: normal !important;
}

/* 9. 特别处理列表项的文本内容 */
.message li::first-line,
.ai-message li::first-line,
.user-message li::first-line {
    word-break: break-all !important;
}

/* 10. 使用CSS3的换行属性 */
.message li,
.ai-message li,
.user-message li {
    -webkit-line-break: auto !important;
    -ms-word-break: break-all !important;
    word-break: break-all !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    hyphens: auto !important;
}

/* 11. 强制设置列表项的显示属性 */
.message li,
.ai-message li,
.user-message li {
    display: list-item !important;
    unicode-bidi: plaintext !important;
    text-align: start !important;
}

/* 12. 处理列表项内的所有元素 */
.message li *,
.ai-message li *,
.user-message li * {
    max-width: 100% !important;
    word-break: break-word !important;
}

/* 13. 最高优先级覆盖 */
body .message li,
body .ai-message li,
body .user-message li,
body #chatMessages li {
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
}

/* 14. 调试：临时添加边框查看元素边界 */
/*
.message li,
.ai-message li,
.user-message li {
    border: 1px solid red !important;
}
*/