/* ============================================================
   学生时代 · 青春怀旧 · 楷书版（全实色，无透明）
   底 #FFFBF5 / 面 #FFF8EE / 分隔 #E8DFD0 / 弱面 #FDF8F0
   主蓝 #4A90D9 · 浅蓝 #A8D0F0 · 蓝底 #EBF5FF · 深蓝 #2E6BA8
   薄荷 #7BC8A4 · 樱粉 #F0A8B8 · 暖橙 #F5A623
   墨 #2C3E50 · 正文 #5A6B7D · 弱字 #9AA8B5
   ------------------------------------------------------------
   本版修正：状态栏不再裁切内容（顶条改 border-top）
             表格自身横向滚动，单元格禁止逐字换行
             移除右上角徽章，标题栏占满整行
             加载动画改为铅笔写字（学生时代主题）
   ============================================================ */

/* ---------- 字体 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;500;700&display=swap');

/* ---------- 动画池 ---------- */
@keyframes xm-pencil-write {
  0%   { left: -10%; opacity: 0; transform: translateY(-50%) rotate(-15deg); }
  8%   { opacity: 1; }
  88%  { left: 92%; opacity: 1; transform: translateY(-50%) rotate(-15deg); }
  94%  { opacity: 0; transform: translateY(-50%) rotate(-15deg) scale(0.8); }
  100% { left: 92%; opacity: 0; }
}
@keyframes xm-pencil-trail {
  to { background-position: -16px 0; }
}
@keyframes xm-char-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes xm-write-text {
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); opacity: 1; }
  70%  { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
  85%  { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes xm-pencil-write {
  0%   { left: 8px; opacity: 0; transform: translateY(-50%) rotate(-20deg); }
  5%   { opacity: 1; }
  75%  { left: calc(100% - 32px); opacity: 1; transform: translateY(-50%) rotate(-20deg); }
  85%  { opacity: 0; transform: translateY(-50%) rotate(-20deg) scale(0.8); }
  100% { left: calc(100% - 32px); opacity: 0; }
}

/* ===================== 全局盒模型 ===================== */
details, details * { box-sizing: border-box !important; }

/* ===================== 状态栏 · 卡片 ===================== */
details {
  position: relative !important;
  max-width: 100% !important;
  margin: 14px 0 !important;
  padding: 0 !important;
  overflow: visible !important;                 /* 关键：不裁切内容 */
  border: 1px solid #E8DFD0 !important;
  border-top: 2px solid #4A90D9 !important;     /* 顶条用边框实现 · 天蓝 */
  border-radius: 10px !important;
  background: #FFFBF5 !important;                /* 奶白底 */
  box-shadow: 0 1px 2px #F0E8DA !important;     /* 极淡暖灰阴影 */
  color: #2C3E50 !important;                     /* 深灰蓝墨色 */
  font-family: "KaiTi", "STKaiti", "楷体", "华文楷体", "Noto Serif SC", serif !important;
  overflow-wrap: break-word !important;
  /* 笔记本横线纹理（极低对比） */
  background-image: repeating-linear-gradient(
    180deg,
    #FFFBF5 0px,
    #FFFBF5 31px,
    #F8F0E0 31px,
    #F8F0E0 32px
  ) !important;
}
details::before { content: none !important; display: none !important; }
details::after  { content: none !important; display: none !important; }

/* ===== 标题栏 ===== */
details > summary {
  position: relative !important;
  padding: 10px 14px 10px 30px !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
  overflow: hidden !important;                  /* 只裁标题自身，保住圆角 */
  border-radius: 8px 8px 0 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  color: #2C3E50 !important;
  background: #FFF8EE !important;                /* 奶黄面 */
  border-bottom: 1px solid #F0E8DA !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
details > summary:hover { background: #FFF3E0 !important; color: #1A2A3A !important; }
details > summary::-webkit-details-marker { display: none !important; }
details > summary::marker { content: "" !important; }

/* 折叠指示 · 极简三角（天蓝） */
details > summary::before {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  margin-top: -4px !important;
  border-right: 1.6px solid #4A90D9 !important;
  border-bottom: 1.6px solid #4A90D9 !important;
  transform: rotate(-45deg) !important;
  transition: transform 0.22s ease !important;
}
details[open] > summary::before {
  transform: rotate(45deg) !important;
  margin-top: -5px !important;
}

/* ===== 卡片内容 ===== */
details > *:not(summary):not(table) {
  padding: 0 14px !important;
  margin: 7px 0 !important;
  line-height: 1.75 !important;
  color: #5A6B7D !important;
}
details > p { font-size: 14px !important; }
details[open] { padding-bottom: 10px !important; }
details strong, details b { color: #2C3E50 !important; font-weight: 600 !important; }
details em, details i { color: #4A90D9 !important; font-style: normal !important; }
details code {
  background: #FDF8F0 !important;
  color: #2E6BA8 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 12.5px !important;
}
details blockquote {
  margin: 9px 14px !important;
  padding: 8px 14px !important;
  border: none !important;
  border-left: 3px solid #A8D0F0 !important;    /* 浅蓝引用线 */
  border-radius: 0 8px 8px 0 !important;
  background: #FFF8EE !important;
  color: #4A5A6D !important;
}
details hr {
  border: none !important;
  height: 1px !important;
  margin: 12px 14px !important;
  background: #E8DFD0 !important;
  /* 虚线笔记本撕页感 */
  background-image: linear-gradient(90deg, #E8DFD0 50%, transparent 50%) !important;
  background-size: 6px 1px !important;
}
details ul, details ol { padding-left: 28px !important; margin: 6px 0 !important; }
details li { margin: 2px 0 !important; color: #5A6B7D !important; line-height: 1.7 !important; }
details ul li::marker { color: #A8D0F0 !important; }
details ol li::marker { color: #4A90D9 !important; font-weight: 600 !important; }

/* ===================== 表格 · 自身横向滚动 ===================== */
details table,
.markdown-body table {
  display: block !important;                    /* 变成可滚动块 */
  width: max-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 8px !important;
  background: #FFFBF5 !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
details table { max-width: calc(100% - 28px) !important; margin: 12px 14px !important; }
.markdown-body table { margin: 12px 0 !important; }

/* 单元格 · 禁止逐字换行 */
details th, details td,
.markdown-body th, .markdown-body td {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  max-width: none !important;
  vertical-align: middle !important;
  text-align: left !important;
}
details th, .markdown-body th {
  padding: 7px 12px !important;
  background: #FDF8F0 !important;
  color: #55617a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #E8DFD0 !important;
}
details td, .markdown-body td {
  padding: 7px 12px !important;
  color: #5A6B7D !important;
  line-height: 1.6 !important;
  border-bottom: 1px solid #F0E8DA !important;
}
details td:first-child, .markdown-body td:first-child {
  color: #2C3E50 !important;
  font-weight: 600 !important;
}
details tbody tr { transition: background 0.18s ease !important; }
details tbody tr:nth-child(even) { background: #FFF8EE !important; }
details tbody tr:last-child td { border-bottom: none !important; }
details tbody tr:hover { background: #EBF5FF !important; }
details tbody tr:hover td { color: #2C3E50 !important; }

/* 表格滚动条 · 细窄（暖灰） */
details table::-webkit-scrollbar,
.markdown-body table::-webkit-scrollbar { height: 6px !important; }
details table::-webkit-scrollbar-track,
.markdown-body table::-webkit-scrollbar-track { background: #FDF8F0 !important; }
details table::-webkit-scrollbar-thumb,
.markdown-body table::-webkit-scrollbar-thumb {
  background: #D4C8B5 !important;
  border-radius: 999px !important;
}

/* ===================== 嵌套卡片 ===================== */
details details {
  overflow: visible !important;
  margin: 10px 14px !important;
  border: 1px solid #F0E8DA !important;
  border-top: 2px solid #A8D0F0 !important;        /* 浅蓝顶条 */
  border-radius: 8px !important;
  background: #FFF8EE !important;
  box-shadow: none !important;
  background-image: none !important;                  /* 嵌套卡片去掉横线纹理 */
}
details details > summary {
  padding: 8px 12px 8px 28px !important;
  font-size: 13.5px !important;
  color: #2F3B52 !important;
  background: #FDF8F0 !important;
  border-radius: 6px 6px 0 0 !important;
}
details details > summary::before { left: 11px !important; }
details details table { max-width: calc(100% - 24px) !important; margin: 10px 12px !important; }

/* ==================== 移动端适配 ==================== */
@media (max-width: 640px) {
  details {
    overflow: visible !important;
    overflow-x: visible !important;
    margin: 12px 0 !important;
  }
  details > summary {
    padding: 9px 12px 9px 26px !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
  }
  details > summary::before { left: 10px !important; }
  details table {
    min-width: 0 !important;
    width: max-content !important;
    max-width: calc(100% - 20px) !important;
    margin: 10px 10px !important;
    font-size: 12.5px !important;
  }
  details th, details td { padding: 6px 10px !important; }
  details > *:not(summary):not(table) { padding: 0 10px !important; }
  details blockquote { margin: 8px 10px !important; }
  details hr { margin: 10px 10px !important; }
  details ul, details ol { padding-left: 24px !important; }
  details details { margin: 8px 10px !important; }
  details details > summary { padding-left: 26px !important; font-size: 13px !important; }
  details details table { max-width: calc(100% - 16px) !important; margin: 8px 8px !important; }
}

/* ===================== 顶部栏 ===================== */
.sticky.w-full.top-0.flex.items-center {
  background: #FFFBF5 !important;
  border-bottom: 1px solid #E8DFD0 !important;
  box-shadow: 0 1px 0 #F0E8DA !important;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
.sticky.w-full.top-0.flex.items-center::after {
  content: none !important;
  display: none !important;
}
/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
  padding: 2px 10px !important;
  background: #FFF8EE !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
  border-color: #A8D0F0 !important;
  background: #EBF5FF !important;
}
#ai-model-selector .truncate.text-\[13px\] {
  color: #2F3B52 !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}
#ai-model-selector .shrink-0.flex.items-center svg { color: #4A90D9 !important; stroke-width: 2 !important; }
/* 历史记录 */
.sticky.w-full.top-0 svg.lucide-clock-8 {
  color: #6b7688 !important;
  stroke-width: 2 !important;
  transition: color 0.2s ease !important;
}
.sticky.w-full.top-0 svg.lucide-clock-8:hover { color: #4A90D9 !important; }
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background: #4A90D9 !important;
  border: none !important;
  box-shadow: 0 0 0 2px #FFFBF5 !important;
}
/* 音乐按钮 */
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #6b7688 !important;
  stroke-width: 2 !important;
  transition: color 0.2s ease !important;
}
.sticky.w-full.top-0 button.MuiIconButton-root:hover svg.lucide-music-2 { color: #4A90D9 !important; }
/* 设置按钮 */
#header-setting-button {
  background: #FFF8EE !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
#header-setting-button:hover { border-color: #A8D0F0 !important; background: #EBF5FF !important; }
#header-setting-button svg {
  color: #55617a !important;
  stroke-width: 2 !important;
  transition: color 0.2s ease !important;
}
#header-setting-button:hover svg { color: #4A90D9 !important; }

/* ===================== 开场白选择器 ===================== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background: #FFFBF5 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  border-color: #A8D0F0 !important;
  background: #FDF8F0 !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] { color: #4A90D9 !important; }
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #9AA8B5 !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover svg[data-icon="ChevronDown"] {
  transform: translateY(1px) !important;
  color: #4A90D9 !important;
}

/* ===================== 按钮栏 ===================== */
#ai-mod-button2 button.MuiButton-root {
  color: #2F3B52 !important;
  background: #FFFBF5 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
  color: #2E6BA8 !important;
  background: #EBF5FF !important;
  border-color: #A8D0F0 !important;
}
#ai-mod-button2 button.MuiButton-root:active { background: #D4E8F8 !important; }
#ai-mod-button2 button.MuiButton-root svg { color: #4A90D9 !important; stroke-width: 2 !important; }

/* ===================== 底部输入区 ===================== */
.bg-gradient-to-t {
  background: #FFFBF5 !important;
  border-top: 1px solid #E8DFD0 !important;
  box-shadow: none !important;
}
#ai-chat-bottom-input {
  border: 1px solid #E2D9C8 !important;
  border-radius: 12px !important;
  background: #FDF8F0 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
#ai-chat-bottom-input:focus-within {
  border-color: #A8D0F0 !important;
  background: #FFFBF5 !important;
}
#ai-chat-input {
  color: #2C3E50 !important;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.2px !important;
}
#ai-chat-input::placeholder {
  color: #A3ACB9 !important;
  font-style: normal !important;
  letter-spacing: 0.4px !important;
}
#ai-chat-input::selection { background: #D4E8F8 !important; color: #1A2A3A !important; }

/* ===================== 分页 ===================== */
.MuiPaginationItem-root {
  color: #55617a !important;
  background: #FFFBF5 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.MuiPaginationItem-root:hover {
  color: #2E6BA8 !important;
  border-color: #A8D0F0 !important;
  background: #EBF5FF !important;
}
.MuiPaginationItem-root.Mui-selected {
  color: #ffffff !important;
  background: #4A90D9 !important;
  border-color: #4A90D9 !important;
  box-shadow: none !important;
}
.MuiPaginationItem-root.Mui-disabled { color: #C2C9D4 !important; }
.MuiPaginationItem-icon { color: #9AA8B5 !important; }
.MuiStack-root.css-1uwir8f .MuiBox-root { color: #55617a !important; }
.MuiInputBase-input { color: #2C3E50 !important; }

/* ===================== 评论区 ===================== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: #FFFBF5 !important;
  border-top: 1px solid #E8DFD0 !important;
}
div.text-lg.font-bold {
  color: #2C3E50 !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
}
p.MuiTypography-body1.text-grey-600 { color: #55617a !important; }
span.MuiRating-iconEmpty svg { color: #E2D9C8 !important; }
span.MuiRating-iconFilled svg { color: #F5A623 !important; }     /* 暖橙星级 */
span.text-orange-500 { color: #4A90D9 !important; font-weight: 600 !important; }
div.flex.flex-col.border-gray-200 {
  background: #FFFBF5 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
textarea.rc-textarea {
  color: #2C3E50 !important;
  background: #FFFBF5 !important;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
div.bg-gray-100.text-gray-500 {
  background: #FDF8F0 !important;
  color: #55617a !important;
  border-radius: 999px !important;
}
div.cursor-pointer.group.flex.items-center.justify-center {
  background: #4A90D9 !important;
  border: none !important;
  border-radius: 8px !important;
  transition: background 0.2s ease !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover { background: #2E6BA8 !important; }
div[data-state="closed"] svg[data-icon="Send03"] { color: #ffffff !important; }
div.style_divider__mW0YX {
  border: none !important;
  height: 1px !important;
  background: #E8DFD0 !important;
}
button.MuiButton-containedPrimary {
  color: #ffffff !important;
  background: #4A90D9 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
}
button.MuiButton-containedPrimary:hover { background: #2E6BA8 !important; }
button.MuiButton-outlinedPrimary {
  color: #2F3B52 !important;
  background: #FFFBF5 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
button.MuiButton-outlinedPrimary:hover {
  color: #2E6BA8 !important;
  border-color: #A8D0F0 !important;
  background: #EBF5FF !important;
}
div.group.ml-0 { transition: none !important; }
div.group img.rounded-full {
  border: 1px solid #E8DFD0 !important;
  box-shadow: none !important;
}
div.text-sm.text-grey-600 span.font-bold { color: #2C3E50 !important; font-weight: 600 !important; }
span.text-\[10px\] {
  padding: 1px 8px !important;
  border-radius: 999px !important;
  color: #4A90D9 !important;
  background: #EBF5FF !important;
  border: 1px solid #C8DDF0 !important;
}
div.break-all { color: #5A6B7D !important; }
div.text-xs.text-grey-600 { color: #9AA8B5 !important; }
button.text-gray-400 svg {
  color: #A3ACB9 !important;
  transition: color 0.2s ease !important;
}
button.text-gray-400:hover svg { color: #4A90D9 !important; }
span.cursor-pointer { color: #4A90D9 !important; font-weight: 500 !important; }
div.ml-8.border-l { border-left: 1px solid #E8DFD0 !important; }

/* ===================== 聊天气泡 ===================== */
.bg-gray-100\/90.relative.inline-block {
  border: 1px solid #EAE2D3 !important;
  border-radius: 12px !important;
  background: #FFFBF5 !important;
  box-shadow: 0 1px 2px #F0E8DA !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.bg-gray-100\/90.relative.inline-block:hover {
  border-color: #DCD2BE !important;
  box-shadow: 0 2px 6px -2px #E8DFD0 !important;
}
/* 用户侧气泡（天蓝左边框） */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  background: #F5F9FF !important;
  border: 1px solid #D4E4F5 !important;
  border-left: 3px solid #4A90D9 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
/* ===== 气泡内文本 ===== */
.markdown-body {
  color: #5A6B7D !important;
  font-family: "KaiTi", "STKaiti", "楷体", "华文楷体", "Noto Serif SC", serif !important;
  line-height: 1.8 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.2px !important;
}
.markdown-body p { margin: 8px 0 !important; }
.markdown-body strong, .markdown-body b { color: #2C3E50 !important; font-weight: 600 !important; }
.markdown-body em, .markdown-body i { color: #4A90D9 !important; font-style: normal !important; }
.markdown-body a {
  color: #4A90D9 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #A8D0F0 !important;
}
.markdown-body blockquote {
  border: none !important;
  border-left: 3px solid #A8D0F0 !important;
  background: #FFF8EE !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 7px 14px !important;
  margin: 10px 0 !important;
  color: #4A5A6D !important;
}
.markdown-body code {
  background: #FDF8F0 !important;
  color: #2E6BA8 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
}

/* ===================== 代码块 ===================== */
.markdown-body pre {
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #FFFBF5 !important;
}
.markdown-body pre > div {
  border: 1px solid #E8DFD0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #FFF8EE !important;
  box-shadow: none !important;
}
.markdown-body pre > div > div.flex.justify-between.h-8,
.markdown-body pre > div > div.border-b {
  background: #FDF8F0 !important;
  border-color: #E8DFD0 !important;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\],
.markdown-body pre > div > div.flex.justify-between > div:first-child {
  color: #6b7688 !important;
  letter-spacing: 0.8px !important;
  font-weight: 500 !important;
}
/* 复制图标配色联动 */
.markdown-body pre svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"] > svg {
  color: #98a2b0 !important;
}
.markdown-body pre .group:hover svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"]:hover > svg {
  color: #4A90D9 !important;
}
/* 覆盖内联样式 */
.markdown-body pre > div > div[node] {
  background: #FFF8EE !important;
  color: #5A6B7D !important;
  padding: 12px 14px !important;
}
.markdown-body pre code[class^="language-"] {
  color: #5A6B7D !important;
  font-size: 12.8px !important;
  line-height: 1.7 !important;
}
.markdown-body pre > code[node] {
  display: block !important;
  padding: 12px 14px !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 10px !important;
  background: #FFF8EE !important;
  color: #5A6B7D !important;
  font-size: 12.8px !important;
  line-height: 1.7 !important;
}

/* ===================== 底部附加元素 ===================== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
  color: #6b7688 !important;
  border-radius: 8px !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
  color: #2E6BA8 !important;
  background: #EBF5FF !important;
}
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 { color: #9AA8B5 !important; letter-spacing: 0.3px !important; }
.text-orange-500 { color: #4A90D9 !important; }

/* ===================== 加载动画 · 铅笔逐字写字 ===================== */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text { display: none !important; }
.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 100% !important;
  min-width: 260px !important;
  max-width: 320px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #FFFBF5 !important;
  border: 1px solid #E8DFD0 !important;
  box-shadow: 0 1px 2px #F0E8DA !important;
}
/* 笔记本横线背景 */
.flex.items-center.justify-center.w-6.h-5::after {
  content: "正在狂补作业中！！！" !important;
  position: absolute !important;
  display: block !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: "KaiTi", "STKaiti", "楷体", "华文楷体", serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #2C3E50 !important;
  white-space: nowrap !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  /* 用 clip-path 逐字裁剪显示，比 width+overflow 更稳定 */
  clip-path: inset(0 100% 0 0) !important;
  -webkit-clip-path: inset(0 100% 0 0) !important;
  animation: xm-write-text 2.8s steps(10, end) infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
@keyframes xm-write-text {
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); opacity: 1; }
  70%  { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
  85%  { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 0; }
}
/* 铅笔（在文字上方移动，笔尖对准正在写的位置） */
.flex.items-center.justify-center.w-6.h-5::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 8px !important;
  z-index: 2 !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: -12px !important;
  pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M36 6L42 12L18 36L6 42L12 30L36 6Z' fill='%23F5A623' stroke='%23E09510' stroke-width='1.5'/%3E%3Cpath d='M36 6L42 12' stroke='%23E09510' stroke-width='1.5'/%3E%3Cpath d='M6 42L12 30' stroke='%23E09510' stroke-width='1.5'/%3E%3Cpath d='M30 12L36 18' stroke='%23fff' stroke-width='2' opacity='0.5'/%3E%3Ccircle cx='9' cy='39' r='2' fill='%232C3E50'/%3E%3C/svg%3E") no-repeat center / contain !important;
  animation: xm-pencil-write 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
@keyframes xm-pencil-write {
  0%   { left: 8px; opacity: 0; transform: translateY(-50%) rotate(-20deg); }
  5%   { opacity: 1; }
  75%  { left: calc(100% - 32px); opacity: 1; transform: translateY(-50%) rotate(-20deg); }
  85%  { opacity: 0; transform: translateY(-50%) rotate(-20deg) scale(0.8); }
  100% { left: calc(100% - 32px); opacity: 0; }
}
@media (max-width: 480px) {
  .flex.items-center.justify-center.w-6.h-5 {
    min-width: 220px !important;
    max-width: 260px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
  .flex.items-center.justify-center.w-6.h-5::after {
    font-size: 16px !important;
    left: 12px !important;
    clip-path: inset(0 100% 0 0) !important;
    -webkit-clip-path: inset(0 100% 0 0) !important;
  }
  .flex.items-center.justify-center.w-6.h-5::before {
    width: 20px !important;
    height: 20px !important;
    margin-top: -10px !important;
  }
}

/* ===================== 角色对话 ===================== */
p.role-danlan,
p.role-danlan-thought,
p.role-lan,
p.role-zon,
p.role-qianhon,
p.role-hui {
  position: relative !important;
  margin: 12px 0 !important;
  padding: 11px 14px !important;
  border: 1px solid #EAE2D3 !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
  border-radius: 10px !important;
  background: #FFFBF5 !important;
  font-family: "KaiTi", "STKaiti", "楷体", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.2px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
/* 角色标签 · 行内胶囊，不做绝对定位 */
p.role-danlan::before,
p.role-danlan-thought::before,
p.role-lan::before,
p.role-zon::before,
p.role-qianhon::before,
p.role-hui::before {
  display: block !important;
  width: fit-content !important;
  margin: 0 0 6px !important;
  padding: 1px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 1px !important;
  line-height: 1.6 !important;
  border-radius: 999px !important;
  background: #FFFBF5 !important;
}
p.role-danlan::after,
p.role-danlan-thought::after,
p.role-lan::after,
p.role-zon::after,
p.role-qianhon::after,
p.role-hui::after { content: none !important; display: none !important; }
/* 玩家 · 天蓝 */
p.role-danlan { border-left-color: #4A90D9 !important; color: #333f54 !important; }
p.role-danlan::before {
  content: "玩家" !important;
  color: #2E6BA8 !important;
  background: #EBF5FF !important;
  border: 1px solid #C8DDF0 !important;
}
p.role-danlan:hover { border-color: #C8DDF0 !important; background: #FDF8F0 !important; }
/* 玩家心声 · 靛 */
p.role-danlan-thought {
  border-left-color: #6366f1 !important;
  color: #3d4258 !important;
  background: #FBFBFF !important;
}
p.role-danlan-thought::before {
  content: "玩家心声" !important;
  color: #4f46e5 !important;
  background: #F1F2FF !important;
  border: 1px solid #E0E2FB !important;
}
p.role-danlan-thought:hover { border-color: #E0E2FB !important; }
/* 心声 · 青（薄荷） */
p.role-lan {
  border-left-color: #7BC8A4 !important;
  color: #35474a !important;
  background: #FBFEFD !important;
}
p.role-lan::before {
  content: "心声" !important;
  color: #5BA888 !important;
  background: #ECF8F6 !important;
  border: 1px solid #D5ECE8 !important;
}
p.role-lan:hover { border-color: #D5ECE8 !important; }
/* 男 · 石板灰 */
p.role-zon { border-left-color: #475569 !important; color: #3a4356 !important; }
p.role-zon::before {
  content: "男" !important;
  color: #445064 !important;
  background: #FDF8F0 !important;
  border: 1px solid #E8DFD0 !important;
}
p.role-zon:hover { border-color: #E8DFD0 !important; background: #FAF7F0 !important; }
/* 女 · 樱粉 */
p.role-qianhon { border-left-color: #F0A8B8 !important; color: #4a3742 !important; }
p.role-qianhon::before {
  content: "女" !important;
  color: #D88898 !important;
  background: #FDF2F6 !important;
  border: 1px solid #F7DDE7 !important;
}
p.role-qianhon:hover { border-color: #F7DDE7 !important; background: #FFFBFC !important; }
/* 职业角色 · 暖橙 */
p.role-hui { border-left-color: #F5A623 !important; color: #4a4436 !important; }
p.role-hui::before {
  content: "职业角色" !important;
  color: #D89010 !important;
  background: #FDF7EA !important;
  border: 1px solid #F2E6C8 !important;
}
p.role-hui:hover { border-color: #F2E6C8 !important; background: #FFFDF8 !important; }
/* 角色框内元素 */
p.role-danlan strong, p.role-danlan-thought strong,
p.role-lan strong, p.role-zon strong,
p.role-qianhon strong, p.role-hui strong {
  color: #2C3E50 !important;
  font-weight: 600 !important;
}
p.role-danlan code, p.role-danlan-thought code,
p.role-lan code, p.role-zon code,
p.role-qianhon code, p.role-hui code {
  background: #FDF8F0 !important;
  color: #2E6BA8 !important;
  border: 1px solid #E8DFD0 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
}
@media (max-width: 640px) {
  .markdown-body { font-size: 14px !important; line-height: 1.78 !important; }
  p.role-danlan, p.role-danlan-thought, p.role-lan,
  p.role-zon, p.role-qianhon, p.role-hui {
    padding: 10px 12px !important;
    margin: 10px 0 !important;
    font-size: 14px !important;
  }
}

/* ===================== 低动效偏好 ===================== */
@media (prefers-reduced-motion: reduce) {
  .flex.items-center.justify-center.w-6.h-5::before {
    animation: none !important;
    left: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
  }
  .flex.items-center.justify-center.w-6.h-5::after { animation: none !important; clip-path: inset(0 0 0 0) !important; -webkit-clip-path: inset(0 0 0 0) !important; }
  details > summary::before,
  details[open] > summary::before { transition: none !important; }
  details tbody tr { transition: none !important; }
}