/* =========================================
   【星海风格】全局美化 CSS
   ========================================= */

/* --- 1. 顶部栏 (深空渐变与模糊光晕) --- */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(135deg, rgba(10, 15, 36, 0.95), rgba(20, 10, 46, 0.95)) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(100, 150, 255, 0.2) !important;
}
/* 顶部栏模型选择器 */
#ai-model-selector .group.flex.items-center {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(100, 150, 255, 0.3) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
    box-shadow: 0 0 12px rgba(100, 150, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(100, 150, 255, 0.8) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #e0f2fe !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
#ai-model-selector .shrink-0.flex.items-center svg {
    color: #bae6fd !important;
}
/* 顶部栏图标呼吸高亮特效 */
.sticky.w-full.top-0 svg {
    color: #bae6fd !important;
    transition: all 0.3s ease !important;
}
.sticky.w-full.top-0 svg:hover {
    filter: drop-shadow(0 0 6px #bae6fd) !important;
    transform: scale(1.1) !important;
}
.sticky.w-full.top-0 button.MuiIconButton-root:hover {
    background: rgba(100, 150, 255, 0.1) !important;
}

/* --- 2. 开场白选择器 (暗夜星云) --- */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: linear-gradient(to right, #0f172a, #1e1b4b) !important;
    border: 1px solid rgba(125, 211, 252, 0.3) !important;
    transition: all 0.3s ease !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    box-shadow: 0 0 15px rgba(125, 211, 252, 0.4) !important;
    border-color: rgba(125, 211, 252, 0.7) !important;
}
/* 确保开场白文字与图标在深色背景下清晰可见 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] span {
    color: #e0f2fe !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg {
    color: #7dd3fc !important;
}

/* --- 3. 按钮栏 (星体按钮) --- */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
    color: #e0f2fe !important;
    border: 1px solid rgba(167, 139, 250, 0.4) !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: linear-gradient(135deg, #312e81, #4c1d95) !important;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.7) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(196, 181, 253, 0.8) !important;
}
#ai-mod-button2 button.MuiButton-root svg {
    color: #c4b5fd !important;
}

/* --- 4. 底部栏聊天输入 (深渊悬浮舱) --- */
#ai-chat-input {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(125, 211, 252, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 0 15px rgba(56, 189, 248, 0.15) !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    transition: all 0.3s ease !important;
}
#ai-chat-input:focus {
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 0 20px rgba(56, 189, 248, 0.5) !important;
    border-color: rgba(125, 211, 252, 0.9) !important;
    outline: none !important;
}
#ai-chat-input::placeholder {
    color: rgba(148, 163, 184, 0.6) !important;
}
#ai-chat-input::selection {
    background: rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important;
}

/* --- 5. 分页栏 (星轨节点) --- */
.MuiPaginationItem-root {
    color: #bae6fd !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    background: rgba(15, 23, 42, 0.6) !important;
    transition: all 0.3s ease !important;
}
.MuiPaginationItem-root:hover {
    background: rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, #0284c7, #3730a3) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.7) !important;
    border: none !important;
}
.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #e0f2fe !important;
}
.MuiInputBase-input {
    color: #e0f2fe !important;
}

/* --- 6. 评论区 (无垠深空) --- */
/* 主背景：强制覆盖为深色星空渐变 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(180deg, #020617 0%, #0f172a 100%) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.3) !important;
}
/* 标题与统计文字反转为亮色 */
div.text-lg.font-bold {
    color: #f8fafc !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.2) !important;
}
p.MuiTypography-body1.text-grey-600 {
    color: #cbd5e1 !important;
}
span.text-orange-500 {
    color: #fde047 !important; /* 星芒黄 */
    text-shadow: 0 0 8px rgba(253, 224, 71, 0.6) !important;
}
/* 评分星星发光 */
span.MuiRating-iconEmpty svg {
    color: rgba(148, 163, 184, 0.3) !important;
}
span.MuiRating-iconFilled svg {
    color: #fde047 !important;
    filter: drop-shadow(0 0 5px #fde047) !important;
}
/* 评论输入框重构 */
div.flex.flex-col.border-gray-200 {
    border-color: rgba(56, 189, 248, 0.3) !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6) !important;
}
textarea.rc-textarea {
    background: transparent !important;
    color: #f8fafc !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
/* 输入框字数统计 */
div.bg-gray-100.text-gray-500 {
    background: rgba(30, 41, 59, 0.6) !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
}
/* 发送评论按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, #1e1b4b, #3730a3) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.8) !important;
    background: linear-gradient(135deg, #312e81, #4c1d95) !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #e0f2fe !important;
}
/* 排序按钮 */
button.MuiButton-containedPrimary {
    background: linear-gradient(135deg, #0284c7, #4338ca) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.6) !important;
}
button.MuiButton-outlinedPrimary {
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #7dd3fc !important;
}
button.MuiButton-outlinedPrimary:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.9) !important;
}
/* 评论列表项元素与分割线 */
div.style_divider__mW0YX {
    background: rgba(56, 189, 248, 0.15) !important;
}
div.text-sm.text-grey-600 span.font-bold {
    color: #7dd3fc !important; /* 用户名高亮 */
}
span.text-\[10px\] {
    color: #fde047 !important;
    background: rgba(253, 224, 71, 0.15) !important;
    border: 1px solid rgba(253, 224, 71, 0.3) !important;
}
div.break-all {
    color: #f1f5f9 !important; /* 评论正文高亮白 */
    line-height: 1.6 !important;
}
div.text-xs.text-grey-600 {
    color: #64748b !important; /* 时间戳暗灰 */
}
button.text-gray-400 svg {
    transition: all 0.3s ease !important;
}
button.text-gray-400:hover svg {
    color: #f472b6 !important; /* 点赞变星云粉 */
    filter: drop-shadow(0 0 6px #f472b6) !important;
    transform: scale(1.1) !important;
}
span.cursor-pointer {
    color: #38bdf8 !important;
    transition: all 0.2s ease !important;
}
span.cursor-pointer:hover {
    color: #bae6fd !important;
    text-shadow: 0 0 8px rgba(186, 230, 253, 0.8) !important;
}
div.ml-8.border-l {
    border-left-color: rgba(56, 189, 248, 0.25) !important;
}

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

/* 2. 聊天框主体：深邃宇宙与星云紫暗色渐变 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #05050A 0%, #150B24 50%, #000000 100%) !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(138, 43, 226, 0.1) !important;
    isolation: isolate !important; /* 建立层叠上下文，保护文字 */
    overflow: hidden !important;
}

/* 3. 背景动效：模拟缓慢漂移的星空/星云微光 */
.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: radial-gradient(circle at 50% 50%, rgba(75, 0, 130, 0.15), transparent 60%),
                radial-gradient(circle at 80% 20%, rgba(0, 191, 255, 0.1), transparent 40%) !important;
    z-index: -1 !important;
    animation: cosmicDrift 15s infinite alternate ease-in-out !important;
    pointer-events: none !important;
}

@keyframes cosmicDrift {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(5deg) scale(1.1); }
}

/* 4. 核心文本：绝对可读性！极暗背景必须配纯白/高亮文字 */
.markdown-body {
    color: #F8F9FA !important; /* 高对比度星光白 */
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important; /* 加粗以在暗色背景上更清晰 */
    text-shadow: none !important; /* 严禁发光阴影干扰阅读 */
    background: transparent !important;
    z-index: 1 !important;
}

/* 适配代码块等内部元素 */
.markdown-body pre, 
.markdown-body code {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #00E5FF !important; /* 亮青色（霓虹蓝）代码文字，极具科幻感 */
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
}

/* 5. 底部附加元素：浅灰白色，清晰且不喧宾夺主 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #CED4DA !important; 
    opacity: 0.8 !important;
    text-shadow: none !important;
}

/* 底部按钮悬停效果：亮紫色发光感 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #FFFFFF !important;
    background-color: rgba(138, 43, 226, 0.25) !important;
    opacity: 1 !important;
}

/* 6. 加载动画：替换为闪烁的星光圆点 (SMIL实现，防动画失效) */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
}

.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" width="28" height="20" viewBox="0 0 28 20"><circle cx="6" cy="10" r="2.5" fill="%23E0B0FF"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.5s" begin="0s" repeatCount="indefinite" /></circle><circle cx="14" cy="10" r="2.5" fill="%2300E5FF"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.5s" begin="0.3s" repeatCount="indefinite" /></circle><circle cx="22" cy="10" r="2.5" fill="%23FFFFFF"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.5s" begin="0.6s" repeatCount="indefinite" /></circle></svg>') !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 7. 移动端与低动效兼容 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 10px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before {
        animation-duration: 30s !important; /* 极大降低星云移动频率 */
    }
}