/*
 * GX TOAST
 * Dark-only / Flamingo Pink glow / Stackable notifications
 */

.gx-toast-container {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 999;
}

/* Base toast */
.gx-toast {
    min-width: 260px;
    max-width: 360px;

    background: var(--color-bg-card);
    color: var(--color-text-primary);
    padding: 1rem 1.2rem;
    border-radius: var(--radius);

    border-left: 4px solid var(--color-border-soft);
    box-shadow: var(--shadow-elevated);

    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;

    opacity: 0;
    transform: translateY(12px);
    animation: toast-in 0.35s var(--transition) forwards;
}

/* Toast types */
.gx-toast.success { border-color: #4FEA9C; }
.gx-toast.info    { border-color: var(--color-info); }
.gx-toast.warn    { border-color: var(--color-warning); }
.gx-toast.error   { border-color: #FF5C5C; }

.gx-toast strong {
    font-weight: 600;
    color: var(--color-brand);
}

.gx-toast-close {
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.gx-toast-close:hover {
    color: var(--color-brand);
}

/* OUT animation (called when dismissed) */
.gx-toast.hide {
    animation: toast-out 0.3s var(--transition) forwards;
}

/* Animations */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .gx-toast-container {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
    }
    .gx-toast {
        max-width: 100%;
    }
}