/* 
 * 主题：日常城市风格 (Daily City)
 * 特色：晨雾渐变背景 / 极简现代边框 / 行驶的自行车加载动画
 */

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

/* 2. 统一聊天框基础样式 (输入与输出) */
.bg-gray-100\/90.relative.inline-block {
    /* 模拟城市清晨的浅灰到淡蓝渐变 */
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecef 100%) !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
}

/* 3. 聊天框内主文本样式 (遵循浅色背景+深色高对比度文字强制规则) */
.markdown-body {
    /* 极深的海军蓝/深灰，确保在浅色背景上绝对清晰 */
    color: #2c3e50 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: bold !important;
    /* 绝对禁止使用 text-shadow 以保可读性 */
    text-shadow: none !important; 
    z-index: 1 !important;
}

/* 4. 底部附加元素样式 (按钮、模型名称、Token消耗) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    /* 与都市风格匹配的都市灰 */
    color: #606f7b !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #3490dc !important; /* 悬停时显示城市蓝 */
    background-color: rgba(52, 144, 220, 0.1) !important;
}

/* =========================================
   5. 自定义加载动画：行驶的自行车
   严格遵守SMIL内联SVG规范，无惧CSS动画被禁用
   ========================================= */

/* 隐藏默认的闪烁点加载动画 */
.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: 40px !important; /* 适当拓宽以容纳自行车图形 */
    height: 24px !important;
    overflow: visible !important;
}

/* 注入自行车SVG动画 (使用SMIL技术，车轮旋转，车身微动，路面向后倒退) */
.flex.items-center.justify-center.w-6.h-5::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' width='32' height='24'%3E%3Cg stroke='%23a0aec0' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='22' x2='4' y2='22'%3E%3Canimate attributeName='x1' values='32;-4' dur='0.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='x2' values='36;0' dur='0.8s' repeatCount='indefinite'/%3E%3C/line%3E%3Cline x1='12' y1='22' x2='20' y2='22'%3E%3Canimate attributeName='x1' values='32;-8' dur='1s' repeatCount='indefinite'/%3E%3Canimate attributeName='x2' values='40;0' dur='1s' repeatCount='indefinite'/%3E%3C/line%3E%3C/g%3E%3Cg stroke='%232d3748' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0; 0 -1.5; 0 0' dur='0.4s' repeatCount='indefinite'/%3E%3Ccircle cx='8' cy='16' r='4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 16' to='360 8 16' dur='0.6s' repeatCount='indefinite'/%3E%3Cline x1='8' y1='12' x2='8' y2='20'/%3E%3Cline x1='4' y1='16' x2='12' y2='16'/%3E%3C/circle%3E%3Ccircle cx='24' cy='16' r='4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 24 16' to='360 24 16' dur='0.6s' repeatCount='indefinite'/%3E%3Cline x1='24' y1='12' x2='24' y2='20'/%3E%3Cline x1='20' y1='16' x2='28' y2='16'/%3E%3C/circle%3E%3Cpolyline points='8,16 14,8 21,8 24,16' /%3E%3Cline x1='14' y1='8' x2='11' y2='16' /%3E%3Cline x1='21' y1='8' x2='20' y2='4' /%3E%3Cline x1='12' y1='8' x2='16' y2='8' stroke-width='2'/%3E%3Cline x1='18' y1='4' x2='22' y2='4' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
}

/* 6. 移动端与低动效适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 10px !important;
        padding: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 尊重系统设置，保留加载图形但利用CSS覆盖使其静止，防止引发眩晕 */
    .flex.items-center.justify-center.w-6.h-5::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' width='32' height='24'%3E%3Cg stroke='%23a0aec0' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='22' x2='16' y2='22'/%3E%3C/g%3E%3Cg stroke='%232d3748' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='4'/%3E%3Ccircle cx='24' cy='16' r='4'/%3E%3Cpolyline points='8,16 14,8 21,8 24,16' /%3E%3Cline x1='14' y1='8' x2='11' y2='16' /%3E%3Cline x1='21' y1='8' x2='20' y2='4' /%3E%3Cline x1='12' y1='8' x2='16' y2='8' stroke-width='2'/%3E%3Cline x1='18' y1='4' x2='22' y2='4' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") !important;
    }
}