/* ============================================
   漫画风格聊天框完整美化方案 - 扩展色彩增强版
   ============================================ */

/* 覆盖外层聊天气泡容器 - AI输出侧和用户侧 */
.relative.inline-block.w-full.bg-gray-100\/90,
.relative.inline-block.max-w-full.bg-gray-100\/90 {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background-image: url('https://tutu.to/image/fTKB4') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: local !important;
  border: 4px solid #333 !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15) !important;
  padding: 24px !important;
  position: relative !important;
}

/* AI输出侧 - 添加米黄色遮罩层 */
.relative.inline-block.w-full.bg-gray-100\/90::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 248, 225, 0.85) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 用户输入侧 - 添加浅蓝色遮罩层区分 */
.relative.inline-block.max-w-full.bg-gray-100\/90::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(232, 245, 248, 0.85) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 确保所有子元素在遮罩层之上 */
.relative.inline-block > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 隐藏原有顶部装饰线 */
.relative.inline-block > .absolute.top-0 {
  display: none !important;
}

/* markdown-body 容器样式调整 */
.markdown-body {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif !important;
  line-height: 1.8 !important;
  color: #2C3E50 !important;
}

/* 段落样式 */
.markdown-body p {
  margin: 16px 0 !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-left: 5px solid #333 !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   彩色对话文字扩展 (支持更多颜色)
   ============================================ */
.markdown-body span[style*="color"] {
  font-weight: bold !important;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.9) !important;
  padding: 2px 6px !important;
  display: inline-block !important;
  border: 2px solid #333 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1) !important;
  transform: rotate(-1deg) !important;
  margin: 0 2px !important;
}

.markdown-body span[style*="pink"] { color: #D81B60 !important; background: linear-gradient(to right, #FCE4EC, #F8BBD0) !important; }
.markdown-body span[style*="purple"] { color: #6A1B9A !important; background: linear-gradient(to right, #F3E5F5, #E1BEE7) !important; }
.markdown-body span[style*="red"] { color: #C62828 !important; background: linear-gradient(to right, #FFEBEE, #FFCDD2) !important; }
.markdown-body span[style*="blue"] { color: #1565C0 !important; background: linear-gradient(to right, #E3F2FD, #BBDEFB) !important; }
.markdown-body span[style*="green"] { color: #2E7D32 !important; background: linear-gradient(to right, #E8F5E9, #C8E6C9) !important; }
.markdown-body span[style*="yellow"] { color: #F57F17 !important; background: linear-gradient(to right, #FFFDE7, #FFF9C4) !important; }
.markdown-body span[style*="orange"] { color: #E65100 !important; background: linear-gradient(to right, #FFF3E0, #FFE0B2) !important; }
.markdown-body span[style*="cyan"] { color: #00838F !important; background: linear-gradient(to right, #E0F7FA, #B2EBF2) !important; }

/* ============================================
   Details折叠块扩容 (12种颜色 + 漫画网点效果)
   ============================================ */
.markdown-body details {
  margin: 20px 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 3px solid #333 !important;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.markdown-body details:hover {
  transform: translateY(-4px) !important;
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.25) !important;
}

.markdown-body details summary {
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  list-style: none !important;
  border-bottom: 3px solid #333 !important;
  transition: all 0.2s ease !important;
  letter-spacing: 1px !important;
  /* 基础网点尺寸 */
  background-size: 6px 6px, 100% 100% !important; 
}

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

/* 1. 天蓝色 */
.markdown-body details:nth-of-type(12n+1) summary {
  background: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 25%), linear-gradient(135deg, #81D4FA 0%, #29B6F6 100%) !important;
  color: #01579B !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 2. 橙黄色 */
.markdown-body details:nth-of-type(12n+2) summary {
  background: radial-gradient(rgba(255,255,255,0.4) 20%, transparent 25%), linear-gradient(135deg, #FFD54F 0%, #FFC107 100%) !important;
  color: #F57F17 !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 3. 粉红色 */
.markdown-body details:nth-of-type(12n+3) summary {
  background: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 25%), linear-gradient(135deg, #F48FB1 0%, #EC407A 100%) !important;
  color: #880E4F !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 4. 薄荷绿 */
.markdown-body details:nth-of-type(12n+4) summary {
  background: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 25%), linear-gradient(135deg, #A5D6A7 0%, #66BB6A 100%) !important;
  color: #1B5E20 !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 5. 亮紫色 */
.markdown-body details:nth-of-type(12n+5) summary {
  background: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 25%), linear-gradient(135deg, #CE93D8 0%, #AB47BC 100%) !important;
  color: #4A148C !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 6. 珊瑚红 */
.markdown-body details:nth-of-type(12n+6) summary {
  background: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 25%), linear-gradient(135deg, #FF8A65 0%, #FF5722 100%) !important;
  color: #BF360C !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 7. 青色 */
.markdown-body details:nth-of-type(12n+7) summary {
  background: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 25%), linear-gradient(135deg, #4DD0E1 0%, #00BCD4 100%) !important;
  color: #006064 !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 8. 青柠色 */
.markdown-body details:nth-of-type(12n+8) summary {
  background: radial-gradient(rgba(255,255,255,0.4) 20%, transparent 25%), linear-gradient(135deg, #DCE775 0%, #CDDC39 100%) !important;
  color: #827717 !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 9. 靛蓝色 */
.markdown-body details:nth-of-type(12n+9) summary {
  background: radial-gradient(rgba(255,255,255,0.2) 20%, transparent 25%), linear-gradient(135deg, #7986CB 0%, #3F51B5 100%) !important;
  color: #1A237E !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 10. 玫瑰红 */
.markdown-body details:nth-of-type(12n+10) summary {
  background: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 25%), linear-gradient(135deg, #F06292 0%, #E91E63 100%) !important;
  color: #880E4F !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 11. 琥珀色 */
.markdown-body details:nth-of-type(12n+11) summary {
  background: radial-gradient(rgba(255,255,255,0.4) 20%, transparent 25%), linear-gradient(135deg, #FFB74D 0%, #FF9800 100%) !important;
  color: #E65100 !important; text-shadow: 1px 1px 0 #FFF !important;
}
/* 12. 灰棕色 */
.markdown-body details:nth-of-type(12n+12) summary {
  background: radial-gradient(rgba(255,255,255,0.2) 20%, transparent 25%), linear-gradient(135deg, #BCAAA4 0%, #8D6E63 100%) !important;
  color: #3E2723 !important; text-shadow: 1px 1px 0 #FFF !important;
}

.markdown-body details summary:hover {
  transform: translateX(6px) !important;
}

/* 展开状态：漫画速度线背景 */
.markdown-body details[open] summary {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.4),
    rgba(255,255,255,0.4) 10px,
    transparent 10px,
    transparent 20px
  ) !important;
  background-size: auto !important;
}

.markdown-body details summary::after {
  content: '▼' !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  font-size: 16px !important;
  color: #333 !important;
  text-shadow: 1px 1px 0 #FFF !important;
}

.markdown-body details[open] summary::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Pre代码块样式 */
.markdown-body pre {
  margin: 0 !important;
  padding: 16px !important;
  background: rgba(255, 254, 247, 0.98) !important;
  border: none !important;
  overflow-x: auto !important;
}

.markdown-body pre div { background: transparent !important; }
.markdown-body code {
  color: #2C3E50 !important;
  font-family: 'Consolas', 'Monaco', monospace !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

.markdown-body .flex.justify-between {
  background: rgba(245, 245, 245, 0.98) !important;
  border-bottom: 3px solid #333 !important;
  padding: 8px 16px !important;
}

.markdown-body .style_copyIcon__GJL9e {
  border: 2px solid #333 !important;
  background: #FFF !important;
  transition: all 0.2s ease !important;
}
.markdown-body .style_copyIcon__GJL9e:hover {
  background: #FFC107 !important;
  transform: translateY(-2px) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

.markdown-body hr {
  border: none !important;
  border-top: 4px dashed #333 !important;
  margin: 24px 0 !important;
}

/* ============================================
   底部按钮组与功能按钮美化 (全面扩容)
   ============================================ */
.MuiStack-root.text-purple-500 {
  margin-top: 16px !important;
  padding: 12px 16px !important;
  background: rgba(243, 229, 245, 0.95) !important;
  border: 3px solid #333 !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
}

.MuiStack-root.css-1dzoql9 {
  margin-top: 16px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 3px solid #333 !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* 聊天框下方功能按钮 & 模块二按钮通用样式 */
.MuiButton-root.css-1t7rg57,
.flex.items-center.gap-2.pb-2 > button {
  background: #fff !important;
  border: 3px solid #333 !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: none !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
  transition: all 0.15s ease !important;
}

.MuiButton-root.css-1t7rg57:hover,
.flex.items-center.gap-2.pb-2 > button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.25) !important;
}

.MuiButton-root.css-1t7rg57:active,
.flex.items-center.gap-2.pb-2 > button:active {
  transform: translateY(0) !important;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* 按钮序列配色扩容 (支持到10个按钮) */
.MuiButton-root.css-1t7rg57:nth-child(10n+1), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+1) { background: #A5D6A7 !important; color: #1B5E20 !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+2), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+2) { background: #81D4FA !important; color: #01579B !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+3), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+3) { background: #FFD54F !important; color: #F57F17 !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+4), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+4) { background: #EF9A9A !important; color: #B71C1C !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+5), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+5) { background: #CE93D8 !important; color: #4A148C !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+6), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+6) { background: #F48FB1 !important; color: #880E4F !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+7), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+7) { background: #80DEEA !important; color: #006064 !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+8), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+8) { background: #FFAB91 !important; color: #BF360C !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+9), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+9) { background: #BCAAA4 !important; color: #3E2723 !important; }
.MuiButton-root.css-1t7rg57:nth-child(10n+10), .flex.items-center.gap-2.pb-2 > button:nth-child(10n+10) { background: #E6EE9C !important; color: #827717 !important; }

/* ============================================
   输入框容器美化
   ============================================ */
#ai-chat-bottom-input {
  background: repeating-linear-gradient(45deg, #FFF9C4, #FFF9C4 10px, #FFF59D 10px, #FFF59D 20px) !important;
  border: 4px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.15) !important;
  padding: 16px !important;
}

#ai-chat-input {
  background-color: #FFFFFF !important;
  border: 3px solid #333 !important;
  border-radius: 0 !important;
  color: #2C3E50 !important;
  box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.05) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  min-height: 80px !important;
}

#ai-chat-input:focus {
  outline: none !important;
  box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px #FFC107 !important;
}

#ai-chat-bottom-input button {
  background: #fff !important;
  border: 3px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
  font-weight: 900 !important;
  padding: 8px 20px !important;
  transition: all 0.15s ease !important;
}

#ai-chat-bottom-input button[type="submit"],
#ai-chat-bottom-input button:has(svg[class*="send"]),
#ai-chat-bottom-input button:last-child {
  background: #66BB6A !important; color: #1B5E20 !important;
}

#ai-chat-bottom-input button:first-child {
  background: #EF9A9A !important; color: #B71C1C !important;
}

#ai-chat-bottom-input button:hover {
  transform: translateY(-3px) !important; box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.25) !important;
}
#ai-chat-bottom-input button:active {
  transform: translateY(0) !important; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   修复版：纯CSS B站仿生弹幕墙
   ============================================ */

/* 外部播放器容器 */
bili {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 240px !important;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  overflow: hidden !important; /* 隐藏超出边界的弹幕 */
  border: 2px solid #333 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
  margin: 16px 0 !important;
}

/* 播放器左下角装饰性水印 */
bili::after {
  content: '▶ 正在播放' !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 16px !important;
  color: rgba(255, 255, 255, 0.2) !important;
  font-size: 12px !important;
  font-weight: bold !important;
  pointer-events: none !important;
  letter-spacing: 2px !important;
}

/* 弹幕基础样式 */
bili d {
  position: absolute !important;
  white-space: nowrap !important;
  font-family: 'SimHei', 'Microsoft YaHei', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
  pointer-events: none !important;
  
  /* 经典B站弹幕重度描边 */
  text-shadow: 
    1px 1px 0 #000, 
    -1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000,
    2px 2px 3px rgba(0, 0, 0, 0.8) !important;
    
  /* 初始位置藏在最右侧外部 */
  left: 100% !important;
  
  /* 挂载动画 */
  animation: danmaku-scroll linear infinite !important;
  animation-duration: 10s !important;
}

/* 修复核心：增加负向偏移量，确保长文本完全没入左侧 */
@keyframes danmaku-scroll {
  0% {
    left: 100%;
    transform: translateX(0);
  }
  100% {
    /* 容器向左多走50%，元素自身向左多走150%，彻底解决突兀消失问题 */
    left: -50%; 
    transform: translateX(-150%); 
  }
}

/* 1. 轨道高度分配 */
bili d:nth-child(7n+1) { top: 12px !important; }
bili d:nth-child(7n+2) { top: 42px !important; }
bili d:nth-child(7n+3) { top: 72px !important; }
bili d:nth-child(7n+4) { top: 102px !important; }
bili d:nth-child(7n+5) { top: 132px !important; }
bili d:nth-child(7n+6) { top: 162px !important; }
bili d:nth-child(7n)   { top: 192px !important; }

/* 2. 滚动速度分配 */
bili d:nth-child(2n)   { animation-duration: 8s !important; }
bili d:nth-child(3n)   { animation-duration: 12s !important; }
bili d:nth-child(5n)   { animation-duration: 6.5s !important; } 
bili d:nth-child(5n+1) { animation-duration: 14s !important; } 
bili d:nth-child(5n+2) { animation-duration: 9.5s !important; }

/* 3. 出场延迟分配 */
bili d:nth-child(2n+1) { animation-delay: 1.2s !important; }
bili d:nth-child(3n+1) { animation-delay: 3.5s !important; }
bili d:nth-child(3n+2) { animation-delay: 0.5s !important; }
bili d:nth-child(5n+3) { animation-delay: 5s !important; }
bili d:nth-child(7n+2) { animation-delay: 2.5s !important; }
bili d:nth-child(11n)  { animation-delay: 7s !important; }

/* 4. 彩色弹幕彩蛋 */
bili d:nth-child(13n) { 
  color: #FFEB3B !important; 
  font-size: 20px !important;
  z-index: 10 !important;
}
bili d:nth-child(17n) { 
  color: #03A9F4 !important; 
}
bili d:nth-child(19n) { 
  color: #F44336 !important; 
}
bili d:nth-child(23n) { 
  color: #4CAF50 !important; 
}
bili d:nth-child(29n) { 
  color: #E91E63 !important; 
  border: 1px solid #E91E63 !important; 
  padding: 0 6px !important;
  border-radius: 4px !important;
  background: rgba(233, 30, 99, 0.2) !important;
}