/** @jsx React.createElement */
/* Toast — tiny floating confirmation in the top right. */

function Toast({ children, onDismiss }) {
  React.useEffect(() => {
    if (!onDismiss) return;
    const id = setTimeout(onDismiss, 2400);
    return () => clearTimeout(id);
  }, [onDismiss]);
  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed', top: 70, right: 24, zIndex: 200,
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 14px',
      background: '#fff',
      border: '1px solid var(--ab-border)',
      borderRadius: 10,
      boxShadow: '0 10px 28px -8px rgba(15,23,42,.18)',
      animation: 'toastIn 220ms cubic-bezier(.22,1,.36,1)',
    }}>
      <span style={{
        width: 22, height: 22, borderRadius: '50%',
        background: '#dcfce7',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
      </span>
      <span style={{ fontSize: 13, color: 'var(--ab-slate-800)' }}>{children}</span>
      <style>{`@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </div>,
    document.body
  );
}

Object.assign(window, { Toast });