/* ============================================================
   Modern Urban Laser Y2K Chatbox (现代镭射Y2K风格)
   ============================================================ */

/* 1. 统一聊天气泡基础质感 (深调全息毛玻璃) */
.group.is-user > div:first-child, 
.group.is-assistant > div:first-child {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 18px !important;
    /* 消除原生边框 */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* 2. User (用户) 气泡 - 镭射粉紫主调 */
.group.is-user > div:first-child {
    background-color: rgba(20, 10, 30, 0.85) !important;
    /* 内部流光渐变 */
    background-image: linear-gradient(135deg, rgba(255, 0, 234, 0.15) 0%, rgba(162, 0, 255, 0.05) 100%) !important;
    /* 外围全息撞色光晕 */
    box-shadow: 
        -4px -4px 15px rgba(255, 0, 234, 0.2), 
        4px 4px 15px rgba(0, 208, 255, 0.15),
        inset 0 0 20px rgba(255, 0, 234, 0.05) !important;
}

/* 3. Assistant (AI) 气泡 - 镭射青蓝主调 */
.group.is-assistant > div:first-child {
    background-color: rgba(10, 20, 30, 0.85) !important;
    /* 内部流光渐变 */
    background-image: linear-gradient(135deg, rgba(0, 208, 255, 0.15) 0%, rgba(255, 0, 234, 0.05) 100%) !important;
    /* 外围全息撞色光晕 */
    box-shadow: 
        -4px -4px 15px rgba(0, 208, 255, 0.2), 
        4px 4px 15px rgba(255, 0, 234, 0.15),
        inset 0 0 20px rgba(0, 208, 255, 0.05) !important;
}

/* 4. 强制文本可读性覆盖 (核心原则：暗底必须配极白字) */
.rili-markdown-renderer, 
.rili-markdown-renderer * {
    color: #ffffff !important;
    /* 轻微的光晕增加质感，但不影响锐度 */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3) !important; 
}

/* 5. 底部附加信息 (Token/模型/状态点) */
.text-xs.font-mono.text-muted-foreground {
    color: rgba(255, 255, 255, 0.6) !important;
    text-shadow: none !important;
}

/* 6. 操作按钮区重构 */
/* 强制始终显示按钮，避免Y2K风格下的视觉割裂 */
.group .md\:opacity-0 { 
    opacity: 1 !important; 
}
.bg-muted.rounded.flex {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 208, 255, 0.1) !important;
}
.bg-muted.rounded.flex button svg.lucide {
    stroke: rgba(255, 255, 255, 0.85) !important;
}
.bg-muted.rounded.flex button:hover svg.lucide {
    stroke: #00d0ff !important; /* 悬浮时呈现青色镭射反光 */
    filter: drop-shadow(0 0 3px #00d0ff) !important;
}

/* 7. 加载动画重构：Y2K镭射能量环 */
/* 隐藏原生三个跳动点 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span { 
    display: none !important; 
}
/* 注入 SMIL SVG 动效 */
.flex.gap-2.w-full.h-full.items-center.justify-center::before {
    content: "";
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    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' stroke='url(%23g)' stroke-width='10' fill='none' stroke-dasharray='120 60' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ff00ea'/%3E%3Cstop offset='100%25' stop-color='%2300d0ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: drop-shadow(0 0 5px rgba(255, 0, 234, 0.5)) !important;
}