css
/* ==================== 全局容器美化 ==================== */
.chat-message {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  line-height: 1.8;
  color: #e8f4fc;
}

/* ==================== 思维链隐藏 ==================== */
cot {
  display: none;
}

/* ==================== Details/Summary 通用样式 ==================== */
details {
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(135,206,250,0.25);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

details:hover {
  border-color: rgba(135,206,250,0.4);
  box-shadow: 0 4px 20px rgba(135,206,250,0.15);
}

details[open] {
  border-color: rgba(135,206,250,0.5);
  box-shadow: 0 5px 25px rgba(135,206,250,0.2);
}

summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.05rem;
  color: #87ceeb;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  position: relative;
}

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

summary::before {
  content: '▶';
  font-size: 0.8em;
  transition: transform 0.3s ease;
  display: inline-block;
  color: #87ceeb;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

summary:hover {
  background: rgba(135,206,250,0.15);
  color: #fff;
  transform: translateX(3px);
}

summary:active {
  transform: translateX(1px);
}

/* ==================== 世界信息特殊样式 ==================== */
details:has(summary:contains("世界信息")) {
  background: linear-gradient(145deg, rgba(135,206,250,0.12), rgba(100,150,200,0.08));
  border-color: rgba(135,206,250,0.4);
}

/* ==================== 正文区域 ==================== */
.chat-message > p,
.chat-message > div:not(details) {
  margin-bottom: 15px;
  text-indent: 2em;
  line-height: 1.9;
}

/* ==================== 对话颜色 ==================== */
span[style*="color: blue"] {
  font-weight: 500;
  text-shadow: 0 0 8px rgba(0,123,255,0.3);
}

span[style*="color: #FF007F"] {
  font-weight: 500;
  text-shadow: 0 0 8px rgba(255,0,127,0.3);
}

/* ==================== 玩家信息美化 ==================== */
details:has(summary:contains("玩家信息")) summary {
  color: #ffd700;
}

details:has(summary:contains("玩家信息")) {
  border-color: rgba(255,215,0,0.3);
}

details:has(summary:contains("玩家信息")):hover {
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 4px 20px rgba(255,215,0,0.15);
}

/* ==================== 萧晨蕾信息美化 ==================== */
details:has(summary:contains("萧晨蕾")) summary {
  color: #ff69b4;
}

details:has(summary:contains("萧晨蕾")) {
  border-color: rgba(255,105,180,0.3);
}

details:has(summary:contains("萧晨蕾")):hover {
  border-color: rgba(255,105,180,0.5);
  box-shadow: 0 4px 20px rgba(255,105,180,0.15);
}

/* ==================== NPC信息美化 ==================== */
details:has(summary:contains("其他NPC")) summary {
  color: #a8d4f0;
}

details:has(summary:contains("其他NPC")) {
  border-color: rgba(168,212,240,0.3);
}

/* ==================== 记忆回廊美化 ==================== */
details:has(summary:contains("记忆回廊")) {
  background: linear-gradient(145deg, rgba(138,43,226,0.08), rgba(75,0,130,0.05));
  border-color: rgba(138,43,226,0.3);
}

details:has(summary:contains("记忆回廊")) summary {
  color: #ba55d3;
}

details:has(summary:contains("记忆回廊")):hover {
  border-color: rgba(138,43,226,0.5);
  box-shadow: 0 4px 20px rgba(138,43,226,0.15);
}

/* ==================== 表格美化 ==================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 0.9rem;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  overflow: hidden;
}

thead {
  background: rgba(135,206,250,0.2);
}

th {
  color: #fff;
  font-weight: bold;
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid rgba(135,206,250,0.4);
}

td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #d8ecf8;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover {
  background: rgba(135,206,250,0.08);
}

/* ==================== 行动推荐美化 ==================== */
details:has(summary:contains("行动推荐")) {
  background: linear-gradient(145deg, rgba(50,205,50,0.08), rgba(34,139,34,0.05));
  border-color: rgba(50,205,50,0.3);
}

details:has(summary:contains("行动推荐")) summary {
  color: #32cd32;
}

details:has(summary:contains("行动推荐")):hover {
  border-color: rgba(50,205,50,0.5);
  box-shadow: 0 4px 20px rgba(50,205,50,0.15);
}

details:has(summary:contains("行动推荐")) ol,
details:has(summary:contains("行动推荐")) ul {
  list-style: none;
  padding: 0;
  margin-top: 12px;
}

details:has(summary:contains("行动推荐")) li {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(50,205,50,0.3);
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

details:has(summary:contains("行动推荐")) li::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(50,205,50,0.2), transparent);
  transition: left 0.5s ease;
}

details:has(summary:contains("行动推荐")) li:hover::before {
  left: 100%;
}

details:has(summary:contains("行动推荐")) li:hover {
  background: rgba(50,205,50,0.12);
  border-color: rgba(50,205,50,0.5);
  transform: translateX(5px);
  box-shadow: 0 3px 15px rgba(50,205,50,0.2);
}

/* ==================== 列表项美化 ==================== */
details ul,
details ol {
  margin-top: 12px;
  padding-left: 0;
}

details li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  line-height: 1.7;
}

details li::before {
  content: '•';
  position: absolute;
  left: 5px;
  color: #87ceeb;
  font-weight: bold;
}

/* ==================== Emoji 和图标优化 ==================== */
summary > *:first-child {
  font-size: 1.1em;
}

/* ==================== 好感度/状态标签美化 ==================== */
details strong {
  color: #87ceeb;
  font-weight: 600;
}

/* ==================== 内心独白样式 ==================== */
details:has(summary:contains("萧晨蕾")) li:contains("💭"),
details:has(summary:contains("其他NPC")) li:contains("💭") {
  font-style: italic;
  color: #c8e4f8;
  background: rgba(135,206,250,0.08);
  border-left: 3px solid rgba(135,206,250,0.4);
  padding: 10px 15px;
  border-radius: 8px;
  margin-top: 10px;
}

/* ==================== 响应式优化 ==================== */
@media (max-width: 600px) {
  details {
    padding: 12px;
  }
  
  summary {
    font-size: 0.95rem;
    padding: 6px 10px;
  }
  
  table {
    font-size: 0.8rem;
  }
  
  th, td {
    padding: 8px 6px;
  }
  
  details:has(summary:contains("行动推荐")) li {
    padding: 10px 12px;
  }
}

/* ==================== 滚动条美化 ==================== */
details::-webkit-scrollbar {
  width: 8px;
}

details::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}

details::-webkit-scrollbar-thumb {
  background: rgba(135,206,250,0.4);
  border-radius: 10px;
  transition: background 0.3s ease;
}

details::-webkit-scrollbar-thumb:hover {
  background: rgba(135,206,250,0.6);
}

/* ==================== 特殊标记美化 ==================== */
details code {
  background: rgba(135,206,250,0.15);
  border: 1px solid rgba(135,206,250,0.3);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  color: #87ceeb;
}

/* ==================== 分隔线美化 ==================== */
details hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(135,206,250,0.4), transparent);
  margin: 15px 0;
}

/* ==================== 动画效果 ==================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

details[open] > *:not(summary) {
  animation: fadeIn 0.3s ease;
}

/* ==================== 特殊emoji高亮 ==================== */
summary:contains("🌍"),
summary:contains("👤"),
summary:contains("🌹"),
summary:contains("🥀"),
summary:contains("👥"),
summary:contains("⭐️"),
summary:contains("🎯") {
  text-shadow: 0 0 10px rgba(135,206,250,0.3);
}

/* ==================== 时间线标记特殊样式 ==================== */
details:has(summary:contains("世界信息")) li:contains("【另一个未来】"),
details:has(summary:contains("世界信息")) li:contains("【如果还有明天】") {
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255,215,0,0.4);
}
css
/* ==================== 聊天框容器美化 ==================== */
.bg-gray-100\/90.relative.inline-block {
  background: linear-gradient(145deg, rgba(10,20,40,0.95), rgba(20,35,60,0.92)) !important;
  border: 2px solid transparent !important;
  border-image: linear-gradient(135deg, rgba(135,206,250,0.6), rgba(138,43,226,0.4), rgba(135,206,250,0.6)) 1 !important;
  border-radius: 16px !important;
  padding: 25px !important;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 40px rgba(135,206,250,0.15) !important;
  position: relative !important;
  overflow: visible !important;
  backdrop-filter: blur(20px) !important;
  color: #e8f4fc !important;
}
/* ==================== 边角装饰图案 ==================== */
.bg-gray-100\/90.relative.inline-block::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  width: 80px !important;
  height: 80px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2387ceeb' stroke-width='1.5' opacity='0.4'%3E%3Cpath d='M50,10 L55,30 L75,30 L60,42 L65,62 L50,50 L35,62 L40,42 L25,30 L45,30 Z'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Cpath d='M50,20 Q60,25 65,35'/%3E%3Cpath d='M50,20 Q40,25 35,35'/%3E%3Cpath d='M50,80 Q60,75 65,65'/%3E%3Cpath d='M50,80 Q40,75 35,65'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  filter: drop-shadow(0 0 8px rgba(135,206,250,0.4)) !important;
}
.bg-gray-100\/90.relative.inline-block::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 80px !important;
  height: 80px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ba55d3' stroke-width='1.5' opacity='0.4'%3E%3Cellipse cx='50' cy='30' rx='15' ry='8' transform='rotate(-20 50 30)'/%3E%3Cellipse cx='50' cy='30' rx='15' ry='8' transform='rotate(20 50 30)'/%3E%3Cellipse cx='50' cy='30' rx='15' ry='8' transform='rotate(60 50 30)'/%3E%3Cline x1='50' y1='40' x2='50' y2='70' stroke-width='2'/%3E%3Cpath d='M45,70 Q50,75 55,70' fill='%23ba55d3' opacity='0.3'/%3E%3Ccircle cx='50' cy='25' r='3' fill='%23ffd700'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  filter: drop-shadow(0 0 8px rgba(186,85,211,0.4)) !important;
  transform: rotate(180deg) !important;
}
/* ==================== 花边边框效果 ==================== */
.bg-gray-100\/90.relative.inline-block {
  background-image: 
    linear-gradient(145deg, rgba(10,20,40,0.95), rgba(20,35,60,0.92)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 10px,
      rgba(135,206,250,0.1) 10px,
      rgba(135,206,250,0.1) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 10px,
      rgba(135,206,250,0.1) 10px,
      rgba(135,206,250,0.1) 11px
    ) !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0, 0 0 !important;
}
/* ==================== 顶部装饰线 ==================== */
.bg-gray-100\/90.relative.inline-block {
  border-top: 3px solid transparent !important;
  border-image: repeating-linear-gradient(
    90deg,
    rgba(135,206,250,0.8) 0px,
    rgba(138,43,226,0.6) 10px,
    rgba(135,206,250,0.8) 20px
  ) 3 !important;
}
/* ==================== 内部文字默认浅色（但不强制覆盖所有子元素） ==================== */
.bg-gray-100\/90.relative.inline-block {
  color: #e8f4fc !important;
}
/* ==================== 只对特定元素强制浅色 ==================== */
.bg-gray-100\/90.relative.inline-block > div:not([style*="color"]),
.bg-gray-100\/90.relative.inline-block > p:not([style*="color"]),
.bg-gray-100\/90.relative.inline-block > span:not([style*="color"]) {
  color: #e8f4fc !important;
}
/* ==================== 保护带有style="color"的span（对话颜色） ==================== */
.bg-gray-100\/90.relative.inline-block span[style*="color: blue"],
.bg-gray-100\/90.relative.inline-block span[style*="color: #FF007F"],
.bg-gray-100\/90.relative.inline-block span[style*="color:#FF007F"] {
  color: inherit !important;
  font-weight: 600 !important;
  text-shadow: 0 0 10px currentColor !important;
}
/* ==================== 保护details和p标签的颜色 ==================== */
.bg-gray-100\/90.relative.inline-block details,
.bg-gray-100\/90.relative.inline-block details *,
.bg-gray-100\/90.relative.inline-block p,
.bg-gray-100\/90.relative.inline-block p * {
  color: inherit !important;
}
/* ==================== markdown-body文字颜色 ==================== */
.markdown-body {
  color: #e8f4fc !important;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  color: #87ceeb !important;
}
.markdown-body strong {
  color: #fff !important;
}
.markdown-body em {
  color: #c8e4f8 !important;
}
.markdown-body code {
  background: rgba(135,206,250,0.15) !important;
  color: #87ceeb !important;
  border: 1px solid rgba(135,206,250,0.3) !important;
}
.markdown-body a {
  color: #87ceeb !important;
}
.markdown-body a:hover {
  color: #fff !important;
}
/* ==================== 聊天框悬停效果 ==================== */
.bg-gray-100\/90.relative.inline-block:hover {
  box-shadow: 
    0 12px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 50px rgba(135,206,250,0.25) !important;
  border-image: linear-gradient(135deg, rgba(135,206,250,0.8), rgba(138,43,226,0.6), rgba(135,206,250,0.8)) 1 !important;
}
/* ==================== 雪花飘落动画装饰 ==================== */
.bg-gray-100\/90.relative.inline-block {
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 33% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.3), transparent),
    linear-gradient(145deg, rgba(10,20,40,0.95), rgba(20,35,60,0.92)) !important;
  background-size: 200% 200% !important;
  background-position: 0% 0% !important;
  animation: snowDrift 20s ease-in-out infinite !important;
}
@keyframes snowDrift {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
}
/* ==================== 神秘光晕效果 ==================== */
.bg-gray-100\/90.relative.inline-block::before {
  animation: glowPulse 4s ease-in-out infinite !important;
}
.bg-gray-100\/90.relative.inline-block::after {
  animation: glowPulse 4s ease-in-out infinite 2s !important;
}
@keyframes glowPulse {
  0%, 100% {
    opacity: 0.4;
    filter: drop-shadow(0 0 8px rgba(135,206,250,0.4));
  }
  50% {
    opacity: 0.8;
    filter: drop-shadow(0 0 15px rgba(135,206,250,0.7));
  }
}
/* ==================== 底部操作按钮美化 ==================== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
  color: #87ceeb !important;
  transition: all 0.3s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
  color: #fff !important;
  background: rgba(135,206,250,0.15) !important;
  text-shadow: 0 0 10px rgba(135,206,250,0.6) !important;
}
/* ==================== 模型名称文本美化 ==================== */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: #a8d4f0 !important;
  font-weight: 500 !important;
}
/* ==================== Token消耗文本美化 ==================== */
.text-orange-500 {
  color: #ffd700 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(255,215,0,0.4) !important;
}
/* ==================== 移动端适配 ==================== */
@media (max-width: 768px) {
  .bg-gray-100\/90.relative.inline-block {
    padding: 18px !important;
    border-radius: 12px !important;
  }
  .bg-gray-100\/90.relative.inline-block::before,
  .bg-gray-100\/90.relative.inline-block::after {
    width: 60px !important;
    height: 60px !important;
  }
}
/* ==================== 输出聊天框加载动画美化 ==================== */
.style_dot-flashing__8L91Q.style_text__zGhNq {
  display: none !important;
}
.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  isolation: isolate !important;
}
.flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2387ceeb'%3E%3Ccircle cx='30' cy='50' r='8'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='8'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.2s' repeatCount='indefinite' begin='0.4s'/%3E%3C/circle%3E%3Ccircle cx='70' cy='50' r='8'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.2s' repeatCount='indefinite' begin='0.8s'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain !important;
  z-index: 1 !important;
}
/* ==================== 细节优化：链接颜色 ==================== */
.bg-gray-100\/90.relative.inline-block a:not([style*="color"]) {
  color: #87ceeb !important;
  text-decoration: underline !important;
  transition: all 0.3s ease !important;
}
.bg-gray-100\/90.relative.inline-block a:not([style*="color"]):hover {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(135,206,250,0.6) !important;
}
/* ==================== 细节优化：列表项 ==================== */
.bg-gray-100\/90.relative.inline-block ul:not([style*="color"]),
.bg-gray-100\/90.relative.inline-block ol:not([style*="color"]) {
  color: #e8f4fc !important;
}
.bg-gray-100\/90.relative.inline-block li:not([style*="color"]) {
  color: #e8f4fc !important;
}
/* ==================== 细节优化：引用块 ==================== */
.bg-gray-100\/90.relative.inline-block blockquote {
  border-left: 4px solid rgba(135,206,250,0.5) !important;
  padding-left: 15px !important;
  color: #c8e4f8 !important;
  font-style: italic !important;
  background: rgba(135,206,250,0.08) !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 15px 0 !important;
  padding: 12px 15px !important;
}
/* ==================== 细节优化：分隔线 ==================== */
.bg-gray-100\/90.relative.inline-block hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(135,206,250,0.5), transparent) !important;
  margin: 20px 0 !important;
}
/* ==================== 神秘感增强：边框光效 ==================== */
.bg-gray-100\/90.relative.inline-block {
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 40px rgba(135,206,250,0.15),
    inset 0 0 60px rgba(135,206,250,0.03) !important;
}
/* ==================== 高级感：渐变文字（标题） ==================== */
.bg-gray-100\/90.relative.inline-block h1:not([style*="color"]),
.bg-gray-100\/90.relative.inline-block h2:not([style*="color"]),
.bg-gray-100\/90.relative.inline-block h3:not([style*="color"]) {
  background: linear-gradient(135deg, #87ceeb, #fff, #ba55d3) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: bold !important;
}