function InsightItem({ title, desc, action, onClick, tone }) {
  const c = tone === 'neg' ? 'var(--neg)' : 'var(--pos)';
  return (
    <div style={{ padding: 16, borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <span style={{ width: 8, height: 8, borderRadius: 99, background: c, flexShrink: 0 }} />
        <h4 style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink)', margin: 0 }}>{title}</h4>
      </div>
      <p style={{ fontSize: 12.5, color: 'var(--ink-2)', margin: '0 0 12px', lineHeight: 1.55 }}>{desc}</p>
      <button onClick={onClick} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: 'var(--accent-strong)', fontWeight: 700, fontSize: 12.5, display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: 'var(--font-sans)' }}>
        {action} <IconArrowRight size={14} />
      </button>
    </div>
  );
}

/* ============================ RESEARCH ============================ */