setDraft(e.target.value)}
            onKeyDown={onKey}
            placeholder="Ask Cents to do anything across Hitcents…"
            rows={1} />
        </div>
        <div className="ai-composer-foot">
          <div className="row gap-1">
            <button className="ai-pill-btn"><Icon name="link" size={12} /><span>Attach</span></button>
            <button className="ai-pill-btn"><Icon name="layers" size={12} /><span>Context</span><span className="ai-ctx-count">3</span></button>
            <button className="ai-pill-btn"><Icon name="bolt" size={12} /><span>Tools</span><span className="ai-ctx-count">14</span></button>
          </div>
          <div className="row gap-2">
            <span className="dim mono" style={{ fontSize: 10.5 }}>⌘↵</span>
            <button className={`ai-send ${draft.trim() ? 'on' : ''}`} onClick={onSend} disabled={!draft.trim()}>
              <Icon name="arrow_u" size={14} stroke={2.2} />
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

function AIRedlineArtifact({ a }) {
  return (
    <div className="ai-artifact">
      <div className="ai-artifact-h">
        <Icon name="pencil" size={11} />
        <span style={{ flex: 1 }}>{a.title}</span>
        <span className="ai-artifact-kind">redline</span>
      </div>
      <div className="ai-artifact-body mono">
        {a.lines.map((ln, i) => (
          <div key={i} className={ln.strike ? 'ai-line-out' : (i > 0 && a.lines[i-1].strike ? 'ai-line-in' : '')}>
            {ln.strike ? '− ' : (i > 0 && a.lines[i-1].strike ? '+ ' : '\u00A0\u00A0')}{ln.text}
          </div>
        ))}
      </div>
      <div className="ai-artifact-foot">
        <button className="ai-pill-btn"><Icon name="check" size={11} />Accept</button>
        <button className="ai-pill-btn"><Icon name="pencil" size={11} />Edit</button>
        <button className="ai-pill-btn"><Icon name="send" size={11} />Send to Ramon</button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Inline rich cards Cents can surface in chat
// ─────────────────────────────────────────────────────────────
function AICard({ card, onAction }) {
  if (card.type === 'kpi') return <AICardKpi items={card.items} />;
  if (card.type === 'spark') return <AICardSpark title={card.title} series={card.series} />;
  if (card.type === 'kanban') return <AICardKanban title={card.title} onAction={onAction} />;
  if (card.type === 'record') return <AICardRecord card={card} onAction={onAction} />;
  return null;
}

function AICardKpi({ items }) {
  return (
    <div className="ai-card ai-kpi-card">
      {items.map((k, i) => (
        <div key={i} className="ai-kpi">
          <div className="ai-kpi-label">{k.label}</div>
          <div className="ai-kpi-value">{k.value}</div>
          <div className={`ai-kpi-delta ${k.tone}`}>
            {k.tone === 'up' && <Icon name="arrow_u" size={10} stroke={2.4} />}
            {k.tone === 'down' && <Icon name="arrow_d" size={10} stroke={2.4} />}
            {k.delta}
          </div>
        </div>
      ))}
    </div>
  );
}

const AI_KANBAN_COLS = [
  { id: 'todo', name: 'To do' },
  { id: 'doing', name: 'In progress' },
  { id: 'review', name: 'Review' },
  { id: 'done', name: 'Done' },
];
const AI_KANBAN_SEED = [
  { id: 'k1', title: 'Migration runbook', who: 'e10', col: 'doing' },
  { id: 'k2', title: 'EU DPA pack', who: 'e1', col: 'todo' },
  { id: 'k3', title: 'Press kit', who: 'e19', col: 'review' },
  { id: 'k4', title: 'Webhook v2 canary', who: 'e12', col: 'done' },
  { id: 'k5', title: 'Rollback path', who: 'e10', col: 'todo' },
];

function AICardRecord({ card, onAction }) {
  const kindIcon = { deal: 'card', task: 'check', customer: 'store', contract: 'doc' }[card.kind] || 'layers';
  return (
    <div className="ai-card ai-record-card">
      <div className="ai-record-h">
        <span className="ai-record-glyph"><Icon name={kindIcon} size={13} /></span>
        <span className="ai-record-title">{card.title}</span>
        {card.badge && <span className={`ai-cite ${card.badge.tone}`} style={{ flexShrink: 0 }}>{card.badge.label}</span>}
      </div>
      <div className="ai-record-fields">
        {card.fields.map((f, i) => (
          <div key={i} className="ai-record-field">
            <span className="ai-record-k">{f.k}</span>
            <span className="ai-record-v">{f.v}</span>
          </div>
        ))}
      </div>
      {card.actions && (
        <div className="ai-record-actions">
          {card.actions.map((a, i) => (
            <button key={i} className={`ai-card-btn ${a.primary ? 'primary' : ''}`} onClick={() => onAction && onAction(a)}>
              {a.icon && <Icon name={a.icon} size={11} />}{a.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function AIVoicePane({ currentUser, onSwitch }) {
  const [muted, setMuted] = aiState(false);
  const [shownLines, setShownLines] = aiState(2);

aiEffect(() => {
    if (shownLines >= AI_VOICE_TRANSCRIPT.length) return;
    const t = setTimeout(() => setShownLines(n => Math.min(n + 1, AI_VOICE_TRANSCRIPT.length)), 2800);
    return () => clearTimeout(t);
  }, [shownLines]);

return (
    <div className="ai-voice">
      <div className="ai-voice-status">
        <span className="ai-voice-status-dot" />
        <span>Listening · 02:14</span>
      </div>

{/* Orb */}
      <div className="ai-orb">
        <div className="ai-orb-ring r1" />
        <div className="ai-orb-ring r2" />
        <div className="ai-orb-ring r3" />
        <div className="ai-orb-core">
          <CentsMark size={48} color="#fff" />
        </div>
      </div>

<div className="ai-eq">
        {Array.from({ length: 24 }).map((_, i) => (
          <span key={i} style={{ animationDelay: `${(i % 8) * 0.07}s` }} />
        ))}
      </div>

{/* Live transcript — last few utterances */}
      <div className="ai-voice-tx">
        {AI_VOICE_TRANSCRIPT.slice(0, shownLines).map((l, i, a) => (
          <div key={i} className={`ai-voice-line ${l.who} ${i === a.length - 1 ? 'live' : ''}`}>
            <span className="ai-voice-who">{l.who === 'ai' ? 'Cents' : currentUser?.name?.split(' ')[0] || 'You'}</span>
            <span>{l.text}</span>
          </div>
        ))}
      </div>

{/* Controls */}
      <div className="ai-voice-ctrls">
        <button className={`ai-vbtn ${muted ? 'on' : ''}`} onClick={() => setMuted(m => !m)} title={muted ? 'Unmute' : 'Mute'}>
          <Icon name={muted ? 'lock' : 'phone'} size={18} />
          <span>{muted ? 'Muted' : 'Mute'}</span>
        </button>
        <button className="ai-vbtn end" title="End call">
          <Icon name="x" size={20} stroke={2.4} />
        </button>
        <button className="ai-vbtn" onClick={onSwitch} title="Switch to chat">
          <Icon name="mail" size={18} />
          <span>Chat</span>
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Meeting pane
// ─────────────────────────────────────────────────────────────
function AIMeetingPane({ onSwitch }) {
  const [tab, setTab] = aiState('insights'); // 'insights' | 'transcript'
  return (
    <div className="ai-meeting">
      {/* Recording bar */}
      <div className="ai-meeting-rec">
        <div className="row gap-2" style={{ flex: 1 }}>
          <span className="ai-rec-dot" />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>Atlas v4 architecture sync</div>
            <div className="dim" style={{ fontSize: 11 }}>Recording · 14:22 · 6 participants · auto-transcribing</div>
          </div>
        </div>
        <button className="ai-pill-btn danger"><span style={{ width: 8, height: 8, background: 'currentColor', borderRadius: 1 }} />Stop</button>
      </div>

{/* Tabs inside the pane */}
      <div className="ai-mtg-tabs">
        <button className={`ai-mtg-tab ${tab === 'insights' ? 'active' : ''}`} onClick={() => setTab('insights')}>
          <Icon name="bolt" size={12} />Live insights
          <span className="ai-tab-count">{AI_MEETING_INSIGHTS.actions.length + AI_MEETING_INSIGHTS.decisions.length}</span>
        </button>
        <button className={`ai-mtg-tab ${tab === 'transcript' ? 'active' : ''}`} onClick={() => setTab('transcript')}>
          <Icon name="doc" size={12} />Transcript
        </button>
      </div>

{tab === 'insights' ? (
        <div className="ai-mtg-body">
          <div className="ai-mtg-sec">
            <div className="ai-mtg-sec-h"><Icon name="flag" size={12} />Decisions</div>
            {AI_MEETING_INSIGHTS.decisions.map((d, i) => (
              <div key={i} className="ai-mtg-decision">
                <span className="ai-mtg-bullet" />{d}
              </div>
            ))}
          </div>

<div className="ai-mtg-sec">
            <div className="ai-mtg-sec-h"><Icon name="check" size={12} />Action items <span className="dim">— Cents will create these</span></div>
            {AI_MEETING_INSIGHTS.actions.map((a, i) => {
              const p = getEmployee(a.who);
              return (
                <div key={i} className="ai-mtg-action">
                  <Avatar person={p} size={22} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, color: 'var(--text)' }}>{a.task}</div>
                    <div className="dim" style={{ fontSize: 11 }}>{p?.name} · due {a.due}</div>
                  </div>
                  <button className="ai-mtg-create"><Icon name="plus" size={11} stroke={2.4} />Task</button>
                </div>
              );
            })}
          </div>

<div className="ai-mtg-sec">
            <div className="ai-mtg-sec-h"><Icon name="link" size={12} />Mentioned</div>
            <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
              {AI_MEETING_INSIGHTS.mentions.map((m, i) => (
                <span key={i} className={`ai-cite ${m.tone}`}>
                  <Icon name={m.kind === 'customer' ? 'card' : 'briefcase'} size={10} />
                  {m.label}
                </span>
              ))}
            </div>
          </div>
        </div>
      ) : (
        <div className="ai-mtg-body">
          {AI_MEETING_TRANSCRIPT.map((u, i) => (
            <div key={i} className="ai-mtg-utt">
              <div className="ai-mtg-utt-h">
                <strong>{u.who}</strong>
                <span className="dim">· {u.role}</span>
                <span className="dim mono" style={{ marginLeft: 'auto', fontSize: 10.5 }}>{14*60+i*8 < 600 ? `00:${String(14*60+i*8).padStart(4,'0')}` : `14:${String(i*8).padStart(2,'0')}`}</span>
              </div>
              <div className="ai-mtg-utt-text">{u.text}</div>
            </div>
          ))}
          <div className="ai-mtg-live">
            <span className="ai-mtg-cursor" /> transcribing live…
          </div>
        </div>
      )}

{/* Composer / call-to-action */}
      <div className="ai-meeting-foot">
        <button className="ai-pill-btn"><Icon name="users" size={12} />Invite Cents to next meeting</button>
        <button className="ai-pill-btn primary"><Icon name="check" size={12} stroke={2.4} />Create 4 tasks</button>
      </div>
    </div>
  );
}

window.AIAssistantOverlay = AIAssistantOverlay;
window.CentsMark = CentsMark;