/*
 * 我家雌小鬼不可能这么傲娇
 * 修复：.pga pre 加 .markdown-body 前缀
 *       details.iy-secret-diary 选择器补全
 *       details.iy-npc > summary 文字色强制可见
 *       流光动画只用 background-clip，不影响文字可见性
 */

/* ==========================================
   §0 危险区域
   ========================================== */

[class*="bg-F1CBCB"],
[class*="bg-red"],
[style*="background: rgb(241"],
.decoration-strip,
[class*="strip"] {
  background: transparent !important;
  border: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

.markdown-body pre,
.markdown-body code {
  background: hsl(340, 15%, 97%) !important;
  color: hsl(345, 55%, 42%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 10px !important;
  font-family: 'PingFang SC', 'Hiragino Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
}

::selection {
  background: hsl(345, 65%, 65%, 0.2) !important;
  color: hsl(340, 18%, 18%) !important;
}

::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: hsl(340, 8%, 96%) !important; }
::-webkit-scrollbar-thumb { background: hsl(345, 35%, 88%) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: hsl(345, 65%, 65%) !important; }

/* ==========================================
   §1 全局
   ========================================== */

body,
.h-screen,
#root,
[class*="app-container"] {
  background: hsl(340, 8%, 96%) !important;
  color: hsl(340, 18%, 18%) !important;
}

/* ==========================================
   §2 顶栏
   ========================================== */

.sticky.w-full.top-0,
[class*="header"],
[class*="top-bar"],
[class*="navbar"] {
  background: hsl(0, 0%, 100%) !important;
  border-bottom: 1.5px solid hsl(340, 18%, 87%) !important;
  box-shadow: 0 1px 8px hsl(345, 65%, 65%, 0.08) !important;
}

/* ==========================================
   §3 模型选择器
   ========================================== */

[class*="ai-model-selector"],
[class*="model-select"],
[class*="header-setting"] {
  color: hsl(340, 10%, 42%) !important;
  background: transparent !important;
}

[class*="ai-model-selector"]:hover,
[class*="header-setting"]:hover {
  color: hsl(345, 65%, 65%) !important;
}

/* ==========================================
   §4 开场白区域
   ========================================== */

div.flex.items-center.h-9,
[class*="opening"],
[class*="quick-cmd"] {
  background: hsl(340, 15%, 98%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 10px !important;
  color: hsl(340, 10%, 42%) !important;
}

/* ==========================================
   §5 侧边栏
   ========================================== */

.shadow-lg.border-r,
[class*="sidebar"],
[class*="MuiList-root"],
[class*="conversation-list"] {
  background: hsl(0, 0%, 100%) !important;
  border-right: 1.5px solid hsl(340, 18%, 87%) !important;
}

[class*="conversation-text"],
[class*="chat-title"] { color: hsl(340, 18%, 18%) !important; }

[class*="conversation-item"]:hover,
[class*="chat-item"]:hover { background: hsl(340, 15%, 98%) !important; }

[class*="conversation-item"].active,
[class*="chat-item"].active {
  background: hsl(345, 35%, 88%) !important;
  border-left: 3px solid hsl(345, 65%, 65%) !important;
}

/* ==========================================
   §6 聊天气泡
   ========================================== */

.bg-gray-100\/90.relative.inline-block,
.chat-answer-container,
[class*="ai-bubble"],
[class*="assistant-message"] {
  background: hsl(0, 0%, 100%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  box-shadow: 0 2px 16px hsl(345, 65%, 65%, 0.06) !important;
}

[class*="user-bubble"],
[class*="user-message"] {
  background: hsl(345, 35%, 88%) !important;
  border: 1.5px solid hsl(345, 65%, 65%, 0.3) !important;
  border-radius: 16px !important;
  color: hsl(340, 18%, 18%) !important;
}

.markdown-body {
  color: hsl(340, 18%, 18%) !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
  background: transparent !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  color: hsl(345, 55%, 42%) !important;
  border-bottom: 1px solid hsl(340, 18%, 87%) !important;
  padding-bottom: 4px !important;
}

.markdown-body blockquote {
  border-left: 3px solid hsl(345, 65%, 65%) !important;
  background: hsl(345, 35%, 88%, 0.3) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 8px 14px !important;
  color: hsl(340, 10%, 42%) !important;
}

.markdown-body strong { color: hsl(345, 55%, 42%) !important; }
.markdown-body a { color: hsl(345, 65%, 65%) !important; }
.markdown-body ul li::marker { color: hsl(345, 65%, 65%) !important; }
.markdown-body hr { border: none !important; border-top: 1.5px solid hsl(340, 18%, 87%) !important; }

.markdown-body table { border-collapse: collapse !important; width: 100% !important; }
.markdown-body th {
  background: hsl(345, 35%, 88%) !important;
  color: hsl(345, 55%, 42%) !important;
  padding: 8px 12px !important;
  border: 1px solid hsl(340, 18%, 87%) !important;
}
.markdown-body td { padding: 7px 12px !important; border: 1px solid hsl(340, 18%, 87%) !important; }
.markdown-body tr:nth-child(even) td { background: hsl(340, 15%, 98%) !important; }

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

@keyframes qiqi-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

[class*="dot-flashing"],
[class*="AtdJSq"],
[class*="loading-dot"] {
  background: hsl(345, 65%, 65%) !important;
  animation: qiqi-pulse 1.2s ease-in-out infinite !important;
}

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

.bg-gradient-to-t,
[class*="ai-chat-bottom-input"],
[class*="bottom-bar"] {
  background: hsl(0, 0%, 100%) !important;
  border-top: 1.5px solid hsl(340, 18%, 87%) !important;
}

[class*="ai-chat-input"],
[class*="chat-input"] {
  background: hsl(340, 15%, 98%) !important;
  color: hsl(340, 18%, 18%) !important;
  caret-color: hsl(345, 65%, 65%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
}

[class*="ai-chat-input"]:focus,
[class*="chat-input"]:focus {
  border-color: hsl(345, 65%, 65%) !important;
  box-shadow: 0 0 0 3px hsl(345, 65%, 65%, 0.12) !important;
  outline: none !important;
}

[class*="ai-chat-input"]::placeholder { color: hsl(340, 8%, 62%) !important; }

[class*="send-btn"],
[class*="submit-btn"] {
  background: hsl(345, 65%, 65%) !important;
  color: hsl(0, 0%, 100%) !important;
  border: none !important;
  border-radius: 10px !important;
}

[class*="send-btn"]:hover { background: hsl(345, 65%, 58%) !important; }

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

[class*="ai-mod-button"],
[class*="function-btn"] {
  background: hsl(340, 15%, 98%) !important;
  color: hsl(340, 10%, 42%) !important;
  border: 1px solid hsl(340, 18%, 87%) !important;
  border-radius: 8px !important;
}

[class*="ai-mod-button"]:hover { background: hsl(345, 35%, 88%) !important; border-color: hsl(345, 65%, 65%) !important; }

/* ==========================================
   §10 评论区
   ========================================== */

[class*="comment"],
[class*="review-area"] {
  background: hsl(0, 0%, 100%) !important;
  border-top: 1.5px solid hsl(340, 18%, 87%) !important;
  color: hsl(340, 18%, 18%) !important;
}

/* ==========================================
   §11 评分
   ========================================== */

[class*="star-rating"],
[class*="score"] { color: hsl(345, 65%, 65%) !important; }

/* ==========================================
   §12 details 壳层
   ========================================== */

details {
  display: block !important;
  width: 100% !important;
  background: hsl(340, 15%, 98%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 12px !important;
  margin: 8px 0 !important;
  overflow: hidden !important;
}

details > summary {
  background: hsl(0, 0%, 100%) !important;
  color: hsl(340, 18%, 18%) !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  list-style: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 1.5px solid hsl(340, 18%, 87%) !important;
}

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

details > summary::before {
  content: '▸ ' !important;
  color: hsl(345, 65%, 65%) !important;
  transition: transform 0.2s ease !important;
  display: inline-block !important;
}

details[open] > summary::before { transform: rotate(90deg) !important; }

/* ==========================================
   §13 分页
   ========================================== */

[class*="pagination"] .active {
  background: hsl(345, 65%, 65%) !important;
  color: hsl(0, 0%, 100%) !important;
}


/* ==========================================
   ===== 作品组件层 =====
   ========================================== */

/* ==========================================
   §A 动画定义
   ========================================== */

@keyframes qiqi-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* 修复：流光只用于 background-clip 文字着色，
   不单独用于非文字元素以避免覆盖 summary 文字色 */
@keyframes qiqi-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes diary-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bar-fill-in {
  from { width: 0% !important; }
}

@keyframes choice-slidein {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ==========================================
   §B 场景条
   ========================================== */

details.iy-top {
  background: hsl(0, 0%, 100%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
}

details.iy-top > summary {
  background: linear-gradient(135deg, hsl(345, 65%, 65%, 0.12) 0%, hsl(0, 0%, 100%) 60%) !important;
  color: hsl(345, 55%, 42%) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

.iy-scene-grid { display: flex !important; flex-direction: column !important; }

.iy-scene-grid > div {
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: hsl(340, 10%, 42%) !important;
  border-bottom: 1px solid hsl(340, 18%, 87%, 0.5) !important;
  line-height: 1.5 !important;
}

.iy-scene-grid > div:last-child { border-bottom: none !important; }
.iy-scene-grid > div:first-child { color: hsl(340, 18%, 18%) !important; font-weight: 600 !important; }

/* ==========================================
   §C 正文区
   ========================================== */

.iy-text {
  background: hsl(0, 0%, 100%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin: 10px 0 !important;
  line-height: 1.85 !important;
  font-size: 15px !important;
  color: hsl(340, 18%, 18%) !important;
  box-shadow: 0 2px 20px hsl(345, 65%, 65%, 0.05) !important;
}

.iy-dialogue {
  background: hsl(345, 35%, 88%, 0.35) !important;
  border-left: 3px solid hsl(345, 65%, 65%) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  color: hsl(340, 18%, 18%) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.iy-dialogue b {
  color: hsl(345, 55%, 42%) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.iy-narrator {
  color: hsl(340, 8%, 62%) !important;
  font-size: 13px !important;
  font-style: italic !important;
  padding: 6px 12px !important;
  border-left: 2px solid hsl(340, 18%, 87%) !important;
  margin: 8px 0 !important;
}

/* ==========================================
   §D 秘密日记 — 修复版
   关键修复：必须用 details.iy-secret-diary 而非 .iy-secret-diary
   ========================================== */

details.iy-secret-diary {
  background: hsl(345, 30%, 97%) !important;
  border: 2px solid hsl(345, 65%, 65%, 0.4) !important;
  border-radius: 14px !important;
  margin: 12px 0 !important;
  animation: diary-fadein 0.4s ease !important;
  box-shadow: 0 2px 16px hsl(345, 65%, 65%, 0.1) !important;
}

details.iy-secret-diary[open] {
  border-color: hsl(345, 65%, 65%, 0.6) !important;
  animation: qiqi-breathe 3s ease-in-out infinite !important;
}

/* 修复：summary 文字色必须强制设定，不能依赖流光动画 */
details.iy-secret-diary > summary {
  background: linear-gradient(90deg, hsl(345, 65%, 65%, 0.15), transparent) !important;
  color: hsl(345, 55%, 42%) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  border-bottom-color: hsl(345, 65%, 65%, 0.25) !important;
  /* 不使用 background-clip:text，确保文字可见 */
  -webkit-text-fill-color: hsl(345, 55%, 42%) !important;
}

.diary-date {
  font-size: 11px !important;
  color: hsl(340, 8%, 62%) !important;
  padding: 8px 16px 4px !important;
}

.diary-said {
  padding: 6px 16px !important;
  font-size: 13px !important;
  color: hsl(340, 10%, 42%) !important;
  font-style: italic !important;
  border-bottom: 1px dashed hsl(345, 65%, 65%, 0.3) !important;
  margin-bottom: 8px !important;
}

.diary-real {
  padding: 6px 16px 4px !important;
  font-size: 14px !important;
  color: hsl(340, 18%, 18%) !important;
  line-height: 1.75 !important;
  font-style: italic !important;
}

.diary-real::before {
  content: '真正想说的是：' !important;
  display: block !important;
  font-size: 11px !important;
  color: hsl(345, 65%, 65%) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.diary-action {
  padding: 6px 16px 12px !important;
  font-size: 12px !important;
  color: hsl(340, 8%, 62%) !important;
  font-style: italic !important;
}

/* ==========================================
   §E NPC面板 — 修复版
   关键修复：summary 文字色必须强制可见
   ========================================== */

details.iy-npc {
  background: hsl(0, 0%, 100%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 14px !important;
  margin: 10px 0 !important;
}

/* 修复：不用 background-clip:text，直接设 color，确保标题可见 */
details.iy-npc > summary {
  background: hsl(0, 0%, 100%) !important;
  color: hsl(345, 55%, 42%) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  /* 关键：强制覆盖平台 summary 颜色 */
  -webkit-text-fill-color: hsl(345, 55%, 42%) !important;
}

details.iy-npc[data-attitude="hostile"] { border-color: hsl(0, 65%, 75%) !important; }
details.iy-npc[data-attitude="friendly"] { border-color: hsl(345, 65%, 65%) !important; }
details.iy-npc[data-attitude="shy"] { border-color: hsl(345, 50%, 72%) !important; }
details.iy-npc[data-attitude="intimate"] {
  border-color: hsl(345, 65%, 65%) !important;
  box-shadow: 0 2px 20px hsl(345, 65%, 65%, 0.15) !important;
}

.iy-npc-grid { display: flex !important; flex-direction: column !important; }

.iy-npc-grid > div {
  padding: 9px 16px !important;
  font-size: 13px !important;
  color: hsl(340, 18%, 18%) !important;
  border-bottom: 1px solid hsl(340, 18%, 87%, 0.5) !important;
  line-height: 1.55 !important;
}

.iy-npc-grid > div:last-child { border-bottom: none !important; }
.iy-npc-grid > div:first-child { background: hsl(340, 12%, 97%) !important; font-weight: 600 !important; }

/* 进度条 */
.iy-bar-wrap {
  background: hsl(340, 18%, 87%) !important;
  border-radius: 6px !important;
  height: 6px !important;
  margin-top: 6px !important;
  overflow: hidden !important;
}

.iy-bar-fav {
  height: 6px !important;
  background: linear-gradient(90deg, hsl(345, 55%, 72%), hsl(345, 70%, 58%)) !important;
  border-radius: 6px !important;
  animation: bar-fill-in 1s ease-out !important;
}

.iy-bar-tsun {
  height: 6px !important;
  background: linear-gradient(90deg, hsl(210, 35%, 75%), hsl(210, 50%, 62%)) !important;
  border-radius: 6px !important;
  animation: bar-fill-in 1s ease-out !important;
}

/* ==========================================
   §F 玩家状态栏
   ========================================== */

details.iy-user {
  background: hsl(340, 15%, 98%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 14px !important;
  margin: 10px 0 !important;
}

details.iy-user > summary {
  background: hsl(340, 15%, 98%) !important;
  color: hsl(340, 10%, 42%) !important;
  font-size: 12px !important;
  -webkit-text-fill-color: hsl(340, 10%, 42%) !important;
}

.iy-user-grid { display: flex !important; flex-direction: column !important; }

.iy-user-grid > div {
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: hsl(340, 18%, 18%) !important;
  border-bottom: 1px solid hsl(340, 18%, 87%, 0.4) !important;
  line-height: 1.5 !important;
}

.iy-user-grid > div:last-child { border-bottom: none !important; }

/* ==========================================
   §G 关系变化
   ========================================== */

details.iy-relation-change {
  border-radius: 12px !important;
  margin: 8px 0 !important;
  font-size: 13px !important;
}

details.iy-relation-change[data-relation="up"] {
  background: hsl(345, 35%, 97%) !important;
  border-color: hsl(345, 65%, 65%) !important;
}

details.iy-relation-change[data-relation="down"] {
  background: hsl(210, 20%, 97%) !important;
  border-color: hsl(210, 35%, 75%) !important;
}

details.iy-relation-change[data-relation="breakthrough"] {
  background: hsl(345, 35%, 95%) !important;
  border: 2px solid hsl(345, 65%, 65%) !important;
  animation: qiqi-breathe 2s ease-in-out 3 !important;
}

details.iy-relation-change > summary {
  font-size: 12px !important;
  color: hsl(340, 18%, 18%) !important;
  -webkit-text-fill-color: hsl(340, 18%, 18%) !important;
}

details.iy-relation-change > div {
  padding: 7px 16px !important;
  border-bottom: 1px solid hsl(340, 18%, 87%, 0.4) !important;
  color: hsl(340, 18%, 18%) !important;
}

details.iy-relation-change > div:last-child { border-bottom: none !important; }

/* ==========================================
   §H 手机
   ========================================== */

details.iy-phone {
  background: hsl(0, 0%, 100%) !important;
  border-color: hsl(340, 18%, 87%) !important;
  border-radius: 14px !important;
}

details.iy-phone > summary {
  font-size: 12px !important;
  color: hsl(340, 10%, 42%) !important;
  -webkit-text-fill-color: hsl(340, 10%, 42%) !important;
}

details.iy-phone > div {
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: hsl(340, 10%, 42%) !important;
  border-bottom: 1px solid hsl(340, 18%, 87%, 0.4) !important;
}

details.iy-phone > div:last-child { border-bottom: none !important; }

/* ==========================================
   §I 推荐行动 — 修复版
   关键修复：所有选择器必须带 .markdown-body 前缀
   ========================================== */

details.iy-choices {
  background: hsl(0, 0%, 100%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 14px !important;
  margin: 10px 0 !important;
}

/* 修复：summary 不使用流光动画，直接设色 */
details.iy-choices > summary {
  background: linear-gradient(90deg, hsl(345, 65%, 65%, 0.1), transparent) !important;
  color: hsl(345, 55%, 42%) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  -webkit-text-fill-color: hsl(345, 55%, 42%) !important;
}

.pga {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 14px !important;
}

/* 修复：必须加 .markdown-body 前缀，否则被平台壳层覆盖 */
.markdown-body .pga pre,
.markdown-body .iy-choices pre,
.markdown-body .pga code,
.markdown-body .iy-choices code {
  background: hsl(340, 15%, 98%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  color: hsl(340, 18%, 18%) !important;
  font-size: 14px !important;
  font-family: 'PingFang SC', 'Hiragino Sans', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  animation: choice-slidein 0.3s ease !important;
  display: block !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  margin: 0 !important;
}

.markdown-body .pga pre:hover,
.markdown-body .iy-choices pre:hover,
.markdown-body .pga code:hover,
.markdown-body .iy-choices code:hover {
  background: hsl(345, 35%, 88%, 0.4) !important;
  border-color: hsl(345, 65%, 65%) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 10px hsl(345, 65%, 65%, 0.12) !important;
}

/* 第三条：必定有效推进选项 */
.markdown-body .pga pre:nth-child(3),
.markdown-body .iy-choices pre:nth-child(3) {
  border-color: hsl(345, 65%, 65%, 0.5) !important;
  background: hsl(345, 35%, 88%, 0.2) !important;
}

/* 第四条：自由输入 */
.markdown-body .pga pre:nth-child(4),
.markdown-body .iy-choices pre:nth-child(4) {
  border-style: dashed !important;
  color: hsl(340, 8%, 62%) !important;
  font-style: italic !important;
}

/* ==========================================
   §J 星记忆回廊
   ========================================== */

details.reliquary-log {
  background: hsl(340, 12%, 96%) !important;
  border: 1.5px solid hsl(340, 18%, 87%) !important;
  border-radius: 14px !important;
  margin: 10px 0 !important;
}

details.reliquary-log > summary {
  background: hsl(340, 12%, 96%) !important;
  color: hsl(340, 10%, 42%) !important;
  font-size: 12px !important;
  -webkit-text-fill-color: hsl(340, 10%, 42%) !important;
}

details.reliquary-log table { font-size: 12px !important; color: hsl(340, 10%, 42%) !important; }
details.reliquary-log th { background: hsl(340, 18%, 87%) !important; color: hsl(340, 18%, 18%) !important; font-size: 11px !important; }
details.reliquary-log td { border-color: hsl(340, 18%, 87%) !important; padding: 6px 10px !important; }

/* ==========================================
   §K 移动端
   ========================================== */

@media (max-width: 480px) {
  .iy-text { padding: 14px !important; font-size: 14px !important; }
  .iy-npc-grid > div, .iy-user-grid > div { padding: 7px 12px !important; font-size: 12px !important; }
  .iy-dialogue { padding: 8px 12px !important; font-size: 14px !important; }
  .markdown-body .pga pre, .markdown-body .iy-choices pre { font-size: 13px !important; padding: 10px 12px !important; }
  .diary-real { font-size: 13px !important; }
}