/**
 * 量子球聊天集成动画样式
 * 为3D量子球系统提供聊天状态相关的视觉反馈
 */

/* 基础量子球动画 */
@keyframes quantumPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.6; 
    }
    50% { 
        transform: scale(1.2); 
        opacity: 0.9; 
    }
}

@keyframes quantumGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(108, 19, 255, 0.3); 
    }
    50% { 
        box-shadow: 0 0 40px rgba(108, 19, 255, 0.8); 
    }
}

@keyframes quantumShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes quantumWave {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    25% { transform: rotateY(90deg) rotateX(45deg); }
    50% { transform: rotateY(180deg) rotateX(0deg); }
    75% { transform: rotateY(270deg) rotateX(-45deg); }
    100% { transform: rotateY(360deg) rotateX(0deg); }
}

@keyframes quantumOrbit {
    0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

/* 聊天状态相关动画 */
.quantum-animation-userMessageSent {
    animation: quantumPulse 1s ease-in-out;
    background: linear-gradient(45deg, #0ea5e9, #3b82f6) !important;
    opacity: 0.4 !important;
}

.quantum-animation-aiThinking {
    animation: quantumWave 2s ease-in-out infinite;
    background: linear-gradient(45deg, #6b46c1, #8b5cf6) !important;
    opacity: 0.5 !important;
}

.quantum-animation-aiResponseReceived {
    animation: quantumGlow 1.5s ease-in-out;
    background: linear-gradient(45deg, #10b981, #34d399) !important;
    opacity: 0.6 !important;
}

.quantum-animation-chatError {
    animation: quantumShake 0.8s ease-in-out;
    background: linear-gradient(45deg, #ef4444, #f97316) !important;
    opacity: 0.7 !important;
}

/* 背景容器动画状态 */
#backgroundContainer.quantum-active {
    transition: all 0.5s ease-in-out;
}

#backgroundContainer.quantum-user-message {
    filter: hue-rotate(210deg) brightness(1.2);
}

#backgroundContainer.quantum-ai-thinking {
    filter: hue-rotate(270deg) saturate(1.5);
    animation: quantumWave 2s ease-in-out infinite;
}

#backgroundContainer.quantum-ai-response {
    filter: hue-rotate(120deg) brightness(1.1);
}

#backgroundContainer.quantum-error {
    filter: hue-rotate(0deg) contrast(1.3) brightness(0.8);
    animation: quantumShake 0.5s ease-in-out;
}

/* 粒子系统增强 */
.particle-container {
    transition: all 0.3s ease-in-out;
}

.particle-container.quantum-enhanced {
    opacity: 0.8;
    transform: scale(1.05);
}

.particle-container.quantum-user-message .particle {
    background: radial-gradient(circle, #0ea5e9, #3b82f6) !important;
    animation: quantumOrbit 3s linear infinite;
}

.particle-container.quantum-ai-thinking .particle {
    background: radial-gradient(circle, #6b46c1, #8b5cf6) !important;
    animation: quantumPulse 1s ease-in-out infinite;
}

.particle-container.quantum-ai-response .particle {
    background: radial-gradient(circle, #10b981, #34d399) !important;
    animation: quantumGlow 2s ease-in-out infinite;
}

.particle-container.quantum-error .particle {
    background: radial-gradient(circle, #ef4444, #f97316) !important;
    animation: quantumShake 0.5s ease-in-out;
}

/* 聊天界面增强 */
.chat-container.quantum-enhanced {
    position: relative;
    overflow: hidden;
}

.chat-container.quantum-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(108, 19, 255, 0.1), transparent);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

.chat-container.quantum-active::before {
    opacity: 1;
}

/* 消息气泡量子效果 */
.message.quantum-enhanced {
    position: relative;
    overflow: hidden;
}

.message.quantum-enhanced::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(108, 19, 255, 0.2), transparent);
    animation: quantumSweep 2s ease-in-out infinite;
}

@keyframes quantumSweep {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* 输入框量子增强 */
.input-quantum-enhanced {
    position: relative;
    box-shadow: 0 0 15px rgba(108, 19, 255, 0.3);
    border: 1px solid rgba(108, 19, 255, 0.5);
    transition: all 0.3s ease-in-out;
}

.input-quantum-enhanced:focus {
    box-shadow: 0 0 25px rgba(108, 19, 255, 0.6);
    border-color: rgba(108, 19, 255, 0.8);
}

/* 按钮量子增强 */
.btn-quantum-enhanced {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #6b46c1, #8b5cf6);
    border: none;
    color: white;
    transition: all 0.3s ease-in-out;
}

.btn-quantum-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease-in-out;
}

.btn-quantum-enhanced:hover::before {
    left: 100%;
}

.btn-quantum-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 19, 255, 0.4);
}

/* 加载动画量子增强 */
.loading-quantum {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(108, 19, 255, 0.3);
    border-radius: 50%;
    border-top-color: #6b46c1;
    animation: quantumSpin 1s ease-in-out infinite;
}

@keyframes quantumSpin {
    to { transform: rotate(360deg); }
}

/* 状态指示器 */
.quantum-status-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

.quantum-status-indicator.disconnected {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

.quantum-status-indicator.thinking {
    background: #6b46c1;
    box-shadow: 0 0 10px rgba(107, 70, 193, 0.6);
    animation: quantumPulse 1s ease-in-out infinite;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .quantum-animation-userMessageSent,
    .quantum-animation-aiThinking,
    .quantum-animation-aiResponseReceived,
    .quantum-animation-chatError {
        opacity: 0.3 !important;
    }
    
    .quantum-status-indicator {
        top: 10px;
        right: 10px;
        width: 8px;
        height: 8px;
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .quantum-animation-userMessageSent {
        background: linear-gradient(45deg, #0369a1, #1d4ed8) !important;
    }
    
    .quantum-animation-aiThinking {
        background: linear-gradient(45deg, #581c87, #7c3aed) !important;
    }
    
    .quantum-animation-aiResponseReceived {
        background: linear-gradient(45deg, #047857, #059669) !important;
    }
    
    .quantum-animation-chatError {
        background: linear-gradient(45deg, #dc2626, #ea580c) !important;
    }
}

/* 无障碍功能 */
@media (prefers-reduced-motion: reduce) {
    .quantum-animation-userMessageSent,
    .quantum-animation-aiThinking,
    .quantum-animation-aiResponseReceived,
    .quantum-animation-chatError,
    .loading-quantum {
        animation: none !important;
    }
    
    #backgroundContainer.quantum-ai-thinking,
    #backgroundContainer.quantum-error {
        animation: none !important;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .quantum-animation-userMessageSent {
        background: #0000ff !important;
        opacity: 0.8 !important;
    }
    
    .quantum-animation-aiThinking {
        background: #800080 !important;
        opacity: 0.8 !important;
    }
    
    .quantum-animation-aiResponseReceived {
        background: #008000 !important;
        opacity: 0.8 !important;
    }
    
    .quantum-animation-chatError {
        background: #ff0000 !important;
        opacity: 0.8 !important;
    }
}