/* =========================================================
   OI-Geek Lab V71.0 - Cosmic Horizon (天体透视版)
   设计语言：Ultra-Low Opacity / Soft Blur / High Edge-Contrast
   ========================================================= */

/*   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800;900&family=JetBrains+Mono:wght@500;700&display=swap');*/

   :root {
       --bg-void: #020617;          
       /* 🌟 高级感核心：不再用蓝，而是用极高透明度的 Slate-950 黑曜石色 */
       --island-glass: rgba(2, 6, 23, 0.45); 
       --island-border: rgba(255, 255, 255, 0.06);
       --accent-blue: #3b82f6;      
       --accent-cyan: #06b6d4;
       --accent-indigo: #8b5cf6;
       /* 🌟 大厂级 Typography 色彩系统 */
       --text-pure-white: #ffffff;      /* 仅用于极致高亮，如选中状态 */
       --text-slate-100: #f1f5f9;       /* 一级标题 (极其柔和的冷白) */
       --text-slate-300: #cbd5e1;       /* 二级标题 / 正文主色 */
       --text-slate-400: #94a3b8;       /* 辅助说明 / 次要信息 */
       --text-blue-glow: #60a5fa;       /* 带有科幻感的亮蓝色文字 */
   }
   
   * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
   
   /* 🌟 全局视界容器 */
   body { 
       background-color: var(--bg-void); 
       color: var(--text-slate-100); 
       font-family: "Plus Jakarta Sans", -apple-system, sans-serif; 
       height: 100vh; width: 100vw; overflow: hidden; 
       display: flex; padding: 24px; gap: 24px; 
       position: relative;
   }
   
   /* 🌟 核心引擎 1：动态流体星云 (修复光学稀释，聚拢光源) */
   body::before {
       content: ''; position: absolute;
       /* 核心修复：活动范围从 -50% 收至 -10%，旋转时不易露边，光核更聚拢 */
       inset: -10%; z-index: 0;
       background: 
           radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.4) 0%, transparent 45%),
           radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.35) 0%, transparent 40%),
           radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.3) 0%, transparent 45%);
       filter: blur(60px);
       animation: cosmicDrift 15s ease-in-out infinite alternate;
       pointer-events: none;
       /* 整体不透明交给渐变内 rgba 控制通透度 */
       opacity: 1;
   }
   @keyframes cosmicDrift {
       0% { transform: rotate(0deg) scale(1); }
       100% { transform: rotate(5deg) scale(1.1); }
   }
   
   /* 🌟 核心引擎 2：星野巡航系统 (Starfield Move) */
   body::after {
       content: ''; position: absolute; inset: 0; z-index: 0;
       /* 绘制微小的像素星光和极暗的科技网格 */
       background-image: 
           radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
           linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
           linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
       background-size: 100px 100px, 40px 40px, 40px 40px;
       background-position: 0 0, 0 0, 0 0;
       animation: starfieldWarp 60s linear infinite;
       pointer-events: none;
       -webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
       mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
   }
   @keyframes starfieldWarp {
       from { background-position: 0 0, 0 0, 0 0; }
       to { background-position: -100px 100px, -40px 40px, -40px 40px; }
   }
   
   /* 🌟 岛屿材质：黑曜石毛玻璃（blur 24px、saturate 120%） */
   .island { 
       background: var(--island-glass); 
       border: 1px solid var(--island-border);
       /* 顶部保留极细的白线反光，增强物理厚度感 */
       border-top: 1px solid rgba(255, 255, 255, 0.12); 
       border-radius: 28px; 
       display: flex; flex-direction: column; overflow: hidden; 
       
       /* 🌟 饱和度克制在 120%，模糊度拉高到 24px，产生极度柔和的磨砂感 */
       backdrop-filter: blur(24px) saturate(120%); 
       -webkit-backdrop-filter: blur(24px) saturate(120%);
       
       /* 阴影：用柔和的大面积扩散代替死黑 */
       box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6), inset 0 0 12px rgba(255,255,255,0.02); 
       position: relative; z-index: 10;
       will-change: width;
   }
   
   /* 🌟 Monaco 编辑器强制穿透 */
   #monaco-editor-root, 
   .monaco-editor, 
   .monaco-editor .margin, 
   .monaco-editor-background,
   #ide-console,
   #console-stdin,
   #console-stdout,
   #chat-scroller {
       background-color: transparent !important;
   }
   
   /* 🌟 左侧卡片：大幅降低黑场，提升通透感 */
   #quest-list > div, #vault-list > div, #archive-list > div {
       background: rgba(255, 255, 255, 0.03) !important;
       border: 1px solid rgba(255, 255, 255, 0.08) !important;
       border-radius: 16px !important; 
       padding: 14px 16px !important; 
       margin-bottom: 12px !important;
       transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
   }
   #quest-list > div:hover, #vault-list > div:hover, #archive-list > div:hover {
       background: rgba(59, 130, 246, 0.12) !important;
       border-color: var(--accent-blue) !important;
       transform: translateX(6px) scale(1.02) !important;
       box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
   }

   /* 🌟 左侧列表卡片文字：柔和冷灰，悬停才亮白 */
   #quest-list > div, #vault-list > div, #archive-list > div {
       color: var(--text-slate-300) !important;
   }
   #quest-list > div:hover, #vault-list > div:hover, #archive-list > div:hover {
       color: var(--text-pure-white) !important;
   }

   /* 🌟 左侧盲区：内部标题行色彩 */
   #vault-list > div span.truncate {
       color: var(--text-slate-300);
   }
   #vault-list > div:hover span.truncate {
       color: #fda4af;
   }

   /* 🌟 Lucide 旋转图标：正方形盒 + 居中，避免偏心转动 */
   .lucide-spin-fix {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transform-origin: center center;
       box-sizing: border-box;
   }
   
   /* 🌟 输入舱：与岛屿同源色，减轻沉闷 */
   .input-capsule-container {
       position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 50;
       background: rgba(2, 6, 23, 0.6); /* 与岛屿同源色 */
       backdrop-filter: blur(16px); 
       border: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255,255,255,0.15);
       border-radius: 28px; padding: 14px; 
       box-shadow: 0 20px 60px rgba(0,0,0,0.8);
       transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   .input-capsule-container:focus-within {
       transform: translateY(-5px); border-color: rgba(59, 130, 246, 0.4);
       box-shadow: 0 30px 80px rgba(0,0,0,0.9), 0 0 0 2px rgba(59, 130, 246, 0.15);
   }
   
   /* 文本域 */
   #main-input {
       background: rgba(0, 0, 0, 0.2) !important; /* 极薄黑底 */
       border: 1px solid rgba(255,255,255,0.05) !important;
       border-radius: 16px; padding: 14px 16px;
       min-height: 48px !important; max-height: 240px !important; 
       line-height: 1.6; font-size: 14px; transition: all 0.2s;
   }
   #main-input:focus { background: rgba(0, 0, 0, 0.4) !important; border-color: rgba(59,130,246,0.3) !important; }
   
   /* 气泡美化 */
   .msg-student { 
       align-self: flex-end; max-width: 80%; margin-bottom: 24px; 
       background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.15));
       border: 1px solid rgba(255, 255, 255, 0.1);
       padding: 14px 20px; border-radius: 20px 20px 4px 20px; color: var(--text-slate-100); font-weight: 600;
   }
   .ai-content-box { font-size: 14px; color: var(--text-slate-300); line-height: 1.8; }
   .ai-content-box pre { 
       background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255,255,255,0.05) !important; 
       border-radius: 16px !important; padding: 16px !important; margin: 16px 0 !important;
   }
   
   /* 激光拖拽条 */
   #resizer { width: 16px; cursor: col-resize; position: relative; z-index: 100; margin: 0 -8px; }
   #resizer::after { content: ""; width: 3px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 10px; transition: 0.3s; }
   #resizer:hover::after, #resizer.active::after { background: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan); height: 100%; }
   
   /* 全局滚动条 */
   ::-webkit-scrollbar { width: 4px; height: 4px; }
   ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
   ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
   .hide-scrollbar::-webkit-scrollbar { display: none; }
   .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
   /* ==========================================
      🌟 核心修复：Monaco 原生滚动条深度定制
      ========================================== */
   .monaco-scrollable-element > .scrollbar > .slider {
       background: rgba(56, 189, 248, 0.4) !important; /* 替换为极地蓝，完美融入深空背景 */
       border-radius: 10px !important;
   }
   .monaco-scrollable-element > .scrollbar > .slider:hover {
       background: rgba(56, 189, 248, 0.8) !important;
   }

   /* ==========================================
      🌟 核心修复：Socratic Linter (强制穿透波浪线)
      ========================================== */
   .socratic-highlight-line {
       background: rgba(245, 158, 11, 0.15) !important; /* 背景高亮保留 */
   }
   /* 必须将波浪线单独作用于 inlineClassName，防止被整行重置 */
   .socratic-wavy-underline {
       text-decoration: underline wavy #f59e0b !important;
       text-underline-position: under !important;
       color: #fbbf24 !important; /* 连带文字变黄，极其醒目 */
   }
   .socratic-glyph {
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fbbf24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>') !important;
       background-size: 16px 16px !important;
       background-repeat: no-repeat !important;
       background-position: center !important;
       filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8));
   }

   /* 🌟 核心修复：左岛模块物理锁死，防止无限延伸 */
   #sidebar-island { display: flex; flex-direction: column; overflow: hidden; }
   #sidebar-content-wrapper { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 24px; padding-bottom: 20px; }
   .sidebar-module { flex: 1; min-height: 0; display: flex; flex-direction: column; }
   .scroll-area { flex: 1; overflow-y: auto; padding-right: 6px; }

   /* ==========================================
      🌟 终极排版色彩纠偏：强行压制死白
      ========================================== */

   /* 1. 左岛三大列表内部的标题文字 */
   #quest-list > div > div:first-child,
   #vault-list > div > div:first-child > span:first-child,
   #archive-list > div > div:first-child {
       color: #cbd5e1 !important; /* 强制转为 Slate-300 冷灰 */
       transition: color 0.2s ease !important;
   }

   /* 🌟 核心修复：解除绿色护盾被强行压灰的封印，强制释放翡翠绿！ */
   .resolved-shield-text,
   #vault-list > div > div:first-child > span.resolved-shield-text,
   #vault-list > div > div:first-child > span.resolved-shield-text.resolved-shield-text {
       color: #10b981 !important;
   }
   .resolved-shield-icon {
       color: #10b981 !important;
   }

   /* 悬停时才发亮，产生交互呼吸感 */
   #quest-list > div:hover > div:first-child,
   #vault-list > div:hover > div:first-child > span:first-child,
   #archive-list > div:hover > div:first-child {
       color: #ffffff !important;
   }

   /* 2. 中岛顶部：仅前四个知识库按钮压灰（右侧栏第 1–4 个子元素为 button，第 5 为分隔条） */
   #evolution-island header > div:last-child > button:nth-child(-n+4) {
       color: #94a3b8 !important; /* Slate-400 */
       transition: all 0.3s ease !important;
   }

   #evolution-island header > div:last-child > button:nth-child(-n+4):hover {
       color: #60a5fa !important; /* Blue-400 */
       background: rgba(59, 130, 246, 0.1) !important;
       border-color: rgba(59, 130, 246, 0.2) !important;
   }

   #evolution-island header > div:last-child > button:nth-child(-n+4) i {
       color: inherit;
   }

   /* ==========================================
      🌟 终极通透引擎补丁 V2：黑曜石层级
      ========================================== */
   .bg-black\/50 { 
       background-color: rgba(2, 6, 23, 0.35) !important; 
       box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
   }
   .bg-black\/40 { background-color: rgba(2, 6, 23, 0.25) !important; }
   .bg-black\/20 { background-color: rgba(2, 6, 23, 0.15) !important; }
   .bg-black\/10 { background-color: rgba(2, 6, 23, 0.08) !important; }
   .bg-black\/60 { 
       background-color: rgba(2, 6, 23, 0.5) !important; 
       backdrop-filter: blur(24px) saturate(120%) !important; 
   }

   /* ==========================================
      🌟 架构师特调：击穿 IDE “叹息之墙” (解决嵌套毛玻璃导致的实心墙)
      ========================================== */
   
   /* 1. 改造 IDE 外壳包装器 */
   #evolution-island .bg-black\/50 {
       /* ⚠️ 核心操作 1：彻底杀死导致实心灰墙的内层毛玻璃 */
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
       
       /* ⚠️ 核心操作 2：智能光学渐变。
          左侧 (0%) 稍暗 (0.4) 保证代码高对比度清晰可见；
          右侧 (100%) 极度通透 (0.05) 让星云光斑完美溢出！ */
       background: linear-gradient(90deg, rgba(2, 6, 23, 0.4) 0%, rgba(2, 6, 23, 0.05) 100%) !important;
       
       /* 雕刻内凹质感 */
       border: 1px solid rgba(255, 255, 255, 0.05) !important;
       box-shadow: inset 40px 0 60px -20px rgba(0, 0, 0, 0.4) !important;
   }

   /* 2. 强力剥离 Monaco 引擎残留底色，包括代码行号槽 (margin) */
   .monaco-editor, 
   .monaco-editor-background, 
   .monaco-editor .margin {
       background-color: transparent !important;
   }

   /* 3. 同步修复底部 Console 运行台的闷墙问题 */
   #ide-console {
       background: linear-gradient(0deg, rgba(2, 6, 23, 0.8) 0%, rgba(2, 6, 23, 0.4) 100%) !important;
       backdrop-filter: none !important; 
       -webkit-backdrop-filter: none !important;
       border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
   }
   #ide-console .bg-black\/40 {
       background-color: rgba(0, 0, 0, 0.25) !important;
   }

   /* ==========================================
      🌟 V55.0 质感与层级终极优化补丁 (CTO 特调)
      ========================================== */

   /* ------------------------------------------
      1. 左岛：重塑排版层级，剥夺多余的字重
      ------------------------------------------ */
   /* 提升标题的清晰度：稍微放大，加入微光投影 */
   #sidebar-content-wrapper > div > div.text-\[11px\] {
       font-size: 12px !important;
       color: #f8fafc !important;
       letter-spacing: 0.05em;
       text-shadow: 0 2px 4px rgba(0,0,0,0.6);
       margin-bottom: 12px !important;
   }
   /* 强行压制列表项的字重（从 900 降为 600），颜色变暗 */
   #quest-list > div > div:first-child,
   #vault-list > div > div:first-child > span:first-child,
   #archive-list > div > div:first-child {
       font-size: 12px !important;
       font-weight: 600 !important;
       color: #94a3b8 !important; /* 默认使用高级灰 Slate-400 */
       transition: all 0.2s ease !important;
   }
   /* 悬停时列表项才变亮、加粗，形成呼吸感 */
   #quest-list > div:hover > div:first-child,
   #vault-list > div:hover > div:first-child > span:first-child,
   #archive-list > div:hover > div:first-child {
       color: #ffffff !important;
       font-weight: 800 !important;
   }

   /* ------------------------------------------
      2. 拖拽条 (Resizer)：找回丢失的胶囊拉手
      ------------------------------------------ */
   #resizer {
       display: flex;
       align-items: center;
       justify-content: center;
   }
   #resizer::after {
       content: "";
       width: 4px;
       height: 32px;
       background: rgba(255, 255, 255, 0.25); /* 提高基础可见度 */
       border-radius: 4px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 2px 10px rgba(0,0,0,0.5);
   }
   #resizer:hover::after, #resizer.active::after {
       background: var(--accent-cyan);
       box-shadow: 0 0 15px var(--accent-cyan);
       height: 60px; /* 悬停时拉长，手感更好 */
   }

   /* ------------------------------------------
      3. 中岛去污：消灭脏感，采用极简高透玻璃
      ------------------------------------------ */
   #evolution-island .bg-black\/50 {
       /* 去除显脏的渐变和内阴影，换成极度纯净的深岩蓝 */
       background: rgba(15, 23, 42, 0.3) !important;
       border: 1px solid rgba(255, 255, 255, 0.08) !important;
       /* 改用外发光阴影，让 IDE 悬浮起来，而不是凹陷下去 */
       box-shadow: 0 15px 35px -10px rgba(0,0,0,0.6) !important;

       /* 引入极其微弱的毛玻璃（8px），不会触发灰块 BUG，但能柔化底层网格 */
       backdrop-filter: blur(8px) saturate(120%) !important;
       -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
   }

   /* ------------------------------------------
      4. 唤醒按钮：注入霓虹精气神
      ------------------------------------------ */
   /* 让左侧的4个资料库按钮拥有和右侧一致的尺寸与科技感 */
   #evolution-island header > div:last-child > button:nth-child(-n+4) {
       background: rgba(99, 102, 241, 0.15) !important; /* 科技靛蓝底 */
       border: 1px solid rgba(99, 102, 241, 0.3) !important;
       color: #a5b4fc !important; /* 明亮的紫蓝色 */
       font-weight: 800 !important; /* 拉满字重 */
       font-size: 11px !important;
       padding: 6px 16px !important; /* 统一高度和宽度 */
       text-shadow: 0 2px 4px rgba(0,0,0,0.3);
   }
   #evolution-island header > div:last-child > button:nth-child(-n+4):hover {
       background: rgba(99, 102, 241, 0.4) !important;
       border-color: rgba(99, 102, 241, 0.6) !important;
       color: #ffffff !important;
       box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important;
       transform: translateY(-1px);
   }

   /* 当中岛被挤压到 400px 时：宁可出现底部水平滚动条，也不让布局坍塌变形 */
   /* ==========================================
      🌟 V55.1 屏幕防爆装甲 (Anti-Collapse Armor)
      ========================================== */
   body {
       /* 允许水平滚动救场，禁止垂直溢出坍塌 */
       overflow-x: auto !important;
       overflow-y: hidden !important;
       /* 设定全站生命底线：左260 + 右420 + 间距约100 + 中岛极限400 ≈ 1180px */
       min-width: 1200px !important;
   }

   #evolution-island {
       /* IDE 主舱物理极限宽度，再小就没法写代码了 */
       min-width: 400px !important;
   }

   /* 改造滚动条样式，使其符合深空主题 */
   body::-webkit-scrollbar { height: 8px; }
   body::-webkit-scrollbar-track { background: #020617; }
   body::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.3); border-radius: 10px; }
   body::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.6); }

/* ==========================================
   🌟 大厂级智能折叠：绕过 Tailwind JIT 漏扫的物理锁
   ========================================== */
/* 默认宽屏状态：显示桌面按钮，隐藏胶囊 */
.nav-desktop-view { display: flex !important; }
.nav-mobile-capsule { display: none !important; }

/* 当屏幕宽度小于 1180px (Mac 13/14寸笔记本级别) 时触发折叠 */
@media (max-width: 1180px) {
    .nav-desktop-view { display: none !important; }
    .nav-mobile-capsule { display: block !important; }
}

/* ==========================================
   🌟 游戏乐园 2.0 专属多巴胺动效引擎
   ========================================== */

/* 2048 方块新生弹跳特效 */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.15); /* 稍微变大，产生弹性反馈 */
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================
   🌟 修复：深色模式下的日历选择器强制反色
   ========================================== */
input[type="date"] {
    color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) hue-rotate(180deg) brightness(1.5);
    cursor: pointer;
    opacity: 0.8;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}