/* ============================================
   🌊 LIQUID GLASS EFFECT - Message Bubbles
   ============================================
   Este arquivo contém as animações e estilos base
   para o efeito "Liquid Glass" nas mensagens.
   Cada tema define suas próprias cores.
============================================ */

/* Liquid Glass Base Effect */
.message-bubble.liquid-glass {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Liquid Animation Overlay */
.message-bubble.liquid-glass::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 70%
    );
    animation: liquidFlow 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer Effect */
.message-bubble.liquid-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Liquid Flow Animation */
@keyframes liquidFlow {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-5%, 5%) rotate(2deg);
    }
    50% {
        transform: translate(5%, -5%) rotate(-2deg);
    }
    75% {
        transform: translate(-3%, -3%) rotate(1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Bubble Distortion Effect */
@keyframes bubbleDistort {
    0%, 100% {
        border-radius: 20px 24px 18px 22px;
    }
    25% {
        border-radius: 24px 18px 22px 20px;
    }
    50% {
        border-radius: 18px 22px 20px 24px;
    }
    75% {
        border-radius: 22px 20px 24px 18px;
    }
}

/* Glow Pulse Animation */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 
            0 8px 32px rgba(var(--liquid-color-rgb), 0.3),
            inset 0 0 30px rgba(255, 255, 255, 0.05);
    }
    50% {
        box-shadow: 
            0 8px 40px rgba(var(--liquid-color-rgb), 0.5),
            inset 0 0 40px rgba(255, 255, 255, 0.1);
    }
}

/* Message Content Ensure Above Effects */
.message-bubble.liquid-glass .message-content,
.message-bubble.liquid-glass > * {
    position: relative;
    z-index: 10;
}

/* Hover Effect - Enhanced Glass */
.message-bubble.liquid-glass:hover {
    transform: translateY(-2px) scale(1.01);
    animation: bubbleDistort 3s ease-in-out infinite;
}

/* ============================================
   📱 MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) {
    .message-bubble.liquid-glass {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    
    .message-bubble.liquid-glass::before {
        animation-duration: 8s;
    }
    
    .message-bubble.liquid-glass:hover {
        transform: none;
        animation: none;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .message-bubble.liquid-glass::before,
    .message-bubble.liquid-glass:hover {
        animation: none;
    }
}