/**
 * AI 浮动对话按钮组件
 * 统一在所有需要的页面使用
 */
(function() {
    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
        .ai-float-btn-container {
            position: fixed;
            right: 16px;
            bottom: 96px;
            z-index: 999;
        }
        
        .ai-float-btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease;
            position: relative;
            overflow: hidden;
            /* 渐变动画背景 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);
            background-size: 400% 400%;
            animation: gradientShift 8s ease infinite;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
        }
        
        .ai-float-btn:active {
            transform: scale(0.95);
        }
        
        .ai-float-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
            border-radius: 50%;
            pointer-events: none;
        }
        
        /* 背景渐变动画 */
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            25% { background-position: 50% 100%; }
            50% { background-position: 100% 50%; }
            75% { background-position: 50% 0%; }
            100% { background-position: 0% 50%; }
        }
        
        .ai-float-btn svg {
            position: relative;
            z-index: 1;
        }
    `;
    document.head.appendChild(style);

    // 创建按钮DOM
    function createAIFloatBtn() {
        const container = document.createElement('div');
        container.className = 'ai-float-btn-container';
        
        const btn = document.createElement('div');
        btn.className = 'ai-float-btn';
        
        // 可爱风格的AI图标 - 小机器人助手
        btn.innerHTML = `
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 机器人头部 -->
                <rect x="5" y="7" width="14" height="12" rx="4" fill="white"/>
                
                <!-- 天线 -->
                <path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/>
                <circle cx="12" cy="3" r="1.5" fill="white"/>
                
                <!-- 眼睛 - 可爱的大眼睛 -->
                <circle cx="9" cy="11.5" r="2" fill="#667eea"/>
                <circle cx="15" cy="11.5" r="2" fill="#667eea"/>
                
                <!-- 眼睛高光 -->
                <circle cx="9.5" cy="11" r="0.7" fill="white"/>
                <circle cx="15.5" cy="11" r="0.7" fill="white"/>
                
                <!-- 微笑嘴巴 -->
                <path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/>
                
                <!-- 腮红 -->
                <circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
                <circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
                
                <!-- 耳朵/装饰 -->
                <rect x="3" y="10" width="2" height="4" rx="1" fill="white"/>
                <rect x="19" y="10" width="2" height="4" rx="1" fill="white"/>
            </svg>
        `;
        
        // 点击跳转到聊天页面
        btn.addEventListener('click', () => {
            // 可以根据需要修改跳转逻辑
            window.location.href = 'chat.html';
        });
        
        container.appendChild(btn);
        document.body.appendChild(container);
    }

    // 页面加载完成后创建按钮
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', createAIFloatBtn);
    } else {
        createAIFloatBtn();
    }
})();