/* Water Theme for wAIve.online */
/* This theme provides additional water-themed styling for the chat interface */

:root {
    /* Water theme color palette */
    --water-primary: #00b4d8;
    --water-secondary: #48cae4;
    --water-light: #caf0f8;
    --water-medium: #48cae4;
    --water-dark: #023e8a;
    --water-deep: #03045e;
    
    /* Enhanced gradients */
    --water-gradient-light: linear-gradient(135deg, #caf0f8 0%, #90e0ef 100%);
    --water-gradient-medium: linear-gradient(135deg, #48cae4 0%, #00b4d8 100%);
    --water-gradient-dark: linear-gradient(135deg, #0077b6 0%, #023e8a 100%);
    
    /* Ripple and wave effects */
    --ripple-duration: 2s;
    --wave-duration: 3s;
}

/* Enhanced animations for water theme */
@keyframes waterRipple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes waterFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gentleWave {
    0%, 100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(10px);
    }
}

/* Water-themed button enhancements */
.send-button::after {
    background: var(--water-gradient-light);
    animation: waterRipple var(--ripple-duration) ease-out;
}

.action-button:hover::after {
    animation: waterRipple 1.5s ease-out infinite;
}

/* Enhanced water background effects */
.bg-animation::before {
    background: var(--water-gradient-medium);
    animation: float 20s infinite ease-in-out, waterFlow 8s ease-in-out infinite;
    background-size: 400% 400%;
}

.bg-animation::after {
    background: var(--water-gradient-dark);
    animation: float 20s infinite ease-in-out reverse, waterFlow 12s ease-in-out infinite;
    background-size: 400% 400%;
    animation-delay: 10s, 6s;
}

/* Water-themed message bubbles */
.message.ai .message-content {
    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(72, 202, 228, 0.1) 100%);
    border: 1px solid rgba(72, 202, 228, 0.2);
    position: relative;
    overflow: hidden;
}

.message.ai .message-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(72, 202, 228, 0.1), transparent);
    animation: gentleWave 4s ease-in-out infinite;
}

/* Enhanced avatar styling for water theme */
.message-avatar,
.chat-avatar {
    position: relative;
    overflow: hidden;
}

.message-avatar::after,
.chat-avatar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    animation: waterFlow 3s ease-in-out infinite;
}

/* Water-themed input focus effects */
.input-wrapper:focus-within {
    border-color: var(--water-primary);
    box-shadow: 0 0 20px rgba(72, 202, 228, 0.3);
    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(72, 202, 228, 0.05) 100%);
}

/* Enhanced typing indicator with water theme */
.typing-indicator .dot {
    background: var(--water-primary);
    box-shadow: 0 0 10px rgba(72, 202, 228, 0.5);
}

/* Water-themed scrollbar enhancements */
.chat-messages::-webkit-scrollbar-thumb:hover,
.items-list::-webkit-scrollbar-thumb:hover {
    background: var(--water-gradient-medium);
    box-shadow: 0 0 5px rgba(72, 202, 228, 0.3);
}

/* Enhanced expert items with water theme */
.expert-item:hover {
    background: var(--water-gradient-light);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(72, 202, 228, 0.2);
}

.expert-item.active {
    background: var(--water-gradient-medium);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Water-themed progress bars */
.progress-fill {
    background: var(--water-gradient-medium);
    position: relative;
    overflow: hidden;
}

.progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: waterFlow 2s ease-in-out infinite;
}

/* Enhanced glass effects for water theme */
.info-card,
.item-card {
    backdrop-filter: blur(20px);
    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(72, 202, 228, 0.05) 100%);
    border: 1px solid rgba(72, 202, 228, 0.1);
}

.info-card:hover,
.item-card:hover {
    border-color: rgba(72, 202, 228, 0.3);
    box-shadow: 0 8px 25px rgba(72, 202, 228, 0.1);
}

/* Water-themed context menu */
.context-menu {
    background: linear-gradient(135deg, var(--panel-bg) 0%, rgba(72, 202, 228, 0.05) 100%);
    border: 1px solid rgba(72, 202, 228, 0.2);
    backdrop-filter: blur(20px);
}

.context-menu-item:hover {
    background: var(--water-gradient-light);
    color: var(--water-dark);
}

/* Research progress styling with water theme */
.research-step {
    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(72, 202, 228, 0.08) 100%);
    border: 1px solid rgba(72, 202, 228, 0.15);
    position: relative;
    overflow: hidden;
}

.research-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(72, 202, 228, 0.1), transparent);
    animation: gentleWave 6s ease-in-out infinite;
}

/* Enhanced empty states with water theme */
.empty-state,
.empty-chat-state {
    color: var(--water-medium);
}

.empty-icon,
.empty-chat-icon {
    text-shadow: 0 0 10px rgba(72, 202, 228, 0.3);
    animation: gentleWave 4s ease-in-out infinite;
}

/* Water-themed modal enhancements */
.login-container {
    background: linear-gradient(135deg, var(--panel-bg) 0%, rgba(72, 202, 228, 0.05) 100%);
    border: 1px solid rgba(72, 202, 228, 0.2);
    backdrop-filter: blur(25px);
}

.auth-button:hover {
    background: var(--water-gradient-medium);
    box-shadow: 0 5px 20px rgba(72, 202, 228, 0.4);
    transform: translateY(-2px);
}

/* Responsive enhancements for water theme */
@media (max-width: 768px) {
    .bg-animation::before,
    .bg-animation::after {
        opacity: 0.2;
        filter: blur(60px);
    }
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    .bg-animation::before,
    .bg-animation::after,
    .message.ai .message-content::before,
    .research-step::before {
        animation: none;
    }
    
    .typing-indicator .dot {
        animation: none;
        opacity: 0.8;
    }
}

/* Print styles for water theme */
@media print {
    .bg-animation,
    .bg-animation::before,
    .bg-animation::after {
        display: none;
    }
    
    .message.ai .message-content,
    .info-card,
    .item-card {
        background: white !important;
        border: 1px solid #ccc !important;
    }
}