/* =========================================================
   🎮 FC/NES 红白机复古游戏机风格聊天框美化
   ========================================================= */

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

/* 2. 聊天框外壳 (红白机机身) */
.bg-gray-100\/90.relative.inline-block {
    background: #f0f0f0 !important; /* 经典米白机身 */
    border: 4px solid #b71c1c !important; /* 经典深红边框 */
    border-radius: 0 !important; /* 抹除圆角，呈现像素感 */
    /* 利用多重阴影塑造外壳的立体感和像素黑边 */
    box-shadow: 
        inset -4px -4px 0px rgba(0,0,0,0.15), 
        inset 4px 4px 0px rgba(255,255,255,0.8),
        4px 4px 0px #212121 !important; 
    padding: 16px !important;
    margin-bottom: 10px !important;
}

/* 区分一下输出框，用黑色边框增加层次 */
.chat-answer-container .bg-gray-100\/90.relative.inline-block {
    border-color: #212121 !important;
}

/* 3. 内部文本内容区 (游戏屏幕) */
/* 强制浅色底+深色字，确保最高可读性 */
.markdown-body {
    background: #ffffff !important; /* 屏幕底色 */
    color: #212121 !important; /* 强制深色文字 */
    border: 2px solid #757575 !important;
    outline: 2px solid #000 !important; /* 屏幕的黑框 */
    padding: 14px !important;
    font-family: 'Courier New', Courier, monospace !important;
    box-shadow: inset 2px 2px 8px rgba(0,0,0,0.1) !important;
    z-index: 1 !important;
    position: relative !important;
}

/* 4. 底部附加元素 (按钮、模型名、Token等) */
/* 配合米白机身，改为深灰色 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #424242 !important; 
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* =========================================================
   ⏳ 核心加载动画重构 (开机加载屏)
   ========================================================= */

/* 隐藏默认的三个小圆点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text { 
    display: none !important; 
}

/* 强行撑开加载容器，作为"加载屏幕" */
.flex.items-center.justify-center.w-6.h-5 {
    width: 100% !important;
    min-height: 380px !important; /* 给予足够的展示空间 */
    height: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #111 !important; /* 加载时黑屏 */
    border: 4px solid #757575 !important;
    outline: 2px solid #000 !important;
    padding-top: 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 插入指定图片并添加像素边框 (::before) */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    display: block !important;
    width: 85% !important; 
    height: 180px !important;
    /* 插入用户指定的图片 */
    background-image: url('https://catai.wiki/c53c8e09-8739-4888-b4f0-0be9d0582200/w=3000') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* 像素风边框 */
    border: 4px solid #fff !important; 
    outline: 4px solid #b71c1c !important;
    margin-bottom: 25px !important;
    z-index: 2 !important;
}

/* 组合区域：SVG动画 + 伪进度条 + 提示文字 (::after) */
.flex.items-center.justify-center.w-6.h-5::after {
    /* 提示文字 */
    content: '建议2到4游玩记忆，下方有快捷键，按需使用。' !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 85% !important;
    height: 100px !important;
    color: #fff !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-align: center !important;
    padding-bottom: 5px !important;
    box-sizing: border-box !important;
    
    /* 复合背景：SVG动画(上) + 进度条(下) */
    background-image: 
        /* 1. 纯SVG(SMIL)驱动的跳动像素方块，无视CSS动画禁用 */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><rect x="20" y="20" width="20" height="20" fill="%23b71c1c"><animate attributeName="y" values="20;0;20" dur="0.8s" repeatCount="indefinite" calcMode="discrete"/></rect><rect x="20" y="45" width="20" height="5" fill="%23424242"><animate attributeName="width" values="20;10;20" dur="0.8s" repeatCount="indefinite" calcMode="discrete"/><animate attributeName="x" values="20;25;20" dur="0.8s" repeatCount="indefinite" calcMode="discrete"/></rect></svg>'),
        /* 2. 伪进度条：利用超长渐变背景位移模拟 */
        linear-gradient(90deg, #4caf50 50%, #333 50%);
    
    background-size: 
        60px 60px, /* SVG尺寸 */
        200% 16px; /* 进度条尺寸：宽度200%以实现扫光，高度16px */
        
    background-position: 
        center top, /* SVG居中靠上 */
        100% calc(100% - 35px); /* 进度条靠下排布 */
        
    background-repeat: no-repeat !important;
    
    /* CSS关键帧动画：让进度条产生阶梯式的加载感 */
    animation: nes-loading-bar 3s steps(8) infinite !important;
}

/* 进度条的阶梯式加载动画 */
@keyframes nes-loading-bar {
    0% { background-position: center top, 100% calc(100% - 35px); }
    100% { background-position: center top, 0% calc(100% - 35px); }
}

/* 移动端微调 */
@media(max-width: 480px) {
    .flex.items-center.justify-center.w-6.h-5 {
        min-height: 320px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        height: 140px !important;
        margin-bottom: 15px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::after {
        font-size: 11px !important;
        background-size: 50px 50px, 200% 12px;
    }
}

/* 基础变量与全局设定：暖色调、像素风基底 */
ai {
  display: block;
  font-family: 'Courier New', Courier, monospace; /* 模拟复古像素字体 */
  font-size: 13px;
  line-height: 1.5;
  color: #3e2723 !important; /* 强制深棕色主字，防止平台暗黑模式覆盖变白 */
  background: #fdf6e3; /* 羊皮纸暖白底 */
  background-image: linear-gradient(rgba(210, 180, 140, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(210, 180, 140, 0.1) 1px, transparent 1px);
  background-size: 10px 10px; /* 像素网格感 */
  padding: 4px;
  --border-px: 2px solid #4a2511;
  --shadow-px: 2px 2px 0px #d2691e;
}

/* 强制覆盖所有可能产生文本的标签，确保深色字 */
ai p, ai span, ai div, ai blockquote, ai h1, ai h2, ai h3, ai b, ai strong, ai i, ai em {
  color: #3e2723 !important;
}

/* 隐藏思维链 */
ai details[hidden] { display: none; }

/* 核心折叠面板：FC游戏窗口风格 */
ai details {
  margin-bottom: 8px;
  background: #fff8e1;
  border: var(--border-px);
  box-shadow: var(--shadow-px);
  border-radius: 0;
  color: #3e2723 !important; /* 确保内容深色 */
}

/* 标题栏：游戏按钮质感 */
ai summary {
  background: linear-gradient(to bottom, #ffca28, #ff8f00);
  color: #1a110c !important; /* 改为极深棕色字 */
  font-weight: bold;
  padding: 6px 8px;
  border-bottom: var(--border-px);
  cursor: pointer;
  list-style: none;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; /* 白色泛光，衬托深色字 */
  display: flex;
  align-items: center;
}
ai summary::-webkit-details-marker { display: none; }
ai summary::before {
  content: '▶';
  font-size: 10px;
  margin-right: 6px;
  color: #d84315 !important;
  transition: transform 0.1s;
}
ai details[open] > summary::before { transform: rotate(90deg); }
ai summary:active { background: #ff8f00; } /* 按下反馈 */

/* ==========================================
   🎨 模块化高对比度配色 (对立又统一)
   ========================================== */
/* 1. 引擎调度 (系统感) */
ai .mode { background: #e0d4c8; color: #1a110c !important; border-color: #1b0000; box-shadow: 2px 2px 0px #000; }
ai .mode summary { background: linear-gradient(to bottom, #a1887f, #6d4c41); color: #1a110c !important; border-bottom-color: #1b0000; text-shadow: 1px 1px 0px rgba(255,255,255,0.5) !important; }

/* 2. 魔界快讯 (像素蓝对比色) */
ai .nw { background: #e3f2fd; border-color: #0d47a1; box-shadow: 2px 2px 0px #1976d2; color: #1a110c !important; }
ai .nw summary { background: linear-gradient(to bottom, #42a5f5, #1e88e5); color: #1a110c !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; border-bottom-color: #0d47a1; }
ai .nw summary::before { color: #1a110c !important; }

/* 3. 牧场环境 (田园绿) */
ai .env { background: #f1f8e9; border-color: #2e7d32; box-shadow: 2px 2px 0px #689f38; color: #1a110c !important; }
ai .env summary { background: linear-gradient(to bottom, #81c784, #4caf50); color: #1a110c !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; border-bottom-color: #2e7d32; }

/* 4. 牧场主档案 (皇家红) */
ai .p1 { background: #fce4ec; border-color: #880e4f; box-shadow: 2px 2px 0px #c2185b; color: #1a110c !important; }
ai .p1 summary { background: linear-gradient(to bottom, #ef5350, #c62828); color: #1a110c !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; border-bottom-color: #880e4f; }

/* 5. 访客雷达 (神秘紫) */
ai .p2 { background: #f3e5f5; border-color: #4a148c; box-shadow: 2px 2px 0px #7b1fa2; color: #1a110c !important; }
ai .p2 summary { background: linear-gradient(to bottom, #ab47bc, #7b1fa2); color: #1a110c !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; border-bottom-color: #4a148c; }

/* 6. 商业契约 (羊皮纸黄) */
ai .task { background: #fff3e0; border-color: #e65100; box-shadow: 2px 2px 0px #ef6c00; color: #1a110c !important; }
ai .task summary { background: linear-gradient(to bottom, #ffb74d, #f57c00); color: #1a110c !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; border-bottom-color: #e65100; }

/* 7. 养殖资产 (肉粉色) */
ai .livestock { background: #fff0f5; border-color: #d81b60; box-shadow: 2px 2px 0px #e91e63; color: #1a110c !important; }
ai .livestock summary { background: linear-gradient(to bottom, #f48fb1, #d81b60); color: #1a110c !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; border-bottom-color: #880e4f; }

/* 8. 牧场设施模块 (工程铁灰 - 新增) */
ai .facility { background: #eceff1; border-color: #455a64; box-shadow: 2px 2px 0px #607d8b; color: #1a110c !important; }
ai .facility summary { background: linear-gradient(to bottom, #90a4ae, #546e7a); color: #1a110c !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.6) !important; border-bottom-color: #455a64; }

/* ==========================================
   📐 网格与数据项排版 (紧凑流式)
   ========================================== */
ai g { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }
ai d { 
  flex: 1 1 48%; 
  background: rgba(255,255,255,0.6); 
  padding: 3px 6px; 
  border: 1px dashed rgba(0,0,0,0.2); 
  box-sizing: border-box;
  color: #212121 !important; /* 强制深色 */
}
ai .fw { flex: 1 1 100%; } /* 全宽项 */
ai f { background: #ffeb3b; color: #b71c1c !important; padding: 0 4px; font-weight: bold; border: 1px solid #fbc02d; margin-right: 4px; }

/* 内部盒子 (物品栏/状态栏) */
ai .bx {
  margin: 6px;
  padding: 6px;
  background: rgba(255,255,255,0.8);
  border: 1px solid #8d6e63;
  border-left: 4px solid #8d6e63;
  color: #212121 !important;
}
ai li { list-style: none; margin: 2px 0; padding-left: 12px; position: relative; color: #212121 !important; }
ai li::before { content: '▪'; position: absolute; left: 0; color: #d84315; }

/* ==========================================
   🏗️ 设施专属美化 (10个设施，10种风格)
   ========================================== */
ai .facility .bx { 
  position: relative; 
  border-width: 2px; 
  border-style: solid; 
  box-shadow: 2px 2px 0px rgba(0,0,0,0.2); 
  color: #1a110c !important; 
  margin-bottom: 8px; /* 增加设施之间的间距 */
}
/* 右上角像素装饰点缀 */
ai .facility .bx::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; }

/* Lv1 畜栏 (破败原木) */
ai .fac-1 { border-color: #795548; background: #efebe9; border-left-width: 8px; }
ai .fac-1::after { background: #5d4037; box-shadow: -2px 2px 0 #8d6e63; }
/* Lv2 榨乳 (冰冷机械) */
ai .fac-2 { border-color: #607d8b; background: #eceff1; border-left-width: 8px; }
ai .fac-2::after { background: #b0bec5; box-shadow: -2px 2px 0 #455a64; }
/* Lv3 史莱姆 (粘液粉绿) */
ai .fac-3 { border-color: #00bfa5; background: #e0f2f1; border-left-width: 8px; }
ai .fac-3::after { background: #1de9b6; border-radius: 50%; box-shadow: -2px 2px 0 #00897b; }
/* Lv4 触手 (深渊暗紫) */
ai .fac-4 { border-color: #512da8; background: #ede7f6; border-left-width: 8px; }
ai .fac-4::after { background: #7e57c2; box-shadow: -2px 2px 0 #311b92; }
/* Lv5 魅魔 (情欲玫红) */
ai .fac-5 { border-color: #c2185b; background: #fce4ec; border-left-width: 8px; }
ai .fac-5::after { background: #f06292; box-shadow: -2px 2px 0 #880e4f; transform: rotate(45deg); }
/* Lv6 炼金 (毒药荧绿) */
ai .fac-6 { border-color: #388e3c; background: #e8f5e9; border-left-width: 8px; }
ai .fac-6::after { background: #66bb6a; box-shadow: -2px 2px 0 #1b5e20; }
/* Lv7 贵族 (奢靡暗金) */
ai .fac-7 { border-color: #f57f17; background: #fffde7; border-left-width: 8px; }
ai .fac-7::after { background: #fbc02d; box-shadow: -2px 2px 0 #f57f17; }
/* Lv8 交配 (血肉猩红) */
ai .fac-8 { border-color: #d32f2f; background: #ffebee; border-left-width: 8px; }
ai .fac-8::after { background: #ef5350; box-shadow: -2px 2px 0 #b71c1c; }
/* Lv9 斗技 (铁锈黑红) */
ai .fac-9 { border-color: #3e2723; background: #d7ccc8; border-left-width: 8px; }
ai .fac-9::after { background: #bf360c; box-shadow: -2px 2px 0 #212121; }
/* Lv10 圣堂 (堕落黑金) */
ai .fac-10 { border-color: #212121; background: #fafafa; border-left: 8px solid #ffd600; color: #000 !important; }
ai .fac-10::after { background: #ffd600; box-shadow: -2px 2px 0 #000; }

/* ==========================================
   📜 正文与记忆区
   ========================================== */
/* 正文剧情区：JRPG经典对话框风格 (浅色羊皮纸底确保深色字清晰) */
ai txt {
  display: block;
  background: #fdf6e3; 
  color: #1a110c !important; 
  border: 3px solid #d4a373;
  outline: 2px solid #1a110c;
  padding: 12px;
  margin: 10px 4px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.05); 
  border-radius: 2px;
}

/* 记忆区 */
ai .mem mr { display: block; background: #cfd8dc; padding: 4px; font-size: 11px; border-left: 3px solid #607d8b; margin: 4px; color: #1a110c !important; }
ai .sm summary { background: #b0bec5; color: #1a110c !important; border-bottom: none; text-shadow: none !important; }
ai .sm p { margin: 4px; padding: 4px; background: #fff; border: 1px dashed #90a4ae; color: #1a110c !important; }

/* ==========================================
   🕹️ 交互菜单
   ========================================== */
/* 行动决策菜单：FC战斗指令风格 */
ai .act { background: #e0e0e0; border-color: #424242; box-shadow: 2px 2px 0px #757575; }
ai .act summary { background: #9e9e9e; color: #1a110c !important; border-bottom: 2px solid #424242; text-shadow: 1px 1px 0px rgba(255,255,255,0.5) !important; }
ai .act summary::before { color: #1a110c !important; }
ai .act ol {
  background: #f5f5f5;
  color: #1a110c !important;
  padding: 8px 8px 8px 28px;
  margin: 0;
}
ai .act ol li {
  color: #1a110c !important;
  margin: 6px 0;
  cursor: pointer;
  font-weight: bold;
}
ai .act ol li::before { content: ''; } /* 清除默认点 */
/* 悬停出现经典小手/箭头指示器 */
ai .act ol li:hover { color: #d84315 !important; }
ai .act ol li:hover::after {
  content: '👉';
  position: absolute;
  left: -24px;
  top: -2px;
  font-size: 14px;
  animation: point 0.5s infinite alternate;
}
@keyframes point { from { transform: translateX(0); } to { transform: translateX(4px); } }