/* =========================================================
《苍穹武纪》builtInCss v4
联邦武科档案 UI｜知识库规范版｜固定浅色模式

设计原则：
1. builtInCss 只负责视觉，不写剧情规则。
2. 固定浅色模式，兼容平台默认白底。
3. 平台壳层 + 作品组件层双层覆盖。
4. 不使用 :root / CSS 变量 / color-mix / :has / :where / :is。
5. 不使用 JS，不依赖外链，不使用 backdrop-filter。
6. 每条声明加 !important，防止平台样式覆盖。
7. 组件 class 来自 pre_prompt：
   cq-scene / cq-story / cq-chip / cq-card-mini
   cq-archive / cq-npc / cq-world / cq-thread / cq-memory
   suggested_questions
========================================================= */


/* =========================================================
第一层：平台壳层
§0 危险区域与默认元素修正
========================================================= */

[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
  display: none !important;
}

.markdown-body {
  color: hsl(210, 14%, 9%) !important;
  background: transparent !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  line-height: 1.78 !important;
}

.markdown-body p {
  color: hsl(210, 14%, 9%) !important;
  line-height: 1.78 !important;
}

.markdown-body strong,
.markdown-body b {
  color: hsl(207, 64%, 27%) !important;
  font-weight: 800 !important;
}

.markdown-body em,
.markdown-body i {
  color: hsl(210, 9%, 34%) !important;
}

.markdown-body a {
  color: hsl(199, 70%, 32%) !important;
  text-decoration: none !important;
  border-bottom: 1px solid hsla(199, 70%, 32%, 0.25) !important;
}

.markdown-body a:hover {
  color: hsl(199, 78%, 25%) !important;
  border-bottom-color: hsla(199, 78%, 25%, 0.45) !important;
}

.markdown-body hr {
  height: 1px !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, hsl(205, 44%, 80%), transparent) !important;
  margin: 18px 0 !important;
}

.markdown-body blockquote {
  margin: 12px 0 !important;
  padding: 10px 14px !important;
  border-left: 4px solid hsl(199, 70%, 38%) !important;
  border-radius: 0 10px 10px 0 !important;
  background: hsl(205, 70%, 96%) !important;
  color: hsl(210, 9%, 30%) !important;
}

.markdown-body pre {
  margin: 12px 0 !important;
  padding: 12px 14px !important;
  border: 1px solid hsl(205, 44%, 80%) !important;
  border-left: 4px solid hsl(199, 70%, 38%) !important;
  border-radius: 12px !important;
  background: hsl(205, 70%, 97%) !important;
  color: hsl(210, 14%, 9%) !important;
  overflow-x: auto !important;
}

.markdown-body code {
  padding: 2px 6px !important;
  border-radius: 6px !important;
  background: hsl(205, 70%, 94%) !important;
  color: hsl(199, 70%, 28%) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

.markdown-body pre code {
  padding: 0 !important;
  background: transparent !important;
  color: hsl(210, 14%, 9%) !important;
}

.markdown-body table {
  width: 100% !important;
  margin: 12px 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid hsl(205, 44%, 82%) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: hsl(0, 0%, 100%) !important;
}

.markdown-body th {
  padding: 9px 10px !important;
  background: hsl(205, 70%, 94%) !important;
  color: hsl(207, 64%, 24%) !important;
  border-bottom: 1px solid hsl(205, 44%, 82%) !important;
  font-weight: 800 !important;
}

.markdown-body td {
  padding: 9px 10px !important;
  color: hsl(210, 14%, 9%) !important;
  border-bottom: 1px solid hsl(205, 44%, 88%) !important;
}

.markdown-body tr:nth-child(even) td {
  background: hsl(205, 70%, 98%) !important;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 1.45em !important;
  margin: 9px 0 !important;
}

.markdown-body li {
  margin: 4px 0 !important;
  color: hsl(210, 14%, 9%) !important;
}

.markdown-body details {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.markdown-body summary {
  box-sizing: border-box !important;
}

textarea.rc-textarea,
#ai-chat-input {
  background: hsl(0, 0%, 100%) !important;
  color: hsl(210, 14%, 9%) !important;
  caret-color: hsl(199, 70%, 34%) !important;
  border-color: hsl(205, 44%, 78%) !important;
}

textarea.rc-textarea::placeholder,
#ai-chat-input::placeholder {
  color: hsl(210, 6%, 56%) !important;
}


/* =========================================================
§1 全局布局与平台背景
========================================================= */

#root {
  background: hsl(205, 52%, 94%) !important;
  color: hsl(210, 14%, 9%) !important;
}

.h-screen {
  background:
    radial-gradient(circle at 18% 0%, hsla(199, 70%, 80%, 0.28), transparent 30%),
    linear-gradient(180deg, hsl(205, 52%, 94%), hsl(205, 46%, 96%)) !important;
  color: hsl(210, 14%, 9%) !important;
}

.sticky.w-full.top-0.flex.items-center {
  background: hsla(0, 0%, 100%, 0.96) !important;
  border-bottom: 1px solid hsl(205, 44%, 82%) !important;
  box-shadow: 0 2px 14px hsla(210, 40%, 35%, 0.06) !important;
}


/* =========================================================
§2 顶栏、模型选择器、设置按钮
========================================================= */

#ai-model-selector {
  background: hsl(205, 70%, 97%) !important;
  color: hsl(210, 9%, 30%) !important;
  border: 1px solid hsl(205, 44%, 82%) !important;
  border-radius: 10px !important;
}

#header-setting-button {
  color: hsl(210, 9%, 34%) !important;
  background: hsl(205, 70%, 97%) !important;
  border: 1px solid hsl(205, 44%, 84%) !important;
  border-radius: 10px !important;
}

#header-setting-button:hover {
  color: hsl(199, 70%, 30%) !important;
  background: hsl(205, 70%, 94%) !important;
  border-color: hsl(199, 48%, 70%) !important;
}


/* =========================================================
§3 开场白与提示区域
========================================================= */

div.flex.items-center.h-9 {
  background: hsl(205, 70%, 97%) !important;
  color: hsl(210, 9%, 34%) !important;
  border: 1px solid hsl(205, 44%, 84%) !important;
  border-radius: 12px !important;
}


/* =========================================================
§4 侧边栏与列表
========================================================= */

.shadow-lg.border-r.border-gray-200 {
  background: hsl(0, 0%, 100%) !important;
  border-right: 1px solid hsl(205, 44%, 84%) !important;
  box-shadow: 4px 0 20px hsla(210, 40%, 35%, 0.06) !important;
}

.MuiList-root {
  background: transparent !important;
  color: hsl(210, 14%, 9%) !important;
}

.conversation-text {
  color: hsl(210, 9%, 30%) !important;
}

.conversation-text:hover {
  color: hsl(199, 70%, 30%) !important;
}


/* =========================================================
§5 功能按钮
========================================================= */

#ai-mod-button2,
button[id*="ai-mod-button"] {
  background: hsl(205, 70%, 97%) !important;
  color: hsl(210, 9%, 30%) !important;
  border: 1px solid hsl(205, 44%, 82%) !important;
  border-radius: 11px !important;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
}

#ai-mod-button2:hover,
button[id*="ai-mod-button"]:hover {
  background: hsl(205, 70%, 93%) !important;
  color: hsl(199, 70%, 28%) !important;
  border-color: hsl(199, 48%, 70%) !important;
}


/* =========================================================
§6 聊天气泡与主内容区域
========================================================= */

.chat-answer-container {
  background: transparent !important;
  color: hsl(210, 14%, 9%) !important;
}

.bg-gray-100\/90.relative.inline-block,
[class*="bg-gray-100"][class*="relative"][class*="inline-block"] {
  background: hsl(0, 0%, 100%) !important;
  color: hsl(210, 14%, 9%) !important;
  border: 1px solid hsl(205, 44%, 84%) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px hsla(210, 40%, 35%, 0.08) !important;
}

[class*="chat-message"],
[class*="message-content"] {
  color: hsl(210, 14%, 9%) !important;
}

[class*="chat-message"] .markdown-body {
  color: hsl(210, 14%, 9%) !important;
}


/* =========================================================
§7 加载动画
========================================================= */

#loading-anim,
#customized-answer-content-loading-anim-container,
#customized-answer-avatar-loading-anim-container {
  color: hsl(199, 70%, 34%) !important;
}

.style-module__AtdJSq__dot-flashing {
  background: hsl(199, 70%, 42%) !important;
  color: hsl(199, 70%, 42%) !important;
}


/* =========================================================
§8 底部输入区
========================================================= */

.bg-gradient-to-t,
#ai-chat-bottom-input {
  background: linear-gradient(180deg, hsla(205, 52%, 94%, 0), hsl(205, 52%, 94%) 36%, hsl(205, 52%, 94%)) !important;
}

#ai-chat-input {
  background: hsl(0, 0%, 100%) !important;
  color: hsl(210, 14%, 9%) !important;
  caret-color: hsl(199, 70%, 34%) !important;
  border: 1px solid hsl(205, 44%, 78%) !important;
  border-radius: 15px !important;
  box-shadow: 0 6px 18px hsla(210, 40%, 35%, 0.08) !important;
}

#ai-chat-input:focus {
  border-color: hsl(199, 58%, 56%) !important;
  box-shadow: 0 0 0 3px hsla(199, 70%, 42%, 0.12) !important;
}

#ai-send-button {
  background: hsl(199, 70%, 36%) !important;
  color: hsl(0, 0%, 100%) !important;
  border-radius: 13px !important;
  border: 1px solid hsl(199, 70%, 32%) !important;
  box-shadow: 0 6px 16px hsla(199, 70%, 34%, 0.18) !important;
}

#ai-send-button:hover {
  background: hsl(199, 74%, 30%) !important;
}


/* =========================================================
§9 评论区与评分
========================================================= */

.MuiRating-root {
  color: hsl(38, 88%, 46%) !important;
}

.text-orange-500 {
  color: hsl(38, 88%, 42%) !important;
}

.MuiDivider-root {
  border-color: hsl(205, 44%, 84%) !important;
}


/* =========================================================
§10 分页与输入组件
========================================================= */

.MuiPaginationItem-root {
  color: hsl(210, 9%, 34%) !important;
  border-color: hsl(205, 44%, 82%) !important;
  background: hsl(0, 0%, 100%) !important;
}

.MuiPaginationItem-root.Mui-selected {
  color: hsl(0, 0%, 100%) !important;
  background: hsl(199, 70%, 36%) !important;
  border-color: hsl(199, 70%, 36%) !important;
}

.MuiInputBase-input {
  color: hsl(210, 14%, 9%) !important;
  background: transparent !important;
}


/* =========================================================
§11 MUI 全局组件
========================================================= */

.MuiButton-root,
.MuiIconButton-root {
  color: hsl(199, 70%, 30%) !important;
  border-radius: 10px !important;
}

.MuiButton-root:hover,
.MuiIconButton-root:hover {
  background: hsl(205, 70%, 94%) !important;
}

.MuiDialog-paper,
.MuiDrawer-paper {
  background: hsl(0, 0%, 100%) !important;
  color: hsl(210, 14%, 9%) !important;
  border: 1px solid hsl(205, 44%, 82%) !important;
  box-shadow: 0 18px 44px hsla(210, 40%, 24%, 0.16) !important;
}

.MuiTypography-root {
  color: hsl(210, 14%, 9%) !important;
}

.MuiOutlinedInput-root {
  background: hsl(0, 0%, 100%) !important;
  color: hsl(210, 14%, 9%) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: hsl(205, 44%, 78%) !important;
}

.MuiTouchRipple-root {
  color: hsl(199, 70%, 36%) !important;
}


/* =========================================================
§12 滚动条
========================================================= */

::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}

::-webkit-scrollbar-track {
  background: hsl(205, 52%, 94%) !important;
}

::-webkit-scrollbar-thumb {
  background: hsl(205, 44%, 78%) !important;
  border-radius: 999px !important;
  border: 2px solid hsl(205, 52%, 94%) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(199, 44%, 58%) !important;
}


/* =========================================================
第二层：《苍穹武纪》作品组件层
§A 通用组件基础
========================================================= */

details[class^="cq-"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 14px 0 !important;
  border: 1px solid hsl(205, 44%, 80%) !important;
  border-radius: 16px !important;
  background: hsl(0, 0%, 100%) !important;
  color: hsl(210, 14%, 9%) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: 14.8px !important;
  line-height: 1.72 !important;
  box-shadow: 0 8px 22px hsla(210, 40%, 35%, 0.08) !important;
  overflow: hidden !important;
}

details[class^="cq-"] > summary {
  display: block !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  user-select: none !important;
  list-style: none !important;
  min-height: 24px !important;
  padding: 12px 15px !important;
  border-bottom: 1px solid hsl(205, 44%, 84%) !important;
  background:
    linear-gradient(90deg, hsl(205, 70%, 94%), hsl(205, 70%, 98%)) !important;
  color: hsl(207, 64%, 24%) !important;
  font-weight: 850 !important;
  letter-spacing: 0.035em !important;
}

details[class^="cq-"] > summary::-webkit-details-marker {
  display: none !important;
}

details[class^="cq-"] > summary::after {
  content: "▸" !important;
  float: right !important;
  color: hsl(210, 6%, 56%) !important;
  font-size: 0.92em !important;
  transform: translateY(1px) !important;
  transition: transform 0.18s ease, color 0.18s ease !important;
}

details[class^="cq-"][open] > summary::after {
  transform: rotate(90deg) translateX(1px) !important;
  color: hsl(199, 70%, 34%) !important;
}

details[class^="cq-"][open] {
  border-color: hsl(199, 44%, 70%) !important;
  box-shadow: 0 12px 30px hsla(210, 40%, 35%, 0.12) !important;
}

details[class^="cq-"] > :not(summary) {
  box-sizing: border-box !important;
  position: relative !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  background:
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
}

details[class^="cq-"][open] > :last-child {
  padding-bottom: 14px !important;
}


/* =========================================================
§B 当前场景面板 cq-scene
========================================================= */

.cq-scene {
  border-color: hsl(199, 48%, 72%) !important;
  box-shadow: 0 10px 28px hsla(199, 70%, 32%, 0.11) !important;
}

.cq-scene > summary {
  background:
    linear-gradient(90deg, hsl(199, 70%, 90%), hsl(205, 70%, 98%)) !important;
  color: hsl(199, 70%, 24%) !important;
}

.cq-scene > summary::before {
  content: "LIVE" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  padding: 1px 7px !important;
  border: 1px solid hsl(199, 48%, 68%) !important;
  border-radius: 999px !important;
  background: hsl(199, 70%, 94%) !important;
  color: hsl(199, 70%, 30%) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  vertical-align: 1px !important;
}

.cq-scene[open] > :not(summary) {
  border-left: 4px solid hsl(199, 70%, 42%) !important;
  background:
    linear-gradient(90deg, hsl(199, 70%, 96%), transparent 12%),
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
}

.cq-scene[open] > :not(summary)::before {
  content: "场景终端" !important;
  display: inline-block !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: hsl(199, 70%, 94%) !important;
  color: hsl(199, 70%, 30%) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
}


/* =========================================================
§C 正文叙事区 cq-story
========================================================= */

.cq-story {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 16px 0 !important;
  padding: 20px 21px 19px 22px !important;
  border: 1px solid hsl(205, 44%, 80%) !important;
  border-left: 5px solid hsl(199, 70%, 40%) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
  color: hsl(210, 14%, 9%) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: 15.9px !important;
  line-height: 1.88 !important;
  letter-spacing: 0.018em !important;
  box-shadow: 0 10px 26px hsla(210, 40%, 35%, 0.08) !important;
  overflow: hidden !important;
}

.cq-story::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background:
    linear-gradient(90deg, transparent, hsla(199, 70%, 42%, 0.22), transparent) !important;
  pointer-events: none !important;
}

.cq-story::after {
  content: "联邦武科 · 现场记录" !important;
  position: absolute !important;
  top: 10px !important;
  right: 13px !important;
  padding: 1px 8px !important;
  border: 1px solid hsl(205, 44%, 84%) !important;
  border-radius: 999px !important;
  background: hsl(205, 70%, 97%) !important;
  color: hsl(210, 6%, 50%) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.05em !important;
  opacity: 0.85 !important;
}

.cq-story p {
  margin: 0 0 0.8em 0 !important;
  color: hsl(210, 14%, 9%) !important;
  line-height: 1.88 !important;
}

.cq-story br {
  line-height: 1.35 !important;
}

.cq-story strong,
.cq-story b {
  color: hsl(207, 64%, 24%) !important;
  font-weight: 850 !important;
}

.cq-story em,
.cq-story i {
  color: hsl(210, 9%, 34%) !important;
}

.cq-story code {
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: hsl(205, 70%, 94%) !important;
  color: hsl(199, 70%, 28%) !important;
}


/* =========================================================
§D 正文内联视觉道具 cq-chip / cq-card-mini
========================================================= */

.cq-chip {
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  vertical-align: baseline !important;
  max-width: 100% !important;
  margin: 0 3px !important;
  padding: 2px 9px !important;
  border: 1px solid hsl(199, 48%, 72%) !important;
  border-radius: 999px !important;
  background: hsl(199, 70%, 94%) !important;
  color: hsl(199, 70%, 26%) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: 0.88em !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}

.cq-chip::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 auto !important;
  margin-right: 6px !important;
  border-radius: 999px !important;
  background: hsl(199, 70%, 38%) !important;
  box-shadow: 0 0 0 3px hsla(199, 70%, 42%, 0.12) !important;
}

.cq-chip.danger {
  border-color: hsl(352, 56%, 76%) !important;
  background: hsl(352, 78%, 96%) !important;
  color: hsl(352, 62%, 30%) !important;
}

.cq-chip.danger::before {
  background: hsl(352, 62%, 48%) !important;
  box-shadow: 0 0 0 3px hsla(352, 62%, 48%, 0.12) !important;
}

.cq-chip.warn {
  border-color: hsl(42, 58%, 72%) !important;
  background: hsl(42, 88%, 94%) !important;
  color: hsl(42, 82%, 26%) !important;
}

.cq-chip.warn::before {
  background: hsl(42, 88%, 42%) !important;
  box-shadow: 0 0 0 3px hsla(42, 88%, 42%, 0.14) !important;
}

.cq-card-mini {
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  margin: 2px 4px !important;
  padding: 6px 11px !important;
  border: 1px solid hsl(205, 44%, 80%) !important;
  border-left: 4px solid hsl(199, 70%, 40%) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 97%)) !important;
  color: hsl(210, 14%, 9%) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: 0.9em !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  box-shadow: 0 5px 14px hsla(210, 40%, 35%, 0.07) !important;
}

.cq-card-mini::before {
  content: "档" !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 19px !important;
  height: 19px !important;
  margin-right: 7px !important;
  border-radius: 6px !important;
  background: hsl(199, 70%, 94%) !important;
  color: hsl(199, 70%, 30%) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}


/* =========================================================
§E User 武科档案 cq-archive
========================================================= */

.cq-archive {
  border-color: hsl(352, 56%, 78%) !important;
}

.cq-archive > summary {
  background:
    linear-gradient(90deg, hsl(352, 78%, 96%), hsl(205, 70%, 98%)) !important;
  color: hsl(352, 62%, 28%) !important;
}

.cq-archive > summary::before {
  content: "气血" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: hsl(352, 78%, 95%) !important;
  color: hsl(352, 62%, 36%) !important;
  border: 1px solid hsl(352, 56%, 78%) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  vertical-align: 1px !important;
}

.cq-archive[open] > :not(summary) {
  border-left: 4px solid hsl(352, 62%, 50%) !important;
  background:
    linear-gradient(90deg, hsl(352, 78%, 97%), transparent 10%),
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
}


/* =========================================================
§F NPC 交互状态 cq-npc
========================================================= */

.cq-npc {
  border-color: hsl(252, 42%, 80%) !important;
}

.cq-npc > summary {
  background:
    linear-gradient(90deg, hsl(252, 64%, 96%), hsl(205, 70%, 98%)) !important;
  color: hsl(252, 48%, 32%) !important;
}

.cq-npc > summary::before {
  content: "观察" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: hsl(252, 64%, 96%) !important;
  color: hsl(252, 48%, 40%) !important;
  border: 1px solid hsl(252, 42%, 80%) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  vertical-align: 1px !important;
}

.cq-npc[open] > :not(summary) {
  border-left: 4px solid hsl(252, 48%, 58%) !important;
  background:
    linear-gradient(90deg, hsl(252, 64%, 97%), transparent 10%),
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
}


/* =========================================================
§G 城市实时简报 cq-world
========================================================= */

.cq-world {
  border-color: hsl(158, 38%, 76%) !important;
}

.cq-world > summary {
  background:
    linear-gradient(90deg, hsl(158, 58%, 95%), hsl(205, 70%, 98%)) !important;
  color: hsl(158, 58%, 26%) !important;
}

.cq-world > summary::before {
  content: "城市" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: hsl(158, 58%, 95%) !important;
  color: hsl(158, 58%, 30%) !important;
  border: 1px solid hsl(158, 38%, 76%) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  vertical-align: 1px !important;
}

.cq-world[open] > :not(summary) {
  border-left: 4px solid hsl(158, 58%, 38%) !important;
  background:
    linear-gradient(90deg, hsl(158, 58%, 97%), transparent 10%),
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
}


/* =========================================================
§H 事件线程 cq-thread
========================================================= */

.cq-thread {
  border-color: hsl(42, 58%, 76%) !important;
}

.cq-thread > summary {
  background:
    linear-gradient(90deg, hsl(42, 88%, 94%), hsl(205, 70%, 98%)) !important;
  color: hsl(42, 82%, 26%) !important;
}

.cq-thread > summary::before {
  content: "线程" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: hsl(42, 88%, 94%) !important;
  color: hsl(42, 82%, 30%) !important;
  border: 1px solid hsl(42, 58%, 76%) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  vertical-align: 1px !important;
}

.cq-thread[open] > :not(summary) {
  border-left: 4px solid hsl(42, 88%, 42%) !important;
  background:
    linear-gradient(90deg, hsl(42, 88%, 96%), transparent 10%),
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
}


/* =========================================================
§I 档案记忆 cq-memory
========================================================= */

.cq-memory {
  border-color: hsl(210, 18%, 78%) !important;
}

.cq-memory > summary {
  background:
    linear-gradient(90deg, hsl(210, 38%, 95%), hsl(205, 70%, 98%)) !important;
  color: hsl(210, 18%, 34%) !important;
}

.cq-memory > summary::before {
  content: "档案" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: hsl(210, 38%, 95%) !important;
  color: hsl(210, 18%, 40%) !important;
  border: 1px solid hsl(210, 18%, 78%) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  vertical-align: 1px !important;
}

.cq-memory[open] > :not(summary) {
  border-left: 4px solid hsl(210, 18%, 52%) !important;
  background:
    linear-gradient(90deg, hsl(210, 38%, 97%), transparent 10%),
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(205, 70%, 98%)) !important;
}


/* =========================================================
§J 状态栏内部文本增强
========================================================= */

.cq-scene,
.cq-archive,
.cq-npc,
.cq-world,
.cq-thread,
.cq-memory {
  color: hsl(210, 14%, 9%) !important;
  letter-spacing: 0.012em !important;
}

.cq-scene p,
.cq-archive p,
.cq-npc p,
.cq-world p,
.cq-thread p,
.cq-memory p {
  margin: 0.45em 0 !important;
  color: hsl(210, 14%, 9%) !important;
}

.cq-scene strong,
.cq-archive strong,
.cq-npc strong,
.cq-world strong,
.cq-thread strong,
.cq-memory strong,
.cq-scene b,
.cq-archive b,
.cq-npc b,
.cq-world b,
.cq-thread b,
.cq-memory b {
  color: hsl(207, 64%, 24%) !important;
  font-weight: 850 !important;
}

.cq-scene code,
.cq-archive code,
.cq-npc code,
.cq-world code,
.cq-thread code,
.cq-memory code {
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: hsl(205, 70%, 94%) !important;
  color: hsl(199, 70%, 28%) !important;
}

.cq-scene ul,
.cq-archive ul,
.cq-npc ul,
.cq-world ul,
.cq-thread ul,
.cq-memory ul,
.cq-scene ol,
.cq-archive ol,
.cq-npc ol,
.cq-world ol,
.cq-thread ol,
.cq-memory ol {
  margin: 8px 0 !important;
  padding-left: 1.35em !important;
}

.cq-scene li,
.cq-archive li,
.cq-npc li,
.cq-world li,
.cq-thread li,
.cq-memory li {
  margin: 4px 0 !important;
}


/* =========================================================
§K 可行动方向 suggested_questions
========================================================= */

suggested_questions {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 16px 0 !important;
  padding: 15px 16px 14px 17px !important;
  border: 1px solid hsl(42, 58%, 76%) !important;
  border-left: 5px solid hsl(42, 88%, 42%) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, hsl(0, 0%, 100%), hsl(42, 88%, 97%)) !important;
  color: hsl(210, 14%, 9%) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: 14.8px !important;
  line-height: 1.74 !important;
  box-shadow: 0 8px 22px hsla(42, 88%, 32%, 0.08) !important;
  overflow: hidden !important;
}

suggested_questions::before {
  content: "可行动方向" !important;
  display: block !important;
  width: fit-content !important;
  margin-bottom: 8px !important;
  padding: 2px 9px !important;
  border: 1px solid hsl(42, 58%, 76%) !important;
  border-radius: 999px !important;
  background: hsl(42, 88%, 94%) !important;
  color: hsl(42, 82%, 28%) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

suggested_questions::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 120px !important;
  height: 100% !important;
  background:
    radial-gradient(circle at 100% 0%, hsla(42, 88%, 70%, 0.18), transparent 58%) !important;
  pointer-events: none !important;
}


/* =========================================================
§L 兼容平台将 suggested_questions 渲染成普通文本时的降级
========================================================= */

.markdown-body > suggested_questions {
  color: hsl(210, 14%, 9%) !important;
}

.markdown-body suggested_questions code {
  background: hsl(42, 88%, 94%) !important;
  color: hsl(42, 82%, 26%) !important;
}


/* =========================================================
§M 现代高武氛围微装饰
========================================================= */

.cq-story .cq-chip + .cq-chip {
  margin-left: 4px !important;
}

.cq-story .cq-card-mini + .cq-card-mini {
  margin-left: 5px !important;
}

.cq-scene[open],
.cq-archive[open],
.cq-npc[open],
.cq-world[open],
.cq-thread[open],
.cq-memory[open] {
  outline: 1px solid hsla(0, 0%, 100%, 0.55) !important;
  outline-offset: -2px !important;
}

.cq-story:hover,
details[class^="cq-"]:hover,
suggested_questions:hover {
  border-color: hsl(199, 44%, 70%) !important;
}


/* =========================================================
§N 移动端适配
========================================================= */

@media (max-width: 600px) {
  details[class^="cq-"] {
    margin: 11px 0 !important;
    border-radius: 13px !important;
    font-size: 13.8px !important;
    line-height: 1.66 !important;
  }

  details[class^="cq-"] > summary {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  details[class^="cq-"] > :not(summary) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .cq-scene[open] > :not(summary),
  .cq-archive[open] > :not(summary),
  .cq-npc[open] > :not(summary),
  .cq-world[open] > :not(summary),
  .cq-thread[open] > :not(summary),
  .cq-memory[open] > :not(summary) {
    border-left-width: 3px !important;
  }

  .cq-story {
    margin: 12px 0 !important;
    padding: 15px 13px 15px 15px !important;
    border-left-width: 4px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    line-height: 1.82 !important;
  }

  .cq-story::after {
    display: none !important;
  }

  .cq-chip {
    margin: 1px 2px !important;
    padding: 2px 7px !important;
    font-size: 0.86em !important;
  }

  .cq-card-mini {
    margin: 3px 2px !important;
    padding: 5px 8px !important;
    font-size: 0.86em !important;
  }

  suggested_questions {
    padding: 13px 12px !important;
    border-left-width: 4px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }

  suggested_questions::after {
    width: 80px !important;
  }

  .markdown-body table {
    font-size: 13px !important;
  }

  .markdown-body th,
  .markdown-body td {
    padding: 7px 8px !important;
  }
}


/* =========================================================
§O 更窄移动端
========================================================= */

@media (max-width: 420px) {
  .cq-story {
    font-size: 14.8px !important;
    line-height: 1.78 !important;
  }

  details[class^="cq-"] {
    font-size: 13.5px !important;
  }

  details[class^="cq-"] > summary::before {
    margin-right: 6px !important;
  }

  .cq-chip::before {
    margin-right: 5px !important;
  }

  .cq-card-mini::before {
    display: none !important;
  }
}


/* =========================================================
§P 动效降级
========================================================= */

@media (prefers-reduced-motion: reduce) {
  details[class^="cq-"] > summary::after {
    transition: none !important;
  }

  #ai-mod-button2,
  button[id*="ai-mod-button"] {
    transition: none !important;
  }
}
