/* =========================================================
   九天星河·深邃修仙蓝 (极致清晰高对比版)
   - 绝对禁用绿色，全盘采用深海蓝/冰蓝
   - 强制纯白正文，彻底解决文字与背景混色问题
========================================================= */

/* ---------------------------------------------------------
   1. 隐藏多余元素与基础重置
--------------------------------------------------------- */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important; /* 隐藏聊天框顶部难看的颜色条 */
}

/* ---------------------------------------------------------
   2. 聊天框整体美化 (气泡)
--------------------------------------------------------- */
.bg-gray-100\/90.relative.inline-block {
    /* 极暗的深空蓝背景，为纯白文字提供完美底色 */
    background: linear-gradient(145deg, #050b14 0%, #112240 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(56, 189, 248, 0.15) !important;
    backdrop-filter: blur(10px) !important;
}

/* 聊天框主要文本 (最高优先级：纯白，绝对可读) */
.markdown-body {
    color: #ffffff !important; /* 强制纯白，绝不与深蓝背景混淆 */
    font-family: "Noto Serif SC", "SimSun", serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-weight: 500 !important; /* 稍微加粗提升清晰度 */
    text-shadow: none !important; /* 禁用阴影防止发虚 */
}

/* 聊天框底部附加元素 (按钮、模型名、Token等) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #7dd3fc !important; /* 亮冰蓝色，与纯白正文区分开 */
}

/* ---------------------------------------------------------
   3. 界面美化：顶部栏 & 开场白
--------------------------------------------------------- */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(5, 11, 20, 0.9) !important; /* 更深的顶部栏 */
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.4) !important;
}

#ai-model-selector .truncate.text-\[13px\],
.sticky.w-full.top-0 svg {
    color: #ffffff !important; /* 纯白图标和文字 */
}

/* 开场白选择器 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: rgba(17, 34, 64, 0.8) !important;
    border: 1px solid #38bdf8 !important;
    color: #ffffff !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg {
    color: #38bdf8 !important;
}

/* ---------------------------------------------------------
   4. 界面美化：底部输入区
--------------------------------------------------------- */
.bg-gradient-to-t {
    background: linear-gradient(to top, #050b14 80%, transparent) !important;
}

#ai-chat-bottom-input, #ai-chat-input {
    background: rgba(10, 15, 30, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important; /* 纯白输入文字 */
    border-radius: 8px !important;
}

#ai-chat-input::placeholder {
    color: #bae6fd !important;
    opacity: 0.8 !important;
}

#ai-chat-input::selection {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   5. 界面美化：评论区 & 分页
--------------------------------------------------------- */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #050b14 !important;
    border-top: 1px solid #38bdf8 !important;
    color: #ffffff !important;
}

/* 评论区各种文本与图标 */
div.text-lg.font-bold, 
p.MuiTypography-body1.text-grey-600,
div.text-sm.text-grey-600 span.font-bold,
div.break-all {
    color: #ffffff !important; /* 纯白评论文字 */
}

div.text-xs.text-grey-600 {
    color: #bae6fd !important; /* 浅蓝时间戳 */
}

/* 评论输入框 */
div.flex.flex-col.border-gray-200 {
    border-color: rgba(56, 189, 248, 0.4) !important;
}
textarea.rc-textarea {
    background: rgba(17, 34, 64, 0.6) !important;
    color: #ffffff !important;
}
div.bg-gray-100.text-gray-500 {
    background: transparent !important;
    color: #7dd3fc !important;
}

/* 分割线 */
div.style_divider__mW0YX {
    background-color: rgba(56, 189, 248, 0.3) !important;
}

/* 分页栏按钮 */
.MuiPaginationItem-root {
    color: #bae6fd !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}
.MuiPaginationItem-root.Mui-selected {
    background-color: rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   6. 聊天框内状态栏美化 (<ai> 容器)
--------------------------------------------------------- */
ai {
    display: block;
    margin: 12px 0;
    background: rgba(8, 14, 26, 0.8); /* 更暗的内层背景 */
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 8px;
    padding: 8px;
}

ai details {
    margin-bottom: 6px;
    background: rgba(17, 34, 64, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

ai summary {
    background: linear-gradient(90deg, rgba(2, 132, 199, 0.8) 0%, rgba(8, 14, 26, 0.8) 100%);
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff; /* 纯白标题 */
    list-style: none;
    border-left: 3px solid #38bdf8;
}

ai summary::-webkit-details-marker, ai summary::marker { display: none; }

ai p, ai ul, ai ol {
    padding: 8px 12px;
    margin: 0;
    color: #ffffff; /* 状态栏内文字强制纯白 */
}

ai strong {
    color: #7dd3fc; /* 统一使用亮冰蓝色作为强调色，完全抛弃金色和绿色 */
    font-weight: bold;
}

ai hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), transparent);
    margin: 8px 0;
}

/* ---------------------------------------------------------
   7. 侧面悬浮状态栏 (<side-bar> 容器)
--------------------------------------------------------- */
side-bar {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 220px;
    background: rgba(5, 11, 20, 0.95); /* 极暗背景 */
    backdrop-filter: blur(8px);
    border: 1px solid #0ea5e9;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9), 0 0 15px rgba(14, 165, 233, 0.4);
    color: #ffffff; /* 纯白文字 */
    z-index: 999;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sb-title {
    background: linear-gradient(135deg, #0284c7 0%, #050b14 100%);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border-bottom: 1px solid #38bdf8;
    letter-spacing: 2px;
}

.sb-content {
    padding: 12px;
    font-size: 13px;
    line-height: 1.8;
}

.sb-content strong {
    color: #7dd3fc; /* 侧边栏强调色也改为亮冰蓝 */
}

/* 移动端适配：变为边缘悬浮抽屉，防遮挡正文 */
@media (max-width: 768px) {
    side-bar {
        right: -190px;
        opacity: 0.7;
    }
    side-bar:hover, side-bar:active {
        right: 10px;
        opacity: 1;
    }
    side-bar::before {
        content: "◀ 状态";
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        color: #38bdf8;
        font-weight: bold;
        font-size: 12px;
        white-space: nowrap;
    }
    side-bar:hover::before, side-bar:active::before {
        display: none;
    }
}