/* ── Toast notifications ────────────────────────────────────────────── */ .toast-container { position: fixed; top: calc(var(--header-h) + var(--space-2)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2rem); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; } .toast { padding: var(--space-2) var(--space-4); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: var(--r-md); font-size: var(--text-xs); font-weight: 500; color: var(--text-dim); box-shadow: var(--shadow-pop); white-space: pre-line; text-align: center; animation: toast-in 0.2s ease forwards; pointer-events: none; } .toast.is-out { animation: toast-out 0.2s ease forwards; } @keyframes toast-in { from { opacity:0; transform:translateY(-0.5rem); } to { opacity:1; transform:translateY(0); } } @keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-0.25rem); } } @media (prefers-reduced-motion: reduce) { .toast, .toast.is-out { animation: none; } .toast.is-out { opacity: 0; } }