/*
 * 描述：以红白为主，略带性感氛围的聊天框样式。
 * 特点：柔和圆角，微妙渐变，高对比度文本确保可读性，
 *      深红色调与纯白背景，底部元素颜色调和。
 */

/* 强制隐藏顶部的颜色装饰条，以保持整体美学一致性 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 统一聊天框的背景和整体风格 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #FFDDDD, #FFFFFF) !important; /* 柔和的红白渐变 */
    border: 1px solid #FFCDD2 !important; /* 浅粉色边框 */
    border-radius: 20px !important; /* 更加圆润的边角 */
    box-shadow: 0 4px 15px rgba(255, 100, 100, 0.2) !important; /* 柔和的红色阴影 */
    padding: 15px !important; /* 增加内边距 */
    transition: all 0.3s ease-in-out !important; /* 平滑过渡效果 */
}

/* 确保聊天框内的主要文本内容清晰可读 */
.markdown-body {
    color: #333333 !important; /* 深灰色文本，与浅色背景形成高对比度 */
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; /* 优雅的字体 */
    line-height: 1.6 !important; /* 增加行高，提升阅读舒适度 */
    font-size: 15px !important;
}

/* 底部操作按钮 (复制, 编辑, 删除等) 样式美化 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #E64A19 !important; /* 鲜明的橘红色，引人注目 */
    font-weight: bold !important;
    text-transform: capitalize !important; /* 首字母大写，更显精致 */
    transition: color 0.3s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #D84315 !important; /* 悬停时颜色略深 */
}

/* 模型名称文本 (例如 gemini2.5pro) */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #B71C1C !important; /* 醒目的深红色 */
    font-style: italic !important; /* 斜体，增加优雅感 */
    font-size: 0.85em !important;
}

/* Token消耗文本 */
.text-orange-500 {
    color: #F44336 !important; /* 红色系，与整体主题呼应 */
    font-weight: bold !important;
    font-size: 0.8em !important;
}

/* 加载动画：隐藏默认，使用伪元素创建新的心跳动画 */
.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; /* 宽度自适应 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important; /* 隐藏溢出内容 */
}

/* 加载动画: 心跳图案（SVG路径） */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '';
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important; /* 调整大小以适应容器 */
    height: 24px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    animation: heartBeat 1.5s infinite ease-in-out !important; /* 心跳动画 */
    opacity: 0.9 !important;
    z-index: 1 !important;
}

/* 动画效果: 心跳 */
@keyframes heartBeat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 0.9 !important;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15) !important;
        opacity: 1 !important;
    }
}

/* 确保移动端显示正常 */
@media (max-width: 768px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 15px !important; /* 移动端略小圆角 */
        padding: 10px !important;
    }
    .markdown-body {
        font-size: 14px !important;
    }
    .MuiTypography-root.MuiTypography-body2.css-6c0gf2,
    .text-orange-500 {
        font-size: 0.75em !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 20px !important;
        height: 20px !important;
    }
}