@media (prefers-color-scheme: dark) {
  /* 深色背景下的通用文字颜色，但不覆盖details和p */
  body,
  .group,
  .chat-container,
  [class*="bg-gray-100"],
  [class*="bg-white"] {
    color-scheme: dark;
  }

  /* 强制所有非豁免的聊天框文字为浅色，保证可读性 */
  .group .bg-gray-100\/90,
  [id*="chat"] :not(details) :not(p):not(.force-dark-text) {
    color: #f0e9ff !important; /* 柔白带紫光，魔法少女风格 */
  }

  /* 输入框文字强制浅色 */
  #ai-chat-input {
    color: #f0e9ff !important;
  }
}

/* ---------------------------------
 *   模块一：对话气泡 (AI侧) 魔法少女化
 *   背景不透明，添加魔法阵/飘带边角装饰
 * ---------------------------------
 */
.group .bg-gray-100\/90 {
  /* 基础背景：珍珠白 -> 夜晚模式由媒体查询控制，此处不强制透明 */
  background: #fffaf5 !important;  /* 暖白基底，像魔法卡牌的底色 */
  border: 2px solid #b8a9d4 !important; /* 魔幻薰衣草紫边框 */
  border-radius: 16px 16px 16px 4px !important; /* 不对称圆角，模仿魔法书页 */
  box-shadow: 
    8px 8px 0 rgba(160, 130, 200, 0.4),    /* 彩色投影增加立体感 */
    inset 0 0 0 1px rgba(255, 255, 255, 0.8), /* 内发光，提升高级感 */
    0 0 0 2px #f0e6ff inset;                /* 第二层内描边，魔法阵光晕 */
  color: #2e1b4b !important; /* 深紫罗兰色正文，深色模式会被覆盖成浅色，但保留此处基底 */
  padding: 16px 18px !important; /* 略增内边距，让装饰不压字 */
  position: relative !important;
  overflow: hidden !important;  /* 为了伪元素魔法阵不溢出太多，但保留可见部分 */
  transition: all 0.2s ease;
}

/* 魔法少女图案：角落的星星与魔法阵 (气泡专属) */
.group .bg-gray-100\/90::before {
  content: "✨";
  position: absolute;
  top: -6px;
  right: -2px;
  font-size: 22px;
  opacity: 0.5;
  transform: rotate(15deg);
  filter: drop-shadow(0 0 4px #d9b0ff);
  pointer-events: none;
  z-index: 1;
}

.group .bg-gray-100\/90::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.15"><path fill="%23946bb9" d="M50 10 L55 40 L85 40 L63 58 L72 88 L50 70 L28 88 L37 58 L15 40 L45 40 Z" /></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0; /* 置于底层不影响文字 */
  mix-blend-mode: multiply;
}

/* 深色模式下的魔法阵图案加深 (依然可见) */
@media (prefers-color-scheme: dark) {
  .group .bg-gray-100\/90::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.25"><path fill="%23dbbaff" d="M50 10 L55 40 L85 40 L63 58 L72 88 L50 70 L28 88 L37 58 L15 40 L45 40 Z" /></svg>');
    mix-blend-mode: lighten;
  }
  .group .bg-gray-100\/90::before {
    opacity: 0.7;
    content: "⭐";
  }
}

/* 用户侧气泡若存在类似类，也可加上（选择性适配，不影响现有结构） */
/* 仅作示例，不强制修改原有类以外的部分 */

/* ---------------------------------
 *   模块二：平台按钮美化 (魔法变身指令)
 *   保留硬朗边框但加入魔杖元素
 * ---------------------------------
 */
.flex.items-center.gap-2.pb-2 > button {
  background: #fefbff !important;    /* 几乎白色的基底 */
  color: #3c2a5d !important;         /* 深紫色文字 */
  border: 2px solid #b38fdc !important; /* 紫色边框，更柔和 */
  border-radius: 24px 8px 24px 8px !important; /* 流动感的不规则圆角 */
  box-shadow: 
    4px 4px 0 #b38fdc,
    0 0 0 2px #ffffff inset;         /* 内白边，突出 */
  font-weight: 600 !important;
  text-transform: uppercase !important; /* 大写更有咒语感 */
  letter-spacing: 0.03em !important;
  transition: all 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.3) !important;
  padding: 6px 18px !important;
  position: relative;
  overflow: visible !important;
}

/* 悬停时魔法发动：按下的位移 + 星尘 */
.flex.items-center.gap-2.pb-2 > button:hover {
  background: #e6d7ff !important;
  color: #1f0f3a !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0 #7f5aa3, 0 0 0 2px #fff3c9 inset !important;
  border-color: #9b7bcb !important;
}

/* 增加魔法符文小图标 (可选) */
.flex.items-center.gap-2.pb-2 > button::after {
  content: "⚘";
  position: relative;
  display: inline-block;
  margin-left: 6px;
  font-size: 1.1em;
  opacity: 0.8;
  transition: opacity 0.2s;
  color: #ba9beb;
}

/* 隐藏不需要的悬停覆盖 */
.flex.items-center.gap-2.pb-2 > button:hover::after {
  opacity: 1;
  animation: twinkle 0.5s infinite alternate;
}

@keyframes twinkle {
  from { text-shadow: 0 0 2px gold; }
  to { text-shadow: 0 0 8px pink; }
}

/* ---------------------------------
 *   模块三：保留元素 (不隐藏，但可微调)
 *   原注释内容保持不动，不做display隐藏
 * ---------------------------------
 */
.MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt,
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5),
.css-nkqe49 {
  /* 保持原样，不干扰主题 */
}

/* ---------------------------------
 *   模块四：输入栏 (变身魔杖笔)
 *   保持大小不变，加上魔法花纹边框
 *   背景不透明，夜晚文字浅色
 * ---------------------------------
 */
#ai-chat-input {
  background-color: #fff9fe !important; /* 浅紫白 */
  border: 2px solid #c0a2e8 !important;
  border-radius: 28px 8px 28px 8px !important; /* 与按钮呼应 */
  color: #271d38 !important;
  box-shadow: 
    inset 0 2px 5px rgba(170, 120, 210, 0.2),
    0 0 0 2px #f2e4ff inset,               /* 内层发光 */
    0 4px 0 #9578b9 !important;              /* 底部厚投影，立体魔杖感 */
  padding: 10px 16px !important;           /* 保持原大小微调舒适 */
  font-size: 1rem !important;
  line-height: 1.5 !important;
  transition: border 0.2s, box-shadow 0.2s;
  outline: none !important;                 /* 移除默认轮廓，用自定义 */
  position: relative;
}

/* 聚焦时魔法阵浮现 (边框光效) */
#ai-chat-input:focus {
  border-color: #e1b5ff !important;
  box-shadow: 
    inset 0 2px 5px rgba(200, 150, 255, 0.3),
    0 0 0 3px #ffe7b0 inset,
    0 6px 0 #aa7ed0 !important;              /* 悬浮感 */
}

/* 输入框容器背景透明，突出输入框本身 (保持不变) */
#ai-chat-bottom-input {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* 为输入框添加装饰符文 (不影响大小) */
#ai-chat-bottom-input::before {
  content: "🜁🜂🜃🜄";
  position: absolute;
  top: -18px;
  right: 10px;
  font-size: 12px;
  color: #b59bd4;
  opacity: 0.5;
  letter-spacing: 4px;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------------------------------
 *   深色模式精细调节 (已强制文本框文字变浅)
 *   对非details非p区域生效
 * ---------------------------------
 */
@media (prefers-color-scheme: dark) {
  /* 对话气泡背景深色但不透明，文字强制白色系（覆盖原有） */
  .group .bg-gray-100\/90 {
    background: #2a1e3c !important;  /* 深紫黑背景，不透明 */
    border-color: #b397d6 !important;
    color: #f2e6ff !important;        /* 强制白色系 */
    box-shadow: 
      8px 8px 0 #3b2b52,
      inset 0 0 0 2px #9470c9 !important;
  }

  /* 输入框深色模式背景，文字浅色 */
  #ai-chat-input {
    background-color: #241d30 !important;
    border-color: #ac8ed1 !important;
    color: #f3eaff !important;
    box-shadow: 
      inset 0 2px 8px rgba(0,0,0,0.6),
      0 0 0 2px #573f7e inset,
      0 4px 0 #563d7a !important;
  }

  /* 按钮深色模式调整 */
  .flex.items-center.gap-2.pb-2 > button {
    background: #2a1d40 !important;
    color: #f0e2ff !important;
    border-color: #b18edb !important;
    box-shadow: 4px 4px 0 #624b87, 0 0 0 2px #3d2b56 inset !important;
  }

  .flex.items-center.gap-2.pb-2 > button:hover {
    background: #3e2a60 !important;
    color: #ffffff !important;
    box-shadow: 1px 1px 0 #aa89dc, 0 0 0 2px #f9e7b3 inset !important;
  }

  /* 确保任何可能漏掉的聊天区域文字 */
  [class*="chat"] :not(details):not(p):not(button):not(.Mui*):not(.force-dark-text) {
    color: #f0e6ff;
  }

  /* 但绝对不强制修改details和p的内部文字颜色 (由浏览器控制，我们不施加额外颜色) */
  details, details *, p, p * {
    color: inherit; /* 继承但不强制白色，保持原设计 */
  }
  /* 更保险：移除对p和details的颜色强制 */
  p, details, summary {
    color: initial; /* 重置可能的污染，但不设置具体颜色 */
  }
}

/* 额外魔法点缀：让滚动条也有点魔法感 (可选，不影响阅读) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f0e9fa;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #cbaddb;
  border-radius: 4px;
  border: 2px solid #ecd9ff;
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: #2b1f38;
  }
  ::-webkit-scrollbar-thumb {
    background: #9b79c6;
    border: 2px solid #4e3570;
  }
}

/* 确保输入框大小不变（已保留原始padding/font等，未改动宽度高度核心） */
#ai-chat-input {
  box-sizing: border-box; /* 确保边框内边距不改变原占位大小 */
}