css
/* ============================================
 * 艾欧泽塔 · 羊皮卷叙事美化方案
 * 配色: 羊皮米黄 / 森林墨绿 / 琥珀金 / 旧书棕
 * ============================================ */

/* ---------- 0. 思维链强制隐藏 ---------- */
.cot-hide,
.cot-hide *,
div.cot-hide {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ---------- 1. 聊天容器整体背景 ---------- */
.chat-container,
.message-list,
.conversation,
[class*="chat"],
[class*="message"] {
  background: linear-gradient(180deg, #f7f1e3 0%, #efe5d0 100%) !important;
}

/* ---------- 2. AI 回复气泡 (带呼吸动效) ---------- */
.message-ai,
.ai-bubble,
.bubble-assistant,
[class*="assistant"],
[class*="ai-message"] {
  background: linear-gradient(135deg, #fdf8ec 0%, #f5ead0 100%) !important;
  border: 1.5px solid #c9a86a !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: 
    0 2px 8px rgba(120, 80, 30, 0.12),
    inset 0 1px 0 rgba(255, 250, 230, 0.8) !important;
  padding: 14px 18px !important;
  position: relative !important;
  animation: parchmentBreath 4s ease-in-out infinite !important;
}

@keyframes parchmentBreath {
  0%, 100% {
    box-shadow: 
      0 2px 8px rgba(120, 80, 30, 0.12),
      0 0 0 0 rgba(201, 168, 106, 0.4),
      inset 0 1px 0 rgba(255, 250, 230, 0.8);
  }
  50% {
    box-shadow: 
      0 4px 16px rgba(120, 80, 30, 0.18),
      0 0 12px 2px rgba(201, 168, 106, 0.25),
      inset 0 1px 0 rgba(255, 250, 230, 0.8);
  }
}

/* AI 气泡左上角的小印章装饰 */
.message-ai::before,
.ai-bubble::before,
[class*="assistant"]::before {
  content: "❦" !important;
  position: absolute !important;
  top: -10px !important;
  left: 12px !important;
  font-size: 14px !important;
  color: #8b6332 !important;
  background: #fdf8ec !important;
  padding: 0 6px !important;
  border-radius: 50% !important;
  text-shadow: 0 1px 2px rgba(120, 80, 30, 0.2) !important;
}

/* ---------- 3. 用户输入气泡 ---------- */
.message-user,
.user-bubble,
.bubble-user,
[class*="user-message"],
[class*="message-self"] {
  background: linear-gradient(135deg, #6b8e5a 0%, #4a6e44 100%) !important;
  color: #f7f1e3 !important;
  border: 1.5px solid #3d5c37 !important;
  border-radius: 16px 16px 4px 16px !important;
  box-shadow: 
    0 2px 8px rgba(60, 90, 50, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  padding: 12px 16px !important;
}

.message-user *,
.user-bubble *,
[class*="user-message"] * {
  color: #f7f1e3 !important;
}

/* ---------- 4. 底部输入框区域 ---------- */
.input-area,
.input-container,
.chat-input,
.message-input,
[class*="input-box"],
[class*="textarea"] {
  background: linear-gradient(180deg, #efe5d0 0%, #e3d4b0 100%) !important;
  border-top: 2px solid #c9a86a !important;
  box-shadow: 0 -2px 8px rgba(120, 80, 30, 0.1) !important;
}

textarea,
input[type="text"],
.input-box,
[class*="input"] textarea {
  background: #fdf8ec !important;
  border: 1.5px solid #c9a86a !important;
  border-radius: 12px !important;
  color: #4a3520 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  box-shadow: inset 0 2px 4px rgba(120, 80, 30, 0.08) !important;
  transition: all 0.3s ease !important;
}

textarea:focus,
input[type="text"]:focus {
  border-color: #8b6332 !important;
  box-shadow: 
    inset 0 2px 4px rgba(120, 80, 30, 0.08),
    0 0 0 3px rgba(201, 168, 106, 0.25) !important;
  outline: none !important;
}

/* 发送按钮 */
button[class*="send"],
.send-button,
.btn-send {
  background: linear-gradient(135deg, #c9a86a 0%, #8b6332 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fdf8ec !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(120, 80, 30, 0.25) !important;
  transition: all 0.25s ease !important;
}

button[class*="send"]:hover,
.send-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(120, 80, 30, 0.35) !important;
  background: linear-gradient(135deg, #d4b478 0%, #9a6f3a 100%) !important;
}

/* ---------- 5. 顶部状态栏 (.eorzeta-top) ---------- */
.eorzeta-top {
  background: linear-gradient(135deg, #fdf8ec 0%, #f0e3c0 100%) !important;
  border: 2px solid #c9a86a !important;
  border-radius: 12px !important;
  margin: 12px 0 !important;
  box-shadow: 
    0 3px 10px rgba(120, 80, 30, 0.15),
    inset 0 1px 0 rgba(255, 250, 230, 0.8) !important;
  overflow: hidden !important;
  position: relative !important;
}

.eorzeta-top::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #c9a86a, #8b6332, #c9a86a) !important;
}

.eorzeta-top summary {
  cursor: pointer !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  color: #4a3520 !important;
  background: linear-gradient(180deg, rgba(201, 168, 106, 0.15) 0%, transparent 100%) !important;
  border-bottom: 1px solid #d4b478 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
}

.eorzeta-top summary:hover {
  background: linear-gradient(180deg, rgba(201, 168, 106, 0.25) 0%, transparent 100%) !important;
}

.eorzeta-top-body {
  padding: 14px 18px !important;
  color: #4a3520 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.eorzeta-top-body b {
  color: #8b6332 !important;
  font-weight: 700 !important;
  margin-right: 4px !important;
}

/* ---------- 6. 底部状态栏 (.eorzeta-bot 通用) ---------- */
.eorzeta-bot {
  background: linear-gradient(180deg, #fdf8ec 0%, #f5ead0 100%) !important;
  border: 1.5px solid #c9a86a !important;
  border-radius: 10px !important;
  margin: 10px 0 !important;
  box-shadow: 0 2px 6px rgba(120, 80, 30, 0.1) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.eorzeta-bot:hover {
  box-shadow: 0 4px 12px rgba(120, 80, 30, 0.18) !important;
  transform: translateY(-1px) !important;
}

.eorzeta-bot summary {
  cursor: pointer !important;
  padding: 11px 16px !important;
  font-weight: 700 !important;
  color: #4a3520 !important;
  font-size: 14px !important;
  background: linear-gradient(180deg, rgba(201, 168, 106, 0.18) 0%, rgba(201, 168, 106, 0.05) 100%) !important;
  border-bottom: 1px solid transparent !important;
  list-style: none !important;
  position: relative !important;
  padding-left: 32px !important;
  transition: all 0.25s ease !important;
}

.eorzeta-bot summary::before {
  content: "▸" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #8b6332 !important;
  font-size: 12px !important;
  transition: transform 0.3s ease !important;
}

.eorzeta-bot[open] summary::before {
  transform: translateY(-50%) rotate(90deg) !important;
}

.eorzeta-bot summary:hover {
  background: linear-gradient(180deg, rgba(201, 168, 106, 0.3) 0%, rgba(201, 168, 106, 0.1) 100%) !important;
  color: #2d2010 !important;
}

.eorzeta-bot[open] summary {
  border-bottom: 1px solid #d4b478 !important;
}

/* 折叠内容区 */
.eorzeta-bot[open] {
  padding-bottom: 14px !important;
}

.eorzeta-bot > *:not(summary) {
  padding: 4px 18px !important;
  color: #4a3520 !important;
  font-size: 13.5px !important;
  line-height: 1.85 !important;
}

/* ---------- 7. 各栏目独立色调点缀 ---------- */
/* 1·主角档案 - 墨绿 */
.eorzeta-bot-1 {
  border-left: 4px solid #6b8e5a !important;
}
.eorzeta-bot-1 summary {
  background: linear-gradient(180deg, rgba(107, 142, 90, 0.18) 0%, rgba(107, 142, 90, 0.05) 100%) !important;
}

/* 2·周边人物 - 琥珀 */
.eorzeta-bot-2 {
  border-left: 4px solid #c9a86a !important;
}
.eorzeta-bot-2 summary {
  background: linear-gradient(180deg, rgba(201, 168, 106, 0.22) 0%, rgba(201, 168, 106, 0.05) 100%) !important;
}

/* 3·装备背包 - 旧书棕 */
.eorzeta-bot-3 {
  border-left: 4px solid #8b6332 !important;
}
.eorzeta-bot-3 summary {
  background: linear-gradient(180deg, rgba(139, 99, 50, 0.2) 0%, rgba(139, 99, 50, 0.05) 100%) !important;
}

/* 4·任务日程 - 雪松青 */
.eorzeta-bot-4 {
  border-left: 4px solid #5d8aa8 !important;
}
.eorzeta-bot-4 summary {
  background: linear-gradient(180deg, rgba(93, 138, 168, 0.18) 0%, rgba(93, 138, 168, 0.05) 100%) !important;
}

/* 5·记忆区 - 暗藤紫(轻一点) */
.eorzeta-bot-5 {
  border-left: 4px solid #7a6b8d !important;
}
.eorzeta-bot-5 summary {
  background: linear-gradient(180deg, rgba(122, 107, 141, 0.18) 0%, rgba(122, 107, 141, 0.05) 100%) !important;
}

/* 6·区域地图 - 森林深绿 */
.eorzeta-bot-6 {
  border-left: 4px solid #4a6e44 !important;
}
.eorzeta-bot-6 summary {
  background: linear-gradient(180deg, rgba(74, 110, 68, 0.2) 0%, rgba(74, 110, 68, 0.05) 100%) !important;
}

/* ---------- 8. 状态栏内文本元素 ---------- */
.eorzeta-bot b,
.eorzeta-bot strong {
  color: #8b6332 !important;
  font-weight: 700 !important;
}

.eorzeta-bot ul,
.eorzeta-bot ol {
  margin: 6px 0 !important;
  padding-left: 22px !important;
}

.eorzeta-bot li {
  margin: 4px 0 !important;
  color: #4a3520 !important;
}

.eorzeta-bot li::marker {
  color: #c9a86a !important;
}

/* ---------- 9. 状态栏内表格 (记忆区) ---------- */
.eorzeta-bot table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 8px 0 !important;
  font-size: 13px !important;
  background: rgba(253, 248, 236, 0.6) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(120, 80, 30, 0.08) !important;
}

.eorzeta-bot table th {
  background: linear-gradient(135deg, #c9a86a 0%, #8b6332 100%) !important;
  color: #fdf8ec !important;
  padding: 8px 10px !important;
  text-align: left !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

.eorzeta-bot table td {
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(201, 168, 106, 0.3) !important;
  color: #4a3520 !important;
}

.eorzeta-bot table tr:nth-child(even) td {
  background: rgba(201, 168, 106, 0.06) !important;
}

.eorzeta-bot table tr:hover td {
  background: rgba(201, 168, 106, 0.15) !important;
}

/* ---------- 10. 引用块 (记忆区强制规则) ---------- */
.eorzeta-bot blockquote {
  border-left: 4px solid #b85c3a !important;
  background: linear-gradient(135deg, #fdebe0 0%, #f5d8c3 100%) !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  border-radius: 0 8px 8px 0 !important;
  color: #5c2d18 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  box-shadow: 0 2px 4px rgba(184, 92, 58, 0.12) !important;
}

.eorzeta-bot blockquote strong {
  color: #b85c3a !important;
}

/* ---------- 11. 分隔线 ---------- */
.eorzeta-bot hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, #c9a86a 20%, #c9a86a 80%, transparent 100%) !important;
  margin: 12px 0 !important;
}

/* ---------- 12. 正文 (.story-text) ---------- */
.story-text {
  background: linear-gradient(135deg, #fdfaf0 0%, #f7f1e3 100%) !important;
  border: 1.5px solid #c9a86a !important;
  border-radius: 12px !important;
  padding: 22px 28px !important;
  margin: 14px 0 !important;
  color: #2d2010 !important;
  font-size: 15px !important;
  line-height: 2.0 !important;
  letter-spacing: 0.4px !important;
  box-shadow: 
    0 3px 12px rgba(120, 80, 30, 0.12),
    inset 0 1px 0 rgba(255, 250, 230, 0.9) !important;
  position: relative !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif !important;
}

.story-text::before {
  content: "❦ ❦ ❦" !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #fdf8ec !important;
  padding: 0 14px !important;
  color: #8b6332 !important;
  font-size: 13px !important;
  letter-spacing: 8px !important;
}

.story-text::after {
  content: "❦" !important;
  display: block !important;
  text-align: center !important;
  color: #c9a86a !important;
  margin-top: 14px !important;
  font-size: 18px !important;
  letter-spacing: 4px !important;
}

.story-text p {
  margin: 12px 0 !important;
  text-indent: 2em !important;
}

.story-text p:first-of-type {
  margin-top: 4px !important;
}

.story-text p:last-of-type {
  margin-bottom: 4px !important;
}

.story-text strong,
.story-text b {
  color: #8b3a1f !important;
  font-weight: 700 !important;
  border-bottom: 1px dashed #c9a86a !important;
  padding-bottom: 1px !important;
}

.story-text em,
.story-text i {
  color: #6b5a3a !important;
  font-style: italic !important;
}

/* 正文中的对话引号美化 */
.story-text q,
.story-text [class*="dialog"] {
  color: #4a6e44 !important;
  font-weight: 500 !important;
}

/* ---------- 13. 标题层级美化 ---------- */
.eorzeta-bot h1,
.eorzeta-bot h2,
.eorzeta-bot h3,
.eorzeta-bot h4 {
  color: #8b6332 !important;
  border-bottom: 1px solid #c9a86a !important;
  padding-bottom: 4px !important;
  margin: 10px 0 8px 0 !important;
}

/* ---------- 14. 滚动条美化 ---------- */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: #efe5d0 !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c9a86a 0%, #8b6332 100%) !important;
  border-radius: 4px !important;
  border: 1px solid #efe5d0 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d4b478 0%, #9a6f3a 100%) !important;
}

/* ---------- 15. 代码块 / 行内代码 ---------- */
.story-text code,
.eorzeta-bot code {
  background: rgba(201, 168, 106, 0.18) !important;
  color: #8b3a1f !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: "Source Code Pro", "Consolas", monospace !important;
  font-size: 13px !important;
  border: 1px solid rgba(201, 168, 106, 0.4) !important;
}

/* ---------- 16. 链接 ---------- */
.story-text a,
.eorzeta-bot a,
.eorzeta-top a {
  color: #4a6e44 !important;
  text-decoration: none !important;
  border-bottom: 1px dashed #6b8e5a !important;
  transition: all 0.25s ease !important;
}

.story-text a:hover,
.eorzeta-bot a:hover,
.eorzeta-top a:hover {
  color: #8b3a1f !important;
  border-bottom-color: #b85c3a !important;
}

/* ---------- 17. 头像装饰 ---------- */
.avatar,
[class*="avatar"],
img[class*="head"] {
  border: 2px solid #c9a86a !important;
  box-shadow: 
    0 2px 6px rgba(120, 80, 30, 0.2),
    inset 0 0 0 1px rgba(255, 250, 230, 0.5) !important;
  border-radius: 50% !important;
}

/* ---------- 18. 评论区 / 操作按钮区 ---------- */
.message-actions,
.action-bar,
[class*="action"] button,
[class*="reaction"] {
  color: #8b6332 !important;
  transition: all 0.25s ease !important;
}

.message-actions:hover,
.action-bar:hover,
[class*="action"] button:hover {
  color: #4a3520 !important;
}

/* ---------- 19. 移动端响应式 ---------- */
@media (max-width: 768px) {
  .story-text {
    padding: 16px 18px !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
  }
  
  .eorzeta-top-body,
  .eorzeta-bot > *:not(summary) {
    padding: 4px 12px !important;
    font-size: 13px !important;
  }
  
  .eorzeta-bot summary,
  .eorzeta-top summary {
    padding: 9px 12px 9px 28px !important;
    font-size: 13.5px !important;
  }
  
  .eorzeta-bot table {
    font-size: 12px !important;
  }
  
  .eorzeta-bot table th,
  .eorzeta-bot table td {
    padding: 6px 8px !important;
  }
}

/* ---------- 20. 选中文本配色 ---------- */
.story-text::selection,
.eorzeta-bot::selection,
.eorzeta-top::selection,
.story-text *::selection,
.eorzeta-bot *::selection,
.eorzeta-top *::selection {
  background: #c9a86a !important;
  color: #fdf8ec !important;
}