/* =========================================================
   UIU / SCP Foundation Tactical Status Panel
   ========================================================= */

/* 根容器设置：深色战术背景与科技蓝边框 */
.elevator-status {
    background-color: #070b14 !important;
    border: 1px solid #1a365d !important;
    border-left: 4px solid #00f0ff !important;
    color: #a0c4ff !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    margin-bottom: 15px !important;
    position: relative !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.1) !important;
    overflow: hidden !important;
    border-radius: 2px !important;
}

/* UIU Logo 水印 (右上角) */
.elevator-status::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    right: 15px !important;
    width: 65px !important;
    height: 65px !important;
    background-image: url('https://bkimg.cdn.bcebos.com/smart/962bd40735fae6cd7b89bac5a9f9182442a7d933a177-bkimg-process,v_1,rw_400,rh_365,maxl_311?x-bce-process=image/format,f_auto') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.15 !important; 
    pointer-events: none !important;
    z-index: 0 !important;
    filter: drop-shadow(0 0 5px #00f0ff) grayscale(20%) !important;
    transition: opacity 0.3s ease !important;
}

.elevator-status:hover::before {
    opacity: 0.3 !important; /* 悬停时Logo略微变亮 */
}

/* 标题栏 (Summary) */
.elevator-status > summary {
    background: linear-gradient(90deg, #0a192f 0%, #040d1a 100%) !important;
    padding: 12px 15px !important;
    font-weight: bold !important;
    color: #00f0ff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    list-style: none !important; 
    border-bottom: 1px solid rgba(0, 240, 255, 0.3) !important;
    position: relative !important;
    z-index: 1 !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4) !important;
}

/* 隐藏默认箭头并替换为高科技终端风格符号 */
.elevator-status > summary::-webkit-details-marker {
    display: none !important;
}
.elevator-status > summary::before {
    content: '[ SYSTEM.ACCESS ]' !important;
    margin-right: 10px !important;
    color: #00f0ff !important;
    font-size: 0.85em !important;
    opacity: 0.8 !important;
}
.elevator-status[open] > summary::before {
    content: '[ DATA.UNLOCKED ]' !important;
    color: #ff3366 !important; 
    text-shadow: 0 0 8px rgba(255, 51, 102, 0.6) !important;
}

/* 内容区：添加CRT扫描线背景 */
.elevator-status .status-content {
    padding: 15px 20px !important;
    position: relative !important;
    z-index: 1 !important;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    ) !important;
}

/* 数据条目 (p标签) */
.elevator-status status p,
.elevator-status .panel-content p {
    margin: 6px 0 !important;
    padding: 6px 8px !important;
    border-bottom: 1px dashed rgba(0, 240, 255, 0.15) !important;
    font-size: 0.9em !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease-out !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px !important;
}

/* 悬停交互：数据高亮 */
.elevator-status status p:hover,
.elevator-status .panel-content p:hover {
    background: rgba(0, 240, 255, 0.08) !important;
    padding-left: 12px !important;
    border-bottom-color: rgba(0, 240, 255, 0.6) !important;
    color: #ffffff !important;
    box-shadow: inset 2px 0 0 #00f0ff !important;
}

/* 记忆区特殊样式 (警告级别黄色) */
.info-panel h4 {
    color: #ffaa00 !important;
    border-left: 3px solid #ffaa00 !important;
    padding-left: 10px !important;
    margin: 15px 0 8px 0 !important;
    font-size: 0.95em !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: linear-gradient(90deg, rgba(255, 170, 0, 0.1) 0%, transparent 100%) !important;
    text-shadow: 0 0 5px rgba(255, 170, 0, 0.5) !important;
}

/* 全局全息扫描动画 (覆盖整个状态栏) */
@keyframes uiu-hologram-scan {
    0% { background-position: 0 -100%; }
    100% { background-position: 0 100%; }
}
.elevator-status::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, 
        rgba(0, 240, 255, 0) 0%, 
        rgba(0, 240, 255, 0.03) 50%, 
        rgba(0, 240, 255, 0) 100%
    ) !important;
    background-size: 100% 200% !important;
    animation: uiu-hologram-scan 3s linear infinite !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
/* --- 1. 顶部栏 (Top Bar) --- */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(180deg, #020617 0%, rgba(2, 6, 23, 0.85) 100%) !important;
    border-bottom: 1px solid #0891b2 !important;
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #22d3ee !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    text-shadow: 0 0 5px rgba(34, 211, 238, 0.4) !important;
    letter-spacing: 0.5px !important;
}

/* 顶部栏图标悬浮与点击虚影效果 */
#ai-model-selector .group.flex.items-center:active,
#header-setting-button:active {
    transform: scale(0.96) !important;
    text-shadow: -2px 0 #0891b2, 2px 0 #22d3ee !important;
    filter: drop-shadow(0 0 8px #22d3ee) !important;
    transition: all 0.1s ease !important;
}

/* --- 2. 底部输入栏 (Bottom Input Bar) --- */
#ai-chat-bottom-input {
    background: linear-gradient(0deg, #020617 0%, rgba(2, 6, 23, 0.9) 100%) !important;
    border-top: 1px solid rgba(8, 145, 178, 0.5) !important;
}

#ai-chat-input {
    background-color: rgba(2, 6, 23, 0.7) !important;
    color: #cffafe !important;
    border: 1px solid #0891b2 !important;
    border-radius: 2px !important; /* 硬朗的高科技直角感 */
    font-family: 'Consolas', 'Courier New', monospace !important;
    box-shadow: inset 0 0 10px rgba(8, 145, 178, 0.1) !important;
    transition: all 0.3s ease !important;
}

#ai-chat-input:focus {
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3), inset 0 0 8px rgba(34, 211, 238, 0.2) !important;
    border-color: #22d3ee !important;
    outline: none !important;
}

#ai-chat-input::placeholder {
    color: #0891b2 !important;
    opacity: 0.7 !important;
}

/* SCP风格的选中效果：反色高亮 */
#ai-chat-input::selection {
    background: #22d3ee !important;
    color: #020617 !important;
}

/* --- 3. 底部按钮栏 (Mod / Stream Buttons) --- */
#ai-mod-button2 button.MuiButton-root {
    background: rgba(2, 6, 23, 0.8) !important;
    border: 1px solid #0891b2 !important;
    color: #22d3ee !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    border-radius: 2px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    background: rgba(8, 145, 178, 0.2) !important;
    box-shadow: 0 0 10px rgba(8, 145, 178, 0.5) !important;
}

/* 核心要求：点击时的错位虚影效果 (Glitch Phantom) */
#ai-mod-button2 button.MuiButton-root:active {
    transform: scale(0.95) !important;
    background: rgba(34, 211, 238, 0.3) !important;
    box-shadow: -4px 0 10px rgba(8, 145, 178, 0.8), 4px 0 10px rgba(34, 211, 238, 0.8) !important;
    text-shadow: -2px 0px 1px #0891b2, 2px 0px 1px #22d3ee !important;
}

/* --- 4. 分页栏 (Pagination) --- */
.MuiPaginationItem-root {
    color: #0891b2 !important;
    border: 1px solid transparent !important;
    font-family: 'Consolas', monospace !important;
    transition: all 0.2s !important;
}

.MuiPaginationItem-root:hover {
    background: rgba(8, 145, 178, 0.15) !important;
    border-color: #0891b2 !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: #0891b2 !important;
    color: #020617 !important; /* 选中时深色字，保证对比度 */
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.6) !important;
}

/* 跳转输入区域 */
.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #22d3ee !important;
    font-family: 'Consolas', monospace !important;
}
.MuiInputBase-input {
    color: #cffafe !important;
    background: rgba(2, 6, 23, 0.8) !important;
    border: 1px solid #0891b2 !important;
}

/* --- 5. 评论区 (Comment Section) --- */
/* 主背景：深色终端背景带微弱扫描线 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #020617 !important;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(8,145,178,0.03) 2px, rgba(8,145,178,0.03) 4px) !important;
    border-top: 1px solid #0891b2 !important;
    box-shadow: 0 -10px 30px rgba(2, 6, 23, 0.9) !important;
}

/* 评论区所有文本颜色覆写，确保在暗色背景下的绝对可读性 */
div.text-lg.font-bold, 
div.text-sm.text-grey-600 span.font-bold {
    color: #22d3ee !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    text-shadow: 0 0 3px rgba(34, 211, 238, 0.3) !important;
}

p.MuiTypography-body1.text-grey-600, 
div.break-all {
    color: #cffafe !important; /* 极浅的青色，保证正文阅读不费眼 */
    font-family: 'Consolas', system-ui, sans-serif !important;
    line-height: 1.6 !important;
}

div.text-xs.text-grey-600 {
    color: #0891b2 !important; /* 时间戳使用暗青色 */
}

/* 评论输入框 */
textarea.rc-textarea {
    background: rgba(2, 6, 23, 0.6) !important;
    color: #cffafe !important;
    border: 1px solid #0891b2 !important;
    border-radius: 2px !important;
    font-family: 'Consolas', monospace !important;
}
textarea.rc-textarea:focus {
    border-color: #22d3ee !important;
    box-shadow: inset 0 0 8px rgba(34, 211, 238, 0.2) !important;
}

/* 字数统计 */
div.bg-gray-100.text-gray-500 {
    background: transparent !important;
    color: #0891b2 !important;
    border: 1px solid #0891b2 !important;
}

/* 评论区排序按钮 */
button.MuiButton-containedPrimary {
    background: #0891b2 !important;
    color: #020617 !important;
    font-family: 'Consolas', monospace !important;
    border-radius: 2px !important;
}
button.MuiButton-outlinedPrimary {
    border-color: #0891b2 !important;
    color: #22d3ee !important;
    font-family: 'Consolas', monospace !important;
    border-radius: 2px !important;
}

/* 评论区发送按钮、点赞按钮虚影点击效果 */
div.cursor-pointer.group.flex.items-center.justify-center:active,
button.text-gray-400:active {
    transform: scale(0.85) !important;
    filter: drop-shadow(-2px 0 4px #0891b2) drop-shadow(2px 0 4px #22d3ee) !important;
    transition: all 0.1s !important;
}
button.text-gray-400 svg {
    color: #0891b2 !important;
}

/* 分割线与回复边框颜色 */
div.style_divider__mW0YX {
    background-color: rgba(8, 145, 178, 0.3) !important;
}
div.ml-8.border-l {
    border-color: rgba(8, 145, 178, 0.4) !important;
}
/* 移除顶部的颜色装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* =========================================
   SCP / UIU 特工终端交互界面 (高科技浅色护眼版)
   ========================================= */

/* 1. 强制移除系统默认的顶部颜色装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 统一聊天框主体 - UIU终端浅色面板 */
.bg-gray-100\/90.relative.inline-block {
    /* 护眼的高科技冷灰白渐变背景 */
    background: linear-gradient(135deg, rgba(246, 248, 250, 0.95) 0%, rgba(230, 238, 245, 0.95) 100%) !important;
    border: 1px solid rgba(130, 170, 210, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0, 40, 80, 0.08), inset 0 0 15px rgba(255, 255, 255, 0.8) !important;
    border-radius: 4px !important; /* 基金会文档风格的硬朗直角微圆 */
    position: relative !important;
    isolation: isolate !important; /* 建立独立的层叠上下文，防止元素溢出干扰 */
    overflow: hidden !important;
    padding-top: 10px !important;
}

/* 3. 背景动效 - 动态科技网格与扫描线 (内嵌 SVG SMIL) */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* 包含网格背景与上下往复的扫描线动画 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='g' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath d='M30 0L0 0 0 30' fill='none' stroke='rgba(100,150,200,0.12)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cline x1='0' y1='0' x2='100%25' y2='0' stroke='rgba(100,150,200,0.3)' stroke-width='1.5'%3E%3Canimate attributeName='y1' values='0;100%25;0' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='y2' values='0;100%25;0' dur='8s' repeatCount='indefinite'/%3E%3C/line%3E%3C/svg%3E") !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 4. UIU Logo 植入 - 右上角 */
.bg-gray-100\/90.relative.inline-block::after {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 50px !important;
    height: 50px !important;
    background-image: url('https://catai.wiki/b848f21a-1fd1-49fe-ed7d-2965d6e18e00/w=3000') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.65 !important; /* 半透明以防止喧宾夺主 */
    z-index: 0 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)) !important;
}

/* 5. 核心文本区域 - 绝对可读性保障 */
.markdown-body {
    color: #1a202c !important; /* 极深灰，在浅色背景上提供最高级别的清晰度 */
    font-family: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif !important;
    font-weight: 500 !important;
    position: relative !important;
    z-index: 1 !important; /* 确保文本在动画和Logo之上 */
    background: transparent !important;
    text-shadow: none !important; /* 严禁阴影，确保阅读无障碍 */
}

/* 6. 底部附加元素 (按钮、模型名称、Token) - 终端机蓝调 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #2b5687 !important; /* 科技深蓝，匹配 UIU 风格 */
    font-weight: bold !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.2s ease !important;
}

/* 底部按钮悬停效果 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background-color: rgba(43, 86, 135, 0.15) !important;
    color: #1a365d !important;
}

/* 7. 移动端与低动效模式适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block::after {
        width: 35px !important;
        height: 35px !important;
        top: 8px !important;
        right: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before {
        /* 关闭扫描线，仅保留静态网格 */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='g' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath d='M30 0L0 0 0 30' fill='none' stroke='rgba(100,150,200,0.12)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E") !important;
    }
}