/* 隐藏顶部装饰条，确保您的聊天框更清爽 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}
/* 统一聊天框的背景和边框，营造宋代绢本水墨风 */
.bg-gray-100\/90.relative.inline-block {
    background: #E9D8B0 !important; /* 绢黄底 */
    background-image: 
        url('data:image/svg+xml;charset=UTF-8,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cpattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"%3E%3Cpath d="M 10 0 L 0 0 0 10" fill="none" stroke="%239C7C5D" stroke-width="0.3" opacity="0.25"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="100" height="100" fill="url(%23grid)"/%3E%3C/svg%3E'), /* 仿绢本经纬线 */
        radial-gradient(circle at 30% 40%, rgba(255,255,240,0.3) 0%, rgba(150,130,100,0.1) 70%, transparent 100%), /* 水墨晕染 */
        linear-gradient(145deg, rgba(200,180,140,0.2) 0%, rgba(230,210,170,0.5) 100%); /* 增加层次 */
    background-size: auto, cover, cover !important;
    background-blend-mode: overlay, normal, normal !important;
    border: 10px solid #3A2E22 !important; /* 深褐底 */
    border-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cpattern id="borderPattern" width="20" height="20" patternUnits="userSpaceOnUse"%3E%3Cpath d="M0 0 L20 0 L20 20 L0 20 Z" fill="none" stroke="%23D4AF37" stroke-width="0.5" opacity="0.6"/%3E%3C/pattern%3E%3Cpattern id="cornerTL" width="20" height="20" patternUnits="userSpaceOnUse"%3E%3Cpath d="M0 0 L15 0 Q5 5 0 15 Z" fill="%23D4AF37" opacity="0.3"/%3E%3Cpath d="M0 0 L5 0 Q2 2 0 5 Z" fill="none" stroke="%23D4AF37" stroke-width="1"/%3E%3C/pattern%3E%3Cpattern id="cornerTR" width="20" height="20" patternUnits="userSpaceOnUse"%3E%3Cpath d="M20 0 L5 0 Q15 5 20 15 Z" fill="%23D4AF37" opacity="0.3"/%3E%3Cpath d="M20 0 L15 0 Q18 2 20 5 Z" fill="none" stroke="%23D4AF37" stroke-width="1"/%3E%3C/pattern%3E%3Cpattern id="cornerBL" width="20" height="20" patternUnits="userSpaceOnUse"%3E%3Cpath d="M0 20 L0 5 Q5 15 15 20 Z" fill="%23D4AF37" opacity="0.3"/%3E%3Cpath d="M0 20 L0 15 Q2 18 5 20 Z" fill="none" stroke="%23D4AF37" stroke-width="1"/%3E%3C/pattern%3E%3Cpattern id="cornerBR" width="20" height="20" patternUnits="userSpaceOnUse"%3E%3Cpath d="M20 20 L20 5 Q15 15 5 20 Z" fill="%23D4AF37" opacity="0.3"/%3E%3Cpath d="M20 20 L20 15 Q18 18 15 20 Z" fill="none" stroke="%23D4AF37" stroke-width="1"/%3E%3C/pattern%3E%3C/defs%3E%3Crect x="0" y="0" width="100" height="100" fill="%233A2E22"/%3E%3Crect x="0" y="0" width="20" height="20" fill="url(%23cornerTL)"/%3E%3Crect x="80" y="0" width="20" height="20" fill="url(%23cornerTR)"/%3E%3Crect x="0" y="80" width="20" height="20" fill="url(%23cornerBL)"/%3E%3Crect x="80" y="80" width="20" height="20" fill="url(%23cornerBR)"/%3E%3Crect x="20" y="0" width="60" height="20" fill="url(%23borderPattern)"/%3E%3Crect x="0" y="20" width="20" height="60" fill="url(%23borderPattern)"/%3E%3Crect x="80" y="20" width="20" height="60" fill="url(%23borderPattern)"/%3E%3Crect x="20" y="80" width="60" height="20" fill="url(%23borderPattern)"/%3E%3C/svg%3E') 10 round !important; /* 绫裱边框，四角如意纹 */
    border-radius: 2px !important; /* 微圆角，保留古画装裱的硬朗 */
    box-shadow: 8px 8px 20px rgba(40, 30, 10, 0.4) !important;
    padding: 18px !important;
    isolation: isolate !important;
}
/* 聊天框内的文本颜色，确保在绢黄背景上清晰可读 */
.markdown-body {
    color: #2E2B25 !important; /* 墨黑 */
    font-family: "KaiTi", "华文楷体", "STKaiti", "楷体", serif !important;
    line-height: 1.75 !important;
    font-size: 16px !important;
    background: transparent !important;
    z-index: 1 !important;
    text-shadow: 0 1px 1px rgba(255, 245, 220, 0.3) !important; /* 增加一点纸墨的温润感 */
}
/* 聊天框底部附加元素的颜色，保持与边框呼应 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #3A5F6E !important; /* 花青色，典雅 */
    font-weight: 500 !important;
}
/* 隐藏默认的加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}
/* 为发送中的加载动画创建山岚流动效果 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    overflow: visible !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: 6px !important;
}
.flex.items-center.justify-center.w-6.h-5::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5 15 Q12 8 20 12 Q25 15 22 22 Q18 27 10 25 Q5 22 5 15" fill="none" stroke="%233A5F6E" stroke-width="2" stroke-linecap="round" opacity="0.7"%3E%3Canimate attributeName="d" dur="3s" values="M5 15 Q12 8 20 12 Q25 15 22 22 Q18 27 10 25 Q5 22 5 15; M5 15 Q10 20 18 18 Q24 14 20 8 Q16 4 10 6 Q5 8 5 15; M5 15 Q12 8 20 12 Q25 15 22 22 Q18 27 10 25 Q5 22 5 15" repeatCount="indefinite"/%3E%3C/path%3E%3Ccircle cx="10" cy="16" r="1.5" fill="%233A5F6E" opacity="0.5"%3E%3Canimate attributeName="cy" dur="3s" values="16;20;16" repeatCount="indefinite"/%3E%3C/circle%3E%3Ccircle cx="20" cy="16" r="1.2" fill="%233A5F6E" opacity="0.5"%3E%3Canimate attributeName="cy" dur="3s" values="16;10;16" repeatCount="indefinite"/%3E%3C/circle%3E%3C/svg%3E'); /* 流动的毛笔线条，模拟山岚 */
    background-size: contain;
    background-repeat: no-repeat;
    animation: float 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes float {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -55%) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
}
/* 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-width: 6px !important;
        padding: 12px !important;
    }
    .markdown-body {
        font-size: 14px !important;
    }
    .flex.items-center.justify-center.w-6.h-5 {
        width: 28px !important;
        height: 28px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 26px;
        height: 26px;
    }
}
/* 低动效模式下降低动画频率 */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before {
        animation-duration: 4s;
    }
}