/* ═══ B平台加载动画适配（自动注入）═══ */
.flex.items-center.justify-center.size-6 { opacity: 1 !important; }
.flex.items-center.justify-center.size-6 > .flex.gap-2 { display: none !important; }
.is-assistant.w-fit { width: 100% !important; }
.is-assistant > .border.border-muted:has(.flex.items-center.justify-center.size-6) {
  width: 100% !important; background: transparent !important;
  border: none !important; padding: 0 !important;
}
.is-assistant .space-y-3:has(.flex.items-center.justify-center.size-6) {
  display: flex; justify-content: center; width: 100%;
}

/* ═══ B平台表格修正（自动注入）═══ */
.rili-markdown-renderer table { display:table!important; table-layout:auto!important; width:100%!important; border-collapse:collapse!important; }
.rili-markdown-renderer table caption { display:table-caption!important; caption-side:top!important; text-align:center!important; padding:8px!important; }
.rili-markdown-renderer thead { display:table-header-group!important; }
.rili-markdown-renderer tbody { display:table-row-group!important; }
.rili-markdown-renderer tr { display:table-row!important; }
.rili-markdown-renderer th, .rili-markdown-renderer td { display:table-cell!important; }

/* ═══ B平台按钮组保护（自动注入 — 防止按钮消失）═══
   原理：B平台消息操作按钮结构为：
   .flex.items-center.gap-1.ml-auto (hover显隐包装)
     └── .bg-muted.rounded.flex.p-0.5 (按钮组容器)
           └── button.rounded-full.size-7 (单个按钮)
   以下规则使用高specificity + !important确保按钮
   不被任何转换后/透传的CSS规则意外隐藏
   ═══════════════════════════════════════════════ */
/* 按钮组容器保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5,
.is-user .bg-muted.rounded.flex.p-0\.5,
.is-assistant .bg-muted.rounded.flex.p-0\.5 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}
/* 单个按钮保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5 > button,
.is-user .bg-muted.rounded.flex.p-0\.5 > button,
.is-assistant .bg-muted.rounded.flex.p-0\.5 > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  clip: auto !important;
  clip-path: none !important;
}
/* hover显隐包装层保护 — 仅保留B平台原生的opacity过渡 */
.flex.items-center.gap-1.ml-auto.md\:opacity-0.group-hover\:opacity-100 {
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
/* 操作行保护 */
.flex.w-full.items-center.justify-between.gap-2.px-2 {
  display: flex !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* ═══ B平台顶部栏适配说明（自动注入）═══
   A: div.sticky > div.flex.justify-between
      ├── 左侧空区
      ├── #ai-model-selector (居中)
      └── 右侧工具(设置按钮等)
   B: <header.flex.justify-between>
      ├── #nav-left (侧边栏开关)
      ├── #nav-middle (可能为空)
      └── #nav-right (通知/主题/语言)
   B平台模型按钮不在header内，选择器:
   button:has(> .flex-1.truncate.text-left)
   ═══════════════════════════════════════ */
header.flex.justify-between { position: relative; overflow: visible; }

/* =========================================
   【街霸6 (SF6) 街头格斗风】全局UI美化
   核心配色：极夜黑(#111) + 涂鸦洋红(#e4005e) + 荧光黄(#ccff00) + 街头青蓝(#00e5ff)
   ========================================= */

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

/* 2. 外层主聊天框：硬核深灰底 + 街霸特征斜纹背景 + 硬阴影边界 */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted {
    background-color: #111115 !important;
    /* 注入SF6标志性的倾斜警戒纹理，降低透明度作为暗纹 */
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(228, 0, 94, 0.05),
        rgba(228, 0, 94, 0.05) 5px,
        transparent 5px,
        transparent 10px
    ) !important;
    padding: 22px !important; 
    border: 2px solid #e4005e !important; /* 涂鸦洋红边框 */
    border-radius: 4px !important; /* SF6偏向硬朗的微圆角或直角 */
    /* 街头风硬阴影 (Hard Shadow) 替代柔和发光 */
    box-shadow: 6px 6px 0px rgba(228, 0, 94, 0.8) !important;
    isolation: isolate !important;
}

/* 3. 内层输出框 (字符显示区)：极暗紫灰 + 荧光黄高亮边框 */
.rili-markdown-renderer {
    background: #1a1a24 !important; /* 极暗的紫灰色底，保护视力 */
    border: 2px solid #ccff00 !important; /* SF6 荧光黄边框 */
    border-radius: 4px !important;
    padding: 20px !important;
    /* 内侧微弱青色发光，外侧硬阴影 */
    box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.1), 4px 4px 0px rgba(204, 255, 0, 0.6) !important;
    
    color: #f8f9fa !important; /* 高清晰度亮白灰正文 */
    font-weight: bold !important;
    /* 偏向硬朗、竞技感的字体族 */
    font-family: 'Impact', 'Arial Black', 'Microsoft YaHei', sans-serif !important;
    letter-spacing: 0.5px !important;
    line-height: 1.7 !important;
    z-index: 1 !important;
}

/* 4. 底部附加元素联动适配 (按钮/Token) */
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7,
.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground,
/* [Token消耗hover逻辑转换未启用]
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7,
.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground,
.text-orange-500 {
    color: #00e5ff !important; /* 采用街头青蓝色，清晰且不刺眼 */
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important; /* 强制大写增加竞技感 */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
*/

/* 底部元素悬停：瞬间切换为洋红底+白字，极强反馈感 */
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7{
    color: #ffffff !important;
    background-color: #e4005e !important;
    border-radius: 2px !important;
    transform: skewX(-10deg) !important; /* 街霸风倾斜互动 */
}

/* 调整底部元素容器间距 */
.is-assistant .flex.items-center.justify-between {
    margin-top: 18px !important;
    padding: 0 8px !important;
}

/* 5. 覆盖默认加载动画，替换为SF6彩色方块跳动 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}
.flex.items-center.justify-center.size-6 {
    position: relative !important;
}
.flex.items-center.justify-center.size-6::before {
    content: "" !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    /* 洋红、黄、青三色方块交替闪烁 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='10' width='5' height='5' fill='%23e4005e'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='0.6s' begin='0s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='10' y='10' width='5' height='5' fill='%23ccff00'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='0.6s' begin='0.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='18' y='10' width='5' height='5' fill='%2300e5ff'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='0.6s' begin='0.4s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* =========================================
   系统状态面板 & 副本信息 (代码块) 美化
   解决“深蓝色字看不清”的核心区域
   ========================================= */

/* 1. 面板外层容器：深邃黑底 + 左侧粗犷高亮边带 */
.rili-markdown-renderer pre {
    background-color: #0a0a0a !important; 
    border: none !important;
    border-left: 6px solid #ccff00 !important; /* 左侧荧光黄粗边带 */
    border-radius: 2px !important;
    padding: 16px !important;
    margin: 15px 0 !important;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8) !important;
    overflow-x: auto !important;
    /* 点状半调网点背景 (Halftone)，极具街头艺术感 */
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
    background-size: 8px 8px !important;
}

/* 2. 面板内部文本：柔和的冰蓝色/天蓝色，清晰护眼 */
.rili-markdown-renderer pre code {
    /* 【重点】这里用 #60a5fa (柔和天蓝) 替代刺眼的深蓝或亮蓝 */
    color: #60a5fa !important; 
    font-weight: 900 !important;
    font-family: 'Consolas', 'Courier New', monospace !important; 
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: 0px !important;
    text-shadow: 1px 1px 0px #000 !important; /* 加一层纯黑文字投影，让字在任何背景上都锐利无比 */
    background: transparent !important;
    display: block !important;
}

/* 3. 正文零散行内代码 (如 `【角色名】`) */
.rili-markdown-renderer code:not(pre code) {
    background-color: #e4005e !important; /* 洋红底色 */
    color: #ffffff !important; /* 纯白字，撞色极其醒目 */
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    border: 1px solid #000 !important;
    font-family: 'Consolas', 'Impact', monospace !important;
    transform: skewX(-5deg) !important; /* 微倾斜 */
    display: inline-block !important;
}

/* 4. 面板滚动条美化 */
.rili-markdown-renderer pre::-webkit-scrollbar { height: 8px !important; }
.rili-markdown-renderer pre::-webkit-scrollbar-track { background: #0a0a0a !important; }
.rili-markdown-renderer pre::-webkit-scrollbar-thumb { background: #ccff00 !important; border-radius: 0px !important; }
.rili-markdown-renderer pre::-webkit-scrollbar-thumb:hover { background: #e4005e !important; }

/* =========================================
   全局界面：顶部栏、输入框、评论区
   ========================================= */

/* --- 1. 顶部栏：涂鸦风与高对比 --- */
header.flex.justify-between {
    background: #111115 !important;
    border-bottom: 3px solid #e4005e !important; /* 粗犷的洋红底线 */
    box-shadow: 0 4px 15px rgba(228, 0, 94, 0.3) !important;
}

#nav-middle .group.flex.items-center {
    background: #000 !important;
    border: 2px solid #00e5ff !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
}
#nav-middle .group.flex.items-center:hover {
    background: #00e5ff !important;
}
#nav-middle button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left {
    color: #00e5ff !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}
#nav-middle .group.flex.items-center:hover button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left {
    color: #000 !important; /* 悬停时字变黑，底变青 */
}
header.flex.justify-between svg { color: #ccff00 !important; }

/* --- 2. 底部输入区：街机摇杆面板感 --- */
#ai-chat-input {
    background: #0a0a0a !important;
    color: #ccff00 !important; /* 输入的字是亮黄色 */
    border: 2px solid #5b21b6 !important; /* 深紫边框 */
    border-radius: 4px !important;
    font-family: 'Microsoft YaHei', sans-serif !important;
    font-weight: bold !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8) !important;
}
#ai-chat-input::placeholder { color: rgba(204, 255, 0, 0.4) !important; text-transform: uppercase !important; }
#ai-chat-input:focus {
    border-color: #e4005e !important;
    box-shadow: 4px 4px 0px rgba(228, 0, 94, 0.5) !important; /* 聚焦时弹出硬阴影 */
    outline: none !important;
}

/* --- 3. 评论区：地下对战大厅 --- */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #111115 !important;
    border-top: 2px solid #00e5ff !important;
}
/* 评论区文字清晰化 */
div.text-lg.font-bold, div.break-all, div.text-sm.text-grey-600 span.font-bold, textarea.rc-textarea {
    color: #f8f9fa !important;
}
div.text-xs.text-grey-600, p.MuiTypography-body1.text-grey-600, div.bg-gray-100.text-gray-500 {
    color: #a1a1aa !important; background-color: transparent !important;
}
/* 发送按钮：斗气迸发样式 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: #ccff00 !important;
    border-radius: 4px !important; /* 方形按钮 */
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0px #e4005e !important; /* 洋红硬阴影 */
    transition: transform 0.1s, box-shadow 0.1s !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    transform: translate(2px, 2px) !important; /* 点击按压感 */
    box-shadow: 1px 1px 0px #e4005e !important;
}
div[data-state="closed"] svg[data-icon="Send03"] { color: #000000 !important; font-weight: bold !important; }

/* =========================================
   状态栏/详情折叠面板 (details & summary) 
   街霸6 战斗UI风格
   ========================================= */

.rili-markdown-renderer details {
    background: #1a1a24 !important;
    border: 2px solid #5b21b6 !important; /* 深紫边框 */
    border-radius: 2px !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 4px 4px 0px rgba(91, 33, 182, 0.6) !important;
    transition: all 0.2s ease-in-out !important;
}

.rili-markdown-renderer summary {
    padding: 12px 20px !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #000 !important;
    background: #00e5ff !important; /* 默认青蓝底，黑字，高对比 */
    text-transform: uppercase !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none !important;
    border-bottom: 2px solid #000 !important;
}

.rili-markdown-renderer summary:hover {
    background: #ccff00 !important; /* 悬停变荧光黄 */
    color: #000 !important;
}

/* 自定义折叠指示器：街机箭头 */
.rili-markdown-renderer summary::before {
    content: '▶ P1 INFO'; /* 增加格斗游戏风前缀 */
    display: inline-block !important;
    margin-right: 12px !important;
    color: #000 !important;
    font-weight: 900 !important;
}

.rili-markdown-renderer details[open] > summary {
    background: #e4005e !important; /* 展开后变成洋红底 */
    color: #fff !important;
}
.rili-markdown-renderer details[open] > summary::before {
    content: '▼ P1 INFO' !important;
    color: #fff !important;
}

/* 面板内容区域 */
.rili-markdown-renderer details > div.rili-markdown-renderer,
.rili-markdown-renderer details > *:not(summary) {
    padding: 20px !important;
    background-color: #0a0a0a !important; /* 内容区纯黑，保证文字清晰 */
}

/* 内容区强调文字 */
.rili-markdown-renderer details strong {
    color: #e4005e !important; /* 洋红强调 */
    text-transform: uppercase !important;
}

.rili-markdown-renderer details hr {
    border-color: #5b21b6 !important;
    border-style: dashed !important;
}