Toast Notification

function toast(message, type = 'info', duration = 3000) {
    const colors = { info: '#2563eb', success: '#16a34a', error: '#dc2626', warning: '#d97706' };

    let container = document.getElementById('toast-container');
    if (!container) {
      container = document.createElement('div');
      container.id = 'toast-container';
      container.style.cssText = 'position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:0.5rem;z-index:9999';
      document.body.appendChild(container);
    }

    const el = document.createElement('div');
    el.textContent = message;
    el.style.cssText = 'padding:.75rem 1.25rem;border-radius:6px;font-size:.9rem;color:#fff;opacity:0;'
      + 'transform:translateY(8px);transition:opacity .2s,transform .2s;background:' + (colors[type] ?? colors.info);

    container.appendChild(el);
    requestAnimationFrame(() => {
      el.style.opacity = '1';
      el.style.transform = 'translateY(0)';
    });

    setTimeout(() => {
      el.style.opacity = '0';
      el.style.transform = 'translateY(8px)';
      el.addEventListener('transitionend', () => el.remove(), { once: true });
    }, duration);
  }