/* =========================================
   系统加载动画重构 (Loading) - 完美适配 rili
   ========================================= */
/* 隐藏原生的三个加载小圆点 */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full) div.size-6 {
  display: none !important;
}

/* 主容器：科技背景 + 网格线 */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full) {
  width: 100% !important;
  min-width: 400px !important; /* [防挤压补丁] 强行撑开外部 w-fit 限制 */
  height: auto !important;
  min-height: 120px !important; /* 保持足够高度 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 20px !important;

  /* 深色科技背景 + 网格线 */
  background-color: #0b1015 !important;
  background-image: 
    linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;

  /* 边框发光 */
  border: 1px solid rgba(0, 243, 255, 0.2) !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 243, 255, 0.1) !important;
  border-radius: 4px !important;
}

/* 3. 核心动画：旋转的 HUD 扫描圈 */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full)::before {
  content: '' !important;
  position: absolute !important;
  
  /* --- 稳健居中法 (不占用 transform) --- */
  top: 40% !important;
  left: 50% !important;
  width: 50px !important;
  height: 50px !important;
  margin-left: -25px !important; /* 宽度的一半 */
  margin-top: -25px !important;  /* 高度的一半 */
  
  /* --- 视觉样式：断开的科技圆环 --- */
  border-radius: 50% !important;
  border: 3px solid transparent !important; /*以此为基础*/
  border-top: 3px solid #00f3ff !important;   /* 上弧 */
  border-bottom: 3px solid #00f3ff !important; /* 下弧 */
  
  /* 发光效果 */
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
  
  /* --- 强制旋转动画 --- */
  animation: cyber-spin 1s linear infinite !important;
  z-index: 10 !important;
}

/* 4. 文字层：闪烁的提示 */
div.border-muted:has(span.aspect-square.bg-primary.rounded-full)::after {
  content: '系统渲染中...\A [建议记忆4-底部按钮支持横向滑动]' !important;
  white-space: pre !important;
  text-align: center !important;
  
  position: absolute !important;
  bottom: 20px !important;
  left: 0 !important;
  width: 100% !important; /* 宽度撑满，利用 text-align 居中 */
  
  font-family: "JetBrains Mono", "Consolas", monospace !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  color: rgba(0, 243, 255, 0.8) !important;
  letter-spacing: 1px !important;
  
  animation: text-blink 2s ease-in-out infinite !important;
}

/* --- 动画关键帧定义 --- */
@keyframes cyber-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes text-blink {
  0%, 100% { opacity: 0.6; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 8px #00f3ff; }
}

/* =========================================
   全局容器与基础美化 (轻量版)
   ========================================= */
/* 映射新平台的主气泡容器 */
div.border-muted:has(.rili-markdown-renderer) {
    background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%) !important;
    border: 2px solid #00ffff !important;
    border-radius: 20px !important;
    /* 优化：减少阴影层数，减轻渲染压力 */
    box-shadow: 
        inset 0 0 20px rgba(0, 255, 255, 0.1),
        0 5px 20px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    overflow: visible !important;
    /* [抗锯齿补丁] 防止流光动画导致字体边缘抽搐发糊 */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* 边框流光动画保留，这通常不会造成大卡顿 */
div.border-muted:has(.rili-markdown-renderer)::before {
    content: "" !important;
    position: absolute !important;
    top: -1px !important; left: -1px !important; right: -1px !important; bottom: -1px !important;
    background: linear-gradient(45deg, #ff006e, #00ffff, #ff006e) !important;
    border-radius: 20px !important;
    opacity: 0.5 !important;
    z-index: -1 !important;
    animation: borderGlow 4s ease-in-out infinite !important; /* 减慢动画频率 */
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* 映射 Markdown 渲染器 */
.rili-markdown-renderer {
    font-family: 'Orbitron', 'Noto Sans SC', monospace !important;
    color: #e0e0e0 !important;
    padding: 20px !important;
    font-size: 14px !important;
    background: transparent !important;
}

/* --- PRE 标签修复 --- */
.rili-markdown-renderer pre {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #00ffff !important;
    padding: 15px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    font-family: 'Orbitron', monospace !important;
    margin: 15px 0 !important;
}

/* =========================================
   思维链：智能感应模式 (Smart Sensor)
   ========================================= */

/* 1. 基础形态：默认就是“隐藏状态” */
.thought-process {
    /* 默认状态：高度为0，透明，不占空间 */
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    /* 加上一点过渡，让消失不那么生硬，像关电视一样 */
    transition: all 0.5s ease-in-out !important;
}

/* 2. [核心逻辑] 激活状态：只有当它是“最后一个元素”时才显示 */
/* 意味着：AI 正在写它，或者刚写完它还没写下一个标签 */
.thought-process:last-child {
    /* 激活状态：撑开高度，显示扫描条 */
    max-height: 50px !important; /* 足够容纳36px的条 */
    opacity: 1 !important;
    margin-bottom: 15px !important;
}

/* ------------------------------------------------
   以下是扫描条的视觉样式 (复用之前的赛博风格)
   ------------------------------------------------ */

/* 内部 Details 锁定 */
.thought-process details {
    height: 36px !important;
    min-height: 36px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(0, 243, 255, 0.4) !important;
    border-radius: 4px !important;
    position: relative !important;
    overflow: hidden !important;
    list-style: none !important;
}

/* 隐藏 Summary 文字 */
.thought-process summary {
    font-size: 0 !important;
    color: transparent !important;
    height: 36px !important;
}
.thought-process summary::-webkit-details-marker { display: none !important; }

/* 视觉特效：扫描光束 */
.thought-process details::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.2), rgba(0, 243, 255, 0.8), transparent) !important;
    transform: skewX(-30deg) !important;
    animation: scan-beam 1.5s infinite linear !important;
}

/* =========================================
   5. [核心文字]：多句循环 + 绝对打字机修复版
   ========================================= */
.thought-process details::after {
    content: ''; 
    
    /* 布局：左对齐 */
    position: absolute !important;
    top: 0 !important;
    left: 10px !important; 
    height: 36px !important;
    line-height: 36px !important;
    
    /* 字体：使用等宽字体以保证打字效果更像终端 */
    font-family: 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 11px !important; 
    font-weight: bold !important;
    color: #00f3ff !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.6) !important;
    
    /* 核心逻辑 */
    white-space: nowrap !important;
    overflow: hidden !important;
    width: 0;
    
    /* 模拟光标 _ (右边框透明，用阴影模拟) */
    border-right: 2px solid transparent !important; 
    box-shadow: 5px 0 0 0 transparent !important;
    
    z-index: 10 !important;
    
    /* [关键修改] 
       1. 使用 linear 替代 steps，消除步进误差，确保宽度能平滑归零。
       2. 时长设为 18s，给每句话足够展示时间。
    */
    animation: 
        typewriter-fix 18s linear infinite,
        cursor-blink 0.8s step-end infinite !important;
}

/* =========================================
   关键帧：三句循环 (带安全缓冲区的逻辑)
   ========================================= */
@keyframes typewriter-fix {
    /* --- 第一句：正在思考剧情走向…… (约10字 -> 设130px) --- */
    0% { 
        content: "正在思考剧情走向……"; 
        width: 0; 
    }
    1% { width: 0; }        /* [缓冲] 确保开始时是空的 */
    5% { width: 130px; }    /* 打字过程 */
    30% { width: 130px; }   /* 停留阅读 */
    32% { width: 0; }       /* 快速删除 */
    
    /* --- [安全区 1] 32%~33.5%：宽度锁死为0，内容在此期间切换 --- */
    32.1% { width: 0; content: "正在思考剧情走向……"; } /* 保持旧内容归零 */
    32.2% { content: "如果有问题请评论区留言，下方有按钮支持横向拖动"; } /* [核心] 宽度为0时偷偷换内容 */
    33.5% { width: 0; }     /* 保持新内容宽度为0，准备开始 */

    /* --- 第二句：如果有问题... (约22字 -> 设300px) --- */
    38% { width: 300px; }   /* 打字 */
    63% { width: 300px; }   /* 停留 */
    65% { width: 0; }       /* 删除 */

    /* --- [安全区 2] 65%~66.5%：同理 --- */
    65.1% { width: 0; content: "如果有问题请评论区留言"; }
    65.2% { content: "如果渠道异常建议切换yuege0.132"; } 
    66.5% { width: 0; }

    /* --- 第三句：如果渠道异常... (约16字 -> 设220px) --- */
    71% { width: 220px; }   /* 打字 */
    96% { width: 220px; }   /* 停留 */
    98% { width: 0; }       /* 删除 */
    
    /* --- [安全区 3] 循环回第一句 --- */
    98.1% { width: 0; content: "如果渠道异常请切换其他"; }
    98.2% { content: "正在思考剧情走向……"; }
    100% { width: 0; }
}

/* 下划线光标闪烁 */
@keyframes cursor-blink {
    0%, 100% { box-shadow: inset -8px -4px 0 0 #00f3ff; }
    50% { box-shadow: inset -8px -4px 0 0 transparent; }
}

/* --- 隐藏逻辑 --- */
.thought-pro {
    display: none !important;
}

/* =========================================
   折叠面板 (性能优化版)
   ========================================= */
.rili-markdown-renderer details {
    width: 100% !important; /* 防挤压 */
    min-width: 450px !important; /* 防挤压 */
    margin-bottom: 15px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(26, 31, 46, 0.6);
    /* 移除 backdrop-filter，这在动态高度变化时非常消耗性能 */
    /* backdrop-filter: blur(10px); */ 
    
    /* [核心] 必须保留可见，否则气泡会被切断 */
    overflow: visible !important;
    
    /* [优化] 仅过渡关键视觉属性，不过渡布局属性 */
    transition: border-color 0.2s, box-shadow 0.2s;
    
    position: relative;
    z-index: 1;
}

/* 鼠标悬停时提升层级 (解决遮挡)，但减少视觉特效 */
.rili-markdown-renderer details:hover,
.rili-markdown-renderer details[open]:hover {
    z-index: 500; /* 降低层级数值，足够盖住下方即可 */
    border-color: #00ffff;
    /* 简化阴影 */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.rili-markdown-renderer details[open] {
    border-color: #00ffff;
}

.rili-markdown-renderer summary {
    list-style: none;
    padding: 12px 20px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.1) 0%, transparent 100%);
    color: #00ffff;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    /* [优化] 移除 all transition */
    transition: padding 0.2s, background 0.2s;
}

.rili-markdown-renderer summary::-webkit-details-marker { display: none; }

.rili-markdown-renderer summary::before {
    content: "▶";
    position: absolute;
    left: 10px;
    transition: transform 0.2s; /* 独立动画 */
    color: #ff006e;
}

.rili-markdown-renderer details[open] > summary::before {
    transform: rotate(90deg);
}

.rili-markdown-renderer summary:hover {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.2) 0%, rgba(255, 0, 110, 0.1) 100%);
    padding-left: 25px;
}

/* =========================================
   Tooltip 系统 (性能优化)
   ========================================= */
.rili-markdown-renderer info {
    color: #00ffff;
    font-weight: bold;
    margin-right: 5px;
}

.rili-markdown-renderer T {
    position: relative; /* 必须 */
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 8px;
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #ff006e;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: #ffd700;
    /* [优化] 仅过渡颜色 */
    transition: color 0.2s;
}

.rili-markdown-renderer T:hover {
    color: #00ffff;
    z-index: 1000; /* 局部提升 */
}

.rili-markdown-renderer T::before { content: "\2060"; }

.rili-markdown-renderer T Ti {
    visibility: hidden;
    opacity: 0;
    text-decoration: none;
    white-space: normal;
    
    width: max-content;
    max-width: 250px;
    min-width: 150px;
    
    background-color: #1a1f2e;
    color: #e0e0e0;
    text-align: left;
    border-radius: 8px;
    padding: 10px 14px; /* 稍微减小内边距 */
    font-size: 0.9em;
    border: 1px solid #ff006e;
    
    /* 简化阴影 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        
    /* [优化] 仅过渡透明度，不过渡位置 */
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    
    position: absolute;
    z-index: 9999; /* 足够高即可 */
    
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
}

@media (max-width: 768px) {
    .rili-markdown-renderer T Ti {
        left: 0;
        transform: translateX(-10%) translateY(-5px);
    }
}

.rili-markdown-renderer T Ti::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1a1f2e transparent transparent transparent;
}

.rili-markdown-renderer T:hover Ti {
    visibility: visible;
    opacity: 1;
}

.rili-markdown-renderer T Ti span {
    color: #00ffff;
    font-weight: bold;
}

/* 关键修复：确保内部容器不截断气泡 */
inventory_panel, .item_grid {
    overflow: visible !important;
}

/* =========================================
   进度条最终版：圆角胶囊 + 固定短款
   ========================================= */

/* 1. 容器布局 */
.bar_item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-family: 'Orbitron', monospace;
}

/* 标签样式 */
.bar_item label {
    width: 35px;
    color: #00ffff;
    font-weight: bold;
    font-size: 12px;
    flex-shrink: 0; /* 禁止被挤压 */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    margin-right: 8px; /* 标签和条之间的间距 */
}

/* 2. 包裹层：[核心修改] 圆角 + 固定短宽 */
.bar_wrap {
    /* [关键] 固定宽度，不再占满整行 */
    width: 240px; 
    
    /* [关键] 移动端兜底：最大不超过屏幕宽度的 65%，防止在超小手机上溢出 */
    max-width: 65vw; 

    height: 18px; 
    background: #0a0f14; /* 深色底槽 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* [关键] 大圆角，呈胶囊状 */
    border-radius: 10px; 
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
}

/* 3. 进度条本体 */
.bar_wrap progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    display: block;
}

.bar_wrap progress::-webkit-progress-bar {
    background: transparent;
}

/* 通用填充样式：圆角跟随 */
.bar_wrap progress::-webkit-progress-value {
    transition: width 0.3s ease-in-out;
    /* 右侧也给圆角，这样没满的时候也是圆润的 */
    border-radius: 0 10px 10px 0; 
    
    /* 微弱纹理，增加质感 */
    background-image: linear-gradient(
        45deg, 
        rgba(255,255,255,0.1) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255,255,255,0.1) 50%, 
        rgba(255,255,255,0.1) 75%, 
        transparent 75%, 
        transparent
    );
    background-size: 15px 15px;
}

/* --- [颜色定义] 圆润版 --- */

/* HP: 鲜红 */
.hp_bar::-webkit-progress-value {
    background-color: #ff3333; 
    background: linear-gradient(90deg, #d32f2f 0%, #ff5252 100%) !important;
    box-shadow: 0 0 8px rgba(255, 50, 50, 0.4);
}

/* MP: 科技蓝 */
.mp_bar::-webkit-progress-value {
    background-color: #00f3ff;
    background: linear-gradient(90deg, #0288d1 0%, #29b6f6 100%) !important;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

/* SP: 活力绿 */
.sp_bar::-webkit-progress-value {
    background-color: #33ff00;
    background: linear-gradient(90deg, #388e3c 0%, #66bb6a 100%) !important;
    box-shadow: 0 0 6px rgba(50, 255, 50, 0.3);
}

/* EXP: 荣耀金 */
.exp_bar::-webkit-progress-value {
    background-color: #ffd700;
    background: linear-gradient(90deg, #fbc02d 0%, #ffee58 100%) !important;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

/* 4. 数值文字：居中悬浮 */
.bar_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    z-index: 5;
    
    /* 强描边，防背景干扰 */
    text-shadow: 
        0 1px 2px rgba(0,0,0,1),
        0 0 2px rgba(0,0,0,0.8);
    pointer-events: none;
    line-height: 1;
}

/* =========================================
   布局与表格
   ========================================= */
.rili-markdown-renderer table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    background: rgba(26, 31, 46, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
}
.rili-markdown-renderer table caption {
    padding: 8px;
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    font-weight: bold;
}
.rili-markdown-renderer table th {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
}
.rili-markdown-renderer table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.rili-markdown-renderer table tr:hover {
    background: rgba(0, 255, 255, 0.05);
}

.item_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.item_grid T {
    background: rgba(26, 31, 46, 0.6);
    padding: 8px;
    border-radius: 5px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    /* 优化过渡 */
    transition: border-color 0.2s;
}
.item_grid T:hover {
    border-color: #00ffff;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

/* 用户面板布局 */
.user_basic { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 10px; }
.info_tag {
    background: rgba(0, 255, 255, 0.1);
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #00ffff;
}
/* =========================================
   1. 职业栏重构：强制上下排列 + 紧凑化
   ========================================= */

/* 容器：改为纵向 Flex 布局 */
.class_section {
    display: flex !important;
    flex-direction: column !important; /* [核心] 强制上下排列 */
    gap: 5px !important;               /* [核心] 极小的间距 (5px) */
    margin: 8px 0 !important;          /* 减少与上下的距离 */
    width: 100% !important;
}

/* 主/副职业卡片通用样式 */
.main_class, .sub_class {
    width: 100% !important;            /* 占满整行 */
    padding: 6px 10px !important;      /* 极窄内边距 */
    background: rgba(26, 31, 46, 0.6) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important; /* 防止边框撑大宽度 */
    
    /* 内部文本紧凑化 */
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* 标题微调 */
.main_class h4, .sub_class h4 {
    margin: 0 !important;
    font-size: 13px !important;
    color: #00ffff !important;
    border-bottom: 1px dashed rgba(0, 255, 255, 0.2) !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
}

/* 内容文字微调 */
.main_class p, .sub_class p {
    margin: 0 !important;
    font-size: 12px !important;
    color: #ccc !important;
    line-height: 1.4 !important;
}

.stats_row { display: flex; justify-content: space-around; margin: 8px 0; flex-wrap: wrap;}
.stat {
    background: rgba(0, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    margin: 2px;
}
.bar_item { display: flex; align-items: center; margin: 8px 0; gap: 10px; }
.bar_item label { width: 40px; color: #00ffff; font-weight: bold; }

.rili-markdown-renderer equip_list, .rili-markdown-renderer skill_list {
    display: block;
    margin: 15px 0;
    padding: 15px;
    background: rgba(26, 31, 46, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}
.rili-markdown-renderer equip_list h4, .rili-markdown-renderer skill_list h4 { margin: 0 0 10px 0; color: #ff006e; }

/* =========================================
   顶部横向模块 (由侧边栏修改而来)
   ========================================= */

/* 1. 容器样式覆写：取消 Fixed 定位，改为流式布局的块级元素 */
details.sidebar-system {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 100;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    display: block !important;
    margin-bottom: 20px;
}

/* 2. 隐藏原有的汉堡菜单按钮 (toggle) */
details.sidebar-system > summary.sidebar-toggle {
    display: none !important;
}

/* 3. 内容区域：Flex 布局，允许换行 (Wrap) */
.sidebar-content {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    
    padding: 0 !important;
    overflow: visible !important;
    
    display: flex;
    flex-wrap: wrap; /* 核心：允许模块换行 */
    gap: 10px;
    justify-content: space-between;
}

/* 侧边栏内部样式 (Tab模块) - 默认关闭状态 */
details.sidebar-tab {
    /* 核心逻辑：默认占位 30% 左右，排列顺序 (Order) 为 1 */
    flex: 1 1 30%;
    min-width: 200px; /* 防止过窄 */
    order: 1; /* 默认排在前面 */
    
    border: 1px solid rgba(0, 255, 255, 0.3);
    background: rgba(26, 31, 46, 0.8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 0 !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* 模块标题 (Summary) 样式优化为按钮 */
details.sidebar-tab > summary {
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.9) 0%, rgba(10, 14, 26, 0.9) 100%);
    border-bottom: none;
    border-radius: 8px;
    margin-bottom: 0;
    text-align: center;
    color: #00ffff;
    font-weight: bold;
    white-space: nowrap;
}

details.sidebar-tab > summary:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: #00ffff;
}

/* 侧边栏内部样式 (Tab模块) - 激活打开状态 */
details.sidebar-tab[open] {
    /* 核心逻辑：激活后宽度占满 100%，排列顺序 (Order) 变为 10 */
    /* 这会强制它排到后面（即下一行），而其他 Order:1 的模块会留在第一行 */
    flex-basis: 100%;
    width: 100%;
    order: 10; 
    
    margin-top: 5px; /* 与上方按钮行拉开一点距离 */
    background: linear-gradient(90deg, #ff006e 0%, transparent 100%); /* 仅示例，可保持原样 */
    background: rgba(26, 31, 46, 0.95);
    border-color: #ff006e;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* 激活状态下的标题 */
details.sidebar-tab[open] > summary {
    background: linear-gradient(90deg, #ff006e 0%, #1a1f2e 100%);
    color: #fff;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #ff006e;
}

/* 内部内容微调 */
friend_list_panel,
forum_container,
quest_container {
    display: block;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header {
    display: none; /* 隐藏原有的 "系统菜单" 标题 */
}

/* 频道与列表 */
.channel_world, .channel_region, .channel_team {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(26, 31, 46, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}
.channel_world h3, .channel_region h3, .channel_team h3 {
    margin: 0 0 10px 0;
    color: #00ffff;
    font-size: 1.1em;
}
.rili-markdown-renderer player { color: #ffd700; font-weight: bold; }
.rili-markdown-renderer time { color: #888; font-size: 0.9em; }

/* =========================================
   命运选择面板 (修复黑色背景冲突版)
   ========================================= */
.destiny-choice-panel {
    font-family: inherit;
    color: #363636 !important;
    line-height: 1.7 !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 8px !important;
    padding: 1em !important;
    margin: 1em 0 !important; 
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; 
}

.destiny-choice-panel h3 {
    margin-top: 0 !important;
    margin-bottom: 0.5em !important;
    padding-bottom: 0.5em !important;
    border-bottom: 1px solid #eeeeee !important;
    color: #363636 !important;
}

/* 核心修复点：强制背景透明，消除全局深色 pre 的污染 */
.destiny-choice-panel pre {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important; /* <--- 补上 !important 护体 */
    font-family: inherit !important;
    font-size: inherit !important;
    color: #363636 !important; 
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    box-shadow: none !important;
}
/* =========================================
   Catai 评论区美化 CSS - [V5 最终·纯白主题]
   ========================================= */
/* 1. 精准选择卡片元素，设置为 "纯白卡片" 样式 */
.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(0, 0, 0, 0.08) !important; 
    border: 1px solid #e0e0e0 !important; 
    transition: all 0.3s ease-in-out !important;
}
/* 2. 悬停效果 (亮色版) */
.group.ml-0 > .flex.items-start.gap-2:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important; 
    background-color: #fcfcfc !important; 
    border-color: #d0d0d0 !important;
}
/* 3. 美化内部的评论内容区 (.break-all) */
.group.ml-0 .break-all {
    white-space: pre-wrap !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    color: #333333 !important; 
}
/* 4. [关键] 确保卡片内部的文本颜色是深色，以便在白底上阅读 */
.group.ml-0 > .flex.items-start.gap-2 .text-grey-600 {
    color: #555 !important; 
}
.group.ml-0 > .flex.items-start.gap-2 .text-gray-500 {
    color: #777 !important; 
}
.group.ml-0 > .flex.items-start.gap-2 .text-gray-400 {
    color: #999 !important; 
}
.group.ml-0 > .flex.items-start.gap-2 .font-bold {
    color: #111111 !important; 
}
/* 5. [解决间距] 减小评论之间的分隔线 (divider) 的外边距 */
div.style_divider__mW0YX.style_horizontal__UvaHt {
    margin-top: 10px !important; 
    margin-bottom: 10px !important;  
    border-top: 1px solid #eeeeee !important; 
    background: none !important;
}

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

/* 顺便美化一下横向滚动条，契合你的UI风格 */
details table::-webkit-scrollbar {
    height: 6px;
}
details table::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.4);
    border-radius: 3px;
}
details table::-webkit-scrollbar-track {
    background: rgba(13, 34, 56, 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;         /* 关键修复：限制单元格最小宽度，防止被挤成单字竖排 */
}

/* 针对最后一列（Event/客观事实）给予更大的最小宽度，因为它内容最多 */
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); 
}

/* --- 3. “显示消耗”按钮 · 能源探针 (色调调整为蓝色) --- */
.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);
}

/* --- 4. 悬停效果 · 回路过载 (色调调整为蓝色) --- */
.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;
}

/* --- 5. 消耗数值 · 数据流 (色调调整为蓝色) --- */
.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;
}

/* --- 6. 核心逻辑 · 概念展开 (保持不变) --- */
.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;
}

/* --- 对话气泡 --- */
.bubble {
    max-width: 80%;
    padding: 10px 15px;
    position: relative;
    line-height: 1.6;
    word-wrap: break-word;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease;
}

.bubble:hover {
    background: rgba(0, 240, 255, 0.1);
}

.bubble.npc {
    align-self: flex-start;
    border-left: 3px solid #00f0ff;
    color: #e0e0e0;
}

.bubble.user {
    align-self: flex-end;
    background: rgba(20, 10, 30, 0.5);
    border-right: 3px solid #ff00ff;
    color: #f5f5f5;
}

.bubble .name {
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 5px;
}

.bubble.npc .name { color: #00f0ff; }
.bubble.user .name { color: #ff00ff; }
.bubble .msg { margin: 0; padding: 0; font-size: 1em; }

/* --- 文档阅读 --- */
.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; 
}

/* =========================================
   1. 布局容器：横向排列与智能换行核心
   ========================================= */
.module-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;       
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.module-row > details {
    flex: 1 1 0;     
    min-width: 120px; 
    order: 1;        
    margin-bottom: 0 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

.module-row > details[open] {
    flex-basis: 100%; 
    width: 100%;
    order: 10;        
    margin-top: 10px; 
    z-index: 10;      
}

/* =========================================
   2. 模块一：好友 (Friends) - 纯文本排版适配
   ========================================= */
.module-row > details:nth-child(1) {
    line-height: 1.8;
    color: #e0e0e0;
}

.module-row > details:nth-child(1) details {
    margin-top: 8px;
    border: 1px dashed rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.module-row > details:nth-child(1) details summary {
    font-size: 0.9em;
    padding: 5px 10px 5px 30px; 
    color: #aaa;
}

.module-row > details:nth-child(1) p {
    margin: 4px 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid #555;
    font-size: 0.9em;
    border-radius: 0 4px 4px 0;
}

/* =========================================
   3. 模块二：论坛 (Forum) - 深度美化
   ========================================= */
forum_container {
    display: block;
    padding: 15px;
}

.forum_header h3 {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #ff006e; 
    color: #fff;
    text-shadow: 0 0 8px #ff006e;     
    font-size: 1.1em;
}

.thread_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 论坛布局优化：自动折行 + 适配窄屏 */
details.thread {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

details.thread:hover {
    border-color: #00ffff !important;
    background: rgba(0, 255, 255, 0.05) !important;
}

details.thread[open] {
    border-color: #ffd700 !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

details.thread > summary {
    display: flex !important;
    flex-wrap: wrap !important; 
    align-items: center !important; 
    gap: 6px 10px !important; 
    padding: 10px 12px 10px 30px !important; 
    list-style: none !important;
    cursor: pointer !important;
    position: relative !important;
    line-height: 1.4 !important;
}

.thread_tag {
    flex: 0 0 auto !important; 
    display: inline-block !important;
    padding: 2px 8px !important;
    border: 1px solid #ff006e !important;
    background: rgba(255, 0, 110, 0.15) !important;
    color: #ff006e !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    white-space: nowrap !important; 
}

.thread_title {
    flex: 1 1 auto !important; 
    min-width: 180px !important; 
    color: #00ffff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    word-wrap: break-word !important; 
}

.thread_info {
    flex: 0 0 auto !important; 
    color: #888 !important;
    font-size: 12px !important;
    white-space: nowrap !important; 
    margin-left: auto !important; 
}

.thread_content {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.post {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.post_header {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.9em;
    color: #aaa;
}

.post_header .author { color: #ffd700; font-weight: bold; } 

/* =========================================
   4. 模块三：任务 (Quest) - 深度美化
   ========================================= */
quest_container {
    display: block;
    padding: 15px;
}

.quest_category {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}

.quest_category > summary {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.15), transparent);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #fff;
    padding: 6px 10px 6px 30px; 
    border-radius: 4px;
    font-size: 0.95em;
    position: relative; 
}

.quest_item {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid #ffd700;       
    border-left: 4px solid #ffd700;  
    padding: 15px;
    border-radius: 0 8px 8px 0;
    margin-top: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

info {
    color: #00ffff;
    font-weight: bold;
    margin-right: 5px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.quest_list, .achievement_list {
    margin-top: 8px;
    padding-left: 5px;
    color: #ccc;
    line-height: 1.6;
}

.achievement_list li {
    list-style: none;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 10px;
    margin-bottom: 5px;
    border-left: 3px solid #00ff00; 
    border-radius: 0 4px 4px 0;
    font-size: 0.9em;
}

/* --- 基础形态：紧凑型赛博扫描 --- */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    background: transparent !important;
    border: 1px solid rgba(0, 255, 255, 0.5) !important;
    color: #00ffff !important;
    
    font-family: 'Orbitron', monospace !important;
    font-weight: bold !important;
    font-size: 12px !important;
    
    padding: 3px 10px !important; 
    margin: 2px 1px !important;   
    min-width: 0 !important;      
    
    border-radius: 0 !important;  
    position: relative !important;
    overflow: hidden !important;
    transition: color 0.3s, background 0.3s !important;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1) !important;
    line-height: 1.4 !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important; 
    width: 120% !important; 
    height: 100% !important;
    
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(0, 255, 255, 0.5), 
        transparent
    ) !important;
    transform: skewX(-25deg) !important;
    transition: 0s !important;
    z-index: 1 !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: rgba(0, 255, 255, 0.25) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.3) !important;
    border-color: #fff !important;
    z-index: 10 !important; 
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover::before {
    left: 120% !important;
    transition: 0.5s ease-in-out !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary span {
    position: relative !important;
    z-index: 2 !important; 
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary .MuiSvgIcon-root {
    fill: currentColor !important;
    font-size: 15px !important;
    margin-bottom: 1px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 针对所有面板内的标题 (h4) 去除巨大空隙 */
.rili-markdown-renderer h4 {
    margin-top: 10px !important;    
    margin-bottom: 6px !important;
    font-size: 1em !important;
}

/* 针对属性面板 (stats_section) */
.stats_section {
    padding: 8px !important;       
    margin: 8px 0 !important;      
}

/* 针对装备栏和技能栏 */
.rili-markdown-renderer equip_list, 
.rili-markdown-renderer skill_list {
    padding: 8px !important;
    margin: 8px 0 !important;
}

/* =========================================
   全局滚动条美化 (内置透明和去彩虹色补丁)
   ========================================= */
::-webkit-scrollbar {
    width: 4px !important;  
    height: 4px !important; 
    background: transparent !important; 
}

::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important; 
    border-radius: 10px !important; 
    border: none !important;
    transition: background 0.3s !important;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* 针对 Firefox 的兼容写法 */
* {
    scrollbar-width: thin !important;          
    scrollbar-color: rgba(255,255,255,0.15) transparent !important; 
}