/* Modern Message System Styles */

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideOutToTop {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

@keyframes progressBar {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Message container animations */
.message-container {
    animation: slideInFromTop 0.3s ease-out;
}

.message-container.removing {
    animation: slideOutToTop 0.2s ease-in;
}

/* Progress bar animation */
.progress-bar {
    animation: progressBar 5s linear;
}

/* Icon animations */
.message-icon {
    animation: bounce 0.6s ease-out;
}

/* Hover effects */
.message-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Success message specific */
.message-container .bg-gradient-to-r.from-green-500 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Error message specific */
.message-container .bg-gradient-to-r.from-red-500 {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Warning message specific */
.message-container .bg-gradient-to-r.from-yellow-500 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Info message specific */
.message-container .bg-gradient-to-r.from-blue-500 {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Glass morphism effect */
.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .message-container {
        margin: 0 1rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .message-container {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
}

/* Accessibility improvements */
.message-container:focus-within {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
.message-container * {
    transition: all 0.2s ease-in-out;
}

/* Close button hover effect */
.message-container button:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 2px;
}

/* Message stacking effect */
.message-container:nth-child(1) { z-index: 10; }
.message-container:nth-child(2) { z-index: 9; }
.message-container:nth-child(3) { z-index: 8; }
.message-container:nth-child(4) { z-index: 7; }
.message-container:nth-child(5) { z-index: 6; }