/* =============================================
 * 堕落圣坛 (Fallen Sanctum) 风格聊天界面CSS
 * 主题：暗欲紫、堕落粉、褪色金
 * 包含：气泡美化、按钮样式、输入框、加载动画、内容排版
 * =============================================
 */

/* 
 * ---------------------------------
 *   模块一：对话气泡美化 (AI侧) - 柔和薰衣草风格
 * ---------------------------------
 */

/* AI对话气泡容器样式 */
.group .bg-gray-100\/90 {
    background: linear-gradient(135deg, #f8f7ff, #f3f0ff) !important; /* 极浅的薰衣草渐变背景 */
    border: 1px solid #e6e0f8 !important;     /* 柔和的紫色边框 */
    border-radius: 16px !important;           
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.08), inset 0 0 15px rgba(230, 224, 248, 0.5) !important; /* 紫罗兰色柔光阴影 */
    color: #2c3e50 !important;                /* 深邃的蓝灰色文字，确保可读性 */
    padding: 16px !important;                 
    text-shadow: none !important;             
}

/* 
 * ---------------------------------
 *   模块二：平台按钮美化 - 暗欲紫风格
 * ---------------------------------
 */

/* 操作按钮基础样式 */
.flex.items-center.gap-2.pb-2 > button {
    background: linear-gradient(145deg, #8A2BE2, #9370DB) !important; /* 从蓝紫到中紫的渐变 */
    color: #ffffff !important;                
    border: 1px solid #7b20c7 !important;     /* 深紫色边框 */
    border-radius: 10px !important;            
    box-shadow: 0 4px 10px rgba(138, 43, 226, 0.3) !important; 
    font-weight: bold !important;             
    text-transform: none !important;          
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
    padding: 8px 18px !important;             
    letter-spacing: 0.5px;
}

/* 按钮悬停状态样式 */
.flex.items-center.gap-2.pb-2 > button:hover {
    background: linear-gradient(145deg, #9370DB, #8A2BE2) !important; /* 悬停时反转渐变 */
    color: #ffffff !important;                
    border-color: #6a1b9a !important;         
    box-shadow: 0 6px 15px rgba(147, 112, 219, 0.4) !important; 
    transform: translateY(-3px) scale(1.05) !important;   
}

/* 
 * ---------------------------------
 *   模块四：输入栏美化 - 堕落粉风格
 * ---------------------------------
 */

/* 聊天输入框基础样式 */
#ai-chat-input {
    background-color: #ffffff !important;     
    border: 2px solid #f0e8ff !important;     /* 极浅紫色边框 */
    border-radius: 12px !important;            
    color: #333 !important;                
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.04) !important; 
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
}

/* 输入框底部容器样式 */
#ai-chat-bottom-input { 
    background: transparent !important;       
    backdrop-filter: none !important;         
}

/* 输入框占位符文字样式 */
#ai-chat-input::placeholder {
    color: #b3a5d1 !important;                
    opacity: 0.9 !important;                  
}

/* 输入框聚焦状态样式 */
#ai-chat-input:focus {
    outline: none !important;                 
    border-color: #9370DB !important;         /* 聚焦时变为中紫色 */
    box-shadow: 0 0 10px rgba(147, 112, 219, 0.25), inset 0 2px 5px rgba(0, 0, 0, 0.04) !important; 
    background-color: #fcfaff !important;     /* 极浅紫色聚焦背景 */
}

/* 
 * ---------------------------------
 *   模块五：内容排版与代码块美化
 * ---------------------------------
 */

/* 通用变量定义 */
:root {
    --main-font: "Microsoft YaHei", "Arial", sans-serif; 
    --base-size: 16px;                        
    --theme-purple: #9370DB;                  /* 中等紫色 */
    --theme-purple-dark: #8A2BE2;              /* 蓝紫色 */
    --theme-pink: #FF69B4;                    /* 堕落粉 */
    --theme-purple-pale: #E6E6FA;              /* 薰衣草淡紫 */
    --theme-gold-accent: #FFD700;              /* 荣耀金 */
}

/* 段落样式 */
p {
    font-family: var(--main-font);            
    line-height: 1.7;                        
    letter-spacing: 0.5px;                    
    color: #4a4a4a;                           
}

/* 一级标题样式 (用于卡片内) */
h1 {
    font-family: var(--main-font);            
    font-size: 1.2em;                          
    border-bottom: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, var(--theme-purple), var(--theme-pink));
    margin-top: 0;                            
    padding-bottom: 0.5em;                       
    color: var(--theme-purple-dark);
    font-weight: 600;
}

/* 详情框(details)样式 - 整体容器 */
details {
    background: rgba(245, 240, 255, 0.6);      /* 极淡的紫色背景 */
    padding: 1em;                           
    margin: 1.2em 0;                            
    border-left: 5px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, var(--theme-purple), var(--theme-pink));
    border-radius: 12px;                       
    transition: all 0.3s ease;         
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* 详情框标题(summary)样式 */
summary {
    font-family: var(--main-font);            
    color: var(--theme-purple-dark);                
    font-size: 1em;                         
    font-weight: bold;
    cursor: pointer;                          
    padding: 0.5em 0;                         
    transition: color 0.3s ease;              
    list-style-type: '👑 '; /* 使用皇冠作为标记 */
}

/* 打开的详情框标题样式 */
details[open] summary {
    margin-bottom: 1em;                       
    border-bottom: 1px solid var(--theme-purple-pale); 
    color: var(--theme-pink);
}

/* 详情框悬停效果 */
details:hover {
    background: rgba(240, 235, 255, 0.9);
    box-shadow: 0 4px 15px rgba(147, 112, 219, 0.1);
    transform: translateY(-2px);
}

/* 分隔线样式 */
.separator, hr {
    height: 1px;                              
    background: linear-gradient(to right, transparent, var(--theme-purple-pale), var(--theme-pink), var(--theme-purple-pale), transparent); 
    border: none;                             
    margin: 20px 0;                    
    opacity: 0.6;                             
    border-radius: 1px;                       
}

/* 
 * ---------------------------------
 *   模块六：堕落之心 加载动画
 * ---------------------------------
 */

/* 1. 隐藏原始加载元素 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 2. 加载容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 120px !important;
    height: 100px !important;
    margin: 30px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 3. 背景光晕 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    width: 70px !important;
    height: 70px !important;
    background: radial-gradient(circle, rgba(147, 112, 219, 0.5) 0%, rgba(255, 105, 180, 0.2) 70%, transparent 100%) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
    animation: heartPulse 2.5s infinite alternate ease-in-out !important;
}

/* 4. 核心元素 (::after)：带有歪斜皇冠的紫色心脏 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%238A2BE2" d="M50 90 C20 70 10 50 10 35 A20 20 0 0 1 50 35 A20 20 0 0 1 90 35 C90 50 80 70 50 90 Z"><animate attributeName="fill" values="%238A2BE2;%23BA55D3;%238A2BE2" dur="2s" repeatCount="indefinite" /></path><g transform="rotate(-15 50 25)"><polygon fill="%23FFD700" points="35,25 40,15 50,20 60,15 65,25" /></g><animateTransform attributeName="transform" type="scale" values="0.95;1.05;0.95" dur="2s" repeatCount="indefinite" additive="sum" /></svg>') !important;
    position: absolute !important;
    width: 90px !important;
    height: 90px !important;
    z-index: 2 !important;
    filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.4)) !important;
    animation: gentleFloat 4s infinite ease-in-out !important;
}

/* 5. 动画关键帧定义 */
@keyframes heartPulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0.9; }
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

/* 
 * ---------------------------------
 *   模块七：响应式与交互优化
 * ---------------------------------
 */
@media screen and (max-width: 768px) {
    details {
        padding: 0.5em;                       
        margin: 0.8em 0;                      
    }
    summary {
        font-size: 15px;                      
    }
    .group .bg-gray-100\/90 {
        padding: 12px !important;
    }
}

summary {
    -webkit-tap-highlight-color: transparent; 
    touch-action: manipulation;               
}

details {
    transform: translateZ(0);                 
    -webkit-transform: translateZ(0);         
    backface-visibility: hidden;              
}