/* 魔物娘风格 CSS 美化 - 适用于风月平台内置CSS */
/* 整体风格：暗黑奇幻，深紫/暗红主色调，加入魔物元素如爪痕、鳞片、蝙蝠等装饰 */
/* 适配手机端和电脑端，确保可读性和视觉层次感 */

/* ---------- 全局字体与颜色基调 ---------- */
* {
  /* 默认字体颜色设为浅色，保证深色背景可读 */
  color: #f0e6d2 !important; /* 米白 */
  border-color: #b380aa !important; /* 粉紫边框基调 */
}

/* 修正SVG图标颜色 */
svg {
  fill: #d4af37 !important; /* 金色图标 */
  stroke: #d4af37 !important;
}

/* ---------- 对话气泡美化 (AI侧与用户侧) ---------- */
/* AI对话气泡容器 */
.chat-answer-container .relative.inline-block {
  background: #2d1b3a !important; /* 深紫背景 */
  border: 2px solid #8b4c6a !important; /* 暗红边框 */
  border-radius: 20px 20px 20px 4px !important; /* 异形圆角，模拟魔物不对称 */
  box-shadow: 0 0 15px rgba(180, 80, 120, 0.6) !important; /* 粉紫光晕 */
  padding: 12px !important;
  position: relative;
  overflow: hidden; /* 隐藏溢出的装饰 */
}

/* AI气泡顶部装饰线改为魔物触须样式 */
.chat-answer-container .absolute.top-0.right-1/2 {
  background: linear-gradient(90deg, #d4af37, #b380aa, #5e2a2a) !important;
  height: 4px !important;
  width: 80% !important;
  border-radius: 50% !important;
  transform: translateX(50%) scaleX(1.2) !important;
  filter: drop-shadow(0 0 4px #ff66aa);
}

/* AI气泡内文字颜色（正文） */
.chat-answer-container .markdown-body p {
  color: #f3e3d0 !important;
}

/* 用户对话气泡容器 */
.group.relative.ml-2 .relative.inline-block {
  background: #3c1f3e !important; /* 暗紫红 */
  border: 2px solid #a65a6a !important;
  border-radius: 20px 20px 4px 20px !important; /* 镜像不对称 */
  box-shadow: 0 0 12px rgba(200, 100, 150, 0.5) !important;
  padding: 12px !important;
  overflow: hidden;
}

/* 用户气泡顶部装饰线 */
.group.relative.ml-2 .absolute.top-0.left-1/2 {
  background: linear-gradient(90deg, #5e2a2a, #b380aa, #d4af37) !important;
  height: 4px !important;
  width: 80% !important;
  border-radius: 50% !important;
  transform: translateX(-50%) scaleX(1.2) !important;
}

/* 用户气泡内文字 */
.group.relative.ml-2 .markdown-body p {
  color: #f3e3d0 !important;
}

/* 气泡内操作按钮（复制/编辑/删除等） */
.MuiButton-root.css-1t7rg57 {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid #b380aa !important;
  border-radius: 12px !important;
  color: #f0e6d2 !important;
  padding: 4px 8px !important;
  margin: 2px !important;
  transition: all 0.2s !important;
}
.MuiButton-root.css-1t7rg57:hover {
  background: #5e2a2a !important;
  border-color: #d4af37 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 8px #ff99cc !important;
}
/* 按钮内图标颜色 */
.MuiButton-root.css-1t7rg57 svg {
  fill: #d4af37 !important;
}

/* ---------- 平台按钮美化 (mod/评论/回到底部等) ---------- */
.flex.items-center.gap-2.pb-2 > button {
  background: #2d1b3a !important;
  border: 2px solid #8b4c6a !important;
  border-radius: 30px !important; /* 圆润，但加入魔物尖刺效果通过伪元素 */
  box-shadow: 0 4px 0 #4a1e2a !important; /* 立体下沉感 */
  color: #f0e6d2 !important;
  font-weight: bold !important;
  padding: 8px 18px !important;
  position: relative;
  overflow: visible;
  transition: all 0.15s !important;
}
/* 添加魔物尖刺装饰（伪元素） */
.flex.items-center.gap-2.pb-2 > button::after {
  content: "▲";
  position: absolute;
  top: -8px;
  right: 5px;
  color: #b380aa;
  font-size: 12px;
  text-shadow: 0 0 4px #ff66aa;
  transform: rotate(15deg);
}
.flex.items-center.gap-2.pb-2 > button::before {
  content: "▼";
  position: absolute;
  bottom: -8px;
  left: 5px;
  color: #b380aa;
  font-size: 12px;
  text-shadow: 0 0 4px #ff66aa;
  transform: rotate(-10deg);
}
/* 悬停效果 */
.flex.items-center.gap-2.pb-2 > button:hover {
  background: #4a2a4a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #4a1e2a, 0 0 15px #ff99cc !important;
}

/* ---------- 输入栏美化 (textarea与发送按钮) ---------- */
#ai-chat-input {
  background-color: #1e121f !important;
  border: 2px solid #8b4c6a !important;
  border-radius: 16px !important;
  color: #f0e6d2 !important;
  padding: 10px !important;
  box-shadow: inset 0 0 10px rgba(180, 80, 120, 0.3) !important;
}
#ai-chat-bottom-input {
  background: transparent !important;
}
/* 输入框容器 */
.p-\[5\.5px\].max-h-\[150px\].bg-white.border-\[1\.5px\].border-gray-200.rounded-xl.overflow-y-auto {
  background: #2d1b3a !important;
  border-color: #b380aa !important;
  border-width: 2px !important;
  box-shadow: 0 0 20px rgba(200, 100, 200, 0.3) !important;
}
/* 发送按钮 */
#ai-send-button {
  background: #3c1f3e !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  border: 2px solid #d4af37 !important;
  transition: all 0.2s !important;
}
#ai-send-button:hover {
  background: #5e2a2a !important;
  transform: scale(1.1) rotate(10deg) !important;
  box-shadow: 0 0 15px #ff66aa !important;
}
#ai-send-button svg {
  color: #d4af37 !important;
  fill: #d4af37 !important;
  font-size: 24px !important;
}
/* 字数统计 */
.flex.items-center.px-1.h-5.rounded-md.bg-gray-100.text-xs.font-medium.text-gray-500 {
  background: #1e121f !important;
  color: #b380aa !important;
  border: 1px solid #8b4c6a !important;
}

/* ---------- 折叠状态栏 (details 包裹的魔物状态栏) ---------- */
/* 针对使用 <details class="status-container"> 的结构 */
details.status-container {
  background: #2d1b3a !important;
  border: 2px solid #b380aa !important;
  border-radius: 24px 8px 24px 8px !important;
  padding: 12px !important;
  margin: 10px 0 !important;
  box-shadow: 0 0 20px rgba(180, 80, 120, 0.4) !important;
}
details.status-container summary {
  font-size: 1.2em !important;
  color: #d4af37 !important;
  text-shadow: 0 0 5px #ff66aa;
  list-style: none; /* 隐藏默认三角 */
  position: relative;
  padding-left: 24px;
}
details.status-container summary::before {
  content: "🐉"; /* 魔物图标 */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
}
/* 状态内容区域 */
div.status-content {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px dashed #b380aa !important;
  border-radius: 12px !important;
  padding: 10px !important;
  margin-top: 10px !important;
}
/* 状态栏内部的 p 段落 */
div.status-content p {
  color: #f0e6d2 !important;
  font-size: 0.95em !important;
  line-height: 1.6 !important;
  border-bottom: 1px dotted #8b4c6a !important;
  padding: 4px 0 !important;
}
/* markdown 表格美化 */
div.status-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #1e121f !important;
  border: 2px solid #b380aa !important;
  border-radius: 12px !important;
  overflow: hidden;
}
div.status-content th {
  background: #5e2a2a !important;
  color: #d4af37 !important;
  padding: 6px !important;
}
div.status-content td {
  border: 1px solid #8b4c6a !important;
  padding: 6px !important;
  color: #f0e6d2 !important;
}

/* ---------- 加载中状态美化 (三个点替换为文字) ---------- */
/* 原加载中元素 */
.flex.items-center.justify-center.w-6.h-5 {
  /* 隐藏原来的点 */
  background: transparent !important;
}
.style_dot-flashing__8L91Q {
  display: none !important;
}
.flex.items-center.justify-center.w-6.h-5::after {
  content: "⚡魔物生成中⚡";
  color: #d4af37 !important;
  font-size: 14px !important;
  white-space: nowrap;
  animation: pulse 1.5s infinite;
  text-shadow: 0 0 8px #ff66aa;
}
@keyframes pulse {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* ---------- 输入输出积分显示美化 ---------- */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 2px solid #b380aa !important;
  border-radius: 16px !important;
  padding: 6px 12px !important;
  margin-top: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
  color: #f0e6d2 !important;
  font-size: 0.9em !important;
  background: #2d1b3a !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  border: 1px solid #d4af37 !important;
}
/* 模型名特殊颜色 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: #d4af37 !important;
  font-weight: bold !important;
}
/* 积分数字颜色 */
.text-orange-500 {
  color: #ff99cc !important;
}

/* ---------- 顶部导航栏美化 ---------- */
.flex.items-center.justify-between.w-full.relative {
  background: #1e121f !important;
  border-bottom: 3px solid #b380aa !important;
  padding: 8px 12px !important;
  box-shadow: 0 4px 10px rgba(180, 80, 120, 0.3) !important;
}
/* 模型切换按钮 */
#ai-model-selector .group.flex.items-center.px-2.h-8.rounded-md.justify-between.bg-grey-100.cursor-pointer.outline.outline-grey-300 {
  background: #2d1b3a !important;
  border: 2px solid #8b4c6a !important;
  border-radius: 30px !important;
  outline: none !important;
}
#ai-model-selector .truncate.text-\[13px\].font-medium.text-\[\#292A2B\].group-hover\:text-\[\#1E88E5\] {
  color: #d4af37 !important;
}
#ai-model-selector .group-hover .truncate.text-\[13px\].font-medium {
  color: #ff99cc !important;
}
#ai-model-selector svg {
  color: #d4af37 !important;
  stroke: #d4af37 !important;
}
/* 设置齿轮按钮 */
#header-setting-button {
  background: #3c1f3e !important;
  border: 2px solid #b380aa !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
}
#header-setting-button:hover {
  background: #5e2a2a !important;
  transform: rotate(30deg) scale(1.1) !important;
}
#header-setting-button svg {
  color: #d4af37 !important;
  fill: #d4af37 !important;
}

/* ---------- 开场白按钮美化 ---------- */
/* 开场白元素选择器（根据提供的HTML结构） */
.inline-block[data-state="closed"] > div.flex.items-center.px-2.text-xs.h-9.bg-white.rounded-md.border-\[0\.5px\].border-gray-200.shadow-xs.font-medium.text-gray-700.cursor-pointer {
  background: #2d1b3a !important;
  border: 2px solid #b380aa !important;
  border-radius: 30px !important;
  color: #d4af37 !important;
  padding: 0 16px !important;
  box-shadow: 0 4px 0 #4a1e2a !important;
  transition: all 0.2s !important;
}
.inline-block[data-state="closed"] > div:hover {
  background: #3c1f3e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #4a1e2a !important;
}
/* 开场白内的图标 */
.inline-block[data-state="closed"] svg {
  fill: #d4af37 !important;
  stroke: #d4af37 !important;
}

/* ---------- 翻页栏美化 (跳转翻页) ---------- */
.py-0.w-full.flex.justify-center.items-center.MuiBox-root.css-0 {
  background: #1e121f !important;
  padding: 12px 0 !important;
  border-top: 2px solid #b380aa !important;
  border-bottom: 2px solid #b380aa !important;
}
/* 页码按钮 */
.MuiPaginationItem-root {
  background: #2d1b3a !important;
  border: 2px solid #8b4c6a !important;
  color: #f0e6d2 !important;
  border-radius: 30px !important;
  margin: 0 2px !important;
}
.MuiPaginationItem-root.Mui-selected {
  background: #5e2a2a !important;
  border-color: #d4af37 !important;
  color: #d4af37 !important;
}
/* 前后箭头 */
.MuiPaginationItem-previousNext {
  background: #3c1f3e !important;
}
.MuiSvgIcon-root path {
  fill: #d4af37 !important;
}
/* 跳转输入框 */
.MuiInputBase-root {
  background: #2d1b3a !important;
  border: 2px solid #b380aa !important;
  border-radius: 30px !important;
  color: #f0e6d2 !important;
  padding: 4px 12px !important;
}
.MuiInputBase-input {
  color: #d4af37 !important;
  text-align: center !important;
}
/* 跳至 页 文字 */
.MuiStack-root.text-sm .MuiBox-root {
  color: #d4af37 !important;
}

/* ---------- 额外魔物元素装饰（背景爪印、蝙蝠等） ---------- */
/* 在对话区域背景添加半透明魔物剪影，不影响可读性 */
.mx-auto.pt-24.w-full.max-w-\[720px\].px-1.md\:px-4.relative {
  position: relative;
  background: #120b14; /* 深色底 */
}
.mx-auto.pt-24.w-full.max-w-\[720px\].px-1.md\:px-4.relative::before {
  content: "";
  position: fixed; /* 或 absolute 根据需求 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(180, 80, 120, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 70%, rgba(140, 60, 140, 0.1) 0%, transparent 25%),
    repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(200, 100, 150, 0.02) 30px, rgba(200, 100, 150, 0.02) 60px);
  pointer-events: none;
  z-index: 0;
}

/* 气泡内添加小魔物标记（如蝙蝠） */
.chat-answer-container .relative.inline-block::after {
  content: "🦇";
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 20px;
  opacity: 0.3;
  color: #b380aa;
  transform: rotate(-10deg);
  pointer-events: none;
}
.group.relative.ml-2 .relative.inline-block::after {
  content: "🐉";
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 20px;
  opacity: 0.3;
  color: #b380aa;
  transform: rotate(10deg);
  pointer-events: none;
}

/* ---------- 确保所有文本在深色背景下可读 ---------- */
/* 防止强制修改段落颜色（但上面已设置，此处确保无覆盖） */
p, .markdown-body p {
  color: #f0e6d2 !important;
}
/* 避免修改details内的颜色，但上面已针对处理，这里保留 */
details, details p {
  color: #f0e6d2 !important;
}

/* ---------- 其他元素微调 ---------- */
/* 隐藏不需要的元素（如果有，保持注释状态） */
.MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt,
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5),
.css-nkqe49 {
  /* display: none !important; */
}

/* 确保所有边框不透明，背景不透明 */
* {
  background-color: transparent; /* 保持背景由各元素控制，不设全局透明 */
}

/* 移动端适配：确保按钮和文字不溢出 */
@media (max-width: 640px) {
  .flex.items-center.gap-2.pb-2 > button {
    padding: 6px 12px !important;
    font-size: 0.9em !important;
  }
  .MuiButton-root.css-1t7rg57 {
    padding: 2px 6px !important;
  }
  div.status-content p {
    font-size: 0.9em !important;
  }
}