.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background: rgba(99, 102, 241, 0.95); backdrop-filter: blur(8px); color: white; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; transform: translateX(120%); opacity: 0; animation: slideIn 0.3s ease forwards, fadeOut 0.3s ease 2.7s forwards; border: 1px solid rgba(255, 255, 255, 0.1); width: auto; max-width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toast.success { background: rgba(34, 197, 94, 0.95); } .toast.error { background: rgba(239, 68, 68, 0.95); } .toast svg { font-size: 1.2rem; } @keyframes slideIn { to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { to { opacity: 0; transform: translateX(120%); } } /* Light theme adjustments */ .light .toast { background: rgba(99, 102, 241, 0.9); color: white; }