/* ═══ 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;
}

/* ============================================================
   九霄仙尘录 · 聊天框美化方案
   主题：夜幕星河 · 高可读性版
   特性：深色渐变背景 + 高对比文本 + 微光动效 + 现代圆角阴影
   ============================================================ */

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

/* ---------- 2. 统一聊天框基础样式 (输入与输出) ---------- */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted {
    background: linear-gradient(145deg, #1a2332 0%, #0f172a 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    padding: 16px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* 悬停时的微光反馈 */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(56, 189, 248, 0.1) !important;
}

/* ---------- 3. 主要文本内容 ---------- */
.rili-markdown-renderer {
    color: #E2E8F0 !important;
    background: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    position: relative;
    z-index: 1;
    letter-spacing: 0.02em !important;
}

/* 代码块样式，确保在深色背景下同样可读 */
.rili-markdown-renderer pre,
.rili-markdown-renderer code {
    color: #f8fafc !important;
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
}

/* 链接颜色 */
.rili-markdown-renderer a {
    color: #38bdf8 !important;
}

/* 引用块 */
.rili-markdown-renderer blockquote {
    border-left: 3px solid #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
    color: #cbd5e1 !important;
}

/* ---------- 4. 底部附加元素（深色背景下的高对比处理） ---------- */
/* 底部操作按钮 */
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7{
    color: #94a3b8 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7{
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* 模型名称文本 */
.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
}

/* Token消耗文本 */
/* [Token消耗hover逻辑转换未启用]
.text-orange-500 {
    color: #fbbf24 !important;
    font-weight: 600 !important;
}
*/

/* ---------- 5. 自定义加载动画（SVG星轨旋转） ---------- */
/* 隐藏默认加载元素 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 父级容器：用于承载自定义动画 */
.flex.items-center.justify-center.size-6 {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 通过伪元素实现 SVG 星轨旋转动画 (SMIL, 不受CSS动画禁用影响) */
.flex.items-center.justify-center.size-6::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%2338bdf8' stroke-width='6' stroke-linecap='round' stroke-dasharray='200' stroke-dashoffset='0'%3E%3Canimate attributeName='stroke-dashoffset' from='200' to='0' dur='1.5s' repeatCount='indefinite'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 第二层微光星尘 (使用 ::after) */
.flex.items-center.justify-center.size-6::after {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-dasharray='10 20'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='4s' repeatCount='indefinite'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.8;
    pointer-events: none;
}

/* ---------- 6. 背景星尘动效（仅作用于统一聊天框，提升氛围） ---------- */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted {
    isolation: isolate;
}

/* 星尘粒子 (::before) */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(56, 189, 248, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px),
        radial-gradient(circle at 15% 60%, rgba(148, 163, 184, 0.15) 1px, transparent 1.5px);
    background-size: 200px 200px, 300px 300px, 250px 250px, 280px 280px, 180px 180px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

/* 微光漂浮 (::after) */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 40%);
    z-index: 0;
    pointer-events: none;
}

/* 确保 markdown-body 内容在动效之上 */
.rili-markdown-renderer {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* ---------- 7. 移动端与无障碍适配 ---------- */
@media (max-width: 480px) {
    .is-user > .border.border-muted,
.is-assistant > .border.border-muted {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .rili-markdown-renderer {
        font-size: 14px !important;
    }
}

/* 针对偏好减少动态效果的用户：降低动效频率，但不完全关闭 */
@media (prefers-reduced-motion: reduce) {
    .is-user > .border.border-muted,
.is-assistant > .border.border-muted::before {
        opacity: 0.3;
    }
    .is-user > .border.border-muted,
.is-assistant > .border.border-muted::after {
        opacity: 0.3;
    }
}
/* ============================================================
   状态栏美化 · 夜幕星河主题
   容器：<ai> 包裹整个状态栏
   与聊天框 CSS 兼容，不冲突
   ============================================================ */

/* 状态栏容器 */
ai {
    display: block;
    padding: 8px 0;
}

/* 每个状态栏卡片 */
ai details {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    margin: 8px 0;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

ai details:hover {
    border-color: rgba(56, 189, 248, 0.4);
}

ai details[open] {
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.08);
}

/* summary标题 */
ai summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    color: #E2E8F0;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.08) 0%, transparent 60%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    transition: background 0.25s ease, color 0.25s ease;
}

ai summary::-webkit-details-marker { display: none; }
ai summary::marker { content: ""; }

/* 自定义箭头 */
ai summary::before {
    content: "▸";
    font-size: 12px;
    color: #38bdf8;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

ai details[open] > summary::before {
    transform: rotate(90deg);
    color: #fbbf24;
}

ai summary:hover {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.05) 60%);
    color: #f8fafc;
}

/* 内容区 */
ai details > *:not(summary) {
    padding: 12px 14px;
    color: #CBD5E1;
    font-size: 14px;
    line-height: 1.7;
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 内容中的段落 */
ai details p {
    margin: 6px 0;
}

/* 加粗高亮 */
ai details strong {
    color: #38bdf8;
    font-weight: 600;
}

/* 列表 */
ai details ul {
    margin: 6px 0;
    padding-left: 18px;
    list-style: none;
}

ai details ul li {
    position: relative;
    margin: 3px 0;
    padding-left: 14px;
}

ai details ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #fbbf24;
    font-size: 12px;
}

/* 水平分割线 */
ai details hr {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    margin: 10px 0;
    padding: 0;
}

/* 表格 */
ai details table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
    color: #CBD5E1;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

ai details th {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    font-weight: 600;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

ai details td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

ai details tr:last-child td {
    border-bottom: none;
}

/* 引用块 */
ai details blockquote {
    margin: 10px 0;
    padding: 8px 14px;
    border-left: 3px solid #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    color: #94a3b8;
    border-radius: 0 8px 8px 0;
}

/* 代码 */
ai details code {
    font-family: monospace;
    background: #0f172a;
    color: #f8fafc;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* 移动端适配 */
@media (max-width: 480px) {
    ai summary {
        padding: 8px 12px;
        font-size: 13px;
    }
    ai details > *:not(summary) {
        padding: 10px 12px;
        font-size: 13px;
    }
    ai details table {
        font-size: 12px;
    }
}