.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast-item { display: flex; align-items: center; gap: 0.5rem; background: #dc3545; color: white; padding: 0.75rem 1rem; border-radius: 0.375rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: toastSlideIn 0.3s ease; pointer-events: auto; max-width: 400px; font-size: 0.875rem; } .toast-dismiss { animation: toastSlideOut 0.3s ease forwards; } .toast-icon { font-size: 1.1rem; flex-shrink: 0; } .toast-message { flex: 1; min-width: 0; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }