/* ==========================================
   1. 隐藏默认顶部颜色装饰条与默认加载动画
   ========================================== */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* ==========================================
   2. 聊天框整体容器美化 (统一输入与输出)
   ========================================== */
.bg-gray-100\/90.relative.inline-block {
    background-color: #0e0616 !important;
    background-image: radial-gradient(circle at top right, rgba(255, 75, 114, 0.05), transparent 60%),
                      radial-gradient(circle at bottom left, rgba(212, 175, 55, 0.03), transparent 60%) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-left: 4px solid !important;
    border-image: linear-gradient(to bottom, #FF4B72, #E5C158) 1 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 
                inset 0 0 12px rgba(255, 75, 114, 0.05) !important;
    padding: 16px 20px !important;
    isolation: isolate !important;
    transition: all 0.3s ease !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 
                inset 0 0 18px rgba(255, 75, 114, 0.08) !important;
}

/* ==========================================
   3. 绝对可读性：文字与排版样式（深色默认）
   ========================================== */
.markdown-body {
    color: #F3F4F6 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Georgia", serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
}

.markdown-body strong {
    color: #E5C158 !important;
    font-weight: 700 !important;
}

.markdown-body em {
    color: #FF4B72 !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

.markdown-body a {
    color: #FF4B72 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed #FF4B72 !important;
}
.markdown-body a:hover {
    color: #E5C158 !important;
    border-bottom-style: solid !important;
}

.markdown-body code {
    background-color: #190f25 !important;
    color: #FF4B72 !important;
    border: 1px solid rgba(255, 75, 114, 0.2) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.markdown-body pre {
    background-color: #12091c !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-radius: 8px !important;
}

.markdown-body blockquote {
    border-left: 3px solid #FF4B72 !important;
    background-color: rgba(255, 75, 114, 0.03) !important;
    color: #D1D5DB !important;
    padding: 10px 15px !important;
}

/* ==========================================
   4. 底部附加元素 (深色默认)
   ========================================== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: rgba(243, 244, 246, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #FF4B72 !important;
    background-color: rgba(255, 75, 114, 0.08) !important;
    border-color: rgba(255, 75, 114, 0.3) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: rgba(243, 244, 246, 0.4) !important;
    font-family: monospace !important;
}

.text-orange-500 {
    color: #E5C158 !important;
    opacity: 0.8 !important;
}

/* ==========================================
   5. 自定义加载动画 (金红双环仪式阵)
   ========================================== */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    margin: 10px auto !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30"><circle cx="15" cy="15" r="12" fill="none" stroke="%23FF4B72" stroke-width="2"><animate attributeName="stroke-dasharray" values="1,50;45,15;1,50" dur="2s" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" values="0;-50;-100" dur="2s" repeatCount="indefinite"/></circle><circle cx="15" cy="15" r="8" fill="none" stroke="%23E5C158" stroke-width="1.5" opacity="0.8"><animate attributeName="stroke-dasharray" values="40,15;1,50;40,15" dur="1.5s" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" values="0;50;100" dur="1.5s" repeatCount="indefinite"/></circle></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ==========================================
   6. 响应式与低动效适配
   ========================================== */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 12px 14px !important;
        border-radius: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block {
        transition: none !important;
    }
}

/* ==========================================
   7. 浅色模式自适应 (覆盖深色默认值)
   ========================================== */
@media (prefers-color-scheme: light) {
    /* 聊天框容器 → 浅色背景，保留金色边框氛围 */
    .bg-gray-100\/90.relative.inline-block {
        background-color: #f9f6f0 !important;
        background-image: radial-gradient(circle at top right, rgba(255, 75, 114, 0.08), transparent 60%),
                          radial-gradient(circle at bottom left, rgba(212, 175, 55, 0.06), transparent 60%) !important;
        border-color: rgba(212, 175, 55, 0.25) !important;
        border-image: linear-gradient(to bottom, #CC3366, #B8860B) 1 100% !important; /* 略降饱和度 */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
                    inset 0 0 12px rgba(255, 75, 114, 0.04) !important;
    }
    .bg-gray-100\/90.relative.inline-block:hover {
        border-color: rgba(212, 175, 55, 0.4) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 
                    inset 0 0 18px rgba(255, 75, 114, 0.06) !important;
    }

    /* 主体文字 → 深色 */
    .markdown-body {
        color: #1F2937 !important;
    }
    .markdown-body strong {
        color: #B8860B !important; /* 暗金色 */
    }
    .markdown-body em {
        color: #CC3366 !important; /* 暗品红 */
    }
    .markdown-body a {
        color: #CC3366 !important;
        border-bottom-color: #CC3366 !important;
    }
    .markdown-body a:hover {
        color: #B8860B !important;
    }
    .markdown-body code {
        background-color: #f0ecf5 !important;
        color: #CC3366 !important;
        border-color: rgba(204, 51, 102, 0.25) !important;
    }
    .markdown-body pre {
        background-color: #f5f0fa !important;
        border-color: rgba(184, 134, 11, 0.2) !important;
    }
    .markdown-body blockquote {
        border-left-color: #CC3366 !important;
        background-color: rgba(204, 51, 102, 0.04) !important;
        color: #4B5563 !important;
    }

    /* 底部按钮 */
    .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
        color: rgba(31, 41, 55, 0.6) !important;
        background-color: rgba(0, 0, 0, 0.03) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }
    .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
        color: #CC3366 !important;
        background-color: rgba(204, 51, 102, 0.08) !important;
        border-color: rgba(204, 51, 102, 0.3) !important;
    }

    /* 模型名称 */
    .MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
        color: rgba(31, 41, 55, 0.4) !important;
    }

    /* Token消耗 */
    .text-orange-500 {
        color: #B8860B !important;
        opacity: 0.8 !important;
    }
}