@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');

/* ════════════════════════════════════════════════
   鸣潮 · 国风书卷 完整版
   包含：AI/用户气泡、折叠面板、状态栏/社交/记忆区分割线、
   系统与建议区、输入框、按钮、Markdown、滚动条、手机适配、
   行动建议三色美化
   ════════════════════════════════════════════════ */

/* 基础重置 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
  display: none !important;
}
* {
  box-sizing: border-box !important;
}
body, .markdown-body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 全局背景 - 宣纸质感 */
body, #root, .h-screen {
  background-color: hsl(36, 24%, 94%) !important;
  color: hsl(30, 15%, 20%) !important;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, hsla(30,20%,85%,0.08) 2px 4px),
    radial-gradient(ellipse at 50% 30%, hsla(36,30%,90%,0.5) 0%, transparent 70%) !important;
  background-attachment: fixed !important;
}

/* ════════════════════════════════════════════════
   ✅ 核心修复1：聊天气泡 - AI+用户 全美化
   ════════════════════════════════════════════════ */
/* 用户消息气泡 - 朱砂笺 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  background: hsla(36,30%,90%,0.9) !important;
  color: hsl(30,20%,16%) !important;
  border: 1px solid hsl(35,22%,68%) !important;
  border-left: 3px solid hsl(354,42%,48%) !important;
  border-radius: 6px !important;
  font-family: 'Noto Serif SC', KaiTi, serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  box-shadow: 0 2px 8px hsla(30,20%,50%,0.15) !important;
  padding: 12px 14px !important;
}

/* AI回复气泡 - 宣纸卷 */
.chat-answer-container .bg-gray-100\/90.relative.inline-block {
  background: hsla(36,30%,96%,0.95) !important;
  color: hsl(30,18%,16%) !important;
  border: 1px solid hsl(35,22%,72%) !important;
  border-right: 3px solid hsl(160,22%,45%) !important;
  border-radius: 6px !important;
  font-family: 'Noto Serif SC', SimSun, serif !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  box-shadow: 0 3px 12px hsla(30,20%,40%,0.12) !important;
  padding: 14px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ════════════════════════════════════════════════
   ✅ 核心修复2：折叠面板 全局美化
   ════════════════════════════════════════════════ */
details {
  width: 100% !important;
  margin: 10px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid hsl(36,22%,65%) !important;
  background: hsl(36,30%,95%) !important;
  box-shadow: 0 2px 8px hsla(30,20%,50%,0.1) !important;
  display: block !important;
}

details > summary {
  list-style: none !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  font-family: 'Noto Serif SC', serif !important;
  font-size: 15px !important;
  cursor: pointer !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: hsl(36,28%,90%) !important;
  color: hsl(30,22%,20%) !important;
  border-bottom: 1px solid hsl(36,22%,65%) !important;
  position: relative !important;
}

details > summary::-webkit-details-marker {
  display: none !important;
}
details > summary::marker {
  content: none !important;
}

details > summary::after {
  content: '展' !important;
  font-family: 'KaiTi', 'STKaiti', 'Noto Serif SC', serif !important;
  font-size: 12px !important;
  color: hsl(30,18%,42%) !important;
  background: hsla(36,25%,88%,0.8) !important;
  border: 1px solid hsl(35,20%,72%) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  flex-shrink: 0 !important;
  margin-left: 10px !important;
}

details[open] > summary::after {
  content: '收' !important;
  color: hsl(354,42%,36%) !important;
  background: hsla(354,30%,88%,0.6) !important;
  border-color: hsl(354,30%,72%) !important;
}

details > *:not(summary) {
  padding: 12px 16px !important;
  font-family: 'Noto Serif SC', KaiTi, serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: hsl(30,18%,20%) !important;
  background: hsl(36,30%,95%) !important;
  margin: 0 !important;
}

/* 专属侧边色条 */
details:has(summary:contains("状态栏")) {
  border-left: 4px solid hsl(354,42%,48%) !important;
}
details:has(summary:contains("角色与社交区")) {
  border-left: 4px solid hsl(160,30%,50%) !important;
}
details:has(summary:contains("记忆区")) {
  border-left: 4px solid hsl(280,30%,50%) !important;
}

/* ─────────────────────────────────────────────
   ✅ 新增：三大面板内部虚线下划线（国风书卷）
   ───────────────────────────────────────────── */
/* 状态栏条目分割线 */
.status-content p,
.status-content .status-item {
  margin: 0.4em 0 !important;
  padding: 0.4em 0 !important;
  border-bottom: 1px dashed hsl(35,22%,68%) !important;
}
.status-content p:last-child,
.status-content .status-item:last-child {
  border-bottom: none !important;
}

/* 社交区（角色卡片内的详情条目）分割线 */
.npc-detail p {
  margin: 0.4em 0 !important;
  padding: 0.4em 0 !important;
  border-bottom: 1px dashed hsl(35,22%,68%) !important;
}
.npc-detail p:last-child {
  border-bottom: none !important;
}

/* 记忆区条目分割线 */
.memory-content p,
.memory-content li {
  margin: 0.4em 0 !important;
  padding: 0.4em 0 !important;
  border-bottom: 1px dashed hsl(35,22%,68%) !important;
}
.memory-content p:last-child,
.memory-content li:last-child {
  border-bottom: none !important;
}

/* ════════════════════════════════════════════════
   ✅ 系统与建议区、积分信息 美化
   ════════════════════════════════════════════════ */
/* 系统与建议区 */
*:contains("--- 系统与建议区 ---") {
  background: hsla(36,28%,92%,0.9) !important;
  border: 1px solid hsl(36,22%,65%) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  margin: 10px 0 !important;
  font-family: 'Noto Serif SC', serif !important;
}

/* 积分消耗信息 */
*:contains("输入消耗"), *:contains("输出消耗"), *:contains("本轮对话触发") {
  font-family: 'Noto Serif SC', serif !important;
  font-size: 13px !important;
  opacity: 0.8 !important;
  padding: 4px 0 !important;
}

/* ════════════════════════════════════════════════
   顶部导航栏美化
   ════════════════════════════════════════════════ */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(90deg, hsl(30,20%,18%), hsl(24,18%,14%)) !important;
  border-bottom: 1px solid hsl(36,25%,38%) !important;
  box-shadow: 0 2px 16px hsla(30,20%,10%,0.45) !important;
}
#ai-model-selector .group.flex.items-center {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
}
#ai-model-selector .group.flex.items-center:hover {
  background: hsla(30,20%,25%,0.6) !important;
  border-color: hsl(36,30%,50%) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
  color: hsl(38,40%,72%) !important;
  font-weight: 600 !important;
}
.sticky.w-full.top-0 svg {
  color: hsl(38,40%,70%) !important;
}
.sticky.w-full.top-0 svg:hover {
  color: hsl(160,22%,55%) !important;
}

/* ════════════════════════════════════════════════
   底部输入框美化
   ════════════════════════════════════════════════ */
.bg-gradient-to-t {
  background: transparent !important;
}
#ai-chat-bottom-input {
  background: linear-gradient(90deg, hsl(30,20%,18%), hsl(24,18%,14%)) !important;
  border-top: 1px solid hsl(36,25%,38%) !important;
}
#ai-chat-input {
  background: hsl(36,24%,90%) !important;
  color: hsl(30,20%,16%) !important;
  caret-color: hsl(354,40%,42%) !important;
  border: 1px solid hsl(160,18%,48%) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-family: 'Noto Serif SC', serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
#ai-chat-input:focus {
  border-color: hsl(36,35%,50%) !important;
  box-shadow: 0 0 0 2px hsla(36,35%,50%,0.2) !important;
  outline: none !important;
}
#ai-chat-input::placeholder {
  color: hsl(30,15%,55%) !important;
}

/* ════════════════════════════════════════════════
   底部功能按钮美化
   ════════════════════════════════════════════════ */
#ai-mod-button2 button.MuiButton-root,
button.MuiButtonBase-root {
  color: hsl(160,20%,38%) !important;
  border: 1px solid hsl(160,16%,48%) !important;
  background: transparent !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  transition: all 0.15s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover,
button.MuiButtonBase-root:hover {
  background: hsla(36,28%,78%,0.5) !important;
  border-color: hsl(354,42%,48%) !important;
  color: hsl(354,42%,36%) !important;
}

/* ════════════════════════════════════════════════
   Markdown正文美化
   ════════════════════════════════════════════════ */
.markdown-body {
  color: hsl(30,18%,16%) !important;
  background: transparent !important;
  font-family: 'Noto Serif SC', SimSun, serif !important;
  font-size: 1em !important;
  line-height: 1.85 !important;
}
.markdown-body p { color: inherit !important; }
.markdown-body strong { color: hsl(36,40%,36%) !important; }
.markdown-body em { color: hsl(160,24%,38%) !important; }
.markdown-body code {
  background: hsla(36,24%,84%,0.7) !important;
  color: hsl(354,35%,36%) !important;
  border: 1px solid hsl(35,20%,68%) !important;
  border-radius: 3px !important;
}
.markdown-body pre {
  background: hsla(30,18%,18%,0.85) !important;
  border: 1px solid hsl(30,18%,32%) !important;
  color: hsl(38,30%,84%) !important;
}
.markdown-body blockquote {
  border-left: 3px solid hsl(354,42%,48%) !important;
  background: hsla(36,24%,88%,0.7) !important;
}

/* ════════════════════════════════════════════════
   滚动条美化
   ════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: hsl(36,22%,88%) !important; }
::-webkit-scrollbar-thumb { background: hsl(36,20%,65%) !important; border-radius: 3px !important; }

/* ════════════════════════════════════════════════
   手机端完美适配
   ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  details > summary {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  details > *:not(summary) {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .bg-gray-100\/90.relative.inline-block,
  .chat-answer-container .bg-gray-100\/90.relative.inline-block {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  #ai-chat-input {
    font-size: 14px !important;
  }
  .markdown-body {
    font-size: 0.95em !important;
    line-height: 1.8 !important;
  }
}

/* =========================================
   鸣潮 · 国风书卷 行动建议三色美化（新增）
   ========================================= */

/* 行动建议标题：居中 + 两侧虚线 */
.action-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  color: hsl(354,42%,48%) !important;          /* 朱砂色，呼应主色调 */
  margin: 1.2em 0 0.6em !important;
  font-size: 0.95em !important;
  letter-spacing: 1px !important;
}
.action-title::before,
.action-title::after {
  content: "" !important;
  flex: 1 !important;
  border-bottom: 1px dashed hsl(36,22%,65%) !important; /* 暖棕虚线 */
  margin: 0 15px !important;
}

/* 行动建议代码块：卡片化、三色循环、hover 效果 */
pre,
.markdown-body pre,
[class*="message"] pre {
  padding: 0.6em 1em !important;
  border-radius: 6px !important;
  margin: 8px 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px hsla(30,20%,50%,0.08) !important;
  display: block !important;
  width: 100% !important;
  white-space: pre-wrap !important;
  font-family: 'Noto Serif SC', serif !important;
  color: hsl(30,18%,20%) !important;
  background: hsl(36,30%,95%) !important;
  border: 1px solid hsl(36,22%,65%) !important;
}
pre code,
code {
  font-family: inherit !important;
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}
pre:hover,
.markdown-body pre:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px hsla(30,20%,40%,0.12) !important;
}

/* 三色循环染色（与极品家丁逻辑一致，颜色适配宣纸风） */
/* 第1、4、7… 为朱砂淡红（搞事/冲突） */
pre,
.markdown-body pre:nth-of-type(3n+1) {
  border-color: hsl(354,42%,72%) !important;
  background: hsla(354,42%,48%,0.06) !important;
}
/* 第2、5、8… 为竹青淡绿（主线/理性） */
pre + pre,
.markdown-body pre:nth-of-type(3n+2) {
  border-color: hsl(160,22%,60%) !important;
  background: hsla(160,22%,45%,0.06) !important;
}
/* 第3、6、9… 为宣纸暖金（情感/拉扯） */
pre + pre + pre,
.markdown-body pre:nth-of-type(3n) {
  border-color: hsl(36,30%,65%) !important;
  background: hsla(36,30%,85%,0.3) !important;
}
/* 后续循环保持相邻兄弟选择器 */
pre + pre + pre + pre {
  border-color: hsl(354,42%,72%) !important;
  background: hsla(354,42%,48%,0.06) !important;
}
pre + pre + pre + pre + pre {
  border-color: hsl(160,22%,60%) !important;
  background: hsla(160,22%,45%,0.06) !important;
}
pre + pre + pre + pre + pre + pre {
  border-color: hsl(36,30%,65%) !important;
  background: hsla(36,30%,85%,0.3) !important;
}

/* ============================================================
   夜间模式适配 (针对平台 next-themes 的 .dark 标记)
   修复：夜间白底白字问题，不改变日间任何代码
   ============================================================ */

/* 全局夜间底纹（墨蓝宣纸） */
.dark body, .dark #root, .dark .h-screen {
  background-color: hsl(36, 12%, 16%) !important;
  color: hsl(36, 20%, 80%) !important;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, hsla(36,20%,20%,0.2) 2px 4px),
    radial-gradient(ellipse at 50% 30%, hsla(36,12%,20%,0.5) 0%, transparent 70%) !important;
}

/* 用户消息气泡 - 夜间模式 */
.dark .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  background: hsla(36,10%,22%,0.9) !important;
  color: hsl(36,20%,80%) !important;
  border: 1px solid hsl(36,15%,40%) !important;
  border-left: 3px solid hsl(354,42%,60%) !important;
  box-shadow: 0 2px 8px hsla(0,0%,0%,0.3) !important;
}

/* AI回复气泡 - 夜间模式 */
.dark .chat-answer-container .bg-gray-100\/90.relative.inline-block {
  background: hsla(36,10%,28%,0.95) !important;
  color: hsl(36,20%,80%) !important;
  border: 1px solid hsl(36,15%,40%) !important;
  border-right: 3px solid hsl(160,22%,50%) !important;
  box-shadow: 0 3px 12px hsla(0,0%,0%,0.3) !important;
}

/* 折叠面板 - 夜间模式 */
.dark details {
  background: hsl(36,10%,18%) !important;
  border: 1px solid hsl(36,15%,35%) !important;
  box-shadow: 0 2px 8px hsla(0,0%,0%,0.4) !important;
}
.dark details > summary {
  background: hsl(36,10%,22%) !important;
  color: hsl(36,20%,75%) !important;
  border-bottom: 1px solid hsl(36,15%,35%) !important;
}
.dark details > summary::after {
  color: hsl(36,20%,75%) !important;
  background: hsla(36,10%,30%,0.8) !important;
  border: 1px solid hsl(36,15%,40%) !important;
}
.dark details[open] > summary::after {
  color: hsl(354,40%,60%) !important;
  background: hsla(354,30%,20%,0.6) !important;
  border-color: hsl(354,30%,40%) !important;
}
.dark details > *:not(summary) {
  background: hsl(36,10%,20%) !important;
  color: hsl(36,20%,80%) !important;
}

/* 三大面板内部虚线 - 夜间模式 */
.dark .status-content p,
.dark .status-content .status-item,
.dark .npc-detail p,
.dark .memory-content p,
.dark .memory-content li {
  border-bottom: 1px dashed hsl(36,15%,40%) !important;
}

/* 系统与建议区 - 夜间模式 */
.dark *:contains("--- 系统与建议区 ---") {
  background: hsla(36,10%,22%,0.9) !important;
  border: 1px solid hsl(36,15%,40%) !important;
}

/* 顶部导航 - 夜间模式 */
.dark .sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(90deg, hsl(30,20%,12%), hsl(24,18%,8%)) !important;
  border-bottom: 1px solid hsl(36,15%,30%) !important;
}
.dark #ai-model-selector .truncate.text-\[13px\] {
  color: hsl(38,40%,80%) !important;
}
.dark .sticky.w-full.top-0 svg {
  color: hsl(38,40%,80%) !important;
}

/* 输入框 - 夜间模式 */
.dark #ai-chat-input {
  background: hsl(36,10%,18%) !important;
  color: hsl(36,20%,80%) !important;
  border: 1px solid hsl(160,18%,40%) !important;
}
.dark #ai-chat-input::placeholder {
  color: hsl(36,15%,50%) !important;
}
.dark #ai-chat-bottom-input {
  background: linear-gradient(90deg, hsl(30,20%,12%), hsl(24,18%,8%)) !important;
  border-top: 1px solid hsl(36,15%,30%) !important;
}

/* 按钮 - 夜间模式 */
.dark #ai-mod-button2 button.MuiButton-root,
.dark button.MuiButtonBase-root {
  color: hsl(160,20%,70%) !important;
  border: 1px solid hsl(160,16%,40%) !important;
}
.dark #ai-mod-button2 button.MuiButton-root:hover,
.dark button.MuiButtonBase-root:hover {
  background: hsla(36,10%,30%,0.5) !important;
  border-color: hsl(354,42%,60%) !important;
  color: hsl(354,42%,70%) !important;
}

/* Markdown 正文 - 夜间模式 */
.dark .markdown-body {
  color: hsl(36,20%,80%) !important;
}
.dark .markdown-body strong {
  color: hsl(36,40%,70%) !important;
}
.dark .markdown-body em {
  color: hsl(160,24%,70%) !important;
}
.dark .markdown-body code {
  background: hsla(36,10%,22%,0.7) !important;
  color: hsl(354,35%,70%) !important;
  border: 1px solid hsl(36,15%,40%) !important;
}
.dark .markdown-body pre {
  background: hsla(30,18%,12%,0.85) !important;
  border: 1px solid hsl(30,18%,25%) !important;
  color: hsl(38,30%,80%) !important;
}
.dark .markdown-body blockquote {
  border-left: 3px solid hsl(354,42%,60%) !important;
  background: hsla(36,10%,22%,0.7) !important;
}

/* 滚动条 - 夜间模式 */
.dark ::-webkit-scrollbar-track {
  background: hsl(36,10%,18%) !important;
}
.dark ::-webkit-scrollbar-thumb {
  background: hsl(36,15%,40%) !important;
}

/* 行动建议标题与代码块 - 夜间模式 */
.dark .action-title {
  color: hsl(354,42%,60%) !important;
}
.dark .action-title::before,
.dark .action-title::after {
  border-bottom: 1px dashed hsl(36,15%,40%) !important;
}

.dark pre,
.dark .markdown-body pre,
.dark [class*="message"] pre {
  background: hsl(36,10%,20%) !important;
  border: 1px solid hsl(36,15%,40%) !important;
  color: hsl(36,20%,80%) !important;
  box-shadow: 0 2px 6px hsla(0,0%,0%,0.3) !important;
}
.dark pre:hover,
.dark .markdown-body pre:hover {
  box-shadow: 0 6px 16px hsla(0,0%,0%,0.5) !important;
}

/* 夜间 - 三色循环染色适配 */
.dark pre,
.dark .markdown-body pre:nth-of-type(3n+1) {
  border-color: hsl(354,42%,60%) !important;
  background: hsla(354,42%,25%,0.2) !important;
}
.dark pre + pre,
.dark .markdown-body pre:nth-of-type(3n+2) {
  border-color: hsl(160,22%,50%) !important;
  background: hsla(160,22%,25%,0.2) !important;
}
.dark pre + pre + pre,
.dark .markdown-body pre:nth-of-type(3n) {
  border-color: hsl(36,30%,55%) !important;
  background: hsla(36,30%,25%,0.2) !important;
}
.dark pre + pre + pre + pre {
  border-color: hsl(354,42%,60%) !important;
  background: hsla(354,42%,25%,0.2) !important;
}
.dark pre + pre + pre + pre + pre {
  border-color: hsl(160,22%,50%) !important;
  background: hsla(160,22%,25%,0.2) !important;
}
.dark pre + pre + pre + pre + pre + pre {
  border-color: hsl(36,30%,55%) !important;
  background: hsla(36,30%,25%,0.2) !important;
}