/* ============================
   1. 全局字体定义 (覆盖渲染区域)
   ============================ */
.rili-markdown-renderer,
.rili-markdown-renderer * {
  font-family: 'Inter', 'Noto Serif SC', sans-serif !important;
  color: #f0e6cc !important;
}

.rili-markdown-renderer h1,
.rili-markdown-renderer h2,
.rili-markdown-renderer h3,
.rili-markdown-renderer h4 {
  font-family: 'Cinzel Decorative', 'Noto Serif SC', serif !important;
  color: #ffd700 !important;
}

.rili-markdown-renderer h2 {
  color: #f0d68a !important;
}

.rili-markdown-renderer code,
.rili-markdown-renderer pre {
  font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace !important;
  background: rgba(26, 28, 59, 0.7) !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
  color: #e0d0b0 !important;
}

/* ============================
   2. 用户气泡框 & AI气泡框
   ============================ */
.group.is-user > div:first-child,
.group.is-assistant > div:first-child {
  background: linear-gradient(135deg, #0a0b1e 0%, #1a1c3b 100%) !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
  border-left: 3px solid #ffd700 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.08), inset 0 0 60px rgba(180, 140, 220, 0.04) !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.group.is-user > div:first-child::before,
.group.is-assistant > div:first-child::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.03) 0%, transparent 50%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* ============================
   3. 文字颜色层级覆盖
   ============================ */
.rili-markdown-renderer strong,
.rili-markdown-renderer b {
  color: #fff8e8 !important;
}

.rili-markdown-renderer em,
.rili-markdown-renderer .text-muted {
  color: #a09980 !important;
}

.rili-markdown-renderer .purple-text,
.rili-markdown-renderer .seal-line {
  color: #c0a0d0 !important;
}

.rili-markdown-renderer .rating-badge {
  color: #ffaaaa !important;
  background: rgba(200, 50, 50, 0.25) !important;
  border: 1px solid rgba(240, 80, 80, 0.4) !important;
  border-radius: 4px !important;
  padding: 0 6px !important;
}

/* ============================
   4. AI底部附加元素
   ============================ */
.text-xs.font-mono.text-muted-foreground {
  color: #a09980 !important;
}

.text-xs.font-mono.text-muted-foreground .dot {
  color: #ffd700 !important;
}

/* ============================
   5. 底部操作按钮区
   ============================ */
.bg-muted.rounded.flex {
  background: rgba(26, 28, 59, 0.6) !important;
  border: 1px solid rgba(255, 215, 0, 0.15) !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.06) !important;
}

.group .md\:opacity-0 {
  opacity: 1 !important;
}

.bg-muted.rounded.flex button {
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.bg-muted.rounded.flex button svg.lucide {
  stroke: #c9a54c !important;
  stroke-width: 1.5 !important;
  width: 16px !important;
  height: 16px !important;
  transition: stroke 0.2s !important;
}

.bg-muted.rounded.flex button:hover svg.lucide {
  stroke: #ffd700 !important;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) !important;
}

/* ============================
   6. 加载动画
   ============================ */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
  display: none !important;
}

.flex.gap-2.w-full.h-full.items-center.justify-center {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
}

.flex.gap-2.w-full.h-full.items-center.justify-center::after {
  content: '' !important;
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23ffd700' stroke-width='4' stroke-dasharray='90, 150' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)) !important;
}

/* ============================
   7. AI气泡左侧金色装饰线
   ============================ */
.group.is-assistant > div:first-child {
  border-left: 4px solid #ffd700 !important;
}

/* ============================
   8. 所有 details > summary 折叠面板 (含 NPC/Coser panel 和裸 details)
   > summary 选择器 + :not() 排除已适配的 .coser-panel，避免重复覆盖
   ============================ */

/* 8a. 裸 <details><summary>XXXX</summary> — 无 class 或非 coser-panel */
details:not([class*="coser-panel"]) {
  background: linear-gradient(135deg, #0a0b1e 0%, #1a1c3b 100%) !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
  border-left: 3px solid #ffd700 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.08), inset 0 0 60px rgba(180, 140, 220, 0.04) !important;
  margin: 12px 0 !important;
  overflow: hidden !important;
}

details:not([class*="coser-panel"])[open] {
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.15), inset 0 0 60px rgba(180, 140, 220, 0.06) !important;
}

details:not([class*="coser-panel"]) > summary {
  font-family: 'Cinzel Decorative', 'Noto Serif SC', serif !important;
  color: #ffd700 !important;
  font-size: 1.05em !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.06) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.15) !important;
}

details:not([class*="coser-panel"]) > summary:hover {
  color: #fff8e8 !important;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.12) 0%, transparent 100%) !important;
}

details:not([class*="coser-panel"]) > summary::-webkit-details-marker {
  display: none !important;
}

details:not([class*="coser-panel"]) > summary::before {
  content: '▸' !important;
  display: inline-block !important;
  margin-right: 8px !important;
  color: #c9a54c !important;
  font-size: 0.85em !important;
  transition: transform 0.25s ease !important;
}

details:not([class*="coser-panel"])[open] > summary::before {
  transform: rotate(90deg) !important;
  color: #ffd700 !important;
}

details:not([class*="coser-panel"]) > :not(summary) {
  padding: 14px 16px !important;
  color: #f0e6cc !important;
  font-family: 'Inter', 'Noto Serif SC', sans-serif !important;
  font-size: 0.95em !important;
  line-height: 1.7 !important;
}

details:not([class*="coser-panel"]) > :not(summary) strong,
details:not([class*="coser-panel"]) > :not(summary) b {
  color: #fff8e8 !important;
}

details:not([class*="coser-panel"]) > :not(summary) em {
  color: #a09980 !important;
}

details:not([class*="coser-panel"]) > :not(summary) a {
  color: #c0a0d0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* 8b. NPC/Coser 折叠面板 — 与上面一致，用 [class*="-panel"] 覆盖所有 NPC */
details.coser-panel[class*="-panel"] {
  background: linear-gradient(135deg, #0a0b1e 0%, #1a1c3b 100%) !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
  border-left: 3px solid #ffd700 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.08), inset 0 0 60px rgba(180, 140, 220, 0.04) !important;
  margin: 12px 0 !important;
  overflow: hidden !important;
}

details.coser-panel[open] {
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.15), inset 0 0 60px rgba(180, 140, 220, 0.06) !important;
}

details.coser-panel[class*="-panel"] > summary {
  font-family: 'Cinzel Decorative', 'Noto Serif SC', serif !important;
  color: #ffd700 !important;
  font-size: 1.05em !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.06) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.15) !important;
}

details.coser-panel[class*="-panel"] > summary:hover {
  color: #fff8e8 !important;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.12) 0%, transparent 100%) !important;
}

details.coser-panel[class*="-panel"] > summary::-webkit-details-marker {
  display: none !important;
}

details.coser-panel[class*="-panel"] > summary::before {
  content: '▸' !important;
  display: inline-block !important;
  margin-right: 8px !important;
  color: #c9a54c !important;
  font-size: 0.85em !important;
  transition: transform 0.25s ease !important;
}

details.coser-panel[open] > summary::before {
  transform: rotate(90deg) !important;
  color: #ffd700 !important;
}

details.coser-panel[class*="-panel"] > :not(summary) {
  padding: 14px 16px !important;
  color: #f0e6cc !important;
  font-family: 'Inter', 'Noto Serif SC', sans-serif !important;
  font-size: 0.95em !important;
  line-height: 1.7 !important;
}

details.coser-panel[class*="-panel"] > :not(summary) strong,
details.coser-panel[class*="-panel"] > :not(summary) b {
  color: #fff8e8 !important;
}

details.coser-panel[class*="-panel"] > :not(summary) em {
  color: #a09980 !important;
}

details.coser-panel[class*="-panel"] > :not(summary) a {
  color: #c0a0d0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}