/* ================================================
   PNEUMA 霓虹经脉 v3.1 - 完整合并版（修正版）
   回复格式 + 界面美化 + 加载动画
   ================================================ */

/* ===== 动画定义 ===== */
@keyframes hexSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes hexSpinR {
  from { transform: translate(-50%,-50%) rotate(360deg); }
  to { transform: translate(-50%,-50%) rotate(0deg); }
}
@keyframes hexGlow {
  0%,100% { opacity: 0.5; filter: drop-shadow(0 0 6px rgba(0,240,255,0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 18px rgba(0,240,255,0.7)) drop-shadow(0 0 35px rgba(168,85,247,0.35)); }
}
@keyframes breatheBorder {
  0%,100% { border-color: rgba(0,240,255,0.1); box-shadow: 0 0 12px rgba(0,240,255,0.02); }
  50% { border-color: rgba(0,240,255,0.28); box-shadow: 0 0 22px rgba(0,240,255,0.06), 0 0 45px rgba(168,85,247,0.025); }
}
@keyframes scanline {
  0% { left: -100%; }
  100% { left: 200%; }
}
@keyframes neonFlicker {
  0%,91%,94%,97%,100% { opacity: 1; }
  92% { opacity: 0.82; }
  95% { opacity: 0.88; }
}
@keyframes slideInLeft {
  from { width: 0; }
  to { width: 2px; }
}
@keyframes dataFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================
   PART 1: AI思考加载动画 - 双六芒星居中旋转
   ================================================ */
.dot-flashing {
  width: 56px !important;
  height: 56px !important;
  margin: 24px auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  position: relative !important;
}
.dot-flashing::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%) !important;
  outline: 2px solid #00f0ff !important;
  outline-offset: -1px !important;
  animation: hexSpin 3s linear infinite, hexGlow 2s ease-in-out infinite !important;
}
.dot-flashing::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%) !important;
  outline: 2px solid #a855f7 !important;
  outline-offset: -1px !important;
  animation: hexSpinR 2.4s linear infinite, hexGlow 2s ease-in-out infinite 0.6s !important;
}

/* ================================================
   PART 2: 回复格式样式 - <ai>容器内全部结构
   ================================================ */

/* --- 容器总体 --- */
ai {
  display: block !important;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important;
  color: #b0b8c8 !important;
  line-height: 1.7 !important;
  font-size: 14.5px !important;
  position: relative !important;
}

/* --- 顶部状态条 <hd> --- */
ai hd {
  display: block !important;
  background: linear-gradient(135deg, rgba(0,240,255,0.04) 0%, rgba(168,85,247,0.03) 100%) !important;
  border: 1px solid rgba(0,240,255,0.1) !important;
  border-left: 3px solid !important;
  border-image: linear-gradient(180deg, #00f0ff, #a855f7) 1 !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}
ai hd::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.03), transparent) !important;
  animation: scanline 5s ease infinite !important;
}
ai hd d {
  display: block !important;
  color: #6a8a9a !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  line-height: 1.8 !important;
}
ai hd d:first-child {
  color: #8ecfda !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-shadow: 0 0 8px rgba(0,240,255,0.1) !important;
}

/* --- 正文 <text> --- */
ai text {
  display: block !important;
  padding: 4px 2px 16px !important;
  position: relative !important;
}
ai text p {
  color: #c8ced8 !important;
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  margin-bottom: 10px !important;
  text-align: justify !important;
}

/* ====== 首字放大效果已删除 ====== */

/* --- details/summary 折叠块通用 --- */
ai details {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(0,240,255,0.08) !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
  background: rgba(6,6,16,0.5) !important;
  overflow: hidden !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
ai details:hover {
  border-color: rgba(0,240,255,0.2) !important;
  box-shadow: 0 0 12px rgba(0,240,255,0.03) !important;
}
ai details[open] {
  border-color: rgba(0,240,255,0.18) !important;
}
ai details summary {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  background: linear-gradient(135deg, rgba(0,240,255,0.03), rgba(168,85,247,0.02)) !important;
  color: #8ecfda !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  list-style: none !important;
  position: relative !important;
  transition: background 0.3s ease !important;
  user-select: none !important;
  border-bottom: 1px solid rgba(0,240,255,0.05) !important;
}
ai details summary::-webkit-details-marker {
  display: none !important;
}
ai details summary::after {
  content: '▸' !important;
  position: absolute !important;
  right: 12px !important;
  color: #00f0ff !important;
  font-size: 12px !important;
  transition: transform 0.3s ease !important;
  filter: drop-shadow(0 0 4px rgba(0,240,255,0.3)) !important;
}
ai details[open] summary::after {
  transform: rotate(90deg) !important;
}
ai details summary:hover {
  background: linear-gradient(135deg, rgba(0,240,255,0.06), rgba(168,85,247,0.04)) !important;
}

/* --- <f> 字段名标签 --- */
ai f {
  display: inline !important;
  color: #00cfe0 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 5px rgba(0,240,255,0.1) !important;
  margin-right: 2px !important;
}
ai f::after {
  content: ': ' !important;
  color: #2a4a5a !important;
}

/* --- <d> 数据行 --- */
ai d {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #8a92a8 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  padding: 2px 12px !important;
  position: relative !important;
  transition: all 0.25s ease !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
ai d::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 60% !important;
  background: linear-gradient(180deg, #00f0ff, #a855f7) !important;
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
  opacity: 0 !important;
}
ai d:hover {
  color: #b8c0d4 !important;
  padding-left: 16px !important;
}
ai d:hover::before {
  width: 2px !important;
  opacity: 1 !important;
  box-shadow: 0 0 6px rgba(0,240,255,0.25) !important;
}

/* hd内的d不要hover效果 */
ai hd d::before {
  display: none !important;
}
ai hd d:hover {
  padding-left: 0 !important;
  color: #6a8a9a !important;
}
ai hd d:first-child:hover {
  color: #8ecfda !important;
}

/* 场景NPC第一行名称特殊处理 */
ai details[open] > d:first-of-type f {
  color: #c084fc !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(168,85,247,0.15) !important;
}
ai details[open] > d:first-of-type f::after {
  content: '' !important;
}

/* ================================================
   PART 3: 界面美化
   ================================================ */

/* ===== 顶部栏 ===== */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(180deg, rgba(8,8,18,0.98) 0%, rgba(10,10,22,0.95) 100%) !important;
  border-bottom: 1px solid rgba(0,240,255,0.1) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4), 0 1px 0 rgba(0,240,255,0.05) !important;
  position: relative !important;
}
.sticky.w-full.top-0.flex.items-center::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 5%, rgba(0,240,255,0.35) 30%, rgba(168,85,247,0.25) 70%, transparent 95%) !important;
}
#ai-model-selector .group.flex.items-center {
  background: rgba(0,240,255,0.04) !important;
  border: 1px solid rgba(0,240,255,0.1) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
  border-color: rgba(0,240,255,0.3) !important;
  background: rgba(0,240,255,0.08) !important;
  box-shadow: 0 0 12px rgba(0,240,255,0.08) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
  color: #8ecfda !important;
  font-family: 'Noto Sans SC', system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 0 6px rgba(0,240,255,0.1) !important;
}
#ai-model-selector .shrink-0.flex.items-center svg {
  color: #00f0ff !important;
  filter: drop-shadow(0 0 4px rgba(0,240,255,0.3)) !important;
  transition: transform 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover .shrink-0.flex.items-center svg {
  transform: rotate(180deg) !important;
}
.sticky.w-full.top-0 svg.lucide-clock-8 {
  color: #5a7a8a !important;
  transition: color 0.3s ease, filter 0.3s ease !important;
}
.sticky.w-full.top-0 svg.lucide-clock-8:hover {
  color: #00f0ff !important;
  filter: drop-shadow(0 0 6px rgba(0,240,255,0.3)) !important;
}
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background: #a855f7 !important;
  box-shadow: 0 0 8px rgba(168,85,247,0.5) !important;
}
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #5a7a8a !important;
  transition: all 0.3s ease !important;
}
.sticky.w-full.top-0 button.MuiIconButton-root:hover svg.lucide-music-2 {
  color: #a855f7 !important;
  filter: drop-shadow(0 0 6px rgba(168,85,247,0.4)) !important;
}
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
  color: #5a7a8a !important;
  transition: color 0.3s ease !important;
}
#header-setting-button {
  transition: all 0.3s ease !important;
}
#header-setting-button:hover {
  background: rgba(0,240,255,0.06) !important;
  border-radius: 8px !important;
}
#header-setting-button svg {
  color: #5a7a8a !important;
  transition: all 0.3s ease !important;
}
#header-setting-button:hover svg {
  color: #00f0ff !important;
  filter: drop-shadow(0 0 6px rgba(0,240,255,0.3)) !important;
  transform: rotate(45deg) !important;
}

/* ===== 开场白选择器 ===== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background: rgba(10,10,22,0.9) !important;
  border: 1px solid rgba(0,240,255,0.12) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.04), transparent) !important;
  animation: scanline 4s ease infinite !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  border-color: rgba(0,240,255,0.35) !important;
  background: rgba(0,240,255,0.05) !important;
  box-shadow: 0 0 15px rgba(0,240,255,0.08) !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] {
  color: #00f0ff !important;
  filter: drop-shadow(0 0 3px rgba(0,240,255,0.3)) !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #5a7a8a !important;
  transition: all 0.3s ease !important;
}
div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="ChevronDown"] {
  color: #00f0ff !important;
  transform: rotate(180deg) !important;
}

/* ===== 按钮栏 ===== */
#ai-mod-button2 {
  background: linear-gradient(180deg, rgba(10,10,20,0.95) 0%, rgba(8,8,18,0.98) 100%) !important;
  border-top: 1px solid rgba(0,240,255,0.08) !important;
  border-bottom: 1px solid rgba(168,85,247,0.06) !important;
  padding: 8px 6px !important;
  position: relative !important;
}
#ai-mod-button2::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 5%, rgba(0,240,255,0.35) 30%, rgba(168,85,247,0.3) 70%, transparent 95%) !important;
}
#ai-mod-button2 button.MuiButton-root {
  background: rgba(0,240,255,0.04) !important;
  border: 1px solid rgba(0,240,255,0.12) !important;
  border-radius: 8px !important;
  color: #7ab8c8 !important;
  font-family: 'Noto Sans SC', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  transition: all 0.35s ease !important;
  text-shadow: 0 0 6px rgba(0,240,255,0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}
#ai-mod-button2 button.MuiButton-root::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.06), transparent) !important;
  transition: left 0.5s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
  background: rgba(0,240,255,0.1) !important;
  border-color: rgba(0,240,255,0.4) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 18px rgba(0,240,255,0.12), inset 0 0 10px rgba(0,240,255,0.03) !important;
  text-shadow: 0 0 10px rgba(0,240,255,0.3) !important;
}
#ai-mod-button2 button.MuiButton-root:hover::after {
  left: 100% !important;
}
#ai-mod-button2 button.MuiButton-root:active {
  transform: scale(0.96) !important;
}
#ai-mod-button2 button.MuiButton-root svg {
  color: #00f0ff !important;
  filter: drop-shadow(0 0 4px rgba(0,240,255,0.25)) !important;
  transition: filter 0.3s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover svg {
  filter: drop-shadow(0 0 8px rgba(0,240,255,0.5)) !important;
}

/* ===== 底部栏 ===== */
.bg-gradient-to-t {
  background: linear-gradient(to top, rgba(8,8,18,0.99) 60%, rgba(8,8,18,0.85) 85%, transparent 100%) !important;
}
#ai-chat-bottom-input {
  background: rgba(12,12,25,0.95) !important;
  border: 1px solid rgba(0,240,255,0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0,240,255,0.03), inset 0 0 12px rgba(0,0,0,0.25) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  animation: breatheBorder 4s ease-in-out infinite !important;
}
#ai-chat-bottom-input:focus-within {
  border-color: rgba(0,240,255,0.4) !important;
  box-shadow: 0 0 30px rgba(0,240,255,0.1), 0 0 60px rgba(168,85,247,0.04), inset 0 0 15px rgba(0,240,255,0.03) !important;
  animation: none !important;
}
#ai-chat-input {
  background: transparent !important;
  color: #c0c8d8 !important;
  font-family: 'Noto Sans SC', system-ui, sans-serif !important;
  font-size: 14px !important;
  caret-color: #00f0ff !important;
  line-height: 1.6 !important;
}
#ai-chat-input::placeholder {
  color: #2a3a52 !important;
  font-style: italic !important;
  letter-spacing: 0.05em !important;
}
#ai-chat-input::selection {
  background: rgba(0,240,255,0.2) !important;
  color: #e0e8f0 !important;
}

/* ===== 分页栏 ===== */
.MuiPaginationItem-root {
  color: #5a6a8a !important;
  border-color: rgba(0,240,255,0.1) !important;
  font-family: 'Orbitron', 'Noto Sans SC', system-ui, sans-serif !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
  background: rgba(10,10,25,0.5) !important;
}
.MuiPaginationItem-root:hover {
  color: #00f0ff !important;
  border-color: rgba(0,240,255,0.3) !important;
  background: rgba(0,240,255,0.06) !important;
  box-shadow: 0 0 10px rgba(0,240,255,0.08) !important;
}
.MuiPaginationItem-root.Mui-selected {
  background: rgba(0,240,255,0.12) !important;
  color: #00f0ff !important;
  border-color: rgba(0,240,255,0.4) !important;
  box-shadow: 0 0 15px rgba(0,240,255,0.12), inset 0 0 8px rgba(0,240,255,0.04) !important;
  text-shadow: 0 0 6px rgba(0,240,255,0.25) !important;
}
.MuiPaginationItem-root.Mui-disabled {
  color: #1a2a3a !important;
  border-color: rgba(0,240,255,0.04) !important;
  background: rgba(5,5,15,0.3) !important;
}
.MuiPaginationItem-icon {
  color: #00f0ff !important;
  filter: drop-shadow(0 0 3px rgba(0,240,255,0.2)) !important;
}

/* ===== 评论区 ===== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: linear-gradient(180deg, rgba(10,10,22,0.98) 0%, rgba(6,6,16,0.99) 100%) !important;
  border-top: 1px solid rgba(0,240,255,0.06) !important;
  color: #8a90a4 !important;
}
div.text-lg.font-bold {
  color: #c0c8d8 !important;
  font-family: 'Noto Sans SC', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 8px rgba(0,240,255,0.1) !important;
  position: relative !important;
  animation: neonFlicker 5s ease infinite !important;
}
div.text-lg.font-bold::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 45px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #00f0ff, #a855f7) !important;
  border-radius: 1px !important;
  box-shadow: 0 0 8px rgba(0,240,255,0.3) !important;
}
textarea.rc-textarea {
  background: rgba(5,5,15,0.7) !important;
  color: #b0b8c8 !important;
  font-family: 'Noto Sans SC', system-ui, sans-serif !important;
  font-size: 14px !important;
  border: 1px solid rgba(0,240,255,0.08) !important;
  border-radius: 8px !important;
  caret-color: #00f0ff !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  line-height: 1.7 !important;
}
textarea.rc-textarea:focus {
  border-color: rgba(0,240,255,0.3) !important;
  box-shadow: 0 0 15px rgba(0,240,255,0.06) !important;
}
div.cursor-pointer.group.flex.items-center.justify-center {
  background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(168,85,247,0.06)) !important;
  border: 1px solid rgba(0,240,255,0.18) !important;
  border-radius: 8px !important;
  transition: all 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
div.cursor-pointer.group.flex.items-center.justify-center::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.08), transparent) !important;
  transition: left 0.4s ease !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
  background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(168,85,247,0.12)) !important;
  border-color: rgba(0,240,255,0.45) !important;
  box-shadow: 0 0 20px rgba(0,240,255,0.1) !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover::before {
  left: 200% !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
  color: #00f0ff !important;
  filter: drop-shadow(0 0 5px rgba(0,240,255,0.3)) !important;
  transition: all 0.3s ease !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover svg[data-icon="Send03"] {
  filter: drop-shadow(0 0 10px rgba(0,240,255,0.6)) !important;
  transform: scale(1.15) !important;
}
span.MuiRating-iconEmpty svg {
  color: #1a2a3a !important;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
  filter: drop-shadow(0 0 2px rgba(0,240,255,0.05)) !important;
}
span.MuiRating-iconFilled svg {
  color: #00f0ff !important;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
  filter: drop-shadow(0 0 8px rgba(0,240,255,0.5)) drop-shadow(0 0 15px rgba(0,240,255,0.2)) !important;
  transition: filter 0.3s ease, transform 0.3s ease !important;
}
span.MuiRating-iconFilled svg:hover {
  filter: drop-shadow(0 0 12px rgba(0,240,255,0.7)) drop-shadow(0 0 25px rgba(168,85,247,0.3)) !important;
  transform: scale(1.2) !important;
}
div.group.ml-0 {
  border-bottom: 1px solid rgba(0,240,255,0.04) !important;
  transition: background 0.3s ease !important;
  position: relative !important;
}
div.group.ml-0::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 2px !important;
  height: 0 !important;
  background: linear-gradient(180deg, #00f0ff, #a855f7) !important;
  transition: height 0.4s ease !important;
  border-radius: 1px !important;
}
div.group.ml-0:hover {
  background: rgba(0,240,255,0.012) !important;
}
div.group.ml-0:hover::before {
  height: 100% !important;
}
div.group img.rounded-full {
  border: 2px solid rgba(0,240,255,0.12) !important;
  box-shadow: 0 0 8px rgba(0,240,255,0.06) !important;
  transition: all 0.4s ease !important;
}
div.group.ml-0:hover img.rounded-full {
  border-color: rgba(0,240,255,0.4) !important;
  box-shadow: 0 0 15px rgba(0,240,255,0.15), 0 0 30px rgba(168,85,247,0.06) !important;
}
footer {
  background: rgba(6,6,14,0.98) !important;
  border-top: 1px solid rgba(0,240,255,0.05) !important;
  position: relative !important;
}
footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.2), rgba(168,85,247,0.15), transparent) !important;
}
footer a {
  color: #2a3a4a !important;
  font-family: 'Noto Sans SC', system-ui, sans-serif !important;
  font-size: 11px !important;
  text-decoration: none !important;
  letter-spacing: 0.1em !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}
footer a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 1px !important;
  background: #00f0ff !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}
footer a:hover {
  color: #00f0ff !important;
  text-shadow: 0 0 8px rgba(0,240,255,0.2) !important;
}
footer a:hover::after {
  width: 80% !important;
}

/* ================================================
   PART 4: 聊天框美化 - 输入/输出气泡
   ================================================ */

/* ===== 隐藏顶部默认颜色条 ===== */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
  display: none !important;
}

/* ===== 统一聊天框(输入+输出) ===== */
.bg-gray-100\/90.relative.inline-block {
  background: linear-gradient(145deg, rgba(8,10,22,0.92) 0%, rgba(12,14,28,0.88) 50%, rgba(8,10,22,0.92) 100%) !important;
  border: 1px solid rgba(0,240,255,0.1) !important;
  border-radius: 12px !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.35),
    0 0 1px rgba(0,240,255,0.08),
    inset 0 1px 0 rgba(0,240,255,0.04) !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.bg-gray-100\/90.relative.inline-block:hover {
  border-color: rgba(0,240,255,0.22) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.4),
    0 0 20px rgba(0,240,255,0.04),
    inset 0 1px 0 rgba(0,240,255,0.06) !important;
}

/* ===== 聊天框背景装饰伪元素(微光扫描线) ===== */
.bg-gray-100\/90.relative.inline-block::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.015), transparent) !important;
  animation: scanline 6s ease infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.bg-gray-100\/90.relative.inline-block::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 10%, rgba(0,240,255,0.12) 40%, rgba(168,85,247,0.08) 60%, transparent 90%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ===== 单独输入聊天框(用户发送) ===== */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  border-color: rgba(168,85,247,0.12) !important;
  background: linear-gradient(145deg, rgba(14,10,28,0.92) 0%, rgba(18,12,32,0.88) 50%, rgba(14,10,28,0.92) 100%) !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.35),
    0 0 1px rgba(168,85,247,0.1),
    inset 0 1px 0 rgba(168,85,247,0.05) !important;
}
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90):hover {
  border-color: rgba(168,85,247,0.28) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.4),
    0 0 18px rgba(168,85,247,0.05),
    inset 0 1px 0 rgba(168,85,247,0.08) !important;
}
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after {
  background: linear-gradient(90deg, transparent 10%, rgba(168,85,247,0.12) 40%, rgba(0,240,255,0.06) 60%, transparent 90%) !important;
}

/* ===== 聊天框内文本 ===== */
.markdown-body {
  color: #c8ced8 !important;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  background: transparent !important;
  z-index: 1 !important;
  position: relative !important;
}

/* ===== 底部操作按钮(复制/编辑/删除等) ===== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
  color: #4a5a7a !important;
  font-family: 'Noto Sans SC', system-ui, sans-serif !important;
  font-size: 12px !important;
  transition: all 0.3s ease !important;
  border-radius: 6px !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
  color: #00f0ff !important;
  background: rgba(0,240,255,0.06) !important;
  text-shadow: 0 0 8px rgba(0,240,255,0.15) !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary svg {
  color: inherit !important;
  transition: all 0.3s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover svg {
  filter: drop-shadow(0 0 4px rgba(0,240,255,0.3)) !important;
}

/* ===== 模型名称文本 ===== */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: #3a4a6a !important;
  font-family: 'Orbitron', 'Noto Sans SC', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 4px rgba(0,240,255,0.06) !important;
}

/* ===== Token消耗文本 ===== */
.text-orange-500 {
  color: #00f0ff !important;
  font-family: 'Orbitron', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-shadow: 0 0 6px rgba(0,240,255,0.2) !important;
  letter-spacing: 0.05em !important;
}

/* ===== 加载动画 - 双六芒星旋转 ===== */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
  display: none !important;
}
.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 16px auto !important;
}
.flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 40px !important;
  height: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 93.3,27 93.3,77 50,102 6.7,77 6.7,27' fill='none' stroke='%2300f0ff' stroke-width='2.5'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 52' to='360 50 52' dur='3s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform: translate(-50%,-50%) !important;
  filter: drop-shadow(0 0 10px rgba(0,240,255,0.5)) !important;
  z-index: 1 !important;
}
.flex.items-center.justify-center.w-6.h-5::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 26px !important;
  height: 26px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 93.3,27 93.3,77 50,102 6.7,77 6.7,27' fill='none' stroke='%23a855f7' stroke-width='3'%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 50 52' to='0 50 52' dur='2.4s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform: translate(-50%,-50%) !important;
  filter: drop-shadow(0 0 8px rgba(168,85,247,0.5)) !important;
  z-index: 2 !important;
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
  .flex.items-center.justify-center.w-6.h-5 {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 12px auto !important;
  }
  .flex.items-center.justify-center.w-6.h-5::before {
    width: 34px !important;
    height: 34px !important;
  }
  .flex.items-center.justify-center.w-6.h-5::after {
    width: 22px !important;
    height: 22px !important;
  }
  .markdown-body {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  ai hd {
    padding: 6px 10px !important;
  }
  ai details summary {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }
  ai d {
    font-size: 12.5px !important;
    padding: 2px 10px !important;
  }
}

/* ===== 低动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  .bg-gray-100\/90.relative.inline-block::before {
    animation-duration: 12s !important;
  }
  .flex.items-center.justify-center.w-6.h-5::before,
  .flex.items-center.justify-center.w-6.h-5::after {
    filter: none !important;
  }
}