﻿

.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: white;
}

.colored-toast .swal2-close {
    color: white;
}

.colored-toast .swal2-html-container {
    color: white;
}

.ai-insights-toast {
    overflow: hidden;
    position: relative;
}

.ai-insights-toast::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .22) 42%, transparent 60%);
    animation: ai-insights-toast-sheen 1.9s linear infinite;
}

.ai-insights-toast .swal2-title,
.ai-insights-toast .swal2-html-container {
    position: relative;
    z-index: 1;
}

.ai-insights-toast .swal2-icon {
    display: none !important;
}

.ai-insights-toast-title {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
}

.ai-insights-toast-title .fa-sparkles {
    animation: ai-insights-sparkle-pulse 1.15s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8));
}

.ai-insights-toast-body {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

.ai-insights-toast-dots {
    display: inline-flex;
    gap: .16rem;
    margin-left: .1rem;
}

.ai-insights-toast-dots span {
    animation: ai-insights-dot-bounce 1s ease-in-out infinite;
    background: currentColor;
    border-radius: 50%;
    display: block;
    height: .28rem;
    opacity: .85;
    width: .28rem;
}

.ai-insights-toast-dots span:nth-child(2) {
    animation-delay: .15s;
}

.ai-insights-toast-dots span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes ai-insights-sparkle-pulse {
    0%, 100% {
        opacity: .75;
        transform: rotate(-8deg) scale(.92);
    }

    50% {
        opacity: 1;
        transform: rotate(8deg) scale(1.18);
    }
}

@keyframes ai-insights-dot-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-.22rem);
    }
}

@keyframes ai-insights-toast-sheen {
    from {
        transform: translateX(-125%);
    }

    to {
        transform: translateX(125%);
    }
}
