/* ============================================
   修仙界·苟活传·完整界面美化方案
   ============================================ */

/* === 顶部栏美化 === */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(135deg, 
    rgba(15, 8, 35, 0.97) 0%, 
    rgba(28, 12, 55, 0.97) 40%,
    rgba(20, 35, 65, 0.97) 100%) !important;
  border-bottom: 1px solid rgba(100, 60, 180, 0.6) !important;
  box-shadow: 
    0 2px 20px rgba(80, 40, 160, 0.4),
    0 0 40px rgba(40, 80, 160, 0.2),
    inset 0 -1px 0 rgba(150, 100, 255, 0.3) !important;
  position: relative !important;
}

.sticky.w-full.top-0.flex.items-center::before {
  content: '✦ 苟 活 传 · 修 仙 界 ✦';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(160, 100, 255, 0.5);
  top: 2px;
  pointer-events: none;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

.sticky.w-full.top-0.flex.items-center::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(100, 60, 200, 0.8) 20%,
    rgba(60, 120, 255, 0.9) 50%,
    rgba(100, 60, 200, 0.8) 80%,
    transparent 100%);
  animation: topline-flow 3s linear infinite;
}

@keyframes topline-flow {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
  background: linear-gradient(135deg, 
    rgba(40, 20, 80, 0.9), 
    rgba(20, 40, 90, 0.9)) !important;
  border: 1px solid rgba(120, 70, 220, 0.5) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  box-shadow: 
    0 0 10px rgba(100, 60, 200, 0.3),
    inset 0 0 8px rgba(60, 100, 200, 0.1) !important;
  transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
  border-color: rgba(150, 100, 255, 0.9) !important;
  box-shadow: 
    0 0 15px rgba(120, 70, 220, 0.6),
    0 0 30px rgba(60, 100, 200, 0.3),
    inset 0 0 12px rgba(100, 60, 200, 0.2) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
  color: rgba(180, 140, 255, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 8px rgba(150, 100, 255, 0.6) !important;
}

#ai-model-selector .shrink-0.flex.items-center svg {
  color: rgba(150, 100, 255, 0.8) !important;
  filter: drop-shadow(0 0 3px rgba(120, 70, 220, 0.6)) !important;
}

/* 设置按钮 */
#header-setting-button {
  background: linear-gradient(135deg, 
    rgba(40, 20, 80, 0.8), 
    rgba(20, 40, 90, 0.8)) !important;
  border: 1px solid rgba(100, 60, 180, 0.4) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

#header-setting-button:hover {
  border-color: rgba(150, 100, 255, 0.8) !important;
  box-shadow: 0 0 12px rgba(120, 70, 220, 0.5) !important;
}

#header-setting-button svg {
  color: rgba(160, 110, 255, 0.9) !important;
  filter: drop-shadow(0 0 4px rgba(130, 80, 230, 0.5)) !important;
}

/* === 按钮栏美化（修仙感名称） === */
#ai-mod-button2 {
  background: linear-gradient(180deg,
    rgba(10, 5, 25, 0.6) 0%,
    rgba(15, 8, 35, 0.8) 100%) !important;
  border-top: 1px solid rgba(80, 40, 150, 0.4) !important;
  padding: 6px 8px !important;
  gap: 6px !important;
}

#ai-mod-button2 button.MuiButton-root {
  background: linear-gradient(135deg,
    rgba(35, 15, 70, 0.9) 0%,
    rgba(20, 35, 75, 0.9) 100%) !important;
  border: 1px solid rgba(100, 60, 180, 0.5) !important;
  border-radius: 6px !important;
  color: rgba(180, 140, 255, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  padding: 4px 10px !important;
  min-width: auto !important;
  height: 28px !important;
  text-shadow: 0 0 6px rgba(150, 100, 255, 0.5) !important;
  box-shadow: 
    0 0 8px rgba(80, 40, 160, 0.3),
    inset 0 0 6px rgba(60, 30, 120, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#ai-mod-button2 button.MuiButton-root::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(150, 100, 255, 0.15),
    transparent);
  transition: left 0.4s ease;
}

#ai-mod-button2 button.MuiButton-root:hover::before {
  left: 100%;
}

#ai-mod-button2 button.MuiButton-root:hover {
  border-color: rgba(160, 110, 255, 0.9) !important;
  box-shadow: 
    0 0 15px rgba(120, 70, 220, 0.6),
    0 0 30px rgba(80, 40, 160, 0.3),
    inset 0 0 10px rgba(100, 60, 200, 0.2) !important;
  color: rgba(210, 180, 255, 1) !important;
  transform: translateY(-1px) !important;
}

/* 按钮图标 */
#ai-mod-button2 button.MuiButton-root svg {
  color: rgba(160, 110, 255, 0.9) !important;
  width: 14px !important;
  height: 14px !important;
  filter: drop-shadow(0 0 3px rgba(130, 80, 230, 0.5)) !important;
}

/* === 底部输入栏美化 === */
.bg-gradient-to-t {
  background: linear-gradient(180deg,
    rgba(12, 6, 30, 0.98) 0%,
    rgba(8, 4, 20, 0.95) 100%) !important;
}

#ai-chat-bottom-input {
  background: linear-gradient(135deg,
    rgba(20, 10, 45, 0.95) 0%,
    rgba(15, 25, 55, 0.95) 100%) !important;
  border: 1px solid rgba(100, 60, 180, 0.5) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 0 20px rgba(80, 40, 160, 0.3),
    0 0 40px rgba(40, 80, 160, 0.15),
    inset 0 0 15px rgba(60, 30, 120, 0.2) !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

#ai-chat-bottom-input:focus-within {
  border-color: rgba(150, 100, 255, 0.8) !important;
  box-shadow: 
    0 0 25px rgba(120, 70, 220, 0.5),
    0 0 50px rgba(60, 100, 200, 0.25),
    inset 0 0 20px rgba(80, 40, 160, 0.25) !important;
}

#ai-chat-input {
  background: transparent !important;
  color: rgba(200, 170, 255, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', 'SimSun', serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  caret-color: rgba(160, 110, 255, 0.9) !important;
}

#ai-chat-input::placeholder {
  color: rgba(120, 80, 180, 0.5) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-style: italic !important;
}

#ai-chat-input::selection {
  background: rgba(100, 60, 200, 0.4) !important;
  color: rgba(220, 190, 255, 1) !important;
}

/* === 聊天框美化·修仙特效 === */

/* 整体聊天区域背景 */
div[class*="overflow-y-auto"][class*="flex-1"] {
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(60, 20, 120, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(20, 60, 120, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8, 4, 20, 0.98) 0%, rgba(10, 5, 25, 0.98) 100%) !important;
  position: relative !important;
}

/* AI回复气泡 */
div[class*="prose"] {
  background: linear-gradient(135deg,
    rgba(25, 12, 55, 0.92) 0%,
    rgba(18, 28, 60, 0.92) 100%) !important;
  border: 1px solid rgba(100, 60, 180, 0.4) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  position: relative !important;
  box-shadow: 
    0 0 15px rgba(80, 40, 160, 0.2),
    inset 0 0 20px rgba(40, 20, 80, 0.3) !important;
  color: rgba(200, 175, 240, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', 'SimSun', serif !important;
  line-height: 1.8 !important;
}

/* AI气泡左边框装饰 */
div[class*="prose"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(120, 70, 220, 0.8) 30%,
    rgba(60, 120, 255, 0.9) 50%,
    rgba(120, 70, 220, 0.8) 70%,
    transparent 100%);
  border-radius: 2px;
  animation: side-glow 2s ease-in-out infinite;
}

/* AI气泡右上角符文装饰 */
div[class*="prose"]::after {
  content: '☯';
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  color: rgba(120, 70, 220, 0.3);
  animation: rune-spin 6s linear infinite;
  pointer-events: none;
}

@keyframes side-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes rune-spin {
  0% { transform: rotate(0deg); opacity: 0.2; }
  50% { opacity: 0.5; }
  100% { transform: rotate(360deg); opacity: 0.2; }
}

/* 文字颜色保持可读 */
div[class*="prose"] p,
div[class*="prose"] span,
div[class*="prose"] li,
div[class*="prose"] td {
  color: rgba(200, 175, 240, 0.95) !important;
}

div[class*="prose"] strong {
  color: rgba(200, 160, 255, 1) !important;
  text-shadow: 0 0 6px rgba(160, 100, 255, 0.4) !important;
}

div[class*="prose"] em {
  color: rgba(160, 200, 255, 0.9) !important;
}

div[class*="prose"] h1,
div[class*="prose"] h2,
div[class*="prose"] h3 {
  color: rgba(200, 160, 255, 1) !important;
  text-shadow: 0 0 10px rgba(150, 90, 255, 0.5) !important;
  border-bottom: 1px solid rgba(100, 60, 180, 0.3) !important;
  padding-bottom: 4px !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

/* 代码块 */
div[class*="prose"] code {
  background: rgba(40, 20, 80, 0.8) !important;
  color: rgba(160, 220, 255, 0.95) !important;
  border: 1px solid rgba(80, 60, 150, 0.4) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}

/* 引用块 */
div[class*="prose"] blockquote {
  border-left: 3px solid rgba(120, 70, 220, 0.7) !important;
  background: rgba(40, 20, 80, 0.3) !important;
  color: rgba(180, 150, 230, 0.9) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* 表格 */
div[class*="prose"] table {
  border-collapse: collapse !important;
  width: 100% !important;
}

div[class*="prose"] th {
  background: linear-gradient(135deg,
    rgba(60, 30, 120, 0.8),
    rgba(30, 60, 120, 0.8)) !important;
  color: rgba(200, 160, 255, 1) !important;
  border: 1px solid rgba(100, 60, 180, 0.4) !important;
  padding: 6px 10px !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

div[class*="prose"] td {
  background: rgba(20, 10, 45, 0.6) !important;
  border: 1px solid rgba(80, 40, 150, 0.3) !important;
  padding: 5px 10px !important;
  color: rgba(190, 165, 235, 0.9) !important;
}

div[class*="prose"] tr:hover td {
  background: rgba(40, 20, 80, 0.5) !important;
}

/* details折叠组件美化 */
details {
  background: linear-gradient(135deg,
    rgba(20, 10, 45, 0.9) 0%,
    rgba(15, 25, 55, 0.9) 100%) !important;
  border: 1px solid rgba(90, 50, 170, 0.4) !important;
  border-radius: 10px !important;
  margin: 6px 0 !important;
  overflow: hidden !important;
  box-shadow: 
    0 2px 12px rgba(60, 30, 120, 0.2),
    inset 0 0 15px rgba(30, 15, 60, 0.3) !important;
  transition: all 0.3s ease !important;
}

details[open] {
  border-color: rgba(120, 70, 220, 0.6) !important;
  box-shadow: 
    0 4px 20px rgba(80, 40, 160, 0.35),
    inset 0 0 20px rgba(40, 20, 80, 0.3) !important;
}

details > summary {
  background: linear-gradient(135deg,
    rgba(40, 18, 85, 0.95) 0%,
    rgba(22, 40, 88, 0.95) 100%) !important;
  color: rgba(190, 150, 255, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  border-bottom: 1px solid rgba(90, 50, 160, 0.3) !important;
  text-shadow: 0 0 8px rgba(150, 90, 255, 0.4) !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

details > summary::before {
  content: '◈';
  color: rgba(120, 70, 220, 0.8);
  font-size: 12px;
  animation: diamond-pulse 2s ease-in-out infinite;
}

details > summary::after {
  content: '▾';
  position: absolute;
  right: 14px;
  color: rgba(150, 100, 255, 0.7);
  transition: transform 0.3s ease;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

details > summary:hover {
  background: linear-gradient(135deg,
    rgba(55, 25, 110, 0.95) 0%,
    rgba(28, 52, 110, 0.95) 100%) !important;
  color: rgba(220, 185, 255, 1) !important;
}

@keyframes diamond-pulse {
  0%, 100% { 
    color: rgba(120, 70, 220, 0.8);
    text-shadow: none;
  }
  50% { 
    color: rgba(160, 110, 255, 1);
    text-shadow: 0 0 6px rgba(150, 90, 255, 0.6);
  }
}

details > *:not(summary) {
  padding: 10px 14px !important;
  color: rgba(185, 160, 230, 0.9) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  line-height: 1.7 !important;
}

/* === 思考动画·修仙版 === */
@keyframes xiu-think-1 {
  0% { content: '⊙ 推演天机中 ·'; }
  14% { content: '⊙ 推演天机中 · ·'; }
  28% { content: '⊙ 推演天机中 · · ·'; }
  42% { content: '◎ 气运流转中 · · ·'; }
  56% { content: '◎ 卜算命数中 · ·'; }
  70% { content: '✦ 参悟大道中 ·'; }
  84% { content: '✦ 窥探天机中 · ·'; }
  100% { content: '⊙ 推演天机中 ·'; }
}

@keyframes thinking-border {
  0% { border-color: rgba(100, 60, 200, 0.4); }
  25% { border-color: rgba(60, 100, 220, 0.6); }
  50% { border-color: rgba(120, 70, 220, 0.8); }
  75% { border-color: rgba(80, 120, 240, 0.6); }
  100% { border-color: rgba(100, 60, 200, 0.4); }
}

@keyframes thinking-glow {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(80, 40, 160, 0.3),
                inset 0 0 10px rgba(40, 20, 80, 0.2);
  }
  50% { 
    box-shadow: 0 0 25px rgba(100, 60, 200, 0.6),
                0 0 50px rgba(60, 100, 220, 0.3),
                inset 0 0 20px rgba(60, 30, 120, 0.3);
  }
}

@keyframes rune-float {
  0% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
  33% { transform: translateY(-3px) rotate(120deg); opacity: 0.7; }
  66% { transform: translateY(2px) rotate(240deg); opacity: 0.4; }
  100% { transform: translateY(0px) rotate(360deg); opacity: 0.3; }
}

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

/* 思考状态容器（通用加载/思考块） */
div[class*="thinking"],
div[class*="loading"],
div[class*="generating"] {
  background: linear-gradient(135deg,
    rgba(20, 10, 50, 0.95) 0%,
    rgba(15, 28, 60, 0.95) 50%,
    rgba(20, 10, 50, 0.95) 100%) !important;
  background-size: 200% 200% !important;
  animation: 
    thinking-border 2s ease-in-out infinite,
    thinking-glow 2s ease-in-out infinite,
    qi-flow 4s ease infinite !important;
  border: 1px solid rgba(100, 60, 200, 0.5) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  position: relative !important;
  overflow: hidden !important;
}

div[class*="thinking"]::before,
div[class*="loading"]::before {
  content: '⊙ 推演天机中 · · ·';
  color: rgba(160, 110, 255, 0.9) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 8px rgba(140, 90, 255, 0.6) !important;
  animation: xiu-think-1 3s steps(1) infinite !important;
}

div[class*="thinking"]::after,
div[class*="loading"]::after {
  content: '☯ ✦ ◈ ✦ ☯';
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 9px;
  color: rgba(100, 60, 180, 0.4);
  letter-spacing: 3px;
  animation: rune-float 3s ease-in-out infinite;
  pointer-events: none;
}

/* 流动灵气线条（思考动画背景） */
div[class*="thinking"] .thinking-line,
div[class*="loading"] .thinking-line {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(120, 70, 220, 0.6),
    rgba(60, 120, 255, 0.8),
    rgba(120, 70, 220, 0.6),
    transparent);
  animation: qi-line-flow 2s linear infinite;
}

@keyframes qi-line-flow {
  0% { left: -60%; top: 0; }
  50% { left: 100%; top: 0; }
  50.1% { left: -60%; top: auto; bottom: 0; }
  100% { left: 100%; bottom: 0; }
}

/* === 分页栏美化 === */
.MuiPaginationItem-root {
  background: linear-gradient(135deg,
    rgba(35, 15, 70, 0.9),
    rgba(20, 35, 75, 0.9)) !important;
  border: 1px solid rgba(90, 50, 160, 0.4) !important;
  color: rgba(170, 130, 255, 0.9) !important;
  border-radius: 6px !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
  border-color: rgba(140, 90, 240, 0.8) !important;
  box-shadow: 0 0 10px rgba(110, 60, 210, 0.5) !important;
  color: rgba(210, 180, 255, 1) !important;
}

.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg,
    rgba(80, 40, 160, 0.9),
    rgba(40, 80, 180, 0.9)) !important;
  border-color: rgba(140, 90, 240, 0.8) !important;
  color: rgba(220, 190, 255, 1) !important;
  box-shadow: 
    0 0 12px rgba(110, 60, 210, 0.6),
    inset 0 0 8px rgba(60, 30, 120, 0.3) !important;
}

.MuiPaginationItem-root.Mui-disabled {
  opacity: 0.3 !important;
}

.MuiPaginationItem-icon {
  color: rgba(150, 100, 255, 0.8) !important;
}

.MuiStack-root.css-1uwir8f {
  background: rgba(20, 10, 45, 0.8) !important;
  border: 1px solid rgba(80, 40, 150, 0.3) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
  color: rgba(160, 120, 240, 0.9) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

.MuiInputBase-input {
  color: rgba(180, 140, 255, 0.95) !important;
  background: rgba(30, 15, 65, 0.8) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* === 评论区美化 === */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: linear-gradient(180deg,
    rgba(12, 6, 30, 0.98) 0%,
    rgba(15, 8, 38, 0.98) 100%) !important;
  border-top: 1px solid rgba(90, 50, 170, 0.5) !important;
  box-shadow: 0 -4px 20px rgba(60, 30, 120, 0.3) !important;
}

div.text-lg.font-bold {
  color: rgba(190, 150, 255, 1) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  text-shadow: 0 0 10px rgba(150, 90, 255, 0.5) !important;
  letter-spacing: 2px !important;
}

p.MuiTypography-body1.text-grey-600 {
  color: rgba(150, 110, 220, 0.8) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

span.MuiRating-iconEmpty svg {
  color: rgba(80, 50, 140, 0.5) !important;
}

span.MuiRating-iconFilled svg {
  color: rgba(180, 120, 255, 0.9) !important;
  filter: drop-shadow(0 0 4px rgba(150, 90, 255, 0.5)) !important;
}

span.text-orange-500 {
  color: rgba(180, 120, 255, 0.95) !important;
  text-shadow: 0 0 6px rgba(150, 90, 255, 0.5) !important;
}

div.flex.flex-col.border-gray-200 {
  border-color: rgba(90, 50, 160, 0.4) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(20, 10, 45, 0.8) !important;
}

textarea.rc-textarea {
  background: rgba(15, 8, 35, 0.9) !important;
  color: rgba(190, 160, 240, 0.95) !important;
  border: none !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  caret-color: rgba(160, 110, 255, 0.9) !important;
}

div.bg-gray-100.text-gray-500 {
  background: rgba(25, 12, 55, 0.8) !important;
  color: rgba(120, 80, 180, 0.7) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  border-top: 1px solid rgba(80, 40, 150, 0.3) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
  background: linear-gradient(135deg,
    rgba(70, 35, 140, 0.9),
    rgba(35, 70, 160, 0.9)) !important;
  border: 1px solid rgba(120, 70, 220, 0.5) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
  border-color: rgba(160, 110, 255, 0.9) !important;
  box-shadow: 0 0 15px rgba(120, 70, 220, 0.6) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
  color: rgba(180, 140, 255, 0.9) !important;
  filter: drop-shadow(0 0 4px rgba(150, 90, 255, 0.5)) !important;
}

div.style_divider__mW0YX {
  background: linear-gradient(90deg,
    transparent,
    rgba(100, 60, 180, 0.5),
    transparent) !important;
  height: 1px !important;
}

.MuiStack-root.css-1dmzxoz {
  gap: 6px !important;
}

button.MuiButton-containedPrimary {
  background: linear-gradient(135deg,
    rgba(80, 40, 160, 0.95),
    rgba(40, 80, 180, 0.95)) !important;
  border: 1px solid rgba(130, 80, 230, 0.7) !important;
  color: rgba(220, 190, 255, 1) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  box-shadow: 0 0 10px rgba(100, 60, 200, 0.4) !important;
  border-radius: 6px !important;
}

button.MuiButton-outlinedPrimary {
  background: rgba(25, 12, 55, 0.8) !important;
  border: 1px solid rgba(90, 50, 160, 0.5) !important;
  color: rgba(160, 120, 240, 0.9) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  border-radius: 6px !important;
}

button.MuiButton-outlinedPrimary:hover {
  border-color: rgba(130, 80, 230, 0.8) !important;
  background: rgba(40, 20, 80, 0.8) !important;
}

div.p-3.overflow-y-auto {
  background: transparent !important;
}

div.group.ml-0 {
  border-bottom: 1px solid rgba(70, 35, 130, 0.2) !important;
  padding: 8px 0 !important;
  transition: background 0.2s ease !important;
}

div.group.ml-0:hover {
  background: rgba(40, 20, 80, 0.2) !important;
  border-radius: 8px !important;
}

div.text-sm.text-grey-600 span.font-bold {
  color: rgba(180, 140, 255, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

span.text-\[10px\] {
  background: rgba(80, 40, 160, 0.6) !important;
  color: rgba(180, 140, 255, 0.9) !important;
  border: 1px solid rgba(110, 65, 200, 0.5) !important;
  border-radius: 3px !important;
  padding: 0 3px !important;
}

div.break-all {
  color: rgba(185, 160, 230, 0.9) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  line-height: 1.6 !important;
}

div.text-xs.text-grey-600 {
  color: rgba(110, 75, 180, 0.6) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

button.text-gray-400 {
  color: rgba(120, 80, 190, 0.6) !important;
  transition: all 0.2s ease !important;
}

button.text-gray-400:hover {
  color: rgba(170, 130, 255, 0.9) !important;
}

button.text-gray-400 svg {
  filter: drop-shadow(0 0 2px rgba(120, 70, 220, 0.3)) !important;
}

span.cursor-pointer {
  color: rgba(140, 90, 230, 0.8) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  transition: all 0.2s ease !important;
}

span.cursor-pointer:hover {
  color: rgba(180, 140, 255, 1) !important;
  text-shadow: 0 0 6px rgba(150, 90, 255, 0.5) !important;
}

div.ml-8.border-l {
  border-left-color: rgba(90, 50, 160, 0.4) !important;
}

/* === 开场白美化 === */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background: linear-gradient(135deg,
    rgba(35, 15, 70, 0.95),
    rgba(20, 35, 80, 0.95)) !important;
  border: 1px solid rgba(100, 60, 180, 0.5) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 10px rgba(80, 40, 160, 0.2) !important;
  transition: all 0.3s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  border-color: rgba(150, 100, 255, 0.8) !important;
  box-shadow: 0 0 15px rgba(120, 70, 220, 0.5) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: rgba(160, 110, 255, 0.9) !important;
  filter: drop-shadow(0 0 3px rgba(130, 80, 230, 0.5)) !important;
}

/* === 全局滚动条美化 === */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

::-webkit-scrollbar-track {
  background: rgba(10, 5, 25, 0.8) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(80, 40, 160, 0.6),
    rgba(40, 80, 180, 0.6)) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(120, 70, 220, 0.8),
    rgba(60, 110, 220, 0.8)) !important;
}

/* === 全局选中效果 === */
::selection {
  background: rgba(100, 60, 200, 0.35) !important;
  color: rgba(220, 190, 255, 1) !important;
}
/* ============================================
   修仙界·对话聊天框专项美化方案
   ============================================ */

/* === 聊天整体容器背景 === */
div[class*="overflow-y-auto"][class*="flex-1"],
div[class*="overflow-y-auto"][class*="grow"] {
  background:
    radial-gradient(ellipse at 10% 10%, rgba(80, 30, 160, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(30, 70, 160, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(50, 20, 100, 0.04) 0%, transparent 70%),
    linear-gradient(180deg,
      rgba(8, 4, 22, 0.99) 0%,
      rgba(10, 5, 28, 0.99) 50%,
      rgba(8, 4, 22, 0.99) 100%) !important;
  position: relative !important;
}

/* 背景浮动符文层 */
div[class*="overflow-y-auto"][class*="flex-1"]::before {
  content: '☯  ✦  ◈  ⊕  ✦  ☯  ◈  ⊕  ✦  ☯';
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 11px !important;
  letter-spacing: 20px !important;
  color: rgba(100, 55, 200, 0.04) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  animation: bg-rune-drift 20s linear infinite !important;
  z-index: 0 !important;
}

@keyframes bg-rune-drift {
  0% { opacity: 0.03; letter-spacing: 18px; }
  50% { opacity: 0.06; letter-spacing: 22px; }
  100% { opacity: 0.03; letter-spacing: 18px; }
}

/* ============================================
   AI 回复气泡·完整修仙化
   ============================================ */

/* AI消息外层容器 */
div[class*="prose"],
div[class*="markdown"],
div[class*="message-content"],
div[class*="chat-message"] {
  background: linear-gradient(145deg,
    rgba(18, 8, 42, 0.96) 0%,
    rgba(14, 22, 52, 0.96) 45%,
    rgba(18, 8, 42, 0.96) 100%) !important;
  border: 1px solid rgba(90, 48, 175, 0.45) !important;
  border-radius: 14px !important;
  padding: 16px 20px 16px 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 24px rgba(60, 25, 130, 0.25),
    0 1px 4px rgba(30, 10, 70, 0.4),
    inset 0 0 30px rgba(30, 12, 70, 0.25),
    inset 0 1px 0 rgba(140, 85, 255, 0.08) !important;
  transition: box-shadow 0.4s ease !important;
  font-family: 'STKaiti', 'KaiTi', 'SimSun', serif !important;
  line-height: 1.85 !important;
  color: rgba(198, 172, 242, 0.95) !important;
}

div[class*="prose"]:hover,
div[class*="markdown"]:hover {
  box-shadow:
    0 6px 32px rgba(80, 35, 160, 0.35),
    0 2px 8px rgba(40, 15, 90, 0.5),
    inset 0 0 35px rgba(40, 16, 85, 0.3),
    inset 0 1px 0 rgba(160, 100, 255, 0.12) !important;
  border-color: rgba(115, 62, 210, 0.6) !important;
}

/* 左侧灵气竖线装饰 */
div[class*="prose"]::before,
div[class*="markdown"]::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(100, 55, 210, 0.6) 15%,
    rgba(70, 120, 255, 0.9) 35%,
    rgba(130, 75, 230, 0.95) 50%,
    rgba(70, 120, 255, 0.9) 65%,
    rgba(100, 55, 210, 0.6) 85%,
    transparent 100%) !important;
  border-radius: 0 2px 2px 0 !important;
  animation: qi-vein-pulse 3s ease-in-out infinite !important;
}

@keyframes qi-vein-pulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: none;
  }
  50% {
    opacity: 1;
    box-shadow: 2px 0 12px rgba(100, 55, 210, 0.5),
                2px 0 25px rgba(70, 120, 255, 0.3);
  }
}

/* 右上角符文装饰 */
div[class*="prose"]::after,
div[class*="markdown"]::after {
  content: '☯' !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 11px !important;
  color: rgba(110, 60, 210, 0.25) !important;
  animation: corner-rune 8s linear infinite !important;
  pointer-events: none !important;
}

@keyframes corner-rune {
  0% { transform: rotate(0deg); opacity: 0.15; }
  25% { opacity: 0.35; }
  50% { transform: rotate(180deg); opacity: 0.15; }
  75% { opacity: 0.35; }
  100% { transform: rotate(360deg); opacity: 0.15; }
}

/* 气泡内顶部流光线 */
div[class*="prose"] > *:first-child::before,
div[class*="markdown"] > *:first-child::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 3px !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    rgba(100, 55, 210, 0.6) 0%,
    rgba(70, 130, 255, 0.8) 30%,
    rgba(140, 80, 255, 0.9) 50%,
    rgba(70, 130, 255, 0.8) 70%,
    transparent 100%) !important;
  animation: top-qi-flow 4s ease-in-out infinite !important;
}

@keyframes top-qi-flow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ============================================
   气泡内文字元素样式
   ============================================ */

/* 正文段落 */
div[class*="prose"] p,
div[class*="markdown"] p {
  color: rgba(198, 172, 242, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', 'SimSun', serif !important;
  line-height: 1.85 !important;
  margin: 6px 0 !important;
  text-shadow: 0 0 1px rgba(150, 110, 230, 0.1) !important;
}

/* 加粗文字 */
div[class*="prose"] strong,
div[class*="markdown"] strong {
  color: rgba(210, 172, 255, 1) !important;
  font-weight: bold !important;
  text-shadow:
    0 0 8px rgba(170, 110, 255, 0.45),
    0 0 16px rgba(130, 75, 230, 0.2) !important;
}

/* 斜体 */
div[class*="prose"] em,
div[class*="markdown"] em {
  color: rgba(150, 200, 255, 0.92) !important;
  font-style: italic !important;
  text-shadow: 0 0 6px rgba(80, 150, 255, 0.3) !important;
}

/* 标题 H1 */
div[class*="prose"] h1,
div[class*="markdown"] h1 {
  color: rgba(215, 175, 255, 1) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 18px !important;
  letter-spacing: 3px !important;
  text-shadow:
    0 0 12px rgba(170, 110, 255, 0.55),
    0 0 25px rgba(120, 70, 220, 0.25) !important;
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg,
    rgba(120, 65, 220, 0.8),
    rgba(70, 130, 255, 0.9),
    rgba(120, 65, 220, 0.8)) 1 !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
  position: relative !important;
}

div[class*="prose"] h1::after,
div[class*="markdown"] h1::after {
  content: ' ✦ ' !important;
  font-size: 12px !important;
  color: rgba(130, 80, 230, 0.5) !important;
  animation: title-star 2s ease-in-out infinite !important;
}

@keyframes title-star {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; text-shadow: 0 0 6px rgba(150, 90, 255, 0.6); }
}

/* 标题 H2 */
div[class*="prose"] h2,
div[class*="markdown"] h2 {
  color: rgba(200, 162, 255, 1) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 10px rgba(160, 100, 255, 0.45) !important;
  border-bottom: 1px solid rgba(100, 55, 200, 0.35) !important;
  padding-bottom: 4px !important;
  margin-bottom: 8px !important;
}

/* 标题 H3 */
div[class*="prose"] h3,
div[class*="markdown"] h3 {
  color: rgba(185, 150, 250, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 8px rgba(150, 90, 255, 0.35) !important;
}

/* 无序列表 */
div[class*="prose"] ul,
div[class*="markdown"] ul {
  padding-left: 18px !important;
  list-style: none !important;
}

div[class*="prose"] ul li,
div[class*="markdown"] ul li {
  color: rgba(192, 165, 238, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  position: relative !important;
  padding-left: 16px !important;
  margin: 4px 0 !important;
  line-height: 1.8 !important;
}

div[class*="prose"] ul li::before,
div[class*="markdown"] ul li::before {
  content: '◈' !important;
  position: absolute !important;
  left: 0 !important;
  color: rgba(120, 70, 220, 0.75) !important;
  font-size: 10px !important;
  top: 4px !important;
  animation: li-marker-glow 3s ease-in-out infinite !important;
}

@keyframes li-marker-glow {
  0%, 100% { color: rgba(100, 55, 200, 0.6); }
  50% { color: rgba(150, 95, 255, 0.95); text-shadow: 0 0 5px rgba(140, 85, 255, 0.5); }
}

/* 有序列表 */
div[class*="prose"] ol,
div[class*="markdown"] ol {
  padding-left: 20px !important;
}

div[class*="prose"] ol li,
div[class*="markdown"] ol li {
  color: rgba(192, 165, 238, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  line-height: 1.8 !important;
  margin: 4px 0 !important;
}

div[class*="prose"] ol li::marker,
div[class*="markdown"] ol li::marker {
  color: rgba(130, 80, 230, 0.8) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
}

/* 行内代码 */
div[class*="prose"] code,
div[class*="markdown"] code {
  background: linear-gradient(135deg,
    rgba(35, 15, 75, 0.9),
    rgba(20, 40, 85, 0.9)) !important;
  color: rgba(155, 215, 255, 0.95) !important;
  border: 1px solid rgba(80, 55, 155, 0.45) !important;
  border-radius: 5px !important;
  padding: 1px 6px !important;
  font-size: 12px !important;
  font-family: 'Consolas', 'Monaco', monospace !important;
  text-shadow: 0 0 6px rgba(100, 180, 255, 0.3) !important;
}

/* 代码块 */
div[class*="prose"] pre,
div[class*="markdown"] pre {
  background: linear-gradient(145deg,
    rgba(12, 6, 30, 0.97),
    rgba(10, 18, 40, 0.97)) !important;
  border: 1px solid rgba(80, 45, 160, 0.45) !important;
  border-left: 3px solid rgba(100, 55, 210, 0.8) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  overflow-x: auto !important;
  box-shadow:
    0 2px 16px rgba(50, 20, 110, 0.3),
    inset 0 0 20px rgba(20, 8, 50, 0.4) !important;
  position: relative !important;
}

div[class*="prose"] pre::before,
div[class*="markdown"] pre::before {
  content: '// 道法自然' !important;
  position: absolute !important;
  top: 6px !important;
  right: 12px !important;
  font-size: 10px !important;
  color: rgba(100, 60, 190, 0.4) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  letter-spacing: 1px !important;
}

div[class*="prose"] pre code,
div[class*="markdown"] pre code {
  background: transparent !important;
  border: none !important;
  color: rgba(170, 215, 255, 0.92) !important;
  padding: 0 !important;
  font-size: 13px !important;
}

/* 引用块 */
div[class*="prose"] blockquote,
div[class*="markdown"] blockquote {
  background: linear-gradient(135deg,
    rgba(35, 15, 75, 0.6),
    rgba(20, 35, 75, 0.6)) !important;
  border: none !important;
  border-left: 3px solid rgba(120, 70, 220, 0.8) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 10px 16px !important;
  margin: 8px 0 !important;
  color: rgba(175, 148, 230, 0.9) !important;
  font-style: italic !important;
  position: relative !important;
  box-shadow: inset 0 0 15px rgba(60, 25, 120, 0.2) !important;
}

div[class*="prose"] blockquote::before,
div[class*="markdown"] blockquote::before {
  content: '❝' !important;
  position: absolute !important;
  top: -2px !important;
  left: 8px !important;
  font-size: 18px !important;
  color: rgba(120, 70, 220, 0.4) !important;
  font-style: normal !important;
}

/* 分割线 */
div[class*="prose"] hr,
div[class*="markdown"] hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(90, 48, 185, 0.5) 20%,
    rgba(65, 120, 255, 0.8) 50%,
    rgba(90, 48, 185, 0.5) 80%,
    transparent 100%) !important;
  margin: 14px 0 !important;
  position: relative !important;
}

div[class*="prose"] hr::after,
div[class*="markdown"] hr::after {
  content: '✦' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(12, 6, 30, 0.98) !important;
  padding: 0 8px !important;
  color: rgba(120, 70, 220, 0.7) !important;
  font-size: 10px !important;
  animation: hr-star 3s ease-in-out infinite !important;
}

@keyframes hr-star {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; text-shadow: 0 0 6px rgba(140, 85, 255, 0.6); }
}

/* 表格 */
div[class*="prose"] table,
div[class*="markdown"] table {
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(50, 20, 110, 0.25) !important;
  margin: 10px 0 !important;
}

div[class*="prose"] thead,
div[class*="markdown"] thead {
  background: linear-gradient(135deg,
    rgba(55, 25, 115, 0.95),
    rgba(28, 55, 120, 0.95)) !important;
}

div[class*="prose"] th,
div[class*="markdown"] th {
  color: rgba(210, 175, 255, 1) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(90, 50, 175, 0.4) !important;
  text-shadow: 0 0 8px rgba(160, 100, 255, 0.4) !important;
  font-weight: bold !important;
}

div[class*="prose"] tbody tr,
div[class*="markdown"] tbody tr {
  background: rgba(16, 8, 38, 0.75) !important;
  transition: background 0.25s ease !important;
}

div[class*="prose"] tbody tr:nth-child(even),
div[class*="markdown"] tbody tr:nth-child(even) {
  background: rgba(22, 11, 50, 0.75) !important;
}

div[class*="prose"] tbody tr:hover,
div[class*="markdown"] tbody tr:hover {
  background: rgba(45, 20, 95, 0.65) !important;
}

div[class*="prose"] td,
div[class*="markdown"] td {
  color: rgba(188, 162, 235, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(75, 38, 150, 0.3) !important;
  line-height: 1.7 !important;
}

/* ============================================
   details 折叠块·状态栏专项美化
   ============================================ */

div[class*="prose"] details,
div[class*="markdown"] details {
  background: linear-gradient(145deg,
    rgba(14, 7, 35, 0.97) 0%,
    rgba(12, 20, 48, 0.97) 100%) !important;
  border: 1px solid rgba(85, 45, 168, 0.5) !important;
  border-radius: 12px !important;
  margin: 8px 0 !important;
  overflow: hidden !important;
  box-shadow:
    0 3px 18px rgba(55, 22, 115, 0.28),
    inset 0 0 25px rgba(25, 10, 60, 0.35) !important;
  transition: all 0.35s ease !important;
  position: relative !important;
}

div[class*="prose"] details::before,
div[class*="markdown"] details::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(110, 60, 220, 0.7),
    rgba(65, 125, 255, 0.85),
    rgba(110, 60, 220, 0.7),
    transparent) !important;
  animation: details-top-glow 4s ease-in-out infinite !important;
}

@keyframes details-top-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

div[class*="prose"] details[open],
div[class*="markdown"] details[open] {
  border-color: rgba(118, 65, 225, 0.7) !important;
  box-shadow:
    0 5px 28px rgba(75, 32, 155, 0.42),
    inset 0 0 30px rgba(35, 14, 80, 0.38) !important;
}

/* summary 标题行 */
div[class*="prose"] details > summary,
div[class*="markdown"] details > summary {
  background: linear-gradient(135deg,
    rgba(38, 16, 82, 0.98) 0%,
    rgba(22, 38, 88, 0.98) 100%) !important;
  color: rgba(192, 152, 255, 0.98) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  padding: 9px 16px 9px 14px !important;
  cursor: pointer !important;
  border-bottom: 1px solid rgba(85, 45, 168, 0.35) !important;
  text-shadow: 0 0 10px rgba(155, 95, 255, 0.45) !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  user-select: none !important;
}

div[class*="prose"] details > summary::before,
div[class*="markdown"] details > summary::before {
  content: '◈' !important;
  color: rgba(125, 72, 228, 0.85) !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  animation: summary-diamond 2.5s ease-in-out infinite !important;
}

@keyframes summary-diamond {
  0%, 100% {
    color: rgba(105, 58, 208, 0.7);
    text-shadow: none;
  }
  50% {
    color: rgba(165, 112, 255, 1);
    text-shadow: 0 0 7px rgba(155, 95, 255, 0.65);
  }
}

div[class*="prose"] details > summary::after,
div[class*="markdown"] details > summary::after {
  content: '▾' !important;
  position: absolute !important;
  right: 14px !important;
  color: rgba(145, 95, 250, 0.75) !important;
  font-size: 13px !important;
  transition: transform 0.3s ease !important;
}

div[class*="prose"] details[open] > summary::after,
div[class*="markdown"] details[open] > summary::after {
  transform: rotate(180deg) !important;
}

div[class*="prose"] details > summary:hover,
div[class*="markdown"] details > summary:hover {
  background: linear-gradient(135deg,
    rgba(52, 22, 108, 0.98) 0%,
    rgba(28, 50, 108, 0.98) 100%) !important;
  color: rgba(218, 185, 255, 1) !important;
}

/* details 内容区域 */
div[class*="prose"] details > *:not(summary),
div[class*="markdown"] details > *:not(summary) {
  padding: 10px 16px !important;
  color: rgba(182, 155, 232, 0.92) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  line-height: 1.75 !important;
  font-size: 13px !important;
}

/* details 内部表格特化 */
div[class*="prose"] details table,
div[class*="markdown"] details table {
  font-size: 12px !important;
}

div[class*="prose"] details th,
div[class*="markdown"] details th {
  font-size: 12px !important;
  padding: 6px 10px !important;
}

div[class*="prose"] details td,
div[class*="markdown"] details td {
  font-size: 12px !important;
  padding: 5px 10px !important;
}

/* ============================================
   用户输入气泡
   ============================================ */

div[class*="user-message"],
div[class*="human-message"],
div[class*="user-turn"] {
  background: linear-gradient(135deg,
    rgba(28, 12, 65, 0.92) 0%,
    rgba(18, 30, 68, 0.92) 100%) !important;
  border: 1px solid rgba(75, 40, 155, 0.4) !important;
  border-right: 3px solid rgba(90, 145, 255, 0.75) !important;
  border-radius: 14px !important;
  padding: 12px 20px 12px 18px !important;
  position: relative !important;
  box-shadow:
    0 3px 18px rgba(45, 18, 100, 0.22),
    inset 0 0 22px rgba(22, 10, 55, 0.28) !important;
  color: rgba(188, 165, 238, 0.95) !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  line-height: 1.8 !important;
}

div[class*="user-message"]::after,
div[class*="human-message"]::after {
  content: '✦' !important;
  position: absolute !important;
  bottom: 7px !important;
  left: 12px !important;
  font-size: 9px !important;
  color: rgba(90, 145, 255, 0.3) !important;
  animation: user-star 4s ease-in-out infinite !important;
}

@keyframes user-star {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

/* ============================================
   思考动画·修仙推演版（完整）
   ============================================ */

/* 思考容器 */
div[class*="thinking"],
div[class*="loading-message"],
div[class*="streaming"] {
  background: linear-gradient(145deg,
    rgba(16, 7, 38, 0.97) 0%,
    rgba(12, 20, 48, 0.97) 50%,
    rgba(16, 7, 38, 0.97) 100%) !important;
  background-size: 300% 300% !important;
  border: 1px solid rgba(90, 48, 180, 0.5) !important;
  border-radius: 14px !important;
  padding: 14px 20px 14px 24px !important;
  position: relative !important;
  overflow: hidden !important;
  animation:
    think-qi-flow 5s ease infinite,
    think-border-breathe 2.5s ease-in-out infinite !important;
  font-family: 'STKaiti', 'KaiTi', serif !important;
  color: rgba(175, 138, 255, 0.9) !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
}

@keyframes think-qi-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes think-border-breathe {
  0%, 100% {
    border-color: rgba(90, 48, 180, 0.4);
    box-shadow: 0 0 12px rgba(70, 30, 150, 0.2),
                inset 0 0 15px rgba(30, 12, 70, 0.2);
  }
  50% {
    border-color: rgba(140, 80, 255, 0.75);
    box-shadow: 0 0 28px rgba(110, 55, 220, 0.55),
                0 0 55px rgba(65, 115, 255, 0.25),
                inset 0 0 25px rgba(55, 22, 115, 0.32);
  }
}

/* 思考左侧灵气线 */
div[class*="thinking"]::before,
div[class*="loading-message"]::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(100, 55, 210, 0.5) 20%,
    rgba(70, 130, 255, 0.9) 50%,
    rgba(100, 55, 210, 0.5) 80%,
    transparent 100%) !important;
  animation: think-vein 1.5s ease-in-out infinite !important;
}

@keyframes think-vein {
  0%, 100% {
    opacity: 0.4;
    background-position: 0% 0%;
  }
  50% {
    opacity: 1;
    box-shadow: 2px 0 14px rgba(100, 55, 210, 0.6);
  }
}

/* 思考底部符文流 */
div[class*="thinking"]::after,
div[class*="loading-message"]::after {
  content: '⊕ · · · ◈ · · · ☯ · · · ✦ · · · ⊕' !important;
  position: absolute !important;
  bottom: 5px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 9px !important;
  color: rgba(100, 55, 200, 0.35) !important;
  letter-spacing: 3px !important;
  animation: rune-scroll 6s linear infinite !important;
  pointer-events: none !important;
}

@keyframes rune-scroll {
  0% { letter-spacing: 2px; opacity: 0.25; }
  50% { letter-spacing: 5px; opacity: 0.55; }
  100% { letter-spacing: 2px; opacity: 0.25; }
}

/* 思考文字动画 */
@keyframes think-text-cycle {
  0%    { content: '⊙ 推演天机中 ·'; }
  12%   { content: '⊙ 推演天机中 · ·'; }
  24%   { content: '⊙ 推演天机中 · · ·'; }
  36%   { content: '◎ 气运流转中 · · ·'; }
  48%   { content: '◎ 卜算命数中 · ·'; }
  60%   { content: '✦ 参悟大道中 ·'; }
  72%   { content: '✦ 窥探天机中 · ·'; }
  84%   { content: '☯ 演化剧情中 · · ·'; }
  100%  { content: '⊙ 推演天机中 ·'; }
}

div[class*="thinking"] span:first-child::before,
div[class*="loading-message"] span:first-child::before {
  animation: think-text-cycle 4s steps(1) infinite !important;
  color: rgba(165, 118, 255, 0.92) !important;
  text-shadow: 0 0 10px rgba(145, 90, 255, 0.5) !important;
}

/* ============================================
   流式输出光标
   ============================================ */

div[class*="streaming"]::after,
div[class*="generating"]::after {
  content: '|' !important;
  color: rgba(140, 88, 255, 0.9) !important;
  animation: cursor-blink 0.8s step-end infinite !important;
  text-shadow: 0 0 8px rgba(130, 78, 245, 0.7) !important;
  font-weight: 100 !important;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================
   四角符文装饰（气泡悬停触发）
   ============================================ */

div[class*="prose"]:hover::before {
  animation: qi-vein-pulse 1.5s ease-in-out infinite !important;
}

/* 底部流光线（悬停时加强） */
div[class*="prose"]:hover {
  background: linear-gradient(145deg,
    rgba(20, 9, 46, 0.97) 0%,
    rgba(16, 25, 58, 0.97) 45%,
    rgba(20, 9, 46, 0.97) 100%) !important;
}

/* ============================================
   消息间距与整体布局
   ============================================ */

div[class*="message-wrapper"],
div[class*="chat-turn"],
div[class*="conversation-turn"] {
  margin: 10px 0 !important;
  padding: 0 12px !important;
}

/* ============================================
   链接样式
   ============================================ */

div[class*="prose"] a,
div[class*="markdown"] a {
  color: rgba(130, 185, 255, 0.92) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(90, 150, 255, 0.35) !important;
  transition: all 0.25s ease !important;
}

div[class*="prose"] a:hover,
div[class*="markdown"] a:hover {
  color: rgba(170, 210, 255, 1) !important;
  border-bottom-color: rgba(120, 175, 255, 0.7) !important;
  text-shadow: 0 0 8px rgba(100, 165, 255, 0.4) !important;
}