/* 1. 隐藏自带的顶部颜色装饰条，保持武侠风格的纯粹 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 统一聊天框外框：墨色玄铁与暗金包边，建立层叠上下文 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #121417 0%, #1a1b20 100%) !important;
    border: 2px solid #8b7355 !important; /* 暗金边框 */
    border-radius: 6px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(139, 115, 85, 0.1) !important;
    padding: 16px !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/* 3. 背景真气流转动画 (SMIL SVG)，确保在禁用CSS动画时依然生效 */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    /* 内嵌带有SMIL动画的SVG，模拟暗金与朱红的真气缓慢流转 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%238b7355' stop-opacity='0.08' /%3E%3Cstop offset='50%25' stop-color='%23722f2f' stop-opacity='0.05' /%3E%3Cstop offset='100%25' stop-color='%238b7355' stop-opacity='0.08' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='200%25' height='200%25' fill='url(%23g)'%3E%3Canimate attributeName='x' values='0%25;-100%25;0%25' dur='15s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' values='0%25;-100%25;0%25' dur='20s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") !important;
}

/* 4. 单独的输入聊天框：使用朱红暗芒区分敌我/输入输出 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    border-color: #722f2f !important; /* 暗红边框 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(114, 47, 47, 0.2) !important;
}

/* 5. 文本区域 (框中框)：独立划分的卷轴区域，绝对保证可读性 */
.markdown-body {
    background: rgba(0, 0, 0, 0.4) !important; /* 半透明纯黑底色，形成内框 */
    border: 1px solid rgba(139, 115, 85, 0.3) !important; /* 内框细线 */
    border-radius: 4px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important; /* 与底部元素拉开距离 */
    
    /* 核心可读性规则：深色背景必须配高对比度浅色文字 */
    color: #F8F4E6 !important; /* 宣纸白，带一点点暖色不刺眼 */
    font-family: "STKaiti", "KaiTi", "楷体", "宋体", serif !important; /* 武侠风衬线字体 */
    font-size: 16px !important;
    line-height: 1.8 !important;
    text-shadow: none !important; /* 严禁文字阴影影响阅读 */
    z-index: 1 !important;
    position: relative !important;
}

/* 文本区内的代码块样式微调，保持武侠色调 */
.markdown-body pre {
    background: #0a0a0c !important;
    border: 1px solid #3a3226 !important;
}

/* 6. 底部附加元素区域划分与高对比度配色 */
/* 底部操作按钮 (如复制、编辑) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #b59b74 !important; /* 亮暗金色 */
    background: rgba(139, 115, 85, 0.1) !important;
    border: 1px solid rgba(139, 115, 85, 0.3) !important;
    border-radius: 2px !important;
    padding: 2px 8px !important;
    margin-right: 6px !important;
    transition: all 0.3s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: rgba(139, 115, 85, 0.3) !important;
    color: #F8F4E6 !important;
}

/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #8b7355 !important;
    font-style: italic !important;
    padding-left: 8px !important;
}

/* Token消耗文本 */
.text-orange-500 {
    color: #c95c5c !important; /* 调整为朱红色，符合武侠主题且在深色背景可见 */
    font-weight: bold !important;
}

/* 7. 自定义加载动画：太极八卦阵旋转 (SMIL SVG) */
/* 隐藏默认加载点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}
/* 设置加载容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    margin: 10px auto !important;
}
/* 注入太极旋转SVG */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    /* 内嵌SMIL动画的太极图 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1.5s' repeatCount='indefinite' /%3E%3Ccircle cx='50' cy='50' r='45' fill='%23111' stroke='%238b7355' stroke-width='4'/%3E%3Cpath d='M50 5 a45 45 0 0 1 0 90 a22.5 22.5 0 0 0 0 -45 a22.5 22.5 0 0 1 0 -45' fill='%238b7355'/%3E%3Ccircle cx='50' cy='27.5' r='6' fill='%23111'/%3E%3Ccircle cx='50' cy='72.5' r='6' fill='%238b7355'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* 8. 移动端与低动效适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 10px !important;
    }
    .markdown-body {
        padding: 8px !important;
        font-size: 15px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    /* 降低真气流转和太极旋转的速度，但不完全关闭以保留武侠氛围 */
    .bg-gray-100\/90.relative.inline-block::before {
        opacity: 0.5 !important;
    }
}