/* 隐藏聊天框顶部的颜色装饰条 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 统一聊天框美化：樱花主题背景、圆角、阴影 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #FFF0F5 0%, #FFDAB9 100%) !important; /* 柔和的樱花粉到米色渐变 */
    border-radius: 20px !important; /* 更柔和的圆角 */
    box-shadow: 0 6px 20px rgba(255, 192, 203, 0.5) !important; /* 带有粉色调的扩散阴影 */
    border: 1px solid rgba(255, 192, 203, 0.7) !important; /* 柔和的粉色边框 */
    padding: 18px !important; /* 增加内边距，使内容更舒适 */
    position: relative !important; /* 为背景动效伪元素提供定位上下文 */
    overflow: hidden !important; /* 裁剪超出部分的背景动效 */
    isolation: isolate !important; /* 建立新的层叠上下文，确保背景动效在文本下方 */
    transition: all 0.3s ease-in-out !important; /* 添加过渡效果 */
}

/* 聊天框内的主要文本内容样式 */
.markdown-body {
    color: #333333 !important; /* 深色文本，确保在浅色背景上高度可读 */
    font-family: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important; /* 现代系统字体 */
    line-height: 1.7 !important; /* 增加行高，提升阅读舒适度 */
    font-size: 15px !important;
    background: transparent !important; /* 确保背景渐变和动效可见 */
    z-index: 1 !important; /* 确保文本在背景动效之上 */
    position: relative !important; /* 确保z-index生效 */
}

/* 聊天框底部附加元素（按钮、模型名称、Token消耗）样式 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #555555 !important; /* 略浅的深色，与主文本区分 */
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

/* 底部操作按钮的悬停效果 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #FF69B4 !important; /* 悬停时变为亮粉色 */
    background-color: rgba(255, 192, 203, 0.15) !important; /* 轻微的粉色背景 */
    border-radius: 8px !important;
}

/* 聊天框背景的樱花瓣浮动动画（CSS实现） */
.bg-gray-100\/90.relative.inline-block::before,
.bg-gray-100\/90.relative.inline-block::after {
    content: '' !important;
    position: absolute !important;
    background-color: rgba(255, 192, 203, 0.4) !important; /* 半透明的粉色 */
    border-radius: 50% 10% 50% 10% / 10% 50% 10% 50% !important; /* 模拟花瓣形状 */
    z-index: 0 !important; /* 置于文本下方 */
    pointer-events: none !important; /* 不影响鼠标交互 */
    filter: blur(1px) !important; /* 柔化边缘，增加朦胧感 */
    opacity: 0; /* 初始不可见 */
    animation: floatPetal 25s infinite ease-in-out forwards !important; /* 浮动动画 */
}

.bg-gray-100\/90.relative.inline-block::before {
    width: 20px !important;
    height: 30px !important;
    top: 5% !important;
    left: 10% !important;
    animation-delay: 0s !important; /* 第一个花瓣立即开始 */
}

.bg-gray-100\/90.relative.inline-block::after {
    width: 25px !important;
    height: 35px !important;
    bottom: 10% !important;
    right: 15% !important;
    animation-delay: 12s !important; /* 第二个花瓣延迟开始，错开动画 */
}

@keyframes floatPetal {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8) !important;
        opacity: 0 !important;
    }
    25% {
        transform: translate(15px, 25px) rotate(45deg) scale(1) !important;
        opacity: 0.7 !important;
    }
    50% {
        transform: translate(0, 50px) rotate(90deg) scale(1.1) !important;
        opacity: 0.9 !important;
    }
    75% {
        transform: translate(-15px, 25px) rotate(135deg) scale(1) !important;
        opacity: 0.7 !important;
    }
    100% {
        transform: translate(0, 0) rotate(180deg) scale(0.8) !important;
        opacity: 0 !important;
    }
}

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

/* 加载动画容器设置 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important; /* 为伪元素提供定位上下文 */
    width: 24px !important; /* 确保有足够空间显示SVG */
    height: 24px !important;
    overflow: hidden !important; /* 隐藏超出容器的部分 */
}

/* 加载动画：可爱的动态樱花瓣 (SMIL SVG实现) */
.flex.items-center.justify-center.w-6.h-5::before {
    /* 使用data URI嵌入SVG，其中包含SMIL动画 */
    content: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><defs><path id='petal' d='M12 2 C16 2 18 6 18 12 C18 18 12 22 12 22 C12 22 6 18 6 12 C6 6 8 2 12 2Z' fill='%23FFC0CB' opacity='0.9'/></defs><use href='%23petal'><animateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/><animateTransform attributeName='transform' attributeType='XML' type='translate' values='0 0; 0 2; 0 0' dur='1s' repeatCount='indefinite' additive='sum'/></use></svg>") !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 居中显示SVG */
    width: 24px !important;
    height: 24px !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 12px !important;
        border-radius: 15px !important;
    }
    .markdown-body {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .flex.items-center.justify-center.w-6.h-5 {
        width: 20px !important;
        height: 20px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 20px !important;
        height: 20px !important;
    }
    /* 移动端背景花瓣动画调整 */
    .bg-gray-100\/90.relative.inline-block::before {
        width: 15px !important;
        height: 25px !important;
    }
    .bg-gray-100\/90.relative.inline-block::after {
        width: 20px !important;
        height: 30px !important;
    }
}

/* 减少动态效果偏好设置 */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block::after {
        animation-duration: 40s !important; /* 减慢背景花瓣动画速度 */
        animation-timing-function: linear !important; /* 简化动画曲线 */
        transform: none !important; /* 移除复杂的位移旋转 */
        opacity: 0.3 !important; /* 降低可见度，减少干扰 */
    }
    /* 加载动画 (SMIL) 将保持其默认行为，因为它设计为在CSS动画禁用时仍可运动 */
}
/* 容器样式，防止全局污染 */
ai {
  display: block; /* 确保ai容器独占一行 */
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* 设置一个通用的字体栈 */
  color: #DDD; /* 默认文本颜色，假设背景较暗 */
}

/* 对话基础样式 */
ai d {
  display: block; /* 使每段对话独占一行 */
  padding: 0.2em 0; /* 略微增加行高，保持紧凑 */
  line-height: 1.5; /* 优化阅读体验 */
  font-size: 1em; /* 基础字体大小 */
}

/* 顾若曦对话颜色 */
ai d[data-speaker="gu-ruoxi"] {
  color: #CC99CC; /* 柔和的紫色调 */
}

/* 玩家对话颜色 */
ai d[data-speaker="player"] {
  color: #6699CC; /* 沉稳的蓝色调 */
}