/* =================================================================
   主题：纯情魅魔 x 傲娇同桌 (Pure Succubus & Tsundere Desk Mate)
   核心：高可读性、强制覆盖、SMIL心跳动画、情书折叠样式
   ================================================================= */

/* --- 1. 基础清理与结构重置 --- */

/* 强制隐藏顶部默认颜色条 (系统规则) */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 2. 聊天框主体美化 --- */

/* 统一聊天框样式：校服蓝与魅魔粉的结合 */
.bg-gray-100\/90.relative.inline-block {
    /* 背景：极淡的粉白，像信纸 */
    background: linear-gradient(to bottom right, #ffffff, #fff0f5) !important;
    /* 边框：左上冷淡(傲娇)，右下热情(魅魔) */
    border: 2px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    /* 模拟双色边框效果 */
    box-shadow: 
        inset 0 0 0 1px #fff, /* 内白圈 */
        2px 2px 15px rgba(255, 105, 180, 0.15) !important; /* 外粉色光晕 */
    
    border-radius: 16px 16px 16px 2px !important; /* 气泡形状 */
    padding: 10px !important;
    transition: all 0.3s ease !important;
}

/* 区分输入框 (用户侧 - 傲娇同桌风格) */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    border-color: #e2e8f0 !important; /* 冷淡的蓝灰色边框 */
    border-radius: 16px 16px 2px 16px !important;
    background: #ffffff !important;
}

/* 区分输出框 (AI侧 - 纯情魅魔风格) */
.chat-answer-container .bg-gray-100\/90 {
    /* 边框带有粉色渐变 */
    border-image: linear-gradient(135deg, #e0c3fc 0%, #ff9a9e 100%) 1 !important;
    border-radius: 16px 16px 16px 2px !important;
    /* 这里的mask是为了实现圆角边框渐变，若不支持则回退到box-shadow */
    border: 2px solid #ffb7c5 !important; 
}

/* --- 3. 文本内容与可读性 (Absolute Readability) --- */

/* 主文本：深空蓝，高对比度，模拟钢笔字迹 */
.markdown-body {
    color: #2c3e50 !important;
    font-family: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    background: transparent !important;
    text-shadow: none !important; /* 禁止模糊文本 */
}

.markdown-body p {
    margin-bottom: 0.8em !important;
}

/* 强调文字：粉色高亮 */
.markdown-body strong {
    color: #d53f8c !important;
    background: linear-gradient(transparent 70%, rgba(255, 192, 203, 0.4) 0%) !important;
    padding: 0 2px !important;
}

/* --- 4. 底部功能区美化 --- */

/* 底部按钮 (复制/编辑等)：变身可爱的小标签 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #718096 !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background-color: #fff5f7 !important; /* 悬停变粉 */
    color: #d53f8c !important;
}

/* 模型名称：淡淡的紫色 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #9f7aea !important;
    font-weight: bold !important;
    opacity: 0.8 !important;
}

/* Token消耗：橙色转粉橙 */
.text-orange-500 {
    color: #ed64a6 !important;
}

/* --- 5. 深度定制 Details/Summary (参考你的代码逻辑) --- */
/* 风格：像是打开一封折叠的情书 */

.markdown-body details {
    border: 1px dashed #ffb7c5 !important; /* 粉色虚线边框 */
    margin: 12px 0 !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.markdown-body details[open] {
    background-color: #fff !important;
    border-style: solid !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.1) !important;
}

.markdown-body summary {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    list-style: none !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

/* 隐藏默认三角 */
.markdown-body summary::-webkit-details-marker {
    display: none !important;
}

/* 自定义图标：用爱心代替箭头 */
.markdown-body summary::before {
    content: '♥' !important; /* 魅魔的心 */
    display: inline-block !important;
    margin-right: 10px !important;
    font-size: 1.1em !important;
    color: #fc8181 !important; /* 浅红色 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 展开时心跳动一下并旋转 */
.markdown-body details[open] > summary::before {
    transform: scale(1.2) rotate(0deg) !important;
    color: #e53e3e !important; /* 深红色 */
}

.markdown-body summary:hover {
    background-color: #fff5f5 !important;
    color: #d53f8c !important;
}

/* 代码块区域优化 */
.markdown-body details pre {
    margin: 0 !important;
    border-top: 1px solid #ffe4e6 !important;
    background: #fffaf0 !important; /* 暖色调背景 */
    border-radius: 0 0 12px 12px !important;
}

/* --- 6. 加载动画重构 (SMIL SVG 方案) --- */
/* 替换原有的旋转圈圈，改为跳动的心，符合“纯情魅魔”设定 */

/* 6.1 隐藏默认CSS加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 6.2 在父容器中注入SVG动画 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 40px !important; /* 稍微加宽以容纳心形 */
    height: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ed64a6'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'%3E%3CanimateTransform attributeName='transform' type='scale' values='1;1.3;1' dur='0.8s' repeatCount='indefinite' calcMode='spline' keySplines='0.4 0 0.2 1; 0.4 0 0.2 1' additive='sum' transform-origin='center'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* 6.3 正在生成的文字提示 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: 'Thinking of you...' !important; /* 傲娇/魅魔的等待语 */
    position: absolute !important;
    left: 40px !important;
    width: 150px !important;
    font-size: 12px !important;
    color: #fc8181 !important;
    font-weight: bold !important;
    animation: fadeIn 1s infinite alternate !important;
}

@keyframes fadeIn {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* --- 7. 移动端适配微调 --- */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 8px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::after {
        display: none !important; /* 窄屏隐藏文字，只留跳动的心 */
    }
}