/* =========================================
   中式恐怖 x 伪人安全屋 状态栏美化 (修复版)
========================================= */

/* 1. 核心容器：深渊安全屋背景 */
details.elevator-status {
    background-color: #0a0a0a !important; /* 极深黑底色，确保高对比度 */
    border: 1px solid #3a0000;
    border-left: 4px solid #8b0000; /* 左侧暗红警戒线 */
    color: #ffffff !important; /* 强制全局纯白字体 */
    border-radius: 2px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "STZhongsong", "SimSun", "KaiTi", serif; /* 优先使用中式宋体/楷体 */
    position: relative;
}

/* 展开时的诡异呼吸灯特效 */
@keyframes bloodBreathing {
    0% { box-shadow: 0 0 8px rgba(139, 0, 0, 0.3); border-left-color: #8b0000; }
    50% { box-shadow: 0 0 20px rgba(220, 20, 60, 0.6); border-left-color: #ff0000; }
    100% { box-shadow: 0 0 8px rgba(139, 0, 0, 0.3); border-left-color: #8b0000; }
}
details.elevator-status[open] {
    border-color: #550000;
    animation: bloodBreathing 4s infinite;
}

/* 2. 标题栏 (Summary)：符箓与伪人探测 */
details.elevator-status > summary {
    background: linear-gradient(90deg, #1a0505 0%, #0a0a0a 100%);
    padding: 12px 16px;
    font-size: 1.15em;
    font-weight: bold;
    color: #ffcccc !important; /* 标题使用带血色的白 */
    cursor: pointer;
    list-style: none; /* 隐藏默认箭头 */
    border-bottom: 1px dashed #3a0000;
    display: flex;
    align-items: center;
    user-select: none;
    letter-spacing: 2px;
}
details.elevator-status > summary::-webkit-details-marker {
    display: none; /* 兼容Safari隐藏箭头 */
}

/* 3. 动态特效：祥云(安全) -> 异瞳(警报) */
details.elevator-status > summary::before {
    content: "☁️ 镇"; /* 关闭状态：祥云镇压 */
    margin-right: 12px;
    font-size: 1.2em;
    filter: grayscale(100%) brightness(0.7);
    transition: all 0.5s ease;
    display: inline-block;
}
details.elevator-status[open] > summary::before {
    content: "👁️ 异"; /* 展开状态：伪人窥视 */
    color: #ff0000;
    filter: grayscale(0%) drop-shadow(0 0 5px red);
    transform: scale(1.1) rotate(5deg);
}

/* 4. 内容区域：确保自定义 status 标签正常显示 */
.elevator-status .status-content,
.elevator-status status {
    display: block !important; /* 修复点：强制显示自定义标签 */
}

.elevator-status .status-content {
    padding: 16px;
    /* 细微的深红色监控扫描线背景 */
    background-image: repeating-linear-gradient(
        0deg, 
        transparent, 
        transparent 2px, 
        rgba(139, 0, 0, 0.05) 2px, 
        rgba(139, 0, 0, 0.05) 4px
    );
    animation: contentFadeIn 0.6s ease-in-out;
}
@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 5. 文本排版：高对比度与中式排版 */
.elevator-status p {
    margin: 10px 0;
    line-height: 1.7;
    color: #e0e0e0 !important; /* 正文使用高对比灰白 */
    font-size: 0.95em;
    display: block;
    position: relative;
    padding-left: 12px;
}
/* 段落左侧的朱砂点缀 */
.elevator-status p::before {
    content: "▪";
    position: absolute;
    left: 0;
    color: #8b0000;
}

/* 6. 记忆区专属：血字档案 */
.info-panel .panel-content h4 {
    color: #ff4444 !important;
    border-bottom: 1px solid #550000;
    padding-bottom: 6px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: "KaiTi", serif;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

/* 7. NPC立绘预留适配：旧相框/档案照效果 */
.elevator-status img {
    max-width: 100%;
    border: 3px double #550000;
    padding: 4px;
    background-color: #000;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.9);
    filter: sepia(0.4) hue-rotate(-20deg) brightness(0.7) contrast(1.2); 
    transition: all 0.5s ease;
    display: block;
    margin: 5px auto 15px auto;
}
.elevator-status img:hover {
    filter: sepia(0) hue-rotate(0) brightness(1) contrast(1);
    border-color: #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

/* 8. 安全清理：只清理空行，精准隐藏底部平台小字 (不再误伤核心内容) */
.elevator-status p:empty,
.elevator-status br {
    display: none !important;
}
/* 针对性隐藏底部小字 (如平台自带的span或small标签) */
.elevator-status .status-content > span:last-of-type,
.elevator-status small {
    display: none !important;
}
/* =========================================
   【第44号安全屋】中式恐怖 x 现代伪人检测终端
   ========================================= */

/* --- 核心动画定义 --- */
@keyframes weiren-scan {
    0% { background-position: 0% -100%; }
    100% { background-position: 0% 200%; }
}
@keyframes weiren-pulse {
    0% { box-shadow: 0 0 5px rgba(186, 26, 26, 0.4), inset 0 0 5px rgba(186, 26, 26, 0.2); }
    50% { box-shadow: 0 0 20px rgba(186, 26, 26, 0.8), inset 0 0 10px rgba(186, 26, 26, 0.5); }
    100% { box-shadow: 0 0 5px rgba(186, 26, 26, 0.4), inset 0 0 5px rgba(186, 26, 26, 0.2); }
}
@keyframes weiren-float-glow {
    0% { filter: drop-shadow(0 0 2px rgba(0, 255, 204, 0.5)); }
    50% { filter: drop-shadow(0 0 8px rgba(0, 255, 204, 0.9)); }
    100% { filter: drop-shadow(0 0 2px rgba(0, 255, 204, 0.5)); }
}

/* =========================================
   1. 顶部栏 (监控穹顶 / 镇魂阵眼)
   ========================================= */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(to bottom, rgba(8, 8, 10, 1) 0%, rgba(15, 20, 22, 0.95) 100%) !important;
    border-bottom: 2px solid #ba1a1a !important; /* 朱砂红警戒线 */
    box-shadow: 0 4px 20px rgba(186, 26, 26, 0.3) !important;
    position: relative !important;
}
/* 顶部栏扫描线伪元素 */
.sticky.w-full.top-0.flex.items-center::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 255, 204, 0.1) 50%, transparent 100%) !important;
    background-size: 100% 200% !important;
    animation: weiren-scan 4s linear infinite !important;
    pointer-events: none !important;
}

/* 模型选择器 - 暗金罗盘质感 */
#ai-model-selector .group.flex.items-center {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid #cda052 !important; /* 暗金色 */
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
    background: rgba(30, 10, 10, 0.9) !important;
    border-color: #ba1a1a !important;
    box-shadow: 0 0 15px rgba(186, 26, 26, 0.6) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #cda052 !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
}
#ai-model-selector .shrink-0.flex.items-center svg,
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
#header-setting-button svg {
    color: #00ffcc !important; /* 幽冥青图标 */
    transition: all 0.3s !important;
}
.sticky.w-full.top-0 svg.lucide-clock-8:hover,
#header-setting-button svg:hover {
    color: #ba1a1a !important;
    transform: scale(1.1) rotate(90deg) !important;
}

/* 开场白选择器 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: rgba(15, 20, 22, 0.9) !important;
    border: 1px solid #333 !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    border-color: #00ffcc !important;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3) !important;
}

/* =========================================
   2. 底部栏 & 输入区 (安全屋控制台)
   ========================================= */
/* 输入框容器 */
#ai-chat-bottom-input {
    background: rgba(8, 8, 10, 0.8) !important;
    border-radius: 8px !important;
    padding: 2px !important;
}
/* 主输入框 */
#ai-chat-input {
    background: rgba(15, 15, 18, 0.95) !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    font-family: 'Courier New', Courier, monospace, system-ui !important; /* 终端字体感 */
    transition: all 0.3s ease !important;
}
#ai-chat-input:focus {
    border-color: #ba1a1a !important;
    animation: weiren-pulse 2s infinite !important; /* 聚焦时触发警报红光 */
    outline: none !important;
}
#ai-chat-input::placeholder {
    color: rgba(186, 26, 26, 0.6) !important;
    font-style: italic !important;
}
#ai-chat-input::selection {
    background: #ba1a1a !important;
    color: #fff !important;
}

/* =========================================
   3. 底部按钮 (阵法枢纽 / Mod与流式按钮)
   ========================================= */
#ai-mod-button2 button.MuiButton-root {
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid #cda052 !important; /* 暗金边框 */
    color: #cda052 !important;
    border-radius: 2px !important; /* 锐利边缘 */
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: rgba(0, 255, 204, 0.1) !important;
    border-color: #00ffcc !important;
    color: #00ffcc !important;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.5), inset 0 0 10px rgba(0, 255, 204, 0.2) !important;
    transform: translateY(-2px) !important;
}
#ai-mod-button2 button.MuiButton-root svg {
    color: inherit !important;
    animation: weiren-float-glow 3s infinite !important;
}

/* =========================================
   4. 分页栏 (轮回刻度)
   ========================================= */
.MuiPaginationItem-root {
    color: #888 !important;
    border: 1px solid #333 !important;
    background: rgba(10, 10, 10, 0.8) !important;
    transition: all 0.3s !important;
}
.MuiPaginationItem-root:hover {
    background: rgba(0, 255, 204, 0.2) !important;
    border-color: #00ffcc !important;
    color: #00ffcc !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: #ba1a1a !important; /* 当前页为朱砂红 */
    color: #fff !important;
    border-color: #ff4d4d !important;
    box-shadow: 0 0 10px rgba(186, 26, 26, 0.8) !important;
}
.MuiInputBase-input {
    color: #00ffcc !important;
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid #333 !important;
}

/* =========================================
   5. 评论区 (避难所档案库 / 观察记录)
   ========================================= */
/* 背景强制覆写为极暗监控室风格 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #0a0a0c !important;
    background-image: 
        linear-gradient(rgba(0, 255, 204, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 204, 0.03) 1px, transparent 1px) !important;
    background-size: 20px 20px !important; /* 微弱的青色网格暗示现代仪器 */
    border-top: 2px solid #333 !important;
}

/* 顶部标题与文字 */
div.text-lg.font-bold {
    color: #ba1a1a !important;
    text-shadow: 0 0 5px rgba(186, 26, 26, 0.5) !important;
    letter-spacing: 2px !important;
}
p.MuiTypography-body1.text-grey-600 {
    color: #888 !important;
}

/* 危险等级评定 (评分星星) */
span.MuiRating-iconEmpty svg { color: #333 !important; }
span.MuiRating-iconFilled svg { 
    color: #ba1a1a !important; 
    filter: drop-shadow(0 0 2px #ba1a1a) !important;
}
span.text-orange-500 { color: #ba1a1a !important; font-weight: bold !important; }

/* 评论输入框 */
textarea.rc-textarea {
    background: rgba(15, 15, 15, 0.9) !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    transition: all 0.3s !important;
}
textarea.rc-textarea:focus {
    border-color: #00ffcc !important;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3) !important;
}
div.bg-gray-100.text-gray-500 {
    background: transparent !important;
    color: #666 !important;
}

/* 发送评论按钮 (紧急执行) */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: rgba(186, 26, 26, 0.1) !important;
    border: 1px solid #ba1a1a !important;
    border-radius: 4px !important;
    transition: all 0.3s !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: #ba1a1a !important;
    box-shadow: 0 0 15px rgba(186, 26, 26, 0.6) !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #fff !important;
}

/* 分割线 */
div.style_divider__mW0YX {
    background-color: #222 !important;
    box-shadow: 0 0 2px #00ffcc !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
    background: #ba1a1a !important;
    color: #fff !important;
    border: 1px solid #ff4d4d !important;
}
button.MuiButton-outlinedPrimary {
    color: #00ffcc !important;
    border-color: #00ffcc !important;
}

/* 单条评论项 (档案卡视觉) */
div.group.ml-0 {
    background: rgba(20, 20, 22, 0.6) !important;
    border-left: 3px solid #333 !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    border-radius: 0 4px 4px 0 !important;
    transition: all 0.3s !important;
}
div.group.ml-0:hover {
    border-left-color: #ba1a1a !important; /* 悬浮时显示红色警戒 */
    background: rgba(30, 20, 20, 0.8) !important;
}
/* 用户名与标签 */
div.text-sm.text-grey-600 span.font-bold {
    color: #00ffcc !important; /* 幽青色用户名 */
}
span.text-\[10px\] {
    color: #cda052 !important; /* （你）标签暗金色 */
    background: rgba(205, 160, 82, 0.1) !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
}
/* 评论内容与时间 */
div.break-all {
    color: #d0d0d0 !important; /* 确保极高可读性 */
    line-height: 1.6 !important;
}
div.text-xs.text-grey-600 {
    color: #666 !important;
    font-family: monospace !important; /* 时间戳终端感 */
}
/* 互动按钮 */
button.text-gray-400:hover, span.cursor-pointer:hover {
    color: #ba1a1a !important;
    text-shadow: 0 0 5px rgba(186, 26, 26, 0.5) !important;
}
/* 回复区域边框 */
div.ml-8.border-l {
    border-left-color: #444 !important;
}
/* ========================================
   主题：月以识别伪人安全屋 (Yueyi Safe House)
   风格：中式现代 × 隐晦恐怖 × 护眼浅色
   ======================================== */

/* 1. 强制隐藏平台默认的顶部彩色装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 聊天框主体：冷月白宣纸质感 + 隐形镇压水印 */
.bg-gray-100\/90.relative.inline-block {
    /* 护眼浅色渐变背景，融合极微弱的朱砂红呼吸水印(镇) */
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='100%25' height='100%25'%3E%3Ctext x='50%25' y='50%25' font-size='100' font-family='SimSun, STZhongsong, serif' fill='%23c0392b' opacity='0.02' text-anchor='middle' dominant-baseline='middle'%3E%E9%95%87%3Canimate attributeName='opacity' values='0.01;0.04;0.01' dur='5s' repeatCount='indefinite'/%3E%3C/text%3E%3C/svg%3E") center/cover no-repeat,
        linear-gradient(145deg, #fdfcfb 0%, #f0f2f5 100%) !important;
    
    border: 1px solid rgba(192, 57, 43, 0.2) !important; /* 朱砂红微光边框 */
    border-left: 3px solid #c0392b !important; /* 左侧识别警戒线 */
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 0 15px rgba(192, 57, 43, 0.05) inset !important;
    isolation: isolate !important; /* 建立层叠上下文，保证动效不遮挡文字 */
    position: relative !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* 悬停时加深安全屋的“扫描”氛围 */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06), 0 0 20px rgba(192, 57, 43, 0.1) inset !important;
    border-left: 3px solid #8a0303 !important;
}

/* 3. 左上角动态：伪人识别扫描仪 × 八卦法阵 (纯SVG SMIL动画) */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    width: 70px !important;
    height: 70px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
    /* 包含双层反向旋转的虚线圈与核心红点呼吸 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100%25' height='100%25'%3E%3Cg stroke='%23c0392b' stroke-width='1.5' fill='none'%3E%3Ccircle cx='50' cy='50' r='40' stroke-dasharray='12 6' opacity='0.6'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='12s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='30' stroke='%23d4af37' stroke-dasharray='20 10 5 10' opacity='0.8'%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 50 50' to='-360 50 50' dur='8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M 50 30 L 50 70 M 30 50 L 70 50' stroke='%23c0392b' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23c0392b' stroke='none'%3E%3Canimate attributeName='opacity' values='0.2;0.9;0.2' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* 4. 右下角动态：安全屋封印印章 × 蔓延红线 (纯SVG SMIL动画) */
.bg-gray-100\/90.relative.inline-block::after {
    content: "" !important;
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    width: 60px !important;
    height: 60px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
    /* 包含脉冲闪烁的方形印章与流动的红线 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100%25' height='100%25'%3E%3Cg stroke='%23c0392b' fill='none'%3E%3Cpath d='M 10 90 Q 40 70 70 40 T 90 10' stroke-width='1' opacity='0.5'%3E%3Canimate attributeName='stroke-dasharray' values='0,150;150,0' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3Crect x='55' y='55' width='35' height='35' stroke-width='2' stroke='%23c0392b'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='3.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cpath d='M 65 65 L 65 80 M 72 65 L 72 80 M 79 65 L 79 80' stroke-width='1.5' stroke='%23c0392b' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* 5. 核心文本：绝对可读性保证 */
.markdown-body {
    /* 极高对比度的深色字体，适配浅色背景，保护视力 */
    color: #1a1a1a !important; 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 500 !important; /* 字体微加粗提升清晰度 */
    line-height: 1.7 !important;
    position: relative !important;
    z-index: 2 !important; /* 确保文字在动效和背景之上 */
    background: transparent !important;
    text-shadow: none !important; /* 严禁文字阴影以确保清晰度 */
}

/* 强调文本(加粗)采用朱砂红，强化中式恐怖氛围 */
.markdown-body strong {
    color: #a82020 !important;
    font-weight: 700 !important;
}

/* 6. 底部附加元素：操作按钮、模型名称、Token消耗 */
/* 为浅色背景专门适配的高级灰，既能看清又不喧宾夺主 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #5c5c5c !important;
    font-weight: bold !important;
    z-index: 2 !important;
    position: relative !important;
    transition: color 0.2s ease !important;
}

/* 底部按钮悬停时泛出朱砂红 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #c0392b !important;
    background-color: rgba(192, 57, 43, 0.05) !important;
}

/* 移动端与低动效适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block::before {
        width: 50px !important; height: 50px !important;
    }
    .bg-gray-100\/90.relative.inline-block::after {
        width: 45px !important; height: 45px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block::after {
        opacity: 0.3 !important; /* 保留静态美感，降低动效干扰 */
    }
}