/* ═══════════════════════════════════════════
   暮色林居 - 深度沉浸版 v4.0
   视觉：北欧极简 + 荒岛野性
   ═══════════════════════════════════════════ */

/* ==================== A. 对话内容层 ==================== */

/* === A1 — 默认装饰条隐藏 === */
[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"], [class*="bg-[#df6666]"] {
  display: none !important;
}

/* === A2 — AI 聊天气泡（极高折射毛玻璃）=== */
.bg-gray-100\/90.relative.inline-block {
  background: rgba(230, 235, 228, 0.75) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border: 1px solid rgba(78, 99, 82, 0.18) !important;
  border-radius: 22px !important;
  padding: 20px 24px !important;
  color: #1a1a1a !important;
  /* 多层阴影创造漂浮感 */
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 15px 35px rgba(45, 55, 45, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 12px !important;
}

/* === A3 — Markdown 渲染（阅读层核心）=== */
.markdown-body {
  color: #1a1a1a !important;
  line-height: 1.85 !important;
  letter-spacing: 0.02em !important;
}

/* 标题：渐变底线装饰 */
.markdown-body h1, .markdown-body h2 {
  color: #4E6352 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, rgba(78, 99, 82, 0.8), rgba(212, 175, 55, 0.3), transparent) 1 !important;
  margin-top: 1.8em !important;
}

/* 代码块：左侧彩色标记线 */
.markdown-body pre {
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
  border-left: 5px solid #4E6352 !important;
  padding: 16px !important;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.02) !important;
}

/* === A4 — 用户侧气泡（碳化木纹感）=== */
.bg-blue-500.relative.inline-block {
  background: linear-gradient(145deg, #DCC7AA, #C5B095) !important;
  border: 1px solid rgba(139, 115, 85, 0.25) !important;
  border-radius: 22px !important;
  color: #1a1a1a !important;
  padding: 16px 22px !important;
  box-shadow: 
    0 10px 25px rgba(139, 115, 85, 0.15),
    inset 0 -2px 4px rgba(0,0,0,0.05) !important;
}

/* ==================== B. 应用外壳层 ==================== */

/* === B1 — 页面背景（丁达尔光路叠加层）=== */
body {
  background-color: #F4F1EA !important;
  overflow-x: hidden !important;
}

/* 特效层 1：林间光束 */
body::after {
  content: "" !important;
  position: fixed !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 100px,
    rgba(255, 255, 255, 0.05) 150px,
    rgba(255, 255, 255, 0.05) 200px
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(30px) !important;
  animation: lightShift 60s linear infinite !important;
}

@keyframes lightShift {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === B5 — 输入框（高级聚焦态）=== */
#ai-chat-input-container {
  background: linear-gradient(to top, #F4F1EA 70%, transparent) !important;
}

#ai-chat-input, #ai-chat-input textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(78, 99, 82, 0.2) !important;
  border-radius: 16px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#ai-chat-input textarea:focus {
  border-color: rgba(78, 99, 82, 0.5) !important;
  box-shadow: 
    0 0 0 1px rgba(78, 99, 82, 0.2),
    0 0 20px rgba(78, 99, 82, 0.1),
    0 0 40px rgba(212, 175, 55, 0.05) !important;
}

/* ==================== C. 动效增强层 ==================== */

/* === 🔒 Tier 1A — 气泡入场动画：自然生长 === */
@keyframes sproutFade {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.bg-gray-100\/90.relative.inline-block,
.bg-blue-500.relative.inline-block {
  animation: sproutFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* === 🎨 Tier 2 — 氛围特效：动态森林孢子 === */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10 !important;
  background: transparent !important;
  /* 使用 box-shadow 制造大量粒子 */
  box-shadow: 
    10vw 20vh 2px rgba(212, 175, 55, 0.2),
    30vw 50vh 1px rgba(212, 175, 55, 0.1),
    70vw 10vh 3px rgba(78, 99, 82, 0.15),
    90vw 80vh 2px rgba(212, 175, 55, 0.2),
    50vw 90vh 1.5px rgba(212, 175, 55, 0.1),
    20vw 70vh 2px rgba(78, 99, 82, 0.1),
    85vw 40vh 1px rgba(212, 175, 55, 0.15) !important;
  animation: sporeDrift 20s linear infinite !important;
}

@keyframes sporeDrift {
  0% { transform: translateY(0) translateX(0); opacity: 0.5; }
  50% { transform: translateY(-50px) translateX(20px); opacity: 0.8; }
  100% { transform: translateY(-100px) translateX(0); opacity: 0.5; }
}

/* === ✨ Tier 3 — 微交互：代码块悬停亮起 === */
.markdown-body pre:hover {
  border-left-color: #D4AF37 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
}

/* 链接样式增强 */
.markdown-body a {
  color: #4E6352 !important;
  text-decoration: none !important;
  border-bottom: 1px dashed #4E6352 !important;
  transition: all 0.2s !important;
}

.markdown-body a:hover {
  color: #D4AF37 !important;
  border-bottom-style: solid !important;
}

/* ==================== D. 响应式适配 ==================== */
@media (max-width: 480px) {
  .bg-gray-100\/90.relative.inline-block {
    padding: 14px 18px !important;
    border-radius: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   ▼ v5.0 扩展层 — 平台壳层补全 + pre_prompt 状态栏 grammar 覆盖
   保留 v4.0 全部老配色与动效,新增内容均在浅色调框架内
   ════════════════════════════════════════════════════════════════ */

/* ==================== §B2 顶部导航 + 模型选择器 ==================== */
.sticky.w-full.top-0.flex.items-center {
  background: rgba(244, 241, 234, 0.92) !important;
  border-bottom: 1px solid rgba(78, 99, 82, 0.18) !important;
}
#ai-model-selector .group.flex.items-center { color: #1a1a1a !important; }
#ai-model-selector .group.flex.items-center:hover { color: #4E6352 !important; }
#ai-model-selector .truncate.text-\[13px\] { color: rgba(26, 26, 26, 0.65) !important; }
#ai-model-selector .shrink-0.flex.items-center svg {
  fill: rgba(26, 26, 26, 0.5) !important;
  color: rgba(26, 26, 26, 0.5) !important;
}
#header-setting-button { color: rgba(26, 26, 26, 0.5) !important; }
#header-setting-button:hover { color: #4E6352 !important; }

/* ==================== §B3 滚动条 ==================== */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: rgba(244, 241, 234, 0.5) !important; }
::-webkit-scrollbar-thumb {
  background: rgba(78, 99, 82, 0.35) !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(78, 99, 82, 0.7) !important; }

/* ==================== §B4 选区 + 占位符 ==================== */
::placeholder { color: rgba(26, 26, 26, 0.4) !important; opacity: 1 !important; }
::selection { background: rgba(212, 175, 55, 0.35) !important; color: #1a1a1a !important; }

/* ==================== §B6 发送按钮 ==================== */
#ai-send-button {
  background: linear-gradient(135deg, #4E6352, #5C7361) !important;
  color: #F4F1EA !important;
  border-radius: 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  transition: all 0.3s ease !important;
}
#ai-send-button:hover {
  background: linear-gradient(135deg, #5C7361, #6A8470) !important;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.3) !important;
}

/* ==================== §B7 底部输入区背景 ==================== */
.bg-gradient-to-t {
  background: linear-gradient(to top, #F4F1EA 70%, rgba(244, 241, 234, 0.7) 90%, transparent 100%) !important;
}

/* ==================== §B8 评论区容器 ==================== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: rgba(244, 241, 234, 0.95) !important;
  border-top: 1px solid rgba(78, 99, 82, 0.18) !important;
}
div.text-lg.font-bold { color: #1a1a1a !important; }
p.MuiTypography-body1.text-grey-600 { color: rgba(26, 26, 26, 0.7) !important; }
div.text-sm.text-grey-600 span.font-bold { color: #1a1a1a !important; }
div.text-xs.text-grey-600 { color: rgba(26, 26, 26, 0.65) !important; }
span.text-\[10px\] { color: rgba(26, 26, 26, 0.5) !important; }
button.text-gray-400 { color: rgba(26, 26, 26, 0.5) !important; }
button.text-gray-400:hover { color: #4E6352 !important; }
div.ml-8.border-l { border-left-color: rgba(78, 99, 82, 0.25) !important; }

/* ==================== §B9 评分星星 ==================== */
span.MuiRating-iconEmpty svg { color: rgba(26, 26, 26, 0.3) !important; }
span.MuiRating-iconFilled svg { color: #D4AF37 !important; }
span.text-orange-500 { color: #D4AF37 !important; }

/* ==================== §B10 分页 ==================== */
.MuiPaginationItem-root {
  background: transparent !important;
  color: rgba(26, 26, 26, 0.7) !important;
  border: 1px solid rgba(78, 99, 82, 0.18) !important;
}
.MuiPaginationItem-root.Mui-selected {
  background: #4E6352 !important;
  color: #F4F1EA !important;
  border-color: #4E6352 !important;
}
.MuiPaginationItem-root.Mui-disabled { opacity: 0.4 !important; }

/* ==================== §B11 MUI 全局按钮 ==================== */
button.MuiButton-containedPrimary {
  background: #4E6352 !important;
  color: #F4F1EA !important;
  border-radius: 10px !important;
  transition: background 0.2s ease !important;
}
button.MuiButton-containedPrimary:hover { background: #5C7361 !important; }
button.MuiButton-outlinedPrimary {
  border-color: #4E6352 !important;
  color: #4E6352 !important;
}
button.MuiButton-outlinedPrimary:hover { background: rgba(78, 99, 82, 0.12) !important; }
.MuiIconButton-root:hover { background: rgba(78, 99, 82, 0.1) !important; }
.MuiDialog-paper, .MuiDrawer-paper { background: #F4F1EA !important; }
.MuiDivider-root { background: rgba(78, 99, 82, 0.18) !important; }
.MuiTouchRipple-root { color: #4E6352 !important; }

/* ==================== §B12 textarea 评论输入 ==================== */
textarea.rc-textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(78, 99, 82, 0.25) !important;
  border-radius: 10px !important;
}
textarea.rc-textarea:focus { border-color: #4E6352 !important; }
div.bg-gray-100.text-gray-500 {
  background: rgba(244, 241, 234, 0.9) !important;
  color: rgba(26, 26, 26, 0.55) !important;
}

/* ════════════════════════════════════════════════════════════════
   §D. 全局 details 基础(覆盖 pre_prompt 输出的 6 个状态栏外框)
   ════════════════════════════════════════════════════════════════ */

.markdown-body details {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(78, 99, 82, 0.18) !important;
  border-radius: 14px !important;
  margin: 14px 0 !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease, box-shadow 0.35s ease !important;
  display: block !important;
  width: 100% !important;
  box-shadow: 0 2px 8px rgba(78, 99, 82, 0.05) !important;
}
.markdown-body details[open] {
  border-color: rgba(212, 175, 55, 0.5) !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.12),
              0 2px 6px rgba(78, 99, 82, 0.08) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}
.markdown-body details summary {
  background: linear-gradient(90deg, rgba(220, 199, 170, 0.55), rgba(197, 176, 149, 0.28)) !important;
  color: #2c3a32 !important;
  padding: 12px 16px 12px 38px !important;
  display: block !important;
  position: relative !important;
  border-bottom: 1px solid rgba(78, 99, 82, 0.12) !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  font-size: 1em !important;
  list-style: none !important;
  user-select: none !important;
  font-family: 'Bodoni Moda', 'Noto Serif SC', serif !important;
}
.markdown-body details summary::before {
  content: '◆' !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #4E6352 !important;
  font-size: 12px !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}
.markdown-body details[open] summary::before {
  content: '◇' !important;
  color: #D4AF37 !important;
  transform: translateY(-50%) rotate(45deg) !important;
}
.markdown-body details summary::-webkit-details-marker { display: none !important; }
.markdown-body details > *:not(summary) { padding: 12px 18px !important; margin: 0 !important; }
.markdown-body details > p { padding-top: 14px !important; padding-bottom: 14px !important; }

/* default-open details (e.g., 当前情况) — 顶部场景条特殊高光 */
.markdown-body details[open]:first-of-type {
  border-left: 4px solid #D4AF37 !important;
  background: linear-gradient(135deg, rgba(244, 241, 234, 0.85), rgba(212, 175, 55, 0.08)) !important;
}
.markdown-body details[open]:first-of-type summary {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.04)) !important;
  color: #6b5818 !important;
  font-size: 1.05em !important;
  letter-spacing: 0.14em !important;
}

/* ════════════════════════════════════════════════════════════════
   §E. 内容排版细化(树状线条 / 字段表格 / 持有物列表)
   ════════════════════════════════════════════════════════════════ */

.markdown-body details p {
  font-family: 'Noto Serif SC', serif !important;
  line-height: 1.95 !important;
  letter-spacing: 0.04em !important;
}

.markdown-body details strong {
  color: #4E6352 !important;
  font-weight: 700 !important;
}
.markdown-body details em {
  color: #6b5818 !important;
  font-style: italic !important;
}

/* ul / li 持有物 + 情报 + 轶闻列表 */
.markdown-body details ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 8px 0 !important;
}
.markdown-body details ul li {
  position: relative !important;
  padding: 6px 12px 6px 28px !important;
  margin: 4px 0 !important;
  background: rgba(220, 199, 170, 0.18) !important;
  border-left: 3px solid #DCC7AA !important;
  border-radius: 0 6px 6px 0 !important;
  color: #1a1a1a !important;
  transition: all 0.25s ease !important;
}
.markdown-body details ul li::before {
  content: '◈' !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #4E6352 !important;
  font-size: 12px !important;
}
.markdown-body details ul li:hover {
  background: rgba(220, 199, 170, 0.32) !important;
  border-left-color: #D4AF37 !important;
  transform: translateX(2px) !important;
}

/* 记忆区列表特殊化 */
.markdown-body details.memory {
  border-left: 4px solid #4E6352 !important;
  background: rgba(244, 241, 234, 0.6) !important;
}
.markdown-body details.memory summary {
  background: linear-gradient(90deg, rgba(78, 99, 82, 0.18), rgba(78, 99, 82, 0.04)) !important;
  color: #2c3a32 !important;
}
.markdown-body details.memory ul li {
  background: rgba(78, 99, 82, 0.08) !important;
  border-left-color: #4E6352 !important;
  font-family: 'Noto Serif SC', serif !important;
  font-size: 0.93em !important;
  color: #2c3a32 !important;
}
.markdown-body details.memory ul li::before {
  content: '✦' !important;
  color: #D4AF37 !important;
}

/* hr 分隔线(状态栏内部 ---) */
.markdown-body details hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(78, 99, 82, 0.3), transparent) !important;
  margin: 10px 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   §F. font 对话色号增强(pre_prompt hardcode 4 色)
   ════════════════════════════════════════════════════════════════ */

.markdown-body font[color="#d628b0"] {
  font-weight: 600 !important;
  text-shadow: 0 0 0.5px rgba(214, 40, 176, 0.3) !important;
}
.markdown-body font[color="#00aaff"] {
  font-weight: 600 !important;
  text-shadow: 0 0 0.5px rgba(0, 170, 255, 0.3) !important;
}
.markdown-body font[color="#ff2d2d"] {
  font-weight: 700 !important;
  text-shadow: 0 0 0.5px rgba(255, 45, 45, 0.4) !important;
}
.markdown-body font[color="#999"] {
  font-style: italic !important;
  opacity: 0.85 !important;
}

/* ════════════════════════════════════════════════════════════════
   §G. 推荐行动 A/B/C 强化(第 6 个 details:nth-of-type)
   ════════════════════════════════════════════════════════════════ */

.markdown-body details:nth-of-type(6) {
  background: linear-gradient(135deg, rgba(220, 199, 170, 0.35), rgba(244, 241, 234, 0.65)) !important;
  border-left: 4px solid #4E6352 !important;
}
.markdown-body details:nth-of-type(6) summary {
  background: linear-gradient(90deg, rgba(78, 99, 82, 0.18), rgba(78, 99, 82, 0.04)) !important;
  color: #2c3a32 !important;
  font-size: 1.02em !important;
}
.markdown-body details:nth-of-type(6) > p {
  padding: 10px 16px !important;
  margin: 6px 0 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border-left: 3px solid #DCC7AA !important;
  border-radius: 0 8px 8px 0 !important;
  transition: all 0.2s ease !important;
}
.markdown-body details:nth-of-type(6) > p:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-left-color: #D4AF37 !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15) !important;
}

/* ════════════════════════════════════════════════════════════════
   §H. 通用 blockquote / table / strong / em 全局
   ════════════════════════════════════════════════════════════════ */

.markdown-body strong {
  color: #4E6352 !important;
  font-weight: 700 !important;
}
.markdown-body em { color: #6b5818 !important; font-style: italic !important; }

.markdown-body blockquote {
  border-left: 4px solid #D4AF37 !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), transparent) !important;
  color: #2c3a32 !important;
  font-style: italic !important;
  padding: 12px 18px !important;
  margin: 14px 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

.markdown-body table {
  border-collapse: collapse !important;
  border: 1px solid rgba(78, 99, 82, 0.18) !important;
  margin: 12px 0 !important;
  width: 100% !important;
}
.markdown-body table th {
  background: rgba(220, 199, 170, 0.45) !important;
  color: #2c3a32 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(78, 99, 82, 0.15) !important;
}
.markdown-body table td {
  padding: 8px 12px !important;
  border: 1px solid rgba(78, 99, 82, 0.12) !important;
  color: #1a1a1a !important;
}

.markdown-body p { margin: 0.8em 0 !important; }

/* ════════════════════════════════════════════════════════════════
   §I. 响应式补全 + 降速兜底
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .markdown-body details {
    border-radius: 12px !important;
    margin: 10px 0 !important;
  }
  .markdown-body details summary {
    padding: 10px 12px 10px 32px !important;
    font-size: 0.95em !important;
    letter-spacing: 0.08em !important;
  }
  .markdown-body details summary::before {
    left: 12px !important;
    font-size: 11px !important;
  }
  .markdown-body details > *:not(summary) {
    padding: 10px 14px !important;
  }
  .markdown-body details ul li {
    padding: 5px 10px 5px 24px !important;
    font-size: 0.9em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .markdown-body details,
  .markdown-body details summary::before,
  .markdown-body details ul li,
  .markdown-body details:nth-of-type(6) > p {
    transition: none !important;
  }
  body::after, body::before {
    animation: none !important;
  }
}