/* --- 史莱姆转生主题聊天框美化 --- */
/* 1. 移除平台默认的顶部颜色装饰条，确保主题完整性 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}
/* 2. 统一聊天框(输入与输出)核心样式：魔素水晶质感 */
.bg-gray-100\/90.relative.inline-block {
    /* 使用渐变模拟史莱姆的流体与核心，底部为半透明 */
    background: linear-gradient(
        150deg, 
        rgba(7, 34, 64, 0.95) 0%, 
        rgba(36, 116, 185, 0.98) 50%, 
        rgba(128, 198, 255, 0.85) 100%
    ) !important;
    border-radius: 16px !important; /* 更圆润的边角，模拟史莱姆形态 */
    border: 1px solid rgba(173, 216, 230, 0.5) !important; /* 浅蓝色边框，增加轮廓感 */
    /* 模拟魔素环绕的辉光效果 */
    box-shadow: 0 0 10px rgba(100, 181, 246, 0.5), 
                0 0 20px rgba(128, 198, 255, 0.3), 
                inset 0 0 5px rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    overflow: hidden !important; /* 确保内部元素不会溢出圆角 */
    transition: all 0.3s ease !important; /* 平滑的过渡效果 */
}
/* 鼠标悬浮时增强辉光效果 */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 0 15px rgba(100, 181, 246, 0.8), 
                0 0 30px rgba(128, 198, 255, 0.5), 
                inset 0 0 8px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px); /* 轻微上浮 */
}
/* 3. 聊天框内主要文本样式：确保在深色背景下绝对清晰 */
.markdown-body {
    color: #FFFFFF !important; /* 纯白色，保证最高可读性 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background-color: transparent !important; /* 确保背景透明，显示聊天框的渐变 */
}
/* 强调(加粗)文本样式 */
.markdown-body strong, .markdown-body b {
    color: #BBDEFB !important; /* 使用淡蓝色强调，更符合主题 */
    font-weight: bold !important;
}
/* 4. 底部附加元素样式：在深色背景下清晰可见 */
/* 操作按钮(复制/编辑等) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #EAEAEA !important; /* 稍暗的白色，与主文本区分 */
    transition: color 0.3s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #FFFFFF !important; /* 悬浮时变亮 */
    background-color: rgba(255, 255, 255, 0.1) !important;
}
/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #B0BEC5 !important; /* 蓝灰色，作为次要信息 */
    font-weight: 500 !important;
}
/* Token消耗文本 */
.text-orange-500 {
    color: #81D4FA !important; /* 使用主题内的浅蓝色代替默认橙色 */
    font-weight: bold !important;
}
/* 5. 自定义加载动画：“大贤者”解析中 */
/* 先隐藏默认的加载点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}
/* 找到加载动画的父容器并设置相对定位 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    height: 30px !important; /* 给予足够空间展示动画和文字 */
    width: auto !important; /* 宽度自适应 */
    padding-left: 28px !important; /* 为左侧的动画图标留出空间 */
    justify-content: flex-start !important; /* 从左侧开始排列 */
}
/* 使用 ::before 伪元素创建解析文字 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '解析中...' !important;
    font-family: monospace, sans-serif !important;
    color: #81D4FA !important;
    font-size: 14px !important;
    line-height: 30px !important; /* 垂直居中 */
    position: absolute !important;
    left: 28px !important; /* 放置在动画图标右侧 */
    top: 0 !important;
    animation: typing-effect 2s steps(4) infinite;
    white-space: nowrap;
    overflow: hidden;
}
/* 使用 ::after 伪元素创建SVG动画图标 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url('data:image/svg+xml,<svg><style>@keyframes rotate {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} @keyframes dash {0% {stroke-dasharray: 1, 200; stroke-dashoffset: 0;} 50% {stroke-dasharray: 89, 200; stroke-dashoffset: -35;} 100% {stroke-dasharray: 89, 200; stroke-dashoffset: -124;}} path {transform-origin: center; animation: rotate 2s linear infinite;} .track {stroke: rgba(129, 212, 250, 0.3);} .progress {stroke: rgb(129, 212, 250); stroke-linecap: round; animation: dash 1.5s ease-in-out infinite;}</style><path class="track"></path><path class="progress"></path></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
/* 文字打字机效果动画 */
@keyframes typing-effect {
    from { width: 0; }
    to { width: 56px; } /* '解析中...' 的宽度 */
}