css
ai {
  display: block;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  border: 1px solid #FFAB91;
  border-radius: 12px;
  padding: 12px;
  color: #5D4037;
  box-shadow: 0 4px 15px rgba(255, 138, 101, 0.15);
  max-width: 100%;
  line-height: 1.5;
}

ai hd {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #FF7043;
  font-size: 1.1em;
  border-bottom: 2px dashed #FFAB91;
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

ai details {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 171, 145, 0.5);
}

ai summary {
  cursor: pointer;
  font-weight: bold;
  color: #FF8A65;
  list-style: none;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.3s;
}

ai summary:hover {
  color: #FF7043;
}

ai summary::-webkit-details-marker {
  display: none;
}

ai p {
  margin: 10px 0 4px 0;
  padding: 8px 10px;
  background: #ffffff;
  border-left: 4px solid #FF8A65;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  transition: transform 0.2s, box-shadow 0.2s;
}

ai p:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(255, 138, 101, 0.15);
}

ai p::before {
  content: attr(t);
  display: inline-block;
  font-size: 12px;
  color: #fff;
  background-color: #FF8A65;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: bold;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

ai f {
  font-weight: bold;
  color: #FF7043;
  font-size: 1.15em;
  display: block;
  margin-bottom: 4px;
  border-bottom: 1px solid #FFE0B2;
  padding-bottom: 2px;
}

ai d {
  display: block;
  margin: 3px 0;
  color: #6D4C41;
}

ai d::before {
  content: "✦";
  color: #FFCCBC;
  margin-right: 5px;
  font-size: 0.9em;
}
css
/* 隐藏顶部默认颜色装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 统一聊天框主体美化：青梅竹马（粉青渐变）同居温馨风格 */
.bg-gray-100\/90.relative.inline-block {
    /* 傲娇青与温柔粉的碰撞渐变 */
    background: linear-gradient(135deg, #FFE5E5 0%, #E0F2FE 100%) !important;
    border-radius: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
    padding: 16px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    isolation: isolate !important;
}

/* 鼠标悬浮时的微小互动感（小事上的关心） */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-1px) !important;
}

/* 核心文本强制高可读性（浅色背景配深色高对比度文字） */
.markdown-body {
    color: #374151 !important; /* 深灰偏黑，确保绝对清晰 */
    font-weight: bold !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    line-height: 1.6 !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 底部附加元素（按钮、模型、Token）色彩统一，融入主题且保持清晰 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #6B7280 !important;
    font-weight: bold !important;
    transition: color 0.2s ease !important;
}

/* 底部按钮悬浮时透出一点粉色（隐藏的关心） */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #F472B6 !important;
    background-color: rgba(244, 114, 182, 0.1) !important;
}

/* ================= 加载动画重构 ================= */

/* 1. 强制隐藏默认加载文本和闪烁点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 2. 定位加载容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-width: 40px !important;
}

/* 3. 注入SVG SMIL动画：两颗互相缠绕/拌嘴的圆点 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 30px !important;
    height: 10px !important;
    /* 使用内联SVG SMIL动画，即使CSS动画被禁用依然有效 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23F472B6'%3E%3Canimate attributeName='cx' values='5;25;5' dur='1.2s' repeatCount='indefinite' calcMode='spline' keySplines='0.4 0 0.2 1; 0.4 0 0.2 1'/%3E%3C/circle%3E%3Ccircle cx='25' cy='5' r='4' fill='%2338BDF8'%3E%3Canimate attributeName='cx' values='25;5;25' dur='1.2s' repeatCount='indefinite' calcMode='spline' keySplines='0.4 0 0.2 1; 0.4 0 0.2 1'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

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

@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block {
        transition: none !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        /* 减弱动效时提供静态的双色交叠圆点占位 */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Ccircle cx='12' cy='5' r='4' fill='%23F472B6' opacity='0.8'/%3E%3Ccircle cx='18' cy='5' r='4' fill='%2338BDF8' opacity='0.8'/%3E%3C/svg%3E") !important;
    }
}
css
/* 顶部栏美化：添加轻微的磨砂玻璃效果和柔和的底部阴影，提升层次感 */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

/* 底部输入栏美化：圆角化处理，增加内阴影使其具有嵌入感 */
#ai-chat-bottom-input {
    background: rgba(248, 250, 252, 0.95) !important;
    border-radius: 24px;
    padding: 6px 12px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(226, 232, 240, 0.8);
}
#ai-chat-input {
    background: transparent !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

/* 底部按钮美化（Mod按钮等）：增加微渐变背景和悬浮动画效果 */
#ai-mod-button2 button.MuiButton-root {
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}
#ai-mod-button2 button.MuiButton-root:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* 页码美化：仅优化颜色和视觉反馈，选中状态采用柔和的蓝色渐变 */
.MuiPaginationItem-root {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    color: white !important;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    border: none !important;
}

/* 评论区美化：整体背景微调，评论项卡片化处理，增加悬浮交互感 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
}
div.group.ml-0 {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
div.group.ml-0:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #e2e8f0;
}