/* 
 * 主题：诡道修真·浊世道简 (修复版)
 * 效果：玄墨背景、血色微光边框、古银文字、灵视脉动加载动画
 * 核心：强制高对比度，确保在“浊气”氛围中文字依然清晰
 */

/* =========================================
   1. 移除顶部颜色装饰条 (强制清除)
   ========================================= */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* =========================================
   2. 统一聊天框样式 (输入与输出)
   ========================================= */
.bg-gray-100\/90.relative.inline-block {
    /* 修复：使用RGBA增加透明度，解决背景图被完全遮住的问题 */
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.9) 0%, rgba(15, 15, 17, 0.95) 100%) !important;
    /* 极细的血色微光边框 */
    border: 1px solid #4a1c1c !important;
    /* 阴影营造悬浮感与深邃感 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px !important; /* 稍微方正，更有“道简”的感觉 */
    padding: 15px !important;
    isolation: isolate !important; /* 建立层叠上下文 */
    overflow: hidden !important; /* 防止伪元素溢出 */
}

/* 输入框特殊微调：更浅一点，区分输入状态 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(180deg, rgba(39, 39, 42, 0.9) 0%, rgba(24, 24, 27, 0.95) 100%) !important;
    border-color: #5c5c63 !important;
}

/* =========================================
   3. 背景氛围动效 (CSS Animation + Isolation)
   ========================================= */
/* 新增：灵气流动关键帧 */
@keyframes spiritFlow {
    0% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(180deg) translate(20px, 20px); }
    100% { transform: rotate(360deg) translate(0, 0); }
}

/* 模拟稀薄的灵气流动，极低对比度以免干扰阅读 */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    /* 修复：增强对比度，并添加动画引用 */
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
    /* 应用动画 */
    animation: spiritFlow 15s infinite linear !important;
}

/* =========================================
   4. 主要文本内容 (Readability First)
   ========================================= */
.markdown-body {
    /* 强制背景透明，显示父级深色背景 */
    background: transparent !important;
    /* 古银色字体，高对比度，确保极佳可读性 */
    color: #E0E0E0 !important;
    /* 字体微调，增加庄重感 */
    font-family: "Songti SC", "SimSun", ui-serif, Georgia, serif, system-ui !important;
    line-height: 1.7 !important;
    letter-spacing: 0.5px !important;
    z-index: 1 !important;
    position: relative !important;
}

/* 增强粗体字的表现力，模拟朱砂批注或重点 */
.markdown-body strong {
    color: #ffcccc !important; /* 淡淡的血色 */
    font-weight: 700 !important;
}

/* 针对 details/summary 的优化，契合你的模板 */
.markdown-body details {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
    padding: 8px !important;
}

.markdown-body summary {
    cursor: pointer !important;
    color: #d4d4d8 !important; /* 锌灰 */
    font-weight: bold !important;
}

/* =========================================
   5. 底部附加元素 (颜色联动)
   ========================================= */
/* 修复：底部操作按钮美化 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #a1a1aa !important; /* 浅灰色文字 */
    background: rgba(20, 20, 20, 0.8) !important; /* 深色半透明背景 */
    border: 1px solid #4a1c1c !important; /* 血色边框呼应主题 */
    border-radius: 2px !important;
    padding: 4px 12px !important;
    transition: all 0.3s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: rgba(74, 28, 28, 0.3) !important; /* 悬停微红 */
    border-color: #ff4d4d !important; /* 边框亮起 */
    color: #e4e4e7 !important;
}

/* 模型名称 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #71717a !important; /* 深灰色 */
}

/* Token消耗 - 使用暗金色提示消耗 */
.text-orange-500 {
    color: #d4b106 !important; 
}

/* =========================================
   6. 加载动画 (灵视之眼 - SMIL SVG)
   ========================================= */
/* 隐藏默认加载点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 自定义容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 30px !important; /* 调整尺寸以容纳SVG */
    height: 30px !important;
    /* 使用SMIL SVG作为背景：一颗脉动的血色灵瞳 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='bloodGlow' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff0000;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23300000;stop-opacity:0' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='6' fill='url(%23bloodGlow)'%3E%3Canimate attributeName='r' values='4;7;4' dur='2s' repeatCount='indefinite' /%3E%3Canimate attributeName='opacity' values='0.6;1;0.6' dur='2s' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='2' fill='%23ffffff'%3E%3Canimate attributeName='opacity' values='0.8;0.2;0.8' dur='0.2s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}