/* ==========================================
   《彻夜之歌》主题 - 午夜霓虹美化样式
   ========================================== */

/* --- 1. 消息气泡区美化 --- */

/* 用户消息气泡 - 萤光青冷色调 */
#customized-question-content {
  background: rgba(16, 24, 48, 0.85) !important;
  border: 1px solid rgba(0, 245, 255, 0.4) !important;
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.15) !important;
  border-radius: 16px 16px 4px 16px !important;
}
#customized-question-content .markdown-body {
  color: #f5f5f5 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}
/* 用户消息顶部装饰条 */
#customized-question-content .bg-\[\#c9e1e9\] {
  background-color: #00f5ff !important;
  box-shadow: 0 0 8px #00f5ff !important;
}

/* AI消息气泡 - 霓虹粉暖色调 */
#customized-answer-content {
  background: rgba(26, 12, 38, 0.85) !important;
  border: 1px solid rgba(255, 0, 127, 0.4) !important;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.15) !important;
  border-radius: 16px 16px 16px 4px !important;
}
#customized-answer-content .markdown-body {
  color: #f5f5f5 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}
/* AI消息顶部装饰条 */
#customized-answer-content .bg-\[\#F1CBCB\] {
  background-color: #ff007f !important;
  box-shadow: 0 0 8px #ff007f !important;
}

/* 消息头像装饰 */
#customized-question-avatar, #customized-answer-avatar {
  border: 2px solid rgba(179, 136, 255, 0.6) !important;
  box-shadow: 0 0 8px rgba(179, 136, 255, 0.4) !important;
}

/* 模型标识与Token消耗 */
#customized-answer-content .text-purple-500.mt-1 {
  color: #b388ff !important;
}
#customized-answer-content .text-orange-500 {
  color: #ff007f !important;
  font-weight: 600 !important;
}

/* 操作按钮美化 */
#customized-reload-button, 
#customized-edit-button, 
#customized-resend-button, 
#customized-delete-button,
#customized-create-image-button,
#customized-create-audio-button {
  background: rgba(30, 25, 50, 0.8) !important;
  border: 1px solid rgba(179, 136, 255, 0.3) !important;
  color: #b388ff !important;
  transition: all 0.2s ease-in-out !important;
}
#customized-reload-button:hover, 
#customized-edit-button:hover, 
#customized-resend-button:hover, 
#customized-delete-button:hover {
  background: #ff007f !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px #ff007f !important;
  border-color: #ff007f !important;
}


/* --- 2. 加载动画模块 (SMIL 弯月旋转与星星闪烁) --- */

/* 隐藏默认动画点 */
#customized-answer-content [class*="dot-flashing"] {
  display: none !important;
}
/* 容器定位 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
}
/* 插入自定义SVG动画 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.3 22h-.1c-5.5 0-10-4.5-10-10S6.7 2 12.2 2c.5 0 .9.4.9.9s-.4.9-.9.9c-4.5 0-8.2 3.7-8.2 8.2s3.7 8.2 8.2 8.2c1.9 0 3.8-.7 5.2-1.9.4-.3 1-.3 1.3.1.3.4.3 1-.1 1.3-1.7 1.5-4 2.3-6.3 2.3z" fill="%23ff007f"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="3s" repeatCount="indefinite"/></path><path d="M19 11t.3 1.5 1.2 1.2 1.5.3-1.5.3-1.2 1.2-.3 1.5-.3-1.5-1.2-1.2-1.5-.3 1.5-.3 1.2-1.2.3-1.5z" fill="%2300f5ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.5s" repeatCount="indefinite"/></path></svg>') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* --- 3. 界面控制区美化 --- */

/* 顶部控制栏 */
.sticky.top-0 {
  background: rgba(13, 10, 25, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(179, 136, 255, 0.2) !important;
}
#customized-model-selector {
  background: rgba(30, 20, 50, 0.6) !important;
  border: 1px solid rgba(179, 136, 255, 0.4) !important;
  color: #f8f9fa !important;
}
#header-setting-button {
  color: #b388ff !important;
}

/* 快捷按钮组 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
  background: rgba(20, 15, 35, 0.7) !important;
  border: 1px solid rgba(179, 136, 255, 0.4) !important;
  color: #b388ff !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
  background: rgba(179, 136, 255, 0.2) !important;
  border-color: #00f5ff !important;
  color: #00f5ff !important;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.3) !important;
}

/* 底部输入区 */
.bg-gradient-to-t {
  background: linear-gradient(to top, rgba(13, 10, 25, 1) 60%, rgba(13, 10, 25, 0)) !important;
}
/* 输入框容器 */
.bg-white.border-\[1\.5px\] {
  background: rgba(22, 17, 36, 0.9) !important;
  border-color: rgba(179, 136, 255, 0.4) !important;
  box-shadow: 0 0 15px rgba(13, 10, 25, 0.5) !important;
}
.bg-white.border-\[1\.5px\]:focus-within {
  border-color: #ff007f !important;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.3) !important;
}
/* 输入框文本 */
#ai-chat-input {
  color: #f5f5f5 !important;
}
#ai-chat-input::placeholder {
  color: rgba(245, 245, 245, 0.4) !important;
}
/* 发送按钮 */
#ai-send-button {
  background: linear-gradient(135deg, #ff007f, #b388ff) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.4) !important;
}
#ai-send-button:hover {
  box-shadow: 0 0 15px #ff007f !important;
}


/* --- 4. 评论区美化 --- */

/* 评论面板容器 */
.absolute.bottom-0.z-20.inset-x-0.bg-white {
  background: rgba(15, 12, 28, 0.98) !important;
  border-top: 2px solid #ff007f !important;
  box-shadow: 0 -10px 30px rgba(255, 0, 127, 0.2) !important;
  color: #f5f5f5 !important;
}
/* 标题与关闭按钮 */
.text-lg.font-bold.pl-3 {
  color: #ffffff !important;
}
button[aria-label="close"] {
  color: #b388ff !important;
}
button[aria-label="close"]:hover {
  color: #ff007f !important;
}

/* 评分星星 */
.MuiRating-iconFilled {
  color: #ff007f !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.6)) !important;
}
.MuiRating-iconEmpty {
  color: rgba(255, 255, 255, 0.2) !important;
}

/* 评论输入框 */
.flex.flex-col.border-\[1\.5px\].border-gray-200 {
  background: rgba(25, 20, 45, 0.8) !important;
  border-color: rgba(179, 136, 255, 0.3) !important;
}
textarea[placeholder="发表评论"] {
  background: transparent !important;
  color: #f5f5f5 !important;
}
textarea[placeholder="发表评论"]::placeholder {
  color: rgba(245, 245, 245, 0.3) !important;
}

/* 评论列表与单项 */
.group.ml-0 {
  border-bottom: 1px solid rgba(179, 136, 255, 0.1) !important;
  padding-bottom: 12px !important;
}
.group.ml-0 .text-sm.text-grey-600 span.font-bold {
  color: #00f5ff !important; /* 用户名高亮 */
}
.group.ml-0 div.break-all {
  color: #e0e0e0 !important;
}
.group.ml-0 .text-xs.text-grey-600 {
  color: rgba(245, 245, 245, 0.4) !important;
}

/* 滚动条美化 */
.p-3.overflow-y-auto.h-full::-webkit-scrollbar {
  width: 6px !important;
}
.p-3.overflow-y-auto.h-full::-webkit-scrollbar-thumb {
  background: #b388ff !important;
  border-radius: 3px !important;
}
.p-3.overflow-y-auto.h-full::-webkit-scrollbar-track {
  background: rgba(13, 10, 25, 0.5) !important;
}
/* ==========================================
   《彻夜之歌》主题 - 界面优化补充样式
   ========================================== */

/* --- 1. 输入框深度优化（黑色底框与高对比度文字） --- */

/* 输入框容器 - 改为深夜漆黑底色 */
.bg-white.border-\[1\.5px\] {
  background: #050409 !important; /* 极深黑色，彻底解决看不清的问题 */
  border: 1.5px solid rgba(179, 136, 255, 0.4) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.3s ease !important;
}

/* 输入框聚焦状态 - 霓虹发光 */
.bg-white.border-\[1\.5px\]:focus-within {
  border-color: #ff007f !important;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* 输入框文本 - 纯白高亮，确保极佳可读性 */
#ai-chat-input {
  color: #ffffff !important; /* 纯白文字 */
  background: transparent !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* 输入框占位符 - 萤光青半透明 */
#ai-chat-input::placeholder {
  color: rgba(0, 245, 255, 0.4) !important; 
}


/* --- 2. 状态栏面板 (details / summary) 美化 --- */

/* 折叠面板外框 */
details {
  background: rgba(18, 14, 32, 0.85) !important;
  border: 1px solid rgba(179, 136, 255, 0.25) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  padding: 10px 14px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 面板激活展开状态 */
details[open] {
  border-color: #ff007f !important;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.15) !important;
  background: rgba(22, 16, 40, 0.9) !important;
}

/* 折叠面板标题栏 */
summary {
  color: #00f5ff !important; /* 默认萤光青 */
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  list-style: none !important; /* 隐藏默认三角符号 */
  outline: none !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

/* 隐藏 Safari 默认的三角符号 */
summary::-webkit-details-marker {
  display: none !important;
}

/* 标题悬停效果 */
summary:hover {
  color: #ff007f !important; /* 悬停变为霓虹粉 */
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.6) !important;
}

/* 面板内部展开内容文本 */
details[open] > *:not(summary) {
  color: #e0e0e0 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}


/* --- 3. 分割线 (Dividers) 霓虹化 --- */

/* 通用分割线与 HR 标签 */
hr, 
.border-t, 
div[class*="divider"] {
  border: none !important;
  height: 2px !important;
  /* 渐变霓虹光轨效果 */
  background: linear-gradient(90deg, 
    rgba(0, 245, 255, 0) 0%, 
    rgba(0, 245, 255, 0.8) 25%, 
    rgba(255, 0, 127, 0.8) 75%, 
    rgba(255, 0, 127, 0) 100%
  ) !important;
  margin: 16px 0 !important;
  opacity: 0.8 !important;
  box-shadow: 0 0 4px rgba(255, 0, 127, 0.2) !important;
}