/*
              _                             _               _     __   __
         /\  | |                           | |             (_)    \ \ / /
        /  \ | |_ _ __ ___   ___  ___ _ __ | |__   ___ _ __ _  ___ \ V / 
       / /\ \| __| '_ ` _ \ / _ \/ __| '_ \| '_ \ / _ \ '__| |/ __| > <  
      / ____ \ |_| | | | | | (_) \__ \ |_) | | | |  __/ |  | | (__ / . \ 
     /_/    \_\__|_| |_| |_|\___/|___/ .__/|_| |_|\___|_|  |_|\___/_/ \_\
                                     | |                            
                                     |_|                                                                                                                

    Created with ♥ by the AtmosphericX Team (KiyoWx, StarflightWx, Everwatch1, & CJ Ziegler)
    Discord: https://atmosphericx-discord.scriptkitty.cafe
    Ko-Fi: https://ko-fi.com/k3yomi
    Documentation: http://localhost/documentation | https://atmosphericx.scriptkitty.cafe/documentation

*/

.notifications {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    z-index: 9999;
    pointer-events: none;
} .notification {
    position: relative;
    max-width: 300px;
    width: auto;
    padding: 16px 20px;
    border-radius: 8px;
    background-color: var(--clr-surface-a10);
    color: var(--clr-light-a0);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: auto;
    font-family: var(--global-font-family);
} .notification-title {
    font-size: 1.2em;
    margin-bottom: 6px;
} .notification-message {
    font-size: 0.95em;
}

.notification-progress.progress-animate { animation: anim_shrink linear forwards; }
.notification.enter { animation: anim_slide_in 0.4s forwards ease-out; }
.notification.fade-out { animation: anim_fade_out 0s forwards ease-in; }

.notification.info { background-color: var(--clr-info-a0); }
.notification.success { background-color: var(--clr-success-a0); }
.notification.error { background-color: var(--clr-danger-a0); }

@media (max-width: 480px) {
    .notifications {
        zoom: 0.8;
    }
}