⚜️坠落孤岛⚜️大世界【内置33NPC】【多人群像】

/* ═══════════════════════════════════════════
   暮色林居 - 深度沉浸版 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;


/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。