/* 星空主题定制版 - 深空蓝紫，星光闪烁 */

/* 1. 强制隐藏顶部冗余颜色装饰条 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
  display: none !important;
}

/* 2. 统一聊天框美化 (输入与输出) - 深邃星空背景 */
.bg-gray-100\/90.relative.inline-block {
  background: rgba(8, 8, 20, 0.9) !important;        /* 深空底色 */
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(170, 130, 240, 0.5) !important; /* 星云紫边框 */
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(100, 80, 200, 0.3) !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
  isolation: isolate !important;
  position: relative !important;
  overflow: hidden !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
  border-color: rgba(200, 160, 255, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(140, 100, 255, 0.5) !important;
}

/* 3. 银河旋转光效 (使用::before实现) */
.bg-gray-100\/90.relative.inline-block::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    #1a0f2e 15%,
    #3b235a 30%,
    #7e4a9e 45%,
    #b88ad0 60%,
    #7e4a9e 75%,
    #3b235a 90%,
    transparent 100%
  ) !important;
  animation: rotate AuroraRotate 12s linear infinite !important;
  z-index: -1 !important;
  opacity: 0.35 !important;
  filter: blur(6px) !important; /* 柔化光效，更像星云 */
}

/* 旋转动画 */
@keyframes AuroraRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 额外：用::after点缀星光 - 随机小亮点 */
.bg-gray-100\/90.relative.inline-block::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
    radial-gradient(circle at 75% 15%, rgba(255, 240, 200, 0.7) 1.5px, transparent 1.5px),
    radial-gradient(circle at 45% 70%, rgba(220, 200, 255, 0.6) 1px, transparent 1px),
    radial-gradient(circle at 90% 60%, rgba(255, 255, 200, 0.5) 2px, transparent 2px),
    radial-gradient(circle at 10% 85%, rgba(210, 180, 255, 0.7) 1px, transparent 1px) !important;
  background-repeat: no-repeat !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  animation: twinkle 4s ease-in-out infinite alternate !important;
}

/* 星光闪烁动画 */
@keyframes twinkle {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.9;
  }
}

/* 4. 文本内容 - 星空白 */
.markdown-body {
  color: #f0f0ff !important;          /* 冷白带一点蓝 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.6 !important;
  z-index: 1 !important;
  background: transparent !important;
  text-shadow: 0 0 5px rgba(180, 140, 255, 0.3) !important; /* 极淡星光晕 */
}

/* 5. 底部附加元素美化 (按钮、模型名、Token) */
/* 按钮样式 - 星尘质感 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
  color: #e0d0ff !important;            /* 淡紫光文字 */
  background: rgba(40, 20, 60, 0.6) !important; /* 深紫透明底 */
  border-radius: 8px !important;
  margin: 2px !important;
  transition: background 0.2s !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(180, 140, 255, 0.2) !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
  background: rgba(70, 40, 100, 0.8) !important;
  border-color: rgba(210, 170, 255, 0.5) !important;
}

/* 模型名称与Token消耗 - 星光色 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
  color: #b8a0e0 !important;            /* 柔紫罗兰 */
  font-weight: 500 !important;
  opacity: 0.9 !important;
  text-shadow: 0 0 4px rgba(180, 140, 255, 0.5) !important;
}

/* 6. 加载动画 - 三颗闪烁的星星 (SVG SMIL) */
.style_dot-flashing__8L91Q.style_text__zGhNq {
  display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='4' cy='12' r='3' fill='%23fffde7' filter='url(%23glow)'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.5s' repeatCount='indefinite' begin='0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3' fill='%23ffe484' filter='url(%23glow)'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.5s' repeatCount='indefinite' begin='0.4s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3' fill='%23c4b0ff' filter='url(%23glow)'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.5s' repeatCount='indefinite' begin='0.8s'/%3E%3C/circle%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .bg-gray-100\/90.relative.inline-block {
    padding: 10px !important;
    border-radius: 12px !important;
  }
}

/* 额外：输入框焦点时的星光晕 */
.bg-gray-100\/90.relative.inline-block:focus-within {
  border-color: #b380ff !important;
  box-shadow: 0 0 0 3px rgba(150, 100, 255, 0.4), 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* 额外：主要操作按钮星云渐变（示例） */
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #2a1b3d, #4a2b6e) !important;
  color: #f0e6ff !important;
  border: 1px solid #8b6eb0 !important;
  box-shadow: 0 0 10px #6a4e9e !important;
}

.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #3e2957, #623c8a) !important;
  box-shadow: 0 0 15px #8a6ac3 !important;
}

/* 记忆区整体容器 - 深色背景 */
.memory-area {
  background-color: #1e1e2f !important;   /* 深紫灰背景 */
  color: #f0f0f0 !important;              /* 亮灰色文字 */
  padding: 1rem;
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 标题样式（如“回忆”、“长期记忆区”） */
.memory-area summary,
.memory-area h1,
.memory-area h2,
.memory-area h3 {
  color: #d0d0ff !important;               /* 淡紫色标题 */
  font-weight: 600;
  margin: 0.5em 0;
}

/* 表格 - 最常见的记忆区内容 */
.memory-area table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;      /* 透明背景，继承父级深色 */
  color: inherit;
  margin: 1em 0;
}

.memory-area th,
.memory-area td {
  padding: 8px 12px;
  border: 1px solid #44475a !important;    /* 深色边框 */
  color: #f0f0f0 !important;               /* 亮色文字 */
  background-color: transparent !important; /* 单元格背景透明 */
}

.memory-area th {
  background-color: #2d2d44 !important;    /* 表头稍深一点 */
  font-weight: 600;
  border-bottom: 2px solid #6272a4;
}

.memory-area tr:hover td {
  background-color: rgba(255, 255, 255, 0.05) !important; /* 悬停微亮 */
}

/* 文字标记（如 [STM] 标签） */
.memory-tag,
.memory-area .tag {
  background: #2d2d5a;
  color: #aaccff;
  padding: 2px 8px;
  border-radius: 16px;
  font-size: 0.85em;
  display: inline-block;
}

/* 普通段落、列表等 */
.memory-area p,
.memory-area li,
.memory-area .text {
  color: #e0e0e0 !important;
}

/* 如果表格外还有竖线分隔的文本（如 "[STM]短期记忆区|4/7|..."），确保颜色正常 */
.memory-area .memory-stats,
.memory-area .stats {
  color: #b0b0ff;
  background: rgba(0,0,0,0.2);
  padding: 4px 8px;
  border-radius: 8px;
  font-family: monospace;
}
/* ========== 星空主题 - 深空背景 ========== */

/* 全局背景：深邃渐变夜空 */
body {
  background: radial-gradient(ellipse at 40% 50%, #0c0b1a 0%, #020110 100%) !important;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 固定星星层 - 通过伪元素实现无数小点 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 15px 60px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 72px 430px, #f8f0ff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 850px 220px, #ffe9f0, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 120px 550px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 950px 920px, #f2e6ff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 340px 780px, #ffd9f0, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 560px 150px, #fff0f5, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 220px 880px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 740px 410px, #e6d0ff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 480px 630px, #ffd9f0, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 630px 980px, #fff0f0, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 290px 260px, #d9c0ff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 880px 740px, #f2f0ff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 130px 350px, #fff, rgba(0,0,0,0));
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

/* 闪烁大星星层 - 独立动画 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(4px 4px at 180px 240px, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
    radial-gradient(5px 5px at 720px 580px, rgba(255, 240, 210, 0.8) 0%, transparent 80%),
    radial-gradient(4px 4px at 440px 860px, rgba(210, 200, 255, 0.8) 0%, transparent 70%),
    radial-gradient(3px 3px at 910px 340px, rgba(255, 220, 240, 0.7) 0%, transparent 60%),
    radial-gradient(6px 6px at 50% 30%, rgba(140, 120, 255, 0.4) 0%, transparent 70%);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
  opacity: 0.8;
  animation: twinkleStars 4s ease-in-out infinite alternate;
}

/* 闪烁动画 */
@keyframes twinkleStars {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.98);
  }
}

/* 可选：星云雾效果（飘渺光斑） - 额外层 */
.star-mist {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(100, 60, 200, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(200, 100, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(60, 100, 230, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: -2;
  mix-blend-mode: screen;
  animation: mistMove 20s infinite alternate;
}

@keyframes mistMove {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate(-2%, -1%) scale(1.1); opacity: 0.6; }
}

/* --- 星空主题美化方案 --- */

/* 1. 顶部栏美化：深邃星空渐变 */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(90deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
    border-bottom: 1px solid rgba(130, 170, 255, 0.3) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
}

/* 模型选择器与文字 */
#ai-model-selector .truncate.text-\[13px\] {
    color: #e0e6ed !important;
    font-weight: 600 !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
}

#ai-model-selector .group.flex.items-center {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
    transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 10px rgba(130, 170, 255, 0.5) !important;
}

/* 顶部图标颜色 */
#header-setting-button svg, 
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
    color: #f0f0f0 !important;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) !important;
}

/* 2. 开场白选择器 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(130, 170, 255, 0.4) !important;
    color: #e0e6ed !important;
}

/* 3. 底部输入栏：银河边际 */
#ai-chat-bottom-input {
    background: rgba(15, 12, 41, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(130, 170, 255, 0.2) !important;
}

#ai-chat-input {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(130, 170, 255, 0.3) !important;
    border-radius: 12px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

#ai-chat-input::placeholder {
    color: rgba(200, 200, 220, 0.5) !important;
}

#ai-chat-input:focus {
    border-color: #82aaff !important;
    box-shadow: 0 0 12px rgba(130, 170, 255, 0.4) !important;
}

/* 4. 底部按钮美化 (Mod按钮, 流式按钮等) */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
    color: white !important;
    border-radius: 20px !important;
    text-transform: none !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 117, 252, 0.6) !important;
}

/* 5. 分页栏美化 */
.MuiPaginationItem-root {
    color: #a29bfe !important;
    border: 1px solid rgba(162, 155, 254, 0.3) !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: #6c5ce7 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.5) !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root, 
.MuiInputBase-input {
    color: #a29bfe !important;
}

/* 6. 评论区美化：星夜画卷 */
/* 主背景容器 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: radial-gradient(circle at top, #1a1a2e 0%, #16213e 100%) !important;
}

/* 评论区文字颜色覆盖 */
div.text-lg.font-bold, 
p.MuiTypography-body1.text-grey-600,
div.text-sm.text-grey-600 span.font-bold,
div.break-all,
div.text-xs.text-grey-600,
span.cursor-pointer {
    color: #e0e6ed !important;
}

/* 评分星星 */
span.MuiRating-iconFilled svg {
    color: #f1c40f !important; /* 星光金 */
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.8)) !important;
}

span.MuiRating-iconEmpty svg {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* 评论输入框 */
textarea.rc-textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    border: 1px solid rgba(130, 170, 255, 0.3) !important;
    border-radius: 8px !important;
}

/* 发送按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: #483d8b !important;
    border-radius: 50% !important;
    transition: all 0.3s !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: #6a5acd !important;
    box-shadow: 0 0 15px rgba(106, 90, 205, 0.7) !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
    background: #3f51b5 !important;
}

button.MuiButton-outlinedPrimary {
    color: #7986cb !important;
    border-color: #3f51b5 !important;
}

/* 分割线 */
div.style_divider__mW0YX {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 个人标签 */
span.text-\[10px\] {
    background: rgba(130, 170, 255, 0.2) !important;
    color: #82aaff !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
}