/* 统一聊天框主体：柔和深海/太空蓝渐变、磨砂玻璃与微弱科技光晕 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(145deg, rgba(16, 24, 43, 0.85) 0%, rgba(28, 45, 70, 0.9) 100%) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 150, 255, 0.12), inset 0 0 10px rgba(0, 255, 255, 0.05) !important;
    transition: all 0.3s ease-in-out !important;
    isolation: isolate !important;
}

/* 聊天框悬浮时的科技感增强 */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 6px 24px rgba(0, 150, 255, 0.25), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
}

/* 核心文本：深色背景强制搭配高对比度冰雪白/蓝，绝对保证可读性，禁用文字阴影 */
.markdown-body {
    color: #E6F2FF !important; 
    font-weight: bold !important;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif !important;
    background: transparent !important;
    z-index: 1 !important;
}

/* 底部附加元素：按钮、模型名称、Token消耗 (适配科幻背景的柔和亮蓝色) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #8AB4F8 !important; 
    font-weight: bold !important;
}

/* 顶部的颜色装饰条：默认隐藏，保持界面清爽 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 自定义科幻风加载动画 (SMIL SVG实现，防CSS动画屏蔽) --- */

/* 1. 隐藏默认加载点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 2. 设置加载容器定位 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
}

/* 3. 注入SMIL SVG科幻雷达/光核动画 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><circle cx="12" cy="12" r="8" fill="none" stroke="%2300FFFF" stroke-width="2" opacity="0.8"><animate attributeName="r" values="8;10;8" dur="1.5s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.8;0.2;0.8" dur="1.5s" repeatCount="indefinite" /></circle><circle cx="12" cy="12" r="3" fill="%2300FFFF"><animate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite" /></circle></svg>') !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
}

/* 移动端与低动效适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 8px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block {
        transition: none !important;
    }
}

/* =========================================
   柔和科幻主题美化方案 (Soft Sci-Fi Theme)
   ========================================= */

/* --- 1. 顶部栏美化 --- */
/* 顶部主容器：深色半透明石板蓝，底部带有微弱的冰蓝光晕 */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    backdrop-filter: blur(10px) !important; /* 毛玻璃效果增强科幻感 */
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 4px 20px -2px rgba(14, 165, 233, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* 模型选择器：全息按钮质感 */
#ai-model-selector .group.flex.items-center {
    background-color: rgba(14, 165, 233, 0.1) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 6px !important; /* 更硬朗的极简倒角 */
    padding: 4px 12px !important;
    transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
    background-color: rgba(56, 189, 248, 0.2) !important;
    border-color: rgba(56, 189, 248, 0.8) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}

/* 顶部文字与图标颜色：高亮冰蓝色，确保深色背景下清晰可见 */
#ai-model-selector .truncate.text-\[13px\],
#ai-model-selector .shrink-0.flex.items-center svg,
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
#header-setting-button svg {
    color: #e0f2fe !important; 
    transition: all 0.3s ease !important;
}

/* 顶部图标悬浮动效：发光放大 */
#header-setting-button:hover svg,
.sticky.w-full.top-0 button.MuiIconButton-root:hover svg.lucide-music-2 {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.6)) !important;
    transform: scale(1.1) !important;
}

/* 历史记录未读角标：科幻警示蓝 */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background-color: #38bdf8 !important;
    box-shadow: 0 0 8px #38bdf8 !important;
}

/* --- 2. 开场白选择器美化 --- */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]) {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    background-color: rgba(14, 165, 233, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.2) !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    color: #7dd3fc !important;
}

/* --- 3. 按钮栏美化 --- */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #f0f9ff !important;
    border-radius: 6px !important;
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.4) !important;
    transition: all 0.3s ease !important;
    letter-spacing: 1px !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: linear-gradient(135deg, #0369a1, #075985) !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.6) !important;
    transform: translateY(-1px) !important;
}
#ai-mod-button2 button.MuiButton-root svg {
    color: #e0f2fe !important;
}

/* --- 4. 底部栏输入框美化 --- */
#ai-chat-bottom-input {
    background-color: transparent !important;
}
#ai-chat-input {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 8px !important;
    color: #f1f5f9 !important; /* 极浅的灰白色文字 */
    transition: all 0.3s ease !important;
}
#ai-chat-input:focus {
    border-color: #38bdf8 !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2) !important;
    outline: none !important;
}
#ai-chat-input::placeholder {
    color: #64748b !important;
}
#ai-chat-input::selection {
    background-color: rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
}

/* --- 5. 分页栏美化 --- */
.MuiPaginationItem-root {
    color: #7dd3fc !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}
.MuiPaginationItem-root:hover {
    background-color: rgba(14, 165, 233, 0.2) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
}
.MuiPaginationItem-root.Mui-selected {
    background-color: rgba(2, 132, 199, 0.8) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}
.MuiInputBase-input {
    color: #e0f2fe !important;
    background-color: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 4px !important;
}
.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #94a3b8 !important;
}

/* --- 6. 评论区美化 (深色科幻模式) --- */
/* 评论区主背景：深渊石板色 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #0f172a !important; 
    border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
}

/* 评论区全局文字颜色反转：由于背景变暗，文字必须变亮 */
div.text-lg.font-bold,
div.break-all {
    color: #e2e8f0 !important; /* 亮灰白，保证正文可读 */
}
p.MuiTypography-body1.text-grey-600,
div.text-sm.text-grey-600 span.font-bold {
    color: #bae6fd !important; /* 用户名用浅冰蓝 */
}
div.text-xs.text-grey-600 {
    color: #64748b !important; /* 时间戳用暗蓝灰 */
}
span.text-\[10px\] {
    color: #38bdf8 !important;
    background-color: rgba(14, 165, 233, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* 评分星星：全息光效 */
span.MuiRating-iconEmpty svg {
    color: rgba(56, 189, 248, 0.2) !important;
}
span.MuiRating-iconFilled svg {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.8)) !important;
}
span.text-orange-500 {
    color: #7dd3fc !important;
}

/* 评论输入框 */
div.flex.flex-col.border-gray-200 {
    border-color: rgba(56, 189, 248, 0.3) !important;
    border-radius: 8px !important;
    background-color: rgba(30, 41, 59, 0.5) !important;
}
textarea.rc-textarea {
    background-color: transparent !important;
    color: #f8fafc !important;
}
textarea.rc-textarea:focus {
    background-color: rgba(15, 23, 42, 0.8) !important;
}
div.bg-gray-100.text-gray-500 {
    background-color: rgba(15, 23, 42, 0.6) !important;
    color: #64748b !important;
    border-top: 1px solid rgba(56, 189, 248, 0.1) !important;
}

/* 发送按钮图标 */
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #38bdf8 !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover svg[data-icon="Send03"] {
    transform: translateX(3px) !important;
    filter: drop-shadow(0 0 5px #38bdf8) !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
    background-color: rgba(2, 132, 199, 0.8) !important;
    color: white !important;
    border: 1px solid #38bdf8 !important;
    border-radius: 4px !important;
}
button.MuiButton-outlinedPrimary {
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #7dd3fc !important;
    border-radius: 4px !important;
}
button.MuiButton-outlinedPrimary:hover {
    background-color: rgba(14, 165, 233, 0.15) !important;
    border-color: #38bdf8 !important;
}

/* 单条评论项：悬浮微光扫过效果 */
div.group.ml-0 {
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}
div.group.ml-0:hover {
    background-color: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(56, 189, 248, 0.15) !important;
}

/* 头像科幻边框 */
div.group img.rounded-full {
    border: 2px solid rgba(56, 189, 248, 0.5) !important;
    padding: 2px !important;
    background-color: #0f172a !important;
}

/* 点赞按钮与回复文字 */
button.text-gray-400 {
    color: #64748b !important;
    transition: all 0.2s ease !important;
}
button.text-gray-400:hover {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.5)) !important;
}
span.cursor-pointer {
    color: #7dd3fc !important;
    transition: all 0.2s ease !important;
}
span.cursor-pointer:hover {
    color: #38bdf8 !important;
    text-shadow: 0 0 5px rgba(56, 189, 248, 0.5) !important;
}

/* 分割线与回复边框：极细发光线 */
div.style_divider__mW0YX {
    background-color: rgba(56, 189, 248, 0.15) !important;
}
div.ml-8.border-l {
    border-left: 1px solid rgba(56, 189, 248, 0.3) !important;
}