/* assets/css/KlokInNotifier.css */

.klokin-notifier-container {
    z-index: 9999;
    pointer-events: none;
    /* Centering logic for the container itself */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column-reverse; /* Newest notifications appear at the bottom */
    align-items: center;
}

/* Base styling for the glassmorphic toast */
.klokin-toast {
    pointer-events: auto;
    /* Start State: Below the screen, scaled down, and invisible */
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    /* Cubic-bezier provides that "pop" or "spring" feel */
    transition: 
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
        opacity 0.4s ease-out;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Entry: Slide Up & Fade In */
.klokin-toast.is-active {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Exit: Slide Down & Fade Out */
.klokin-toast.is-leaving {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: all 0.3s ease-in;
}

/* High-speed progress bar */
.klokin-toast-progress {
    transition: width linear;
    width: 100%;
}

/* Glow effect to make it look "Smart" */
.klokin-toast-glow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 40px;
    filter: blur(25px);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}