/* ── Win95-style toast notifications ────────────────────────────────────── Global, mounted on so it floats above windows and the mobile shell. Fire with window.toast(message, type) — type: 'ok' | 'error' | 'info'. */ #toast-container { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 2147483000; /* above winbox + top bar */ display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; /* never block clicks underneath */ max-width: 92vw; } .toast { display: flex; align-items: center; gap: 9px; font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.6; color: #000; background: #c0c0c0; padding: 11px 14px; max-width: 92vw; border-top: 2px solid #dfdfdf; border-left: 2px solid #dfdfdf; border-right: 2px solid #404040; border-bottom: 2px solid #404040; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); -webkit-font-smoothing: none; font-smooth: never; /* pixel-y enter/leave */ opacity: 0; transform: translateY(10px); transition: opacity 0.15s steps(3), transform 0.15s steps(3); } .toast.toast-show { opacity: 1; transform: translateY(0); } /* status square (matches the [ OK ] / [ ERRO ] pixel vibe) */ .toast::before { content: ''; width: 10px; height: 10px; flex-shrink: 0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #404040; border-bottom: 1px solid #404040; background: #808080; } .toast-ok::before { background: #00a800; } /* green */ .toast-error::before { background: #d00000; } /* red */ .toast-info::before { background: #000080; } /* blue */