/*
 * === 夜空星辰动态主题 & 自定义加载动画 ===
 * 1. 聊天框变为深蓝色渐变夜空，带有两层动态星辰，实现视差滚动效果。
 * 2. 文本及按钮颜色优化，确保在深色背景下的绝对可读性。
 * 3. 将默认加载动画替换为 "妹妹管教中..." 动态文本SVG动画。
 */

/* --- 1. 聊天框主体：夜空背景与星辰 --- */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(to bottom, #0d1b2a, #000814) !important;
    border: 1px solid #4a4e69 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(74, 78, 105, 0.5) !important;
    overflow: hidden !important; /* 隐藏溢出的星星 */
    isolation: isolate !important; /* 创建新的层叠上下文 */
}

/* 远景小星星 (::before) */
.bg-gray-100\/90.relative.inline-block::before {
    content: '' !important;
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    background: transparent !important;
    --star-color: #FFFFFF;
    --star-size: 1px;
    --shadow-small: 
        117px 229px var(--star-color), 29px 128px var(--star-color), 241px 235px var(--star-color), 
        34px 23px var(--star-color), 127px 119px var(--star-color), 244px 175px var(--star-color), 
        110px 141px var(--star-color), 17px 17px var(--star-color), 211px 96px var(--star-color), 
        155px 120px var(--star-color), 166px 18px var(--star-color), 114px 62px var(--star-color);
    box-shadow: var(--shadow-small) !important;
    width: var(--star-size) !important;
    height: var(--star-size) !important;
    animation: animStar 80s linear infinite !important;
}

/* 近景大星星 (::after) */
.bg-gray-100\/90.relative.inline-block::after {
    content: '' !important;
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    background: transparent !important;
    --star-color: #FFFFFF;
    --star-size: 2px;
    --shadow-medium: 
        187px 99px var(--star-color), 213px 213px var(--star-color), 89px 158px var(--star-color), 
        31px 201px var(--star-color), 195px 143px var(--star-color), 94px 41px var(--star-color), 
        146px 5px var(--star-color), 5px 248px var(--star-color), 200px 33px var(--star-color);
    box-shadow: var(--shadow-medium) !important;
    width: var(--star-size) !important;
    height: var(--star-size) !important;
    animation: animStar 50s linear infinite !important;
}

@keyframes animStar {
    from {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.8;
    }
    to {
        transform: translateY(-250px) rotate(360deg);
        opacity: 0.4;
    }
}

/* --- 2. 文本与UI元素可读性优化 --- */
.markdown-body {
    color: #F0F0F0 !important;
    background: transparent !important; /* 使文本背景透明以显示星空 */
    position: relative !important;
    z-index: 1 !important; /* 确保文本在星星之上 */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important; /* 轻微阴影增加对比度 */
}

/* 统一设置底部按钮、模型名称、Token消耗的颜色 */
.MuiButtonBase-root.MuiButton-root,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #A9A9A9 !important; /* 使用稍暗的灰色与正文区分 */
    transition: color 0.3s !important;
}
.MuiButtonBase-root.MuiButton-root:hover {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* --- 3. 自定义加载动画："妹妹管教中..." --- */

/* 隐藏平台默认的加载点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 准备加载动画的容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 140px !important; /* 拓宽容器以容纳文本 */
    height: 30px !important; /* 增加高度 */
}

/* 使用 ::after 伪元素注入SVG动画 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="20" viewBox="0 0 130 20"%3E%3Cstyle%3E.text %7B font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; fill: %23C0C0C0; font-weight: bold; %7D%3C/style%3E%3Ctext x="0" y="15" class="text"%3E%E5%A6%B9%E5%A6%B9%E7%AE%A1%E6%95%99%E4%B8%AD%3C/text%3E%3Ccircle cx="100" cy="14.5" r="1.5" fill="%23C0C0C0"%3E%3Canimate attributeName="opacity" values="0;1;0" dur="1.8s" begin="0s" repeatCount="indefinite" /%3E%3C/circle%3E%3Ccircle cx="108" cy="14.5" r="1.5" fill="%23C0C0C0"%3E%3Canimate attributeName="opacity" values="0;1;0" dur="1.8s" begin="0.3s" repeatCount="indefinite" /%3E%3C/circle%3E%3Ccircle cx="116" cy="14.5" r="1.5" fill="%23C0C0C0"%3E%3Canimate attributeName="opacity" values="0;1;0" dur="1.8s" begin="0.6s" repeatCount="indefinite" /%3E%3C/circle%3E%3C/svg%3E') !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 130px;
    height: 20px;
}

/* --- 4. 移除顶部的颜色装饰条 --- */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 5. 辅助功能与适配 --- */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block::after {
        animation-duration: 240s !important; /* 减弱动态效果 */
    }
}