/* =================================================================
   【聊天框美化 最终版】粉色樱花 + 全卡片式分段布局
   包含：动态樱花背景、独立分段的信息卡片、交互式折叠
   ================================================================= */
/* --- 基础清理与背景 --- */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}
/* 聊天框容器 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(180deg, #fffbfb 0%, #fff0f5 100%) !important;
    border: 1px solid #ffccd5 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(255, 182, 193, 0.25) !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
/* 背景樱花动态效果 */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1 !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cstyle%3E.p%7Bfill:%23ffb7c5;opacity:0.6;%7D%3C/style%3E%3C/defs%3E%3Cpath class='p' d='M10,10 Q20,0 30,10 T50,10' transform='translate(-10,-10)'%3E%3CanimateTransform attributeName='transform' type='translate' from='-10,-20' to='10,110' dur='8s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 10 10' to='360 10 10' dur='12s' repeatCount='indefinite' additive='sum'/%3E%3C/path%3E%3Cpath class='p' d='M80,20 Q90,10 100,20 T120,20' transform='translate(0,-20)'%3E%3CanimateTransform attributeName='transform' type='translate' from='80,-20' to='60,110' dur='10s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='-360' dur='15s' repeatCount='indefinite' additive='sum'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
/* --- 文本样式 --- */
.markdown-body {
    background: transparent !important;
    color: #2c2c2c !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    line-height: 1.7 !important;
}
/* 时间设定 (二级标题) */
.markdown-body h2 {
    text-align: center !important;
    font-size: 0.9em !important;
    color: #d63384 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px dashed #ff69b4 !important;
    border-radius: 50px !important;
    padding: 5px 20px !important;
    margin: 10px auto 20px auto !important;
    width: fit-content !important;
    display: block !important;
}
/* 粉色对话与心理描写 (加粗) */
.markdown-body strong {
    color: #e83e8c !important;
    font-weight: 700 !important;
    background: linear-gradient(to top, rgba(255, 192, 203, 0.3) 0%, transparent 100%) !important;
}
/* 背景简介 (引用块) */
.markdown-body blockquote {
    background: rgba(255, 255, 255, 0.6) !important;
    border-left: 4px solid #ff69b4 !important;
    color: #555 !important;
    padding: 8px 12px !important;
    margin: 10px 0 !important;
    font-size: 0.9em !important;
    border-radius: 0 8px 8px 0 !important;
}
/* --- 折叠框与列表卡片美化 --- */
/* 折叠框容器 */
.markdown-body details {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #ffd1dc !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
}
.markdown-body details[open] {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ff69b4 !important;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2) !important;
}
/* 折叠框标题 */
.markdown-body summary {
    cursor: pointer !important;
    font-weight: bold !important;
    color: #d63384 !important;
    outline: none !important;
    padding: 4px 0 !important;
}
.markdown-body summary:hover { color: #ff1493 !important; }
/* 【关键新增】通用列表重置与美化 */
.markdown-body ul, .markdown-body ol {
    padding-left: 0 !important;
    list-style: none !important;
    margin-top: 10px !important;
}
/* 1. 状态栏信息卡片 (无序列表 ul li) */
/* 效果：白底、粉边、独立小方块 */
.markdown-body ul li {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid #ffecf1 !important; /* 极淡粉边框 */
    border-left: 3px solid #ffb7c5 !important; /* 左侧加粗粉线 */
    color: #4a4a4a !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    border-radius: 6px !important;
    font-size: 0.9em !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}
/* 2. 下一步选项按钮 (有序列表 ol li) */
/* 效果：粉底、深色字、更像按钮 */
.markdown-body ol li {
    display: block !important;
    background: #fff0f5 !important;
    border: 1px solid #ffc0cb !important;
    color: #c71585 !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: transform 0.1s !important;
    cursor: pointer !important;
}
.markdown-body ol li:hover {
    background: #ffe4e1 !important;
    transform: translateX(3px) !important;
}
.markdown-body ol li::before {
    content: "➤ " !important;
    color: #ff69b4 !important;
    margin-right: 5px !important;
}
/* --- 底部元素与输入框 --- */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #a0a0a0 !important;
}
/* 输入框独立样式 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: #ffffff !important;
    border: 2px solid #ffe4e1 !important;
}
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) .markdown-body {
    color: #333333 !important;
}
/* 加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq { display: none !important; }
.flex.items-center.justify-center.w-6.h-5 { position: relative !important; }
.flex.items-center.justify-center.w-6.h-5::after {
    content: "💗" !important;
    font-size: 20px !important;
    animation: heartBeat 1.2s infinite ease-in-out !important;
    display: block !important;
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}