/* ============================================ Toast Notifications ============================================ */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column-reverse; gap: 0.5rem; pointer-events: none; } .toast-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; border-radius: 8px; font-size: 0.875rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); pointer-events: auto; max-width: 360px; backdrop-filter: blur(6px); } /* Types */ .toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .toast-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .toast-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } /* Icon */ .toast-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; } .toast-message { line-height: 1.4; } /* Animations */ .toast-enter { animation: toastSlideIn 0.25s ease-out forwards; } .toast-exit { animation: toastSlideOut 0.3s ease-in forwards; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(0.96); } } @media (max-width: 640px) { .toast-container { right: 0.75rem; bottom: 0.75rem; } .toast-item { max-width: calc(100vw - 1.5rem); font-size: 0.8rem; } }