/* 隐藏默认顶部颜色条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 统一聊天框 - 星空背景 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d1128 100%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    padding: 18px !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/* 星空背景层 - 使用SVG闪烁星星 */
.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: 0 !important;
    pointer-events: none !important;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><circle cx="10%" cy="15%" r="1" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/></circle><circle cx="25%" cy="8%" r="1.5" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/></circle><circle cx="40%" cy="20%" r="1" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="60%" cy="12%" r="1.2" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.8s" repeatCount="indefinite"/></circle><circle cx="75%" cy="18%" r="1" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.6;1;0.6" dur="2.2s" repeatCount="indefinite"/></circle><circle cx="88%" cy="10%" r="1.3" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.4;1;0.4" dur="3.2s" repeatCount="indefinite"/></circle><circle cx="15%" cy="45%" r="1" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.5;1;0.5" dur="2.6s" repeatCount="indefinite"/></circle><circle cx="35%" cy="55%" r="1.2" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.3;0.9;0.3" dur="2.9s" repeatCount="indefinite"/></circle><circle cx="55%" cy="48%" r="1" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.4;1;0.4" dur="2.4s" repeatCount="indefinite"/></circle><circle cx="70%" cy="58%" r="1.4" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.5;1;0.5" dur="3.1s" repeatCount="indefinite"/></circle><circle cx="85%" cy="50%" r="1.1" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.6;1;0.6" dur="2.7s" repeatCount="indefinite"/></circle><circle cx="20%" cy="75%" r="1" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.3s" repeatCount="indefinite"/></circle><circle cx="45%" cy="82%" r="1.3" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/></circle><circle cx="65%" cy="78%" r="1" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="82%" cy="85%" r="1.2" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.4;1;0.4" dur="2.8s" repeatCount="indefinite"/></circle></svg>'),
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 90%, white, transparent) !important;
    background-size: 100% 100%, 200px 200px, 180px 180px, 220px 220px, 190px 190px, 210px 210px, 170px 170px !important;
    background-position: 0 0, 0 0, 40px 60px, 130px 270px, 70px 100px, 150px 50px, 90px 180px !important;
    opacity: 0.6 !important;
}

/* 流星层 - 使用SVG动画 */
.bg-gray-100\/90.relative.inline-block::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><linearGradient id="meteor1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:white;stop-opacity:0"/><stop offset="50%" style="stop-color:rgb(199,210,254);stop-opacity:0.8"/><stop offset="100%" style="stop-color:white;stop-opacity:0"/></linearGradient></defs><line x1="-50" y1="-50" x2="-20" y2="-20" stroke="url(%23meteor1)" stroke-width="1.5" opacity="0"><animate attributeName="x1" values="-50;150" dur="3s" repeatCount="indefinite"/><animate attributeName="y1" values="-50;150" dur="3s" repeatCount="indefinite"/><animate attributeName="x2" values="-20;180" dur="3s" repeatCount="indefinite"/><animate attributeName="y2" values="-20;180" dur="3s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/></line><line x1="-50" y1="-50" x2="-20" y2="-20" stroke="url(%23meteor1)" stroke-width="1.5" opacity="0"><animate attributeName="x1" values="-50;150" dur="4s" begin="1.5s" repeatCount="indefinite"/><animate attributeName="y1" values="-50;150" dur="4s" begin="1.5s" repeatCount="indefinite"/><animate attributeName="x2" values="-20;180" dur="4s" begin="1.5s" repeatCount="indefinite"/><animate attributeName="y2" values="-20;180" dur="4s" begin="1.5s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;1;0" dur="4s" begin="1.5s" repeatCount="indefinite"/></line></svg>') !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    opacity: 0.7 !important;
}

/* 主要文本内容 - 深色背景下的高对比度浅色文本 */
.markdown-body {
    color: #F0F0F0 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 底部附加元素 - 高对比度浅色 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #EAEAEA !important;
}

/* 隐藏默认加载动画 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 自定义星空加载动画 - 使用SVG */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-height: 24px !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2" fill="%23818cf8"><animate attributeName="opacity" values="1;0.3;1" dur="1.2s" repeatCount="indefinite"/><animate attributeName="r" values="2;2.5;2" dur="1.2s" repeatCount="indefinite"/></circle><circle cx="12" cy="12" r="2" fill="%23a5b4fc"><animate attributeName="opacity" values="1;0.3;1" dur="1.2s" begin="0.4s" repeatCount="indefinite"/><animate attributeName="r" values="2;2.5;2" dur="1.2s" begin="0.4s" repeatCount="indefinite"/></circle><circle cx="18" cy="12" r="2" fill="%23c7d2fe"><animate attributeName="opacity" values="1;0.3;1" dur="1.2s" begin="0.8s" repeatCount="indefinite"/><animate attributeName="r" values="2;2.5;2" dur="1.2s" begin="0.8s" repeatCount="indefinite"/></circle></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    
    .bg-gray-100\/90.relative.inline-block::before {
        background-size: 100% 100%, 150px 150px, 130px 130px, 160px 160px, 140px 140px, 155px 155px, 125px 125px !important;
    }
}

/* 低动效模式适配 - 降低频率但保留动效 */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before {
        background-image: 
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><circle cx="10%" cy="15%" r="1" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.5;1;0.5" dur="4s" repeatCount="indefinite"/></circle><circle cx="25%" cy="8%" r="1.5" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.5;1;0.5" dur="5s" repeatCount="indefinite"/></circle><circle cx="40%" cy="20%" r="1" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.5;0.9;0.5" dur="4.5s" repeatCount="indefinite"/></circle><circle cx="60%" cy="12%" r="1.2" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.5;1;0.5" dur="5s" repeatCount="indefinite"/></circle><circle cx="75%" cy="18%" r="1" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.6;1;0.6" dur="4.2s" repeatCount="indefinite"/></circle><circle cx="88%" cy="10%" r="1.3" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.5;1;0.5" dur="5.5s" repeatCount="indefinite"/></circle></svg>'),
            radial-gradient(2px 2px at 20% 30%, white, transparent),
            radial-gradient(2px 2px at 60% 70%, white, transparent) !important;
    }
    
    .bg-gray-100\/90.relative.inline-block::after {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><linearGradient id="meteor1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:white;stop-opacity:0"/><stop offset="50%" style="stop-color:rgb(199,210,254);stop-opacity:0.6"/><stop offset="100%" style="stop-color:white;stop-opacity:0"/></linearGradient></defs><line x1="-50" y1="-50" x2="-20" y2="-20" stroke="url(%23meteor1)" stroke-width="1.5" opacity="0"><animate attributeName="x1" values="-50;150" dur="6s" repeatCount="indefinite"/><animate attributeName="y1" values="-50;150" dur="6s" repeatCount="indefinite"/><animate attributeName="x2" values="-20;180" dur="6s" repeatCount="indefinite"/><animate attributeName="y2" values="-20;180" dur="6s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0.8;0" dur="6s" repeatCount="indefinite"/></line></svg>') !important;
    }
}