/* 0.2 全局背景：深海虚空 */
/* [适配新平台] 使用更通用的选择器覆盖整体背景 */
body, #root, div[class*="bg-background"], .bg-secondary {
    background-color: #000000 !important;
    /* 替换为深蓝色径向渐变，营造深海幽闭感 */
    background-image: radial-gradient(circle at 50% 30%, #02101f 0%, #000000 80%) !important;
}

/* 0.3 滚动条：冷凝管风格 (修复横向黑条问题) */
::-webkit-scrollbar {
    width: 6px;
    height: 4px; /* <--- 关键修复：限制横向滚动条的高度，让它变成细线，不再是粗条 */
    background: transparent; /* <--- 关键修复：把纯黑底色改为透明，不破坏亮色背景 */
}
::-webkit-scrollbar-track {
    background: transparent; /* 轨道设为透明 */
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 51, 102, 0.4); /* 降低一点透明度，让它在浅色区域不那么刺眼，深色区域依然好看 */
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #0077be;
    box-shadow: 0 0 10px #0077be;
}

/* --- 2. 布局结构重组 (Structure Reset) --- */
/* 2.1 彻底移除头像 (增加新平台可能的头像类名兼容) */
div.shrink-0.w-10.h-10,
div.shrink-0.relative.w-10.h-10,
img.rounded-full[alt*="avatar"],
.is-assistant > div.flex-shrink-0 {
    display: none !important;
}

/* 2.2 布局对齐：左侧统一 */
div.group.flex.flex-col.gap-2.w-fit {
    margin: 0 !important;
    width: 100% !important;
    padding: 10px 5px !important;
    align-items: flex-start !important;
}

/* --- 3. 气泡与文本深度质感 (Bubbles & Text) --- */

/* 3.1 气泡主体重构：深蓝玻璃 [已修改为截图中的实心深背景] */
div.border-muted:has(.rili-markdown-renderer) {
    /* 👇 重点只改这里 👇 */
    background-color: #222b36 !important; /* <--- 这就是您截图里那个深灰/蓝灰色 */
    background-image: none !important;    /* 关掉之前的光影渐变，保持颜色纯粹 */
    backdrop-filter: none !important;     /* 关掉毛玻璃透视，让底色彻底扎实 */
    -webkit-backdrop-filter: none !important;
    /* 👆 重点只改这里 👆 */
    
    /* 下面的边框、圆角和内边距等原样保留即可 */
    border: 1px solid rgba(0, 100, 150, 0.3) !important;
    border-left: none !important; 
    border-radius: 16px !important;
    border-top-left-radius: 4px !important;
    padding: 20px 25px !important;
    width: auto !important;
    max-width: 100% !important;
}

/* 用户文本：浅蓝打字机 */
.is-user div.border-muted:has(.rili-markdown-renderer) .rili-markdown-renderer {
    font-family: 'Courier New', monospace !important;
    color: #00e5ff !important; 
    font-size: 15px !important;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.4);
    /* 增加抗锯齿平滑，防止虚边 */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* AI文本：冷灰 (锁定截图中的质感颜色) */
.is-assistant div.border-muted:has(.rili-markdown-renderer) .rili-markdown-renderer {
    font-family: 'SimSun', serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #e0f0ff !important; /* [颜色锁定]：截图中的冷白/浅灰色 */
    
    /* [关键强化]：强制开启字体抗锯齿，让文字在深色背景下更加锐利扎实，不再发虚 */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* AI文本：加粗强调色 */
.is-assistant div.border-muted:has(.rili-markdown-renderer) .rili-markdown-renderer strong {
    color: #00bfff !important; 
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.6);
}
.is-assistant div.border-muted:has(.rili-markdown-renderer) .rili-markdown-renderer strong {
    color: #00bfff !important; /* 深天蓝强调 */
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.6);
}

/* --- 5. 操作按钮美化 (保留兼容旧类名，新平台若无影响可忽略) --- */
div.MuiStack-root.css-1dzoql9 {
    margin-top: 12px !important;
    gap: 10px !important;
    opacity: 0.5 !important;
    transition: opacity 0.3s ease !important;
}
div.group:hover div.MuiStack-root.css-1dzoql9,
div.chat-answer-container:hover div.MuiStack-root.css-1dzoql9 {
    opacity: 1 !important;
}
div.MuiStack-root.css-1dzoql9 button {
    border: 1px solid #004466 !important;
    background-color: transparent !important;
    color: #5599cc !important;
    border-radius: 2px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-family: 'Courier New', monospace !important;
    text-transform: uppercase !important;
    transition: all 0.2s !important;
}
div.MuiStack-root.css-1dzoql9 button:hover {
    background-color: #00e5ff !important;
    color: #000 !important;
    border-color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.5) !important;
    font-weight: bold !important;
}

/* --- 6. 底部控制台美化 (兼容保留) --- */
div.p-\[5\.5px\].max-h-\[150px\].bg-white {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2) !important;
    border-radius: 8px !important;
}
textarea.rc-textarea {
    color: #000000 !important;
    caret-color: #000000 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
}
button.MuiButton-outlined {
    border-color: #003355 !important;
    color: #0077be !important;
    background: #020810 !important;
}
button.MuiButton-outlined:hover {
    border-color: #00e5ff !important;
    color: #fff !important;
    background: #004466 !important;
}
div#ai-send-button {
    background-color: #002244 !important;
    color: #00e5ff !important;
    border: 1px solid #005588 !important;
    border-radius: 6px !important;
}
div#ai-send-button:hover {
    background-color: #00e5ff !important;
    color: #000 !important;
    box-shadow: 0 0 20px #00e5ff !important;
}

/* --- 7. 系统加载动画重构 (Loading) [已整合防挤压终极补丁] --- */
/* 7.1 隐藏原生的三个加载小圆点 */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full) div.size-6 {
    display: none !important;
}

/* 7.2 容器：主神空间·数据解析力场 */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full) {
    width: 100% !important;
    min-width: 400px !important;  /* [核心修复] 强行撑开防挤压 */
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 20px 0 !important;
    padding-bottom: 30px !important;
    background-color: #020408 !important;
    
    /* 背景网格 + 扫描线 */
    background-image: 
        linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, transparent 50%, rgba(0, 229, 255, 0.1) 50%, transparent 51%) !important;
    
    background-size: 30px 30px, 30px 30px, 100% 200% !important;
    border: 1px solid rgba(0, 68, 102, 0.6) !important;
    border-left: 4px solid #00e5ff !important;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9) !important;
    border-radius: 4px !important;
    animation: grid-scan 3s linear infinite !important;
}

/* 7.3 核心动画：匀速旋转圆圈 (修复不转的问题) */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full)::before {
    content: '' !important;
    position: absolute !important;
    top: 40% !important;
    left: 50% !important;
    /* <--- 关键修复：用 margin 来实现居中，把 transform 彻底解放出来留给旋转动画 ---> */
    margin-left: -25px !important; 
    margin-top: -25px !important;  
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #00e5ff !important;
    border-bottom-color: #00e5ff !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.6) !important;
    /* 改了一个独一无二的动画名字，防止和原平台的默认动画名冲突被覆盖 */
    animation: cyber-ring-spin 1.2s linear infinite !important; 
    z-index: 10 !important;
}

/* 7.4 文字层：显示指定两行文本 */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full)::after {
    content: '正在生成剧情\A 建议记忆4游玩' !important; /* \A 代表换行 */
    white-space: pre !important;  /* [核心修复] 允许换行符生效，但不会被父级容器挤压变形 */
    text-align: center !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #00e5ff !important;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5) !important;
}

/* 简单的匀速旋转动画：现在里面只有 rotate，绝对不会卡死了 */
@keyframes cyber-ring-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes grid-scan {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 0, 0 100%; }
}

/* --- 8. 评论区美化 (Comments: Pale Blue Theme) --- */
/* 淡蓝背景容器兼容 */
div[class*="bottom-0"][class*="z-20"] {
    background-color: #f0f9ff !important;
    background-image: linear-gradient(to bottom, #e0f2fe, #f0f9ff) !important;
}
div[class*="bottom-0"][class*="z-20"] > div.flex.items-center {
    background-color: #e0f2fe !important;
    border-bottom: 1px solid #bae6fd !important;
}
div[class*="bottom-0"][class*="z-20"] .text-lg.font-bold {
    color: #0c4a6e !important;
}

/* 评论卡片美化 */
.group.ml-0 > .flex.items-start.gap-2 {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
    background-color: #ffffff !important; 
    border-radius: 12px !important;
    padding: 15px 20px !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.1) !important; 
    border: 1px solid #e0f2fe !important; 
    transition: all 0.3s ease-in-out !important;
}
.group.ml-0 > .flex.items-start.gap-2:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.2) !important;
    background-color: #f8fcff !important;
    border-color: #7dd3fc !important; 
}
.group.ml-0 .break-all {
    white-space: pre-wrap !important;
    line-height: 1.6 !important;
    color: #334155 !important; 
}
.group.ml-0 > .flex.items-start.gap-2 .text-grey-600 { color: #64748b !important; }
.group.ml-0 > .flex.items-start.gap-2 .text-gray-500 { color: #94a3b8 !important; }
.group.ml-0 > .flex.items-start.gap-2 .text-gray-400 { color: #cbd5e1 !important; }
.group.ml-0 > .flex.items-start.gap-2 .font-bold { color: #0f172a !important; }
div.style_divider__mW0YX.style_horizontal__UvaHt {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-top: 1px solid #e0f2fe !important; 
    background: none !important;
}

/* --- 3. 基础与段落样式 --- */
* { box-sizing: border-box; }
p:not(.MuiTypography-root):not(.MuiTypography-body2):not(.rili-markdown-renderer p) {
    font-family: "Microsoft YaHei", "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    margin: 16px 17px;
    letter-spacing: 0.5px;
    color: #dcdfe6 !important;
}
h1 {
    font-family: "Microsoft YaHei", "Arial", sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #1a2332;
    color: #e3f2fd;
    padding: 10px 15px;
    margin-top: 2em;
    margin-bottom: 1em;
    border-bottom: 2px solid #0d3a5f;
    border-left: 5px solid #00d4ff;
    border-radius: 4px;
}

/* --- 4. [升级] Details & Summary [已整合防挤压终极补丁] --- */
details {
    background: #0f1b2d;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-left: 4px solid #00d4ff;
    border-radius: 6px;
    padding: 0.5em 1em;
    margin: 1em 0;
    transition: all 0.3s ease-in-out;
}
details:hover {
    border-left-color: #ffc107;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}
summary {
    color: #e3f2fd;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 0.5em 0;
    outline: none;
    position: relative;
    transition: margin 0.3s ease-in-out;
    list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before {
    content: '▸';
    color: #00d4ff;
    position: absolute;
    left: -0.8em;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease-in-out;
}
details[open] > summary {
    margin-bottom: 1em;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}
details[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
}
details pre {
    font-family: "Microsoft YaHei", "Arial", sans-serif;
    font-size: 1em;
    line-height: 1.7;
    color: #c0c4cc;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    white-space: pre-wrap !important;
}

/* --- 4.5. [统御] 表格样式 · 记忆矩阵 (已修复横向滚动与挤压) --- */
details table {
    display: block;          /* 关键修复：转为块级元素，使其能独立滚动 */
    overflow-x: auto;        /* 关键修复：超出宽度时开启横向滚动条 */
    width: 100%;
    border-collapse: collapse; 
    margin-top: 1em;
    /* 已删除 table-layout: fixed; 允许列宽自适应 */
}

/* 契合深海/冷蓝主题的横向滚动条 */
details table::-webkit-scrollbar {
    height: 6px;
}
details table::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.4);
    border-radius: 3px;
}
details table::-webkit-scrollbar-track {
    background: rgba(2, 4, 8, 0.5);
}

details th,
details td {
    border: 1px solid rgba(0, 212, 255, 0.2);
    padding: 10px 12px;
    text-align: left;
    color: #c0c4cc; 
    background-color: transparent !important; 
    word-wrap: break-word; 
    min-width: 90px;         /* 关键修复：防止单元格被极限压缩 */
}

/* 最后一列“客观事实”内容较多，给予更大的基础宽度 */
details th:last-child, 
details td:last-child {
    min-width: 260px;
}

details th {
    background-color: rgba(13, 34, 56, 0.9); 
    color: #e3f2fd;
    font-weight: bold;
    white-space: nowrap;     /* 关键修复：表头强制不换行 */
}

details tbody tr {
    background-color: transparent !important; 
    transition: background-color 0.3s ease;
}
details tbody tr:hover {
    background-color: rgba(0, 212, 255, 0.1); 
}

/* --- 5. 其他保留样式 --- */
font {
    font-family: "Microsoft YaHei", "Arial", sans-serif;
    font-weight: bold;
}
memory {
    display: none;
}
p[Foreword] {
    font-family: "Microsoft YaHei", "Arial", sans-serif;
    font-style: italic;
    text-decoration: underline;
    color: #a9a9a9;
}

/* --- 6. 命运选择面板 (Destiny Choice Panel) --- */
.destiny-choice-panel {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #363636; 
  line-height: 1.7;
  border: 1px solid #dbdbdb; 
  border-radius: 8px;
  padding: 1em;
  margin: 1em 0; 
  background-color: #ffffff; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
}
.destiny-choice-panel h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #eeeeee;
  color: #363636; 
}
.destiny-choice-panel pre {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: #363636 !important; 
  white-space: pre-wrap !important;
}

/* --- 能源终端 --- */
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2::after {
    content: '显示消耗' !important; 
    background: transparent !important;
    color: #00e5ff !important; 
    border: 1px solid rgba(0, 229, 255, 0.6) !important; 
    border-radius: 4px !important;
    padding: 3px 9px !important;
    font-size: 12px !important;
    margin-left: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    font-weight: bold !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover::after {
    background: rgba(0, 229, 255, 0.15) !important; 
    border-color: rgba(0, 229, 255, 1) !important; 
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.6) !important; 
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-1x48u03 {
    color: #87CEFA !important; 
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    background: transparent !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.7); 
    opacity: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: opacity 0.3s ease, max-width 0.4s ease, padding 0.4s ease !important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover ~ p.MuiTypography-root.css-1x48u03 {
    opacity: 1 !important;
    max-width: 200px !important;
}

/* ========================================
   第九部分：聊天与文档UI
   ======================================== */
.chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: radial-gradient(ellipse at top, #2a2a4a, #1a1a2a);
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 8px;
    margin: 16px 0;
    position: relative;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.chat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L60 17.32 L60 52.68 L30 70 L0 52.68 L0 17.32 Z' fill='none' stroke='rgba(0, 240, 255, 0.1)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 40px;
    animation: bg-scroll-tech 40s linear infinite;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
@keyframes bg-scroll-tech {
    from { background-position: 0 0; }
    to { background-position: 80px 80px; }
}
.chat::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
    z-index: 0;
}
.chat > * {
    position: relative;
    z-index: 1;
}

.doc {
    background: rgba(10, 15, 30, 0.9);
    border: 1px solid #00f0ff;
    border-radius: 4px;
    padding: 16px;
    margin: 16px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.doc .title {
    color: #00f0ff;
    background-color: rgba(0, 240, 255, 0.1);
    padding: 8px 12px;
    margin: -16px -16px 16px -16px;
    font-size: 1.2em;
    text-align: left;
    letter-spacing: 1px;
    border-bottom: 1px solid #00f0ff;
    position: relative;
}
.doc .title::after {
    content: '_';
    display: inline-block;
    margin-left: 5px;
    animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}
.doc .content {
    color: rgb(200, 220, 255);
    line-height: 1.7;
    font-size: 1em;
}
.doc .content p { 
    margin: 0 0 1em 0; 
}