/* ====== 顶部栏（场景信息）美化 ====== */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(135deg, #ffebf3 0%, #fff5f9 50%, #e6f7ff 100%) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 2px solid rgba(255, 182, 193, 0.3) !important;
  box-shadow: 0 4px 20px rgba(147, 112, 219, 0.15) !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 顶部栏悬停效果 */
.sticky.w-full.top-0.flex.items-center:hover {
  box-shadow: 0 6px 25px rgba(147, 112, 219, 0.25) !important;
  border-bottom: 2px solid rgba(255, 182, 193, 0.5) !important;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid #ffb6c1 !important;
  border-radius: 12px !important;
  padding: 0.5rem 1rem !important;
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2) !important;
  transition: all 0.2s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #9370db !important;
  box-shadow: 0 4px 12px rgba(147, 112, 219, 0.3) !important;
  transform: translateY(-1px) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
  color: #5a4fcf !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* 下拉箭头 */
#ai-model-selector .shrink-0.flex.items-center svg {
  color: #9370db !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
  transition: transform 0.2s ease !important;
}

#ai-model-selector .shrink-0.flex.items-center:hover svg {
  transform: rotate(180deg) !important;
  color: #ff6b9d !important;
}

/* 历史记录图标 */
.sticky.w-full.top-0 svg.lucide-clock-8 {
  color: #5a4fcf !important;
  filter: drop-shadow(0 2px 3px rgba(90, 79, 207, 0.3)) !important;
  transition: all 0.3s ease !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8:hover {
  color: #ff6b9d !important;
  transform: scale(1.1) rotate(15deg) !important;
}

/* 历史记录未读角标 */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background: linear-gradient(135deg, #ff6b9d, #ff8fab) !important;
  box-shadow: 0 0 8px rgba(255, 107, 157, 0.7) !important;
  border: 1px solid white !important;
}

/* 音乐按钮 */
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(147, 112, 219, 0.3) !important;
  border-radius: 10px !important;
  padding: 0.5rem !important;
  transition: all 0.3s ease !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #9370db !important;
  box-shadow: 0 4px 12px rgba(147, 112, 219, 0.25) !important;
  transform: scale(1.05) !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #9370db !important;
  filter: drop-shadow(0 2px 2px rgba(147, 112, 219, 0.3)) !important;
}

/* 移动端设置图标 */
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
  color: #5a4fcf !important;
  filter: drop-shadow(0 2px 3px rgba(90, 79, 207, 0.3)) !important;
  transition: all 0.3s ease !important;
}

.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover {
  color: #ff6b9d !important;
  transform: rotate(90deg) scale(1.1) !important;
}

/* 设置按钮 */
#header-setting-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1.5px solid #ffb6c1 !important;
  border-radius: 10px !important;
  padding: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2) !important;
  transition: all 0.3s ease !important;
}

#header-setting-button:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #9370db !important;
  box-shadow: 0 4px 12px rgba(147, 112, 219, 0.3) !important;
  transform: translateY(-1px) !important;
}

#header-setting-button svg {
  color: #9370db !important;
  filter: drop-shadow(0 1px 2px rgba(147, 112, 219, 0.3)) !important;
  transition: transform 0.3s ease !important;
}

#header-setting-button:hover svg {
  color: #ff6b9d !important;
  transform: rotate(45deg) !important;
}

/* ====== 聊天气泡美化 ====== */
/* 用户消息气泡 */
[class*="bg-gray-100"]:has(div[class*="text-gray-800"]) {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%) !important;
  border: 1.5px solid #87ceeb !important;
  border-radius: 18px 18px 18px 4px !important;
  box-shadow: 0 4px 12px rgba(135, 206, 235, 0.2) !important;
  padding: 1rem 1.25rem !important;
  margin: 0.5rem 0 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* 用户气泡装饰 */
[class*="bg-gray-100"]:has(div[class*="text-gray-800"])::before {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  left: -6px !important;
  width: 12px !important;
  height: 12px !important;
  background: #87ceeb !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(135, 206, 235, 0.5) !important;
}

[class*="bg-gray-100"]:has(div[class*="text-gray-800"])::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  right: -6px !important;
  width: 8px !important;
  height: 8px !important;
  background: #5a4fcf !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(90, 79, 207, 0.5) !important;
}

/* AI消息气泡 */
[class*="bg-white"]:has(div[class*="text-gray-800"]):not([class*="bg-gray-100"]) {
  background: linear-gradient(135deg, #fff5f9 0%, #fff 100%) !important;
  border: 1.5px solid #ffb6c1 !important;
  border-radius: 18px 18px 4px 18px !important;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.2) !important;
  padding: 1rem 1.25rem !important;
  margin: 0.5rem 0 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* AI气泡装饰 */
[class*="bg-white"]:has(div[class*="text-gray-800"]):not([class*="bg-gray-100"])::before {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  width: 12px !important;
  height: 12px !important;
  background: #ffb6c1 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(255, 182, 193, 0.5) !important;
}

[class*="bg-white"]:has(div[class*="text-gray-800"]):not([class*="bg-gray-100"])::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  left: -6px !important;
  width: 8px !important;
  height: 8px !important;
  background: #9370db !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(147, 112, 219, 0.5) !important;
}

/* 气泡悬停效果 */
[class*="bg-gray-100"]:has(div[class*="text-gray-800"]):hover,
[class*="bg-white"]:has(div[class*="text-gray-800"]):not([class*="bg-gray-100"]):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(147, 112, 219, 0.25) !important;
}

/* 气泡内文字 */
[class*="text-gray-800"] {
  color: #333344 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* ====== 底部栏美化 ====== */
/* 底部栏背景 */
.bg-gradient-to-t {
  background: linear-gradient(to top, rgba(255, 245, 249, 0.95), rgba(230, 247, 255, 0.95)) !important;
  backdrop-filter: blur(15px) !important;
  border-top: 2px solid rgba(255, 182, 193, 0.4) !important;
  box-shadow: 0 -4px 20px rgba(147, 112, 219, 0.15) !important;
  padding: 1.5rem 1rem !important;
}

/* 输入框容器 */
#ai-chat-bottom-input {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid #ffb6c1 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(255, 182, 193, 0.2) !important;
  padding: 1rem !important;
  transition: all 0.3s ease !important;
}

#ai-chat-bottom-input:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #9370db !important;
  box-shadow: 0 6px 20px rgba(147, 112, 219, 0.3) !important;
}

/* 主输入框 */
#ai-chat-input {
  background: transparent !important;
  color: #333344 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  border: none !important;
  outline: none !important;
  padding: 0.5rem !important;
  min-height: 60px !important;
  resize: none !important;
}

#ai-chat-input::placeholder {
  color: #a8a8c8 !important;
  font-style: italic !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

#ai-chat-input::selection {
  background: rgba(255, 182, 193, 0.5) !important;
  color: #333344 !important;
}

/* ====== Details组件美化（校长档案、角色档案、记忆与情报） ====== */
/* details组件整体 */
details {
  background: linear-gradient(135deg, rgba(255, 245, 249, 0.9), rgba(255, 255, 255, 0.95)) !important;
  border: 2px solid #ffb6c1 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(255, 182, 193, 0.15) !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

details:hover {
  box-shadow: 0 8px 24px rgba(147, 112, 219, 0.25) !important;
  border-color: #9370db !important;
  transform: translateY(-2px) !important;
}

/* 展开状态 */
details[open] {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 249, 0.98)) !important;
  box-shadow: 0 8px 32px rgba(147, 112, 219, 0.3) !important;
  border-color: #5a4fcf !important;
}

/* summary样式 */
details summary {
  background: linear-gradient(135deg, #ffb6c1, #ff8fab) !important;
  color: white !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 1rem 1.5rem !important;
  cursor: pointer !important;
  border-radius: 14px 14px 0 0 !important;
  position: relative !important;
  user-select: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

/* summary装饰 */
details summary::before {
  content: '' !important;
  position: absolute !important;
  left: 1rem !important;
  width: 20px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  transition: transform 0.3s ease !important;
}

details summary:hover {
  background: linear-gradient(135deg, #ff8fab, #ff6b9d) !important;
  padding-left: 2rem !important;
}

details summary:hover::before {
  transform: scale(1.2) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

/* 展开状态的summary */
details[open] summary {
  background: linear-gradient(135deg, #5a4fcf, #9370db) !important;
  border-radius: 14px 14px 0 0 !important;
}

details[open] summary::before {
  transform: rotate(90deg) !important;
}

/* details内部内容 */
details > div {
  padding: 1.5rem !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 0 0 14px 14px !important;
}

/* 内部标题样式 */
details h1, details h2, details h3, details h4, details h5, details h6 {
  color: #5a4fcf !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
  font-weight: 600 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  position: relative !important;
  padding-left: 1rem !important;
}

details h1::before, details h2::before, details h3::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 1.2em !important;
  background: linear-gradient(to bottom, #ffb6c1, #9370db) !important;
  border-radius: 2px !important;
}

/* 内部段落样式 */
details p {
  color: #444466 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
  line-height: 1.6 !important;
  margin-bottom: 0.75rem !important;
  padding: 0.5rem 0 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

details p:has(strong) {
  background: rgba(255, 182, 193, 0.1) !important;
  padding: 0.75rem !important;
  border-radius: 8px !important;
  border-left: 3px solid #ffb6c1 !important;
}

/* 列表样式 */
details ul, details ol {
  margin-left: 1.5rem !important;
  margin-bottom: 1rem !important;
}

details li {
  color: #555577 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
  padding-left: 0.5rem !important;
  position: relative !important;
}

details li::before {
  content: '🌸' !important;
  position: absolute !important;
  left: -1.5rem !important;
  color: #ff8fab !important;
  font-size: 0.8rem !important;
}

/* 特殊标记 */
details p:has(> [class*="🎬"]),
details p:has(> [class*="🪪"]),
details p:has(> [class*="🗂️"]),
details p:has(> [class*="📑"]) {
  background: linear-gradient(135deg, rgba(230, 247, 255, 0.3), rgba(255, 245, 249, 0.3)) !important;
  border: 1px solid rgba(255, 182, 193, 0.3) !important;
  padding: 1rem !important;
  border-radius: 12px !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

details p:has(> [class*="🎬"])::before,
details p:has(> [class*="🪪"])::before,
details p:has(> [class*="🗂️"])::before,
details p:has(> [class*="📑"])::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ffb6c1, #9370db, #87ceeb) !important;
}

/* 分隔线 */
details hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #ffb6c1, transparent) !important;
  margin: 1.5rem 0 !important;
}

/* 内部链接样式 */
details a {
  color: #5a4fcf !important;
  text-decoration: none !important;
  border-bottom: 1px dashed #ffb6c1 !important;
  transition: all 0.2s ease !important;
  padding: 0 2px !important;
}

details a:hover {
  color: #ff6b9d !important;
  border-bottom: 1px solid #ff6b9d !important;
  background: rgba(255, 182, 193, 0.1) !important;
  border-radius: 2px !important;
}

/* 内部代码块 */
details code {
  background: rgba(255, 182, 193, 0.15) !important;
  color: #5a4fcf !important;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 182, 193, 0.3) !important;
  font-size: 0.9em !important;
}

/* 剧情分支选项 */
details p:has(> [class*="🎲"]) {
  background: linear-gradient(135deg, rgba(255, 245, 249, 0.8), rgba(230, 247, 255, 0.8)) !important;
  border: 2px solid #87ceeb !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  margin-top: 2rem !important;
}

details p:has(> [class*="🎲"]) strong {
  color: #5a4fcf !important;
  display: block !important;
  margin-bottom: 1rem !important;
  font-size: 1.1rem !important;
  text-align: center !important;
}

/* 自定义行动选项 */
details p:has(> [class*="自定义行动"]) {
  background: linear-gradient(135deg, rgba(147, 112, 219, 0.1), rgba(255, 182, 193, 0.1)) !important;
  border: 2px dashed #9370db !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  margin-top: 1.5rem !important;
  text-align: center !important;
}

details p:has(> [class*="自定义行动"]) strong {
  color: #ff6b9d !important;
  font-size: 1rem !important;
}

/* 动画效果 */
@keyframes gentlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

details summary:hover {
  animation: gentlePulse 1.5s ease-in-out infinite !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sticky.w-full.top-0.flex.items-center {
    padding: 0.5rem 0.75rem !important;
  }
  
  details {
    margin-bottom: 0.75rem !important;
  }
  
  details summary {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  details > div {
    padding: 1rem !important;
  }
}
```

## 设计说明

这套CSS美化方案实现了：

1. **顶部栏**：采用粉白蓝渐变背景，添加毛玻璃效果和柔和阴影，模型选择器有悬停动画，图标有旋转和缩放效果
2. **聊天气泡**：用户气泡为蓝白渐变，AI气泡为粉白渐变，都有装饰性小圆点和悬停效果
3. **底部栏**：透明毛玻璃效果，输入框有粉蓝色边框和阴影
4. **Details组件**（用于校长档案、角色档案等）：粉白渐变背景，展开/收起动画，内部内容有精致的排版和装饰

## 可选增强效果（可额外添加）：

```css
/* 樱花飘落效果装饰 */
details::after {
  content: '🌸' !important;
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  font-size: 1.5rem !important;
  opacity: 0.3 !important;
  animation: float 3s ease-in-out infinite !important;
  z-index: 1 !important;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
}

/* 打字机效果装饰 */
[class*="text-gray-800"]::after {
  content: '|' !important;
  animation: blink 1s infinite !important;
  color: #ff6b9d !important;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 渐变文字效果 */
details h1, details h2, details h3 {
  background: linear-gradient(135deg, #ff6b9d, #5a4fcf) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

details p {
    margin: 0.3em 0;
    line-height: 1.5;
}

/* 为核心架构部分添加列表样式 */
details p strong:contains("通行学制"),
details p strong:contains("已知进阶路径"),
details p strong:contains("当前学年"),
details p strong:contains("当前学期"),
details p strong:contains("当前焦点学部") {
    display: inline-block;
    min-width: 6em;
}
/* 或者为所有带<strong>标签的<p>添加左边距，模拟列表缩进 */
details p:has(> strong) {
    padding-left: 1.5em;
    position: relative;
}
details p:has(> strong)::before {
    content: "•";
    position: absolute;
    left: 0.5em;
    color: #666;
}

/* 隐藏所有HTML注释，确保界面纯净 */
    * {
        visibility: hidden;
    }
    *:not(comment) {
        visibility: visible;
    }