/* =========================================
   TOAST NOTIFICATION COMPONENT
   ========================================= */

/* The Container (Holds multiple toasts if triggered rapidly) */
#toast-container {
    position: fixed;
    bottom: 90px; /* Sits above the Bottom Nav */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000; /* Highest layer */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 90%;
    max-width: 360px;
    pointer-events: none; /* Allows clicking through the empty container */
}

/* The Individual Toast Card */
.toast {
    background: var(--bg-surface);
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    display: flex; 
    align-items: center; 
    gap: 12px;
    font-size: 13px; 
    font-weight: 600;
    width: auto;
    min-width: 200px;
    
    /* Animation Initial State */
    opacity: 0; 
    transform: translateY(20px) scale(0.95);
    animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: auto; /* Allow dismissing on click */
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Toast Variants */
.toast.success { border-left: 4px solid var(--accent); } /* Green */
.toast.error   { border-left: 4px solid var(--danger); } /* Red */
.toast.info    { border-left: 4px solid var(--primary); } /* Blue/Purple */

/* Icons */
.toast-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.success .toast-icon { background: rgba(16, 185, 129, 0.15); color: var(--accent); }
.error .toast-icon   { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.info .toast-icon    { background: rgba(79, 70, 229, 0.15); color: var(--primary); }

/* Exit Animation Class */
.toast.hiding {
    animation: toastOut 0.3s forwards;
}

/* Keyframes */
@keyframes toastIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(-20px) scale(0.9); }
}