/* ========================================
   都铎王朝界面美化 - 史诗级宏大风格
   注重视觉舒适度与可读性
   ======================================== */

/* === 字体导入 === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Tangerine:wght@400;700&display=swap');

/* === 全局背景：深色石墙 === */
body {
  background: linear-gradient(135deg, #1a1410 0%, #2d2419 100%) !important;
  background-attachment: fixed !important;
}

/* === 消息气泡区域 === */

/* 通用消息气泡：羊皮纸质感 */
.group .bg-gray-100\/90,
.chat-answer-container .bg-gray-100\/90 {
  background: linear-gradient(135deg, #FFF8E7 0%, #F5EDD6 100%) !important;
  position: relative !important;
  isolation: isolate !important;
}

/* 羊皮纸纹理（微妙噪点） */
.group .bg-gray-100\/90::before,
.chat-answer-container .bg-gray-100\/90::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139, 69, 19, 0.02) 2px, rgba(139, 69, 19, 0.02) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 69, 19, 0.02) 2px, rgba(139, 69, 19, 0.02) 4px) !important;
  opacity: 0.3 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 都铎玫瑰水印 */
.group .bg-gray-100\/90::after,
.chat-answer-container .bg-gray-100\/90::after {
  content: '🌹' !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
  font-size: 24px !important;
  opacity: 0.08 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: grayscale(0.3) !important;
}

/* 确保文本在装饰层之上 */
.group .markdown-body,
#ai-chat-answer .markdown-body {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

/* 气泡圆角：优雅的弧度 */
.group .rounded-xl,
.chat-answer-container .rounded-xl {
  border-radius: 16px !important;
}

/* 气泡内边距：舒适的留白 */
.group .px-4 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.group .py-3 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* 纹章边框：金色细线 */
.group .bg-gray-100\/90,
.chat-answer-container .bg-gray-100\/90 {
  border: 2px solid #C9A961 !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* 消息文本：16世纪字体 */
.group .markdown-body,
#ai-chat-answer .markdown-body {
  font-family: 'EB Garamond', 'Georgia', serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2C2416 !important;
}

/* 强调文本：加粗而非变色 */
.group .markdown-body strong,
#ai-chat-answer .markdown-body strong {
  font-weight: 600 !important;
  color: #2C2416 !important;
}

/* 链接：都铎绿 */
.group .markdown-body a,
#ai-chat-answer .markdown-body a {
  color: #2D5016 !important;
  text-decoration: underline !important;
  text-decoration-color: #C9A961 !important;
  transition: all 0.3s ease !important;
}

.group .markdown-body a:hover,
#ai-chat-answer .markdown-body a:hover {
  color: #C9A961 !important;
  text-decoration-color: #2D5016 !important;
}

/* 顶部装饰条：用户消息（都铎绿） */
.group .bg-\[\#c9e1e9\] {
  background: linear-gradient(90deg, #2D5016 0%, #3D6B1F 100%) !important;
  height: 4px !important;
}

/* 顶部装饰条：AI消息（深红绒） */
.chat-answer-container .bg-\[\#F1CBCB\] {
  background: linear-gradient(90deg, #8B1538 0%, #A91D47 100%) !important;
  height: 4px !important;
}

/* === 消息操作按钮 === */

.group .MuiButton-textPrimary {
  color: #2D5016 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  transition: all 0.3s ease !important;
}

.group .MuiButton-textPrimary:hover {
  background-color: rgba(45, 80, 22, 0.08) !important;
  color: #C9A961 !important;
}

/* 按钮图标：金色 */
.group .MuiButton-textPrimary svg {
  fill: #C9A961 !important;
  transition: all 0.3s ease !important;
}

.group .MuiButton-textPrimary:hover svg {
  fill: #2D5016 !important;
  transform: scale(1.1) !important;
}

/* === 模型标识与Token === */

.chat-answer-container .text-purple-500.mt-1 {
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  color: #2D5016 !important;
  opacity: 0.7 !important;
}

.chat-answer-container .text-orange-500 {
  color: #C9A961 !important;
  font-weight: 600 !important;
}

/* === 界面控制区 === */

/* 顶部控制栏：深色背景 */
.sticky.top-0 {
  background: linear-gradient(180deg, #1a1410 0%, rgba(26, 20, 16, 0.95) 100%) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 2px solid #C9A961 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 模型选择器：纹章风格 */
#ai-model-selector {
  background: linear-gradient(135deg, #FFF8E7 0%, #F5EDD6 100%) !important;
  border: 2px solid #C9A961 !important;
  border-radius: 12px !important;
  font-family: 'Cinzel', serif !important;
  color: #2C2416 !important;
  padding: 8px 16px !important;
  transition: all 0.3s ease !important;
}

#ai-model-selector:hover {
  border-color: #2D5016 !important;
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.3) !important;
}

/* 模型名称文本 */
#ai-model-selector .truncate {
  font-weight: 600 !important;
  color: #2C2416 !important;
}

/* 下拉箭头：金色 */
#ai-model-selector svg[data-icon="ChevronDown"] {
  fill: #C9A961 !important;
}

/* 设置按钮：圆形纹章 */
#header-setting-button {
  background: linear-gradient(135deg, #2D5016 0%, #3D6B1F 100%) !important;
  border: 2px solid #C9A961 !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transition: all 0.3s ease !important;
}

#header-setting-button:hover {
  background: linear-gradient(135deg, #C9A961 0%, #D4B76E 100%) !important;
  border-color: #2D5016 !important;
  transform: rotate(90deg) !important;
}

#header-setting-button svg {
  fill: #FFF8E7 !important;
}

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

/* 输入框容器：羊皮纸风格 */
.bg-white.border-\[1\.5px\] {
  background: linear-gradient(135deg, #FFF8E7 0%, #F5EDD6 100%) !important;
  border: 2px solid #C9A961 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 主输入框 */
#ai-chat-input {
  font-family: 'EB Garamond', 'Georgia', serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #2C2416 !important;
  background: transparent !important;
}

/* 占位符：手写体风格 */
#ai-chat-input::placeholder {
  font-family: 'Tangerine', cursive !important;
  font-size: 22px !important;
  color: rgba(44, 36, 22, 0.4) !important;
}

/* 文字选中效果：金色高光 */
#ai-chat-input::selection {
  background-color: rgba(201, 169, 97, 0.3) !important;
  color: #2C2416 !important;
}

/* 字符计数器 */
.absolute.bottom-2.right-2 .bg-gray-100 {
  background: rgba(45, 80, 22, 0.1) !important;
  color: #2D5016 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}

/* 发送按钮：蜡封风格 */
#ai-send-button {
  background: radial-gradient(circle, #8B1538 0%, #6B0F2A 100%) !important;
  border: 2px solid #C9A961 !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  box-shadow: 
    0 4px 12px rgba(139, 21, 56, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

/* 蜡封压印效果 */
#ai-send-button::before {
  content: '🌹' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  opacity: 0.3 !important;
  pointer-events: none !important;
}

#ai-send-button:hover {
  background: radial-gradient(circle, #A91D47 0%, #8B1538 100%) !important;
  transform: scale(1.05) !important;
  box-shadow: 
    0 6px 16px rgba(139, 21, 56, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}

#ai-send-button:active {
  transform: scale(0.95) !important;
}

/* 发送图标 */
#ai-send-button .icon-icon-send {
  fill: #FFF8E7 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* === 快捷按钮组 === */

#ai-mod-button2 .MuiButton-outlinedPrimary {
  background: linear-gradient(135deg, #FFF8E7 0%, #F5EDD6 100%) !important;
  border: 2px solid #C9A961 !important;
  border-radius: 12px !important;
  color: #2D5016 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 8px 16px !important;
  transition: all 0.3s ease !important;
}

#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
  background: linear-gradient(135deg, #2D5016 0%, #3D6B1F 100%) !important;
  border-color: #C9A961 !important;
  color: #FFF8E7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(45, 80, 22, 0.3) !important;
}

#ai-mod-button2 svg {
  fill: #C9A961 !important;
  transition: all 0.3s ease !important;
}

#ai-mod-button2 .MuiButton-outlinedPrimary:hover svg {
  fill: #FFF8E7 !important;
}

/* === 加载动画：都铎玫瑰旋转 === */

/* 隐藏默认加载动画 */
.style_dot-flashing__8L91Q {
  display: none !important;
}

/* 加载容器 */
.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
}

/* 都铎玫瑰加载动画 */
.flex.items-center.justify-center.w-6.h-5::before {
  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 100 100"%3E%3Ccircle cx="50" cy="50" r="40" fill="none" stroke="%23C9A961" stroke-width="3"%3E%3Canimate attributeName="r" values="35;45;35" dur="1.5s" repeatCount="indefinite"/%3E%3Canimate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite"/%3E%3C/circle%3E%3Cpath d="M50,20 Q60,35 50,50 Q40,35 50,20 M50,50 Q65,60 50,80 Q35,60 50,50 M50,50 Q20,50 35,65 Q50,50 35,35 M50,50 Q80,50 65,65 Q50,50 65,35" fill="%238B1538" opacity="0.8"%3E%3CanimateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"/%3E%3C/path%3E%3C/svg%3E') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* === 分页控制 === */

/* 页码按钮 */
.MuiPaginationItem-root {
  font-family: 'Cinzel', serif !important;
  color: #2D5016 !important;
  border: 1px solid #C9A961 !important;
  background: rgba(255, 248, 231, 0.5) !important;
  transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
  background: linear-gradient(135deg, #C9A961 0%, #D4B76E 100%) !important;
  color: #FFF8E7 !important;
  border-color: #2D5016 !important;
}

/* 选中状态 */
.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg, #2D5016 0%, #3D6B1F 100%) !important;
  color: #FFF8E7 !important;
  border-color: #C9A961 !important;
  font-weight: 600 !important;
}

/* === 响应式适配 === */

/* 移动端优化 */
@media (max-width: 768px) {
  /* 简化装饰 */
  .group .bg-gray-100\/90::after,
  .chat-answer-container .bg-gray-100\/90::after {
    display: none !important;
  }
  
  /* 调整字号 */
  .group .markdown-body,
  #ai-chat-answer .markdown-body {
    font-size: 16px !important;
  }
  
  /* 简化边框 */
  .group .bg-gray-100\/90,
  .chat-answer-container .bg-gray-100\/90 {
    border-width: 1px !important;
  }
  
  /* 调整按钮大小 */
  #ai-send-button {
    width: 44px !important;
    height: 44px !important;
  }
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === 滚动条美化 === */

/* Webkit浏览器 */
::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

::-webkit-scrollbar-track {
  background: linear-gradient(135deg, #1a1410 0%, #2d2419 100%) !important;
  border-radius: 6px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #C9A961 0%, #D4B76E 100%) !important;
  border-radius: 6px !important;
  border: 2px solid #1a1410 !important;
  transition: all 0.3s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #2D5016 0%, #3D6B1F 100%) !important;
}

/* Firefox */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #C9A961 #1a1410 !important;
}

/* ================================================================
   ⚔ THE TUDOR ROSE · 都铎玫瑰皇家档案馆 V1.0 ⚔
   For the Glory of England and the Tudor Dynasty
   从贞德的百合到都铎的玫瑰：权力叙事的转变
   ================================================================ */

/* ═══════════════════════════════════════
   [0] 动画引擎：权力的脉动
   ═══════════════════════════════════════ */

@keyframes crownGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 6px rgba(201, 169, 97, 0.4));
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 16px rgba(201, 169, 97, 0.8));
    transform: scale(1.08);
  }
}

@keyframes roseBloom {
  0%, 100% { 
    opacity: 0.7;
    transform: rotate(-3deg) scale(1);
  }
  50% { 
    opacity: 0.9;
    transform: rotate(3deg) scale(1.05);
  }
}

@keyframes shieldShine {
  0%, 100% { 
    box-shadow: 
      0 8px 24px rgba(0, 0, 0, 0.6),
      inset 0 2px 4px rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(201, 169, 97, 0.4);
  }
  50% { 
    box-shadow: 
      0 12px 36px rgba(200, 16, 46, 0.5),
      inset 0 2px 4px rgba(255, 255, 255, 0.15),
      0 0 0 2px rgba(200, 16, 46, 0.6),
      0 0 40px rgba(201, 169, 97, 0.25);
  }
}

@keyframes flagWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes stoneCarve {
  from { 
    opacity: 0;
    transform: translateY(10px);
    filter: blur(3px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes goldPulse {
  0%, 100% { 
    border-color: rgba(201, 169, 97, 0.5);
  }
  50% { 
    border-color: rgba(201, 169, 97, 0.9);
  }
}

@keyframes emberGlow {
  0%, 100% { 
    box-shadow: 
      inset 0 0 50px rgba(200, 16, 46, 0.06);
  }
  50% { 
    box-shadow: 
      inset 0 0 80px rgba(200, 16, 46, 0.1);
  }
}

/* ═══════════════════════════════════════
   [1] 折叠面板基础：盾牌与石墙
   ═══════════════════════════════════════ */

details {
  background: 
    linear-gradient(135deg, 
      rgba(0, 35, 102, 0.18) 0%, 
      rgba(200, 16, 46, 0.12) 50%, 
      rgba(0, 35, 102, 0.18) 100%
    ),
    linear-gradient(180deg, 
      #0d1218 0%, 
      #15171f 50%, 
      #0d1218 100%
    ) !important;
  border: 3px solid #C9A961 !important;
  border-radius: 0 !important;
  margin: 22px 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(201, 169, 97, 0.4) !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation: shieldShine 10s ease-in-out infinite !important;
}

details::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: 
    linear-gradient(90deg, transparent 46%, rgba(200, 16, 46, 0.15) 46%, rgba(200, 16, 46, 0.15) 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(200, 16, 46, 0.15) 46%, rgba(200, 16, 46, 0.15) 54%, transparent 54%),
    linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.08) 52%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(0, 35, 102, 0.12) 48%, rgba(0, 35, 102, 0.12) 52%, transparent 52%) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: roseBloom 12s ease-in-out infinite !important;
}

details[open] {
  border-color: #C8102E !important;
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(200, 16, 46, 0.7),
    0 0 50px rgba(200, 16, 46, 0.2) !important;
  animation: emberGlow 8s ease-in-out infinite !important;
}

details:hover {
  border-color: #C8102E !important;
  transform: translateY(-3px) !important;
}

/* ═══════════════════════════════════════
   [2] 标题区域：旗帜与王冠
   ═══════════════════════════════════════ */

summary {
  background: 
    linear-gradient(135deg, 
      #C8102E 0%, 
      #8B0000 12%, 
      #002366 30%, 
      #003d99 50%, 
      #002366 70%, 
      #8B0000 88%, 
      #C8102E 100%
    ) !important;
  background-size: 250% 100% !important;
  color: #FFFFFF !important;
  font-family: 'Cinzel', 'Playfair Display', serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 3.5px !important;
  padding: 17px 65px 17px 52px !important;
  cursor: pointer !important;
  list-style: none !important;
  position: relative !important;
  border-bottom: 3px solid #C9A961 !important;
  text-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.95),
    0 0 25px rgba(255, 255, 255, 0.25) !important;
  transition: all 0.5s ease !important;
  z-index: 1 !important;
  animation: flagWave 18s ease-in-out infinite !important;
}

summary::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: 
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.18) 47%, rgba(255, 255, 255, 0.18) 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 255, 255, 0.18) 47%, rgba(255, 255, 255, 0.18) 53%, transparent 53%) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

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

summary::marker {
  display: none !important;
}

summary::before {
  content: '🌹' !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 22px !important;
  filter: drop-shadow(0 0 10px rgba(201, 169, 97, 0.5)) !important;
  animation: roseBloom 8s ease-in-out infinite !important;
}

summary:hover {
  background-position: 100% 50% !important;
  text-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.95),
    0 0 35px rgba(201, 169, 97, 0.7) !important;
  padding-left: 56px !important;
}

/* ═══════════════════════════════════════
   [3] 内容区域：皇家档案
   ═══════════════════════════════════════ */

details > *:not(summary) {
  padding: 26px !important;
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #E8E8E8 !important;
  position: relative !important;
  z-index: 1 !important;
  animation: stoneCarve 0.7s ease-out !important;
}

details p,
details span,
details div {
  color: #D8D8D8 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

details strong,
details b {
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(201, 169, 97, 0.4) !important;
  animation: none !important;
  filter: none !important;
}

details a {
  color: #C9A961 !important;
  text-decoration: none !important;
  border-bottom: 2px solid #C8102E !important;
  transition: all 0.3s ease !important;
}

details a:hover {
  color: #FFFFFF !important;
  border-bottom-color: #C9A961 !important;
  text-shadow: 0 0 15px rgba(201, 169, 97, 0.7) !important;
}

details em,
details i {
  color: #C0C0C0 !important;
  font-style: italic !important;
}

/* ═══════════════════════════════════════
   [4] 标题样式：皇家等级
   ═══════════════════════════════════════ */

details h1,
details h2,
details h3,
details h4,
details h5,
details h6 {
  font-family: 'Cinzel', serif !important;
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-weight: 700 !important;
  margin: 18px 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(201, 169, 97, 0.25) !important;
  text-shadow: 0 0 12px rgba(201, 169, 97, 0.3) !important;
  animation: none !important;
}

details h1 { font-size: 18px !important; letter-spacing: 2.5px !important; }
details h2 { font-size: 16.5px !important; letter-spacing: 2px !important; }
details h3 { font-size: 15px !important; letter-spacing: 1.5px !important; }
details h4 { font-size: 14px !important; letter-spacing: 1px !important; }
details h5 { font-size: 13.5px !important; }
details h6 { font-size: 13px !important; }

/* ═══════════════════════════════════════
   [5] 列表样式：盾牌标记
   ═══════════════════════════════════════ */

details ul,
details ol {
  padding-left: 10px !important;
  list-style: none !important;
  margin: 14px 0 !important;
}

details li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 10px !important;
  color: #D8D8D8 !important;
  font-size: inherit !important;
}

details ul li::before {
  content: '🛡️' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  font-size: 16px !important;
  filter: drop-shadow(0 0 6px rgba(201, 169, 97, 0.4)) !important;
}

details ol {
  list-style-type: upper-roman !important;
  padding-left: 32px !important;
}

details ol li::marker {
  color: #C9A961 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(201, 169, 97, 0.3) !important;
}

/* ═══════════════════════════════════════
   [6] 表格样式：皇家账簿
   ═══════════════════════════════════════ */

details table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 18px 0 !important;
  border: 2px solid #C9A961 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.06) !important;
}

details thead {
  background: linear-gradient(135deg, #C8102E 0%, #002366 50%, #C8102E 100%) !important;
  position: relative !important;
}

details thead::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: 
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.18) 47%, rgba(255, 255, 255, 0.18) 53%, transparent 53%) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

details th {
  color: #FFFFFF !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-align: left !important;
  padding: 15px 20px !important;
  border-bottom: 2px solid #C9A961 !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
  position: relative !important;
  z-index: 1 !important;
}

details td {
  padding: 13px 20px !important;
  border-bottom: 1px solid rgba(201, 169, 97, 0.25) !important;
  vertical-align: top !important;
  color: #D8D8D8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

details tbody tr:nth-child(odd) {
  background: rgba(200, 16, 46, 0.15) !important;
}

details tbody tr:nth-child(even) {
  background: rgba(0, 35, 102, 0.15) !important;
}

details tbody tr:hover {
  background: rgba(201, 169, 97, 0.25) !important;
  transition: background 0.3s ease !important;
}

details tbody tr:last-child td {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════
   [7] 代码块：皇家文书
   ═══════════════════════════════════════ */

details pre {
  background: 
    linear-gradient(180deg, 
      rgba(12, 12, 22, 0.96), 
      rgba(18, 18, 28, 0.96)
    ) !important;
  color: #A8C8A8 !important;
  border: 2px solid rgba(201, 169, 97, 0.35) !important;
  padding: 18px !important;
  margin: 18px 0 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  overflow-x: auto !important;
  position: relative !important;
  box-shadow: 
    inset 0 0 35px rgba(0, 0, 0, 0.7),
    0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

details pre::before {
  content: '── ROYAL DOCUMENT ──' !important;
  position: absolute !important;
  top: 4px !important;
  right: 8px !important;
  font-size: 9px !important;
  color: rgba(201, 169, 97, 0.3) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
}

details code {
  background: rgba(201, 169, 97, 0.1) !important;
  color: #E8C850 !important;
  padding: 2px 6px !important;
  border: 1px solid rgba(201, 169, 97, 0.2) !important;
  font-size: 0.9em !important;
}

details pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════
   [8] 分隔线：王冠装饰
   ═══════════════════════════════════════ */

details hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    #C8102E 20%, 
    #C9A961 40%, 
    #002366 50%, 
    #C9A961 60%, 
    #C8102E 80%, 
    transparent 100%
  ) !important;
  margin: 20px 0 !important;
  position: relative !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

details hr::after {
  content: '👑' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #0d1218 !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  animation: crownGlow 4s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════
   [9] 引用块
   ═══════════════════════════════════════ */

details blockquote {
  border-left: 4px solid #C8102E !important;
  background: linear-gradient(
    90deg, 
    rgba(200, 16, 46, 0.1), 
    transparent 70%
  ) !important;
  padding: 14px 20px 14px 24px !important;
  margin: 16px 0 !important;
  font-style: italic !important;
  color: #C0C0C0 !important;
  position: relative !important;
}

details blockquote::before {
  content: '❝' !important;
  position: absolute !important;
  top: -10px !important;
  left: 10px !important;
  font-size: 32px !important;
  color: rgba(201, 169, 97, 0.2) !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════
   [10] 嵌套面板
   ═══════════════════════════════════════ */

details details {
  margin: 12px 8px !important;
  border-width: 2px !important;
  border-color: rgba(201, 169, 97, 0.3) !important;
  background: rgba(10, 14, 26, 0.6) !important;
}

details details > summary {
  font-size: 14px !important;
  padding: 12px 50px 12px 44px !important;
  letter-spacing: 2px !important;
}

details details details {
  margin: 10px 6px !important;
  border-width: 1px !important;
  border-color: rgba(201, 169, 97, 0.2) !important;
}

details details details > summary {
  font-size: 13px !important;
  padding: 10px 44px 10px 38px !important;
  letter-spacing: 1.5px !important;
}

/* ═══════════════════════════════════════
   [11] 滚动条
   ═══════════════════════════════════════ */

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

details::-webkit-scrollbar-track {
  background: linear-gradient(135deg, #002366 0%, #0d1218 100%) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

details::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #C8102E 0%, #8B0000 100%) !important;
  border: 2px solid #C9A961 !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

details::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #C9A961 0%, #D4B76E 100%) !important;
}

details {
  scrollbar-width: thin !important;
  scrollbar-color: #C8102E #002366 !important;
}

/* ═══════════════════════════════════════
   [12] 响应式适配
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  details {
    margin: 16px 0 !important;
    border-width: 2px !important;
  }
  
  summary {
    font-size: 14px !important;
    letter-spacing: 2px !important;
    padding: 14px 50px 14px 44px !important;
  }
  
  summary::before {
    left: 16px !important;
    font-size: 18px !important;
  }
  
  details > *:not(summary) {
    padding: 18px !important;
    font-size: 15px !important;
  }
  
  details table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  
  details th,
  details td {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  
  details::before {
    opacity: 0.3 !important;
  }
}

/* ═══════════════════════════════════════
   [13] 打印样式
   ═══════════════════════════════════════ */

@media print {
  details {
    border: 2px solid #000 !important;
    box-shadow: none !important;
    animation: none !important;
  }
  
  summary {
    background: #333 !important;
    color: #FFF !important;
    border-bottom: 2px solid #000 !important;
    animation: none !important;
  }
  
  details[open] {
    page-break-inside: avoid !important;
  }
  
  details > *:not(summary) {
    color: #000 !important;
  }
}

/* ═══════════════════════════════════════
   [14] 可访问性增强
   ═══════════════════════════════════════ */

summary:focus {
  outline: 4px solid #C9A961 !important;
  outline-offset: 3px !important;
}

summary:focus-visible {
  outline: 4px solid #C9A961 !important;
  outline-offset: 3px !important;
}

@media (prefers-contrast: high) {
  details {
    border-width: 4px !important;
  }
  
  summary {
    background: #C8102E !important;
    color: #FFFFFF !important;
  }
  
  details > *:not(summary) {
    color: #FFFFFF !important;
    background: #000000 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  details,
  summary,
  summary::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════
   [15] 全局抗锯齿
   ═══════════════════════════════════════ */

* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ═══════════════════════════════════════
   [16] MOD兼容豁免
   ═══════════════════════════════════════ */

details.mem-mod {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  margin: 16px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

details.mem-mod > summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  padding: 8px 0 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

details.mem-mod > summary::before,
details.mem-mod > summary::after {
  content: none !important;
  display: none !important;
}

details.mem-mod strong,
details.mem-mod p,
details.mem-mod span,
details.mem-mod div,
details.mem-mod pre,
details.mem-mod code {
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   [17] 正文消息区与对话兼容修复
   适配当前网站：
   .rili-markdown-renderer
   同时兼容常见聊天正文容器。

   注意：
   CSS 无法根据普通文字中的中文引号自动判断“这是对话”。
   想让对话单独上色，请使用以下任意一种结构：
   1. Markdown 引用：> “对话”
   2. <p class="dialogue">“对话”</p>
   3. <span class="dialogue-text">“对话”</span>
   4. 整段斜体：*“对话”*
   ═══════════════════════════════════════════════════════════ */

/* ---------- 正文纸张本体：不再依赖旧网站气泡类名 ---------- */
.rili-markdown-renderer,
#customized-answer-content,
.message-content,
.ai-response,
.group .markdown-body,
#ai-chat-answer .markdown-body,
.chat-answer-container .markdown-body {
  --tudor-paper: #fff8e7;
  --tudor-paper-deep: #f3e7c9;
  --tudor-ink: #302719;
  --tudor-muted: #786951;
  --tudor-gold: #b8944d;
  --tudor-red: #8b1538;
  --tudor-green: #365c2a;
  --tudor-line: rgba(154, 116, 55, 0.34);

  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: clamp(18px, 2.5vw, 26px) !important;
  overflow: hidden !important;

  color: var(--tudor-ink) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(201, 169, 97, 0.18), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(139, 21, 56, 0.075), transparent 30%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(111, 77, 35, 0.018) 3px,
      rgba(111, 77, 35, 0.018) 5px
    ),
    linear-gradient(145deg, #fffaf0 0%, #f7efd9 58%, #f1e4c5 100%) !important;

  border: 1.5px solid rgba(184, 148, 77, 0.78) !important;
  border-radius: 17px !important;
  box-shadow:
    0 12px 30px rgba(52, 37, 17, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;

  font-family: "EB Garamond", "Noto Serif SC", "Source Han Serif SC", "Microsoft YaHei", serif !important;
  font-size: 16.5px !important;
  line-height: 1.88 !important;
  letter-spacing: 0.012em !important;
  overflow-wrap: anywhere !important;
}

/* 纸张内部的细边框；不会遮挡文字 */
.rili-markdown-renderer::after,
#customized-answer-content::after,
.message-content::after,
.ai-response::after,
.group .markdown-body::after,
#ai-chat-answer .markdown-body::after,
.chat-answer-container .markdown-body::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border: 1px solid rgba(184, 148, 77, 0.16) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 30px rgba(139, 21, 56, 0.025) !important;
}

/* ---------- 普通叙事正文 ---------- */
.rili-markdown-renderer > p,
#customized-answer-content > p,
.message-content > p,
.ai-response > p,
.group .markdown-body > p,
#ai-chat-answer .markdown-body > p,
.chat-answer-container .markdown-body > p {
  margin: 0.92em 0 !important;
  color: var(--tudor-ink) !important;
  line-height: 1.95 !important;
  text-shadow: none !important;
}

/* 正文中的人物名、关键词和字段，不影响状态栏内部 */
.rili-markdown-renderer > p strong,
#customized-answer-content > p strong,
.message-content > p strong,
.ai-response > p strong,
.group .markdown-body > p strong,
#ai-chat-answer .markdown-body > p strong,
.chat-answer-container .markdown-body > p strong {
  color: var(--tudor-red) !important;
  -webkit-text-fill-color: var(--tudor-red) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* ---------- 斜体：广告、广播、内心提示等强调文字 ---------- */
.rili-markdown-renderer > p em,
.rili-markdown-renderer > p i,
#customized-answer-content > p em,
#customized-answer-content > p i,
.message-content > p em,
.message-content > p i,
.ai-response > p em,
.ai-response > p i,
.group .markdown-body > p em,
.group .markdown-body > p i,
#ai-chat-answer .markdown-body > p em,
#ai-chat-answer .markdown-body > p i,
.chat-answer-container .markdown-body > p em,
.chat-answer-container .markdown-body > p i {
  padding: 0.05em 0.22em !important;
  color: #7e3150 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  background:
    linear-gradient(
      transparent 58%,
      rgba(201, 169, 97, 0.24) 58%,
      rgba(201, 169, 97, 0.24) 94%,
      transparent 94%
    ) !important;
  border-radius: 3px !important;
  text-shadow: none !important;
}

/* ---------- 对话卡片 ----------
   推荐使用 Markdown：
   > “我来迟了。”
*/
.rili-markdown-renderer > blockquote,
#customized-answer-content > blockquote,
.message-content > blockquote,
.ai-response > blockquote,
.group .markdown-body > blockquote,
#ai-chat-answer .markdown-body > blockquote,
.chat-answer-container .markdown-body > blockquote,
.rili-markdown-renderer > .dialogue,
#customized-answer-content > .dialogue,
.message-content > .dialogue,
.ai-response > .dialogue,
.group .markdown-body > .dialogue,
#ai-chat-answer .markdown-body > .dialogue,
.chat-answer-container .markdown-body > .dialogue {
  position: relative !important;
  margin: 1em 0 !important;
  padding: 0.78em 1.05em 0.78em 1.3em !important;

  color: #64223b !important;
  background:
    linear-gradient(90deg, rgba(139, 21, 56, 0.095), rgba(255, 250, 240, 0.56)) !important;
  border: 0 !important;
  border-left: 4px solid var(--tudor-red) !important;
  border-radius: 0 11px 11px 0 !important;
  box-shadow: inset 0 0 0 1px rgba(139, 21, 56, 0.055) !important;

  font-size: 1.02em !important;
  font-style: normal !important;
  line-height: 1.85 !important;
  text-shadow: none !important;
}

.rili-markdown-renderer > blockquote::before,
#customized-answer-content > blockquote::before,
.message-content > blockquote::before,
.ai-response > blockquote::before,
.group .markdown-body > blockquote::before,
#ai-chat-answer .markdown-body > blockquote::before,
.chat-answer-container .markdown-body > blockquote::before,
.rili-markdown-renderer > .dialogue::before,
#customized-answer-content > .dialogue::before,
.message-content > .dialogue::before,
.ai-response > .dialogue::before,
.group .markdown-body > .dialogue::before,
#ai-chat-answer .markdown-body > .dialogue::before,
.chat-answer-container .markdown-body > .dialogue::before {
  content: "“" !important;
  position: absolute !important;
  left: 0.26em !important;
  top: -0.08em !important;
  color: rgba(139, 21, 56, 0.27) !important;
  font-family: Georgia, serif !important;
  font-size: 2.35em !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 行内对话标签 */
.dialogue-text,
.speech-text,
[data-dialogue],
q {
  color: #7a2142 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

/* 整段只含一个 em 时，也按照“对话/提示”处理。
   当前 Chrome / Edge 可用；不支持 :has() 的环境仍保留上面的斜体颜色。 */
.rili-markdown-renderer > p:has(> em:only-child),
#customized-answer-content > p:has(> em:only-child),
.message-content > p:has(> em:only-child),
.ai-response > p:has(> em:only-child),
.group .markdown-body > p:has(> em:only-child),
#ai-chat-answer .markdown-body > p:has(> em:only-child),
.chat-answer-container .markdown-body > p:has(> em:only-child) {
  padding: 0.7em 0.95em !important;
  color: #6f2943 !important;
  background: rgba(139, 21, 56, 0.065) !important;
  border-left: 3px solid rgba(139, 21, 56, 0.72) !important;
  border-radius: 0 9px 9px 0 !important;
}

/* ---------- 广告 / 广播 / 系统消息 ----------
   可选 HTML 类名：
   .advertisement / .ad-text / .broadcast / .system-message / .notice
*/
.advertisement,
.ad-text,
.broadcast,
.system-message,
.notice,
[data-message-type="advertisement"],
[data-message-type="broadcast"],
[data-message-type="system"] {
  display: block !important;
  margin: 0.85em 0 !important;
  padding: 0.7em 0.9em !important;

  color: #315b39 !important;
  background:
    linear-gradient(90deg, rgba(45, 80, 22, 0.095), rgba(201, 169, 97, 0.09)) !important;
  border: 1px solid rgba(54, 92, 42, 0.19) !important;
  border-left: 3px solid var(--tudor-green) !important;
  border-radius: 9px !important;

  font-family: "Cinzel", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 0.94em !important;
  letter-spacing: 0.025em !important;
  text-shadow: none !important;
}

/* Markdown 高亮 */
.rili-markdown-renderer > p mark,
#customized-answer-content > p mark,
.message-content > p mark,
.ai-response > p mark,
.group .markdown-body > p mark,
#ai-chat-answer .markdown-body > p mark,
.chat-answer-container .markdown-body > p mark {
  padding: 0.08em 0.28em !important;
  color: #5e4217 !important;
  background: rgba(221, 185, 104, 0.34) !important;
  border-radius: 4px !important;
}

/* ---------- 当前网站的正文容器可能自带透明/白色背景，强制覆盖 ---------- */
.rili-markdown-renderer.bg-transparent,
.rili-markdown-renderer[class*="bg-"],
#customized-answer-content.bg-transparent,
#customized-answer-content[class*="bg-"] {
  background:
    radial-gradient(circle at 8% 0%, rgba(201, 169, 97, 0.18), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(139, 21, 56, 0.075), transparent 30%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(111, 77, 35, 0.018) 3px,
      rgba(111, 77, 35, 0.018) 5px
    ),
    linear-gradient(145deg, #fffaf0 0%, #f7efd9 58%, #f1e4c5 100%) !important;
}

/* ---------- 手机端 ---------- */
@media (max-width: 768px) {
  .rili-markdown-renderer,
  #customized-answer-content,
  .message-content,
  .ai-response,
  .group .markdown-body,
  #ai-chat-answer .markdown-body,
  .chat-answer-container .markdown-body {
    padding: 15px !important;
    border-radius: 14px !important;
    font-size: 15.5px !important;
    line-height: 1.84 !important;
  }

  .rili-markdown-renderer > blockquote,
  #customized-answer-content > blockquote,
  .message-content > blockquote,
  .ai-response > blockquote,
  .group .markdown-body > blockquote,
  #ai-chat-answer .markdown-body > blockquote,
  .chat-answer-container .markdown-body > blockquote,
  .rili-markdown-renderer > .dialogue,
  #customized-answer-content > .dialogue,
  .message-content > .dialogue,
  .ai-response > .dialogue,
  .group .markdown-body > .dialogue,
  #ai-chat-answer .markdown-body > .dialogue,
  .chat-answer-container .markdown-body > .dialogue {
    padding: 0.72em 0.85em 0.72em 1.12em !important;
  }
}