/* =========================================
   🌸 "樱花雨" 主题聊天框美化 (Sakura Rain)
   ========================================= */

/* 1. 全局聊天框背景与边框：柔和的樱花粉毛玻璃质感 */
.group.is-user > div:first-child,
.group.is-assistant > div:first-child {
    background: linear-gradient(135deg, rgba(255, 240, 243, 0.95), rgba(255, 228, 236, 0.9)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 183, 197, 0.6) !important;
    box-shadow: 0 4px 20px rgba(255, 175, 193, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    border-radius: 18px !important;
}

/* 区分用户输入框：稍微深一点的落樱色调 */
.group.is-user > div:first-child {
    background: linear-gradient(135deg, rgba(255, 226, 234, 0.95), rgba(255, 209, 220, 0.9)) !important;
}

/* 2. 绝对可读性保障：深褐酒红色文本，完美适配浅粉色背景 */
.rili-markdown-renderer, 
.rili-markdown-renderer * {
    color: #4a2c34 !important; 
    text-shadow: none !important; /* 禁止模糊阴影影响阅读 */
}

/* 3. AI 附加信息与 Token 消耗文字：降低透明度的深红色 */
.text-xs.font-mono.text-muted-foreground {
    color: rgba(74, 44, 52, 0.6) !important;
}

/* 4. 底部操作按钮区美化 (悬浮栏) */
.bg-muted.rounded.flex {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 183, 197, 0.4) !important;
    box-shadow: 0 2px 8px rgba(255, 183, 197, 0.1) !important;
}

/* 按钮图标颜色重置为主题匹配色 */
.bg-muted.rounded.flex button svg.lucide {
    stroke: #8b5a65 !important;
    transition: stroke 0.2s ease !important;
}
.bg-muted.rounded.flex button:hover svg.lucide {
    stroke: #e0476a !important; /* 悬停亮粉色 */
}

/* 5. 华丽的动态加载图案 (Loading Animation) */
/* 隐藏平台原生的无聊跳动点 */
.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: 36px !important;
    /* 通过 Data URI 嵌入高清 SVG 动效：外层顺时针旋转，内层逆时针旋转 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='6s' repeatCount='indefinite'/%3E%3Cpath d='M50,10 C65,25 70,45 50,50 C30,45 35,25 50,10 Z' fill='%23ffc2d1' opacity='0.8'/%3E%3Cpath d='M50,10 C65,25 70,45 50,50 C30,45 35,25 50,10 Z' fill='%23ffc2d1' opacity='0.8' transform='rotate(72 50 50)'/%3E%3Cpath d='M50,10 C65,25 70,45 50,50 C30,45 35,25 50,10 Z' fill='%23ffc2d1' opacity='0.8' transform='rotate(144 50 50)'/%3E%3Cpath d='M50,10 C65,25 70,45 50,50 C30,45 35,25 50,10 Z' fill='%23ffc2d1' opacity='0.8' transform='rotate(216 50 50)'/%3E%3Cpath d='M50,10 C65,25 70,45 50,50 C30,45 35,25 50,10 Z' fill='%23ffc2d1' opacity='0.8' transform='rotate(288 50 50)'/%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 50 50' to='0 50 50' dur='4s' repeatCount='indefinite'/%3E%3Cpath d='M50,20 C58,30 62,45 50,50 C38,45 42,30 50,20 Z' fill='%23ff8fab' opacity='0.9' transform='rotate(36 50 50)'/%3E%3Cpath d='M50,20 C58,30 62,45 50,50 C38,45 42,30 50,20 Z' fill='%23ff8fab' opacity='0.9' transform='rotate(108 50 50)'/%3E%3Cpath d='M50,20 C58,30 62,45 50,50 C38,45 42,30 50,20 Z' fill='%23ff8fab' opacity='0.9' transform='rotate(180 50 50)'/%3E%3Cpath d='M50,20 C58,30 62,45 50,50 C38,45 42,30 50,20 Z' fill='%23ff8fab' opacity='0.9' transform='rotate(252 50 50)'/%3E%3Cpath d='M50,20 C58,30 62,45 50,50 C38,45 42,30 50,20 Z' fill='%23ff8fab' opacity='0.9' transform='rotate(324 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='6' fill='%23fb6f92'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: drop-shadow(0 0 4px rgba(255, 143, 171, 0.5)) !important;
}