/* ============================================================
   🌸 魔法少女世界观 · 聊天框主题 CSS
   适配深色背景，粉色霓虹光效，动态星光背景
   ============================================================ */

/* 1. 隐藏顶部多余装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 聊天框主体：深邃魔法空间 + 粉色霓虹边框 */
.bg-gray-100\/90.relative.inline-block {
    /* 深紫黑底色，保留一丝神秘感 */
    background: linear-gradient(145deg, #1a1025 0%, #0f0a1a 100%) !important;
    /* 粉色发光边框 + 内光晕 */
    border: 1.5px solid rgba(255, 107, 157, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 0 15px rgba(255, 107, 157, 0.25),
        0 0 40px rgba(255, 107, 157, 0.1),
        inset 0 0 20px rgba(255, 133, 179, 0.15) !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* 3. 动态魔法粒子背景（飘落的星尘与光点） */
.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;
    /* SVG 包含多个缓慢移动的粉色/金色光点，模拟魔法粒子 */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3CradialGradient id='pink-glow'%3E%3Cstop offset='0%25' stop-color='%23ff85b3' stop-opacity='0.25'/%3E%3Cstop offset='100%25' stop-color='%23ff85b3' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gold-glow'%3E%3Cstop offset='0%25' stop-color='%23ffd700' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='%23ffd700' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='15%25' cy='20%25' r='80' fill='url(%23pink-glow)'%3E%3Canimate attributeName='cx' values='15%25;85%25;15%25' dur='18s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='20%25;60%25;20%25' dur='12s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='75%25' cy='80%25' r='100' fill='url(%23gold-glow)'%3E%3Canimate attributeName='cx' values='75%25;25%25;75%25' dur='22s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='80%25;30%25;80%25' dur='14s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='30%25' cy='70%25' r='60' fill='url(%23pink-glow)'%3E%3Canimate attributeName='cx' values='30%25;70%25;30%25' dur='16s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='70%25;40%25;70%25' dur='20s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 4. 消息文本：纯白高亮，带轻微粉色文字阴影 */
.markdown-body {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    text-shadow: 0 0 8px rgba(255, 133, 179, 0.3) !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 5. 用户消息气泡：金色调，与魔法少女主题呼应 */
/* 如果选择器能匹配到用户消息，可以额外添加；若无则跳过 */
.bg-blue-500 {
    background: linear-gradient(135deg, #ffb800, #ff9f00) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 12px rgba(255, 180, 0, 0.3) !important;
    color: #1a0033 !important;
    font-weight: 600 !important;
}

/* 6. 底部按钮、模型名等元素：浅粉色调 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #ffb6d9 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 7. 加载动画：隐藏默认点状动画，显示魔法少女风格的“读取中...” */
.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: 110px !important;
    height: 24px !important;
    margin: 0 auto !important;
}

.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: 110px !important;
    height: 24px !important;
    /* 粉色闪烁文字：✨ 魔力凝聚中... */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='24' viewBox='0 0 110 24'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%23ffa3c4'%3E%E2%9C%A8 %E9%AD%94%E5%8A%9B%E5%87%9D%E8%81%9A%E4%B8%AD...%3Canimate attributeName='opacity' values='0.4;1;0.4' dur='1.8s' repeatCount='indefinite'/%3E%3C/text%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

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

@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before {
        opacity: 0.3 !important; /* 减少动态背景干扰 */
    }
}