/* ==========================================
   海冰蓝主题聊天框 (Ocean & Ice Blue)
   ========================================== */

/* --- 1. 用户输入气泡：深海到晴空的渐变蓝 --- */
.group.is-user > div:first-child {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important; /* 优雅的蓝渐变 */
    border: none !important; 
    border-radius: 18px 18px 4px 18px !important; /* 动感非对称圆角 */
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25) !important; /* 蓝色环境光发光阴影 */
}

/* 强制用户文本为纯白，确保在深蓝背景下的绝对可读性 */
.group.is-user .rili-markdown-renderer,
.group.is-user .rili-markdown-renderer * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* --- 2. AI输出气泡：干净的冰雪白 --- */
.group.is-assistant > div:first-child {
    background: #ffffff !important; /* 纯净白背景 */
    border: 1px solid #e0e7ff !important; /* 极浅的蓝灰边框 */
    border-radius: 18px 18px 18px 4px !important; 
    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.08) !important; /* 轻盈的悬浮阴影 */
}

/* 强制AI文本为深石板灰，避免纯黑的死板，同时确保白底阅读清晰 */
.group.is-assistant .rili-markdown-renderer,
.group.is-assistant .rili-markdown-renderer * {
    color: #1e293b !important;
    text-shadow: none !important;
}

/* --- 3. 底部元数据与操作按钮：融入蓝白体系 --- */
/* Token消耗等信息改为浅蓝灰色 */
.group.is-assistant .text-xs.font-mono.text-muted-foreground {
    color: #94a3b8 !important;
}

/* 按钮区底色微调为极淡的蓝色，消除生硬感 */
.group.is-assistant .bg-muted.rounded.flex {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* 按钮图标默认灰蓝，Hover悬停时点亮为亮蓝色 */
.group.is-assistant .bg-muted.rounded.flex button svg.lucide {
    stroke: #64748b !important;
    transition: stroke 0.25s ease !important;
}
.group.is-assistant .bg-muted.rounded.flex button:hover svg.lucide {
    stroke: #2563eb !important; 
}

/* --- 4. 蓝白专属加载动画 (Loading) --- */
/* 强制隐藏原生黑白跳动点 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
    display: none !important;
}

/* 植入内联SVG：定制的三连蓝色呼吸灯动画 */
.flex.gap-2.w-full.h-full.items-center.justify-center::before {
    content: "" !important;
    display: block !important;
    width: 36px !important;
    height: 10px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 10"><circle cx="5" cy="5" r="4" fill="%233b82f6"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.2s" begin="0s" repeatCount="indefinite"/></circle><circle cx="18" cy="5" r="4" fill="%233b82f6"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.2s" begin="0.2s" repeatCount="indefinite"/></circle><circle cx="31" cy="5" r="4" fill="%233b82f6"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.2s" begin="0.4s" repeatCount="indefinite"/></circle></svg>') !important;
}