{showJump && ( )}

onChange(e.target.value)}
          rows={1}
          disabled={disabled}
          onKeyDown={e => {
            if (e.key === 'Enter' && !e.shiftKey && canSend) {
              e.preventDefault();
              onSend();
            }
          }}
        />
        <div className="ic-actions">
          <button
            className="ic-mic"
            aria-label="Voice"
            disabled={disabled}
            style={{
              border: '1px solid rgba(255,255,255,0.1)',
              background: 'transparent',
              color: 'rgba(255,255,255,0.6)',
            }}
          >
            <MicIcon size={16}/>
          </button>
          <button
            className="ic-send"
            aria-label="Send"
            onClick={onSend}
            disabled={!canSend}
            style={{
              border: '1px solid ' + (canSend ? '#FFD200' : 'rgba(255,255,255,0.1)'),
              background:                canSend ? '#FFD200' : 'transparent',
              color:                     canSend ? '#1E2A33' : 'rgba(255,255,255,0.4)',
              cursor:                    canSend ? 'pointer' : 'not-allowed',
            }}
          >
            <SendArrow size={16}/>
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Right panel: live request preview ---------- */
function RequestPreview({ request, status, lastFilled, burstActive, onShare }) {
  return (
    <div className="ic-preview-scroll">
      <div className={`status-pill ${status}`}>
        <span className="dot"></span>
        <span>{
          status === 'gathering' ? 'Drafting'        :
          status === 'ready'     ? 'Ready to share' :
          status === 'sending'   ? 'Sending\u2026' :
                                   'Shared'
        }</span>
        <SparkBurst active={burstActive}/>
      </div>

<div className="preview-head">
        <div className="preview-title">Update</div>
        <div className="preview-routing">
          <span className="routing-eb">Routing</span>
          <span className="routing-body">Pipeline assigns reviewer by phase</span>
        </div>
      </div>

<Slot label="Work" filled={!!request.asset} flash={lastFilled === 'asset'}>
        {!request.asset && <div className="slot-empty">{'Once you point to it, it lands here.'}</div>}
        {request.asset && (
          <div className="slot-asset">
            <div className="asset-thumb">
              {request.asset.thumb === 'eloise' && <img src="assets/eloise.jpg" alt={request.asset.name}/>}
            </div>
            <div className="asset-meta">
              <span className="asset-airtable">Airtable</span>
              <span className="asset-name">{request.asset.name}</span>
              <span className="asset-when">{request.asset.when}</span>
            </div>
          </div>
        )}
      </Slot>

<Slot label="Phase" filled={!!request.phase} flash={lastFilled === 'phase'}>
        {!request.phase && <div className="slot-empty">{'Pending\u2026'}</div>}
        {request.phase && (
          <div className="slot-phase">
            <span className="phase-chip">{request.phase}</span>
          </div>
        )}
      </Slot>

<Slot label="Note" filled={!!request.context} flash={lastFilled === 'context'}>
        {!request.context && <div className="slot-empty">{'Anything to flag goes here.'}</div>}
        {request.context && (
          <div className="slot-context">
            <p className="context-body">{request.context}</p>
          </div>
        )}
      </Slot>

{request.reasoning && (
        <Slot label="Framing" filled flash={lastFilled === 'context'}>
          <div className="slot-reasoning">
            <p className="reasoning-body">{request.reasoning}</p>
          </div>
        </Slot>
      )}

<button
        className={`preview-send ${status === 'ready' ? 'ready' : ''} ${status === 'sending' ? 'sending' : ''} ${status === 'sent' ? 'sent' : ''}`}
        disabled={status !== 'ready'}
        onClick={onShare}
      >
        {
          status === 'sent'    ? 'Shared \u2713'         :
          status === 'sending' ? 'Sending\u2026'         :
          status === 'ready'   ? 'Share update \u2192'    :
                                  'Share update'
        }
      </button>
    </div>
  );
}

function Slot({ label, filled, flash, children }) {
  return (
    <div className={`preview-slot ${flash ? 'just-filled' : ''}`}>
      <div className="slot-head">
        <span className="slot-eb">{label}</span>
        <span className={`slot-status ${filled ? 'filled' : ''}`}>{filled ? 'Filled' : 'Empty'}</span>
      </div>
      {children}
    </div>
  );
}

/* ---------- Spark burst (celebration when status flips to ready) ---------- */
function SparkBurst({ active }) {
  if (!active) return null;
  // 8 rays around a central dot
  const rays = Array.from({ length: 8 }, (_, i) => i);
  return (
    <span className="spark-burst" aria-hidden="true">
      <span className="spark-core"></span>
      {rays.map(i => (
        <span
          key={i}
          className="spark-ray"
          style={{ transform: `rotate(${i * 45}deg) translateY(-8px)` }}
        />
      ))}
    </span>
  );
}

/* ---------- Main App ---------- */
function ICApp() {
  const [messages, setMessages] = useState([SCRIPT[0].agent[0]]);
  const [stepIdx, setStepIdx] = useState(0);
  const [request, setRequest] = useState({ asset: null, phase: null, context: null, reasoning: null });
  const [draft, setDraft] = useState('');
  const [activeTab, setActiveTab] = useState('chat');
  const [previewBadge, setPreviewBadge] = useState(false);
  const [lastFilled, setLastFilled] = useState(null);
  const [pickerSelected, setPickerSelected] = useState(null);
  const [quickReplySelected, setQuickReplySelected] = useState(null);
  const [status, setStatus] = useState('gathering'); // 'gathering' | 'ready' | 'sending' | 'sent'
  const [burstActive, setBurstActive] = useState(false);
  const [pushbackKind, setPushbackKind] = useState(null);  // current active pushback topic
  const [pushbackStage, setPushbackStage] = useState(0);    // 0 idle | 1 refused | 2 explained | 3 escalated
  const [escalationLogged, setEscalationLogged] = useState(false);
  const chatScrollRef = useRef(null);

// Surface demo pushback prompts in chat once status reaches 'ready' (one-shot)
  const [pushbackPromptShown, setPushbackPromptShown] = useState(false);
  useEffect(() => {
    if (status === 'ready' && !pushbackPromptShown && !escalationLogged) {
      const id = setTimeout(() => {
        setMessages(m => [...m, { type: 'pushback-prompt', options: PUSHBACK_PROMPTS }]);
        setPushbackPromptShown(true);
      }, 900);
      return () => clearTimeout(id);
    }
  }, [status, pushbackPromptShown, escalationLogged]);

const handlePushbackPick = (option) => {
    runPushback(option.kind, option.message);
  };

// Watch for the moment when request becomes complete → flip to 'ready'
  useEffect(() => {
    const complete = !!(request.asset && request.phase && request.context);
    if (complete && status === 'gathering') {
      const id = setTimeout(() => {
        setStatus('ready');
        setBurstActive(true);
        setPreviewBadge(true);
        // Auto-clear the burst after animation
        setTimeout(() => setBurstActive(false), 1400);
      }, 1100);
      return () => clearTimeout(id);
    }
  }, [request, status]);

// Scroll chat to bottom on new messages
  useEffect(() => {
    const el = chatScrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [messages.length]);

// Auto-clear preview badge when user opens preview tab
  useEffect(() => {
    if (activeTab === 'preview') setPreviewBadge(false);
  }, [activeTab]);

// Auto-clear "just filled" highlight after animation
  useEffect(() => {
    if (!lastFilled) return;
    const id = setTimeout(() => setLastFilled(null), 1400);
    return () => clearTimeout(id);
  }, [lastFilled]);

const advance = useCallback((userMsg, answer) => {
    const step = SCRIPT[stepIdx];
    if (!step) return;

// Apply side effect
    let newRequest = request;
    if (step.sideEffect && answer != null) {
      const patch = step.sideEffect(answer);
      newRequest = { ...request, ...patch };
      setRequest(newRequest);
      const filled = Object.keys(patch)[0];
      setLastFilled(filled);
      if (activeTab !== 'preview') setPreviewBadge(true);
    }

// Add user message to chat (unless this is auto-advance with no user input)
    if (userMsg) {
      setMessages(m => [...m, userMsg]);
    }

// Show typing indicator + agent messages in sequence
    const next = SCRIPT[stepIdx + 1];
    if (!next) {
      // End of script — show last agent message if not already added
      return;
    }
    setMessages(m => [...m, { type: 'typing', __typing: true }]);
    setTimeout(() => {
      // Remove typing indicator, add next agent messages
      setMessages(m => {
        const cleaned = m.filter(x => !x.__typing);
        return [...cleaned, ...next.agent];
      });
      setStepIdx(stepIdx + 1);

// If the next step is auto-advance, queue it
      if (next.autoAdvance) {
        setTimeout(() => advanceFromIdx(stepIdx + 1), next.autoAdvance);
      }
    }, 900 + (next.agent.length > 1 ? 600 : 0));
  }, [stepIdx, request, activeTab]);

// Helper for auto-advance steps
  const advanceFromIdx = useCallback((fromIdx) => {
    const step = SCRIPT[fromIdx];
    if (!step) return;
    const next = SCRIPT[fromIdx + 1];
    if (!next) return;
    setMessages(m => [...m, { type: 'typing', __typing: true }]);
    setTimeout(() => {
      setMessages(m => {
        const cleaned = m.filter(x => !x.__typing);
        return [...cleaned, ...next.agent];
      });
      setStepIdx(fromIdx + 1);
    }, 700);
  }, []);

const currentStep = SCRIPT[stepIdx];
  const expects = currentStep?.expects;

// Send-intent detector (after finalize, expects='none' but we want chat send to dispatch)
  const isSendIntent = (text) => {
    const t = text.trim().toLowerCase();
    if (t.length > 40) return false;
    return /\b(send|share|go|dispatch|do it|fire)\b/.test(t);
  };

const handleSend = () => {
    if (!draft.trim()) return;
    const text = draft.trim();

// After 'ready', detect pushback intents (rule-violations) and run the escalation
    if (status === 'ready') {
      const kind = detectPushbackKind(text);
      if (kind) {
        runPushback(kind, text);
        return;
      }
      if (isSendIntent(text)) {
        setDraft('');
        setMessages(m => [...m, { type: 'user', body: text }]);
        setTimeout(handleShareNow, 200);
        return;
      }
    }

if (expects !== 'text') return;
    setDraft('');
    advance({ type: 'user', body: text }, text);
  };

const runPushback = (kind, userText) => {
    setDraft('');
    setMessages(m => [...m, { type: 'user', body: userText }]);

// If this is a different topic from the active one, reset to stage 0
    const activeKind = pushbackKind;
    const nextStage = (activeKind === kind ? pushbackStage : 0) + 1;
    setPushbackKind(kind);
    setPushbackStage(nextStage);

const responses = PUSHBACK_RESPONSES[kind] || [];
    const responseIdx = Math.min(nextStage, responses.length) - 1;
    const agentLine = responses[responseIdx];

// typing → agent line
    setMessages(m => [...m, { type: 'typing', __typing: true }]);
    setTimeout(() => {
      setMessages(m => {
        const cleaned = m.filter(x => !x.__typing);
        return [...cleaned, { type: 'agent', body: agentLine }];
      });

// On strike 3, fire escalation
      if (nextStage >= 3) {
        setTimeout(() => {
          setMessages(m => [
            ...m,
            { type: 'tool', body: "engineering.escalate({ topic: 'rule-conflict', user: 'Maya Chen', conversation: <attached> })", searching: true },
          ]);
          setTimeout(() => {
            setMessages(m => [
              ...m.filter(x => !(x.type === 'tool' && x.body.startsWith('engineering.escalate'))),
              { type: 'tool', body: 'Case #DLY-1147 created. Ack scheduled for <24h.' },
              { type: 'escalation', refId: 'DLY-1147' },
            ]);
            setEscalationLogged(true);
          }, 1400);
        }, 900);
      }
    }, 900);
  };

const handlePick = (option) => {
    if (expects !== 'pick') return;
    setPickerSelected(option.id);
    advance(
      { type: 'user', body: `${option.name}` },
      option,
    );
  };

const handleQuickReply = (option) => {
    if (expects !== 'quick-reply') return;
    setQuickReplySelected(option);
    advance(
      { type: 'user', body: option },
      option,
    );
  };

const inputDisabled = status === 'sending' || status === 'sent' || (expects !== 'text' && status !== 'ready');
  const placeholder =
    status === 'sent'    ? 'Update is out the door.' :
    status === 'sending' ? 'Dispatching\u2026' :
    status === 'ready'   ? 'Type \u201csend it\u201d or hit Share \u2192' :
    currentStep?.hint || (
      expects === 'pick'        ? 'Pick a card above to continue\u2026' :
      expects === 'quick-reply' ? 'Pick an option above\u2026' :
      expects === 'none'        ? 'Anything else?' :
      'Type your message\u2026'
    );

return (
    <div className="ic">
      {/* Top chrome */}
      <div className="ic-head">
        <div className="ic-head-row">
          <a className="ic-home-back" href="IC Home.html" aria-label="Back to home">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M15 18l-6-6 6-6"/>
            </svg>
          </a>
          <div className="ic-mark">
            <img className="mark-logo" src="assets/logo/dailies-icon-flat.svg" alt="Dailies" />
            <span className="role">IC · Maya’s desk</span>
          </div>
          <SurfaceNav current="ic-request" role="ic"/>
          <div className="ic-user">
            <div className="avatar">{ME.initials}</div>
            <div className="name">
              <strong>{ME.name}</strong>
              <span>{ME.role}</span>
            </div>
          </div>
        </div>
        {/* Mobile tabs */}
        <div className="ic-tabs">
          <button
            className={`ic-tab ${activeTab === 'chat' ? 'active' : ''}`}
            onClick={() => setActiveTab('chat')}
          >Chat</button>
          <button
            className={`ic-tab ${activeTab === 'preview' ? 'active' : ''} ${previewBadge ? 'has-update' : ''}`}
            onClick={() => setActiveTab('preview')}
          >
            <span>Preview</span>
            <span className="tab-badge" aria-hidden="true"></span>
          </button>
        </div>
      </div>

{/* Body */}
      <div className="ic-body">
        <div className="ic-chat" hidden={activeTab !== 'chat'}>
          <div className="ic-chat-scroll" ref={chatScrollRef}>
            {messages.map((m, i) => (
              <ChatMessage
                key={i}
                msg={m}
                onPick={handlePick}
                onQuickReply={handleQuickReply}
                onPushbackPick={handlePushbackPick}
                selected={
                  m.type === 'picker'         ? pickerSelected :
                  m.type === 'quick-replies'  ? quickReplySelected :
                  null
                }
              />
            ))}
          </div>
          <InputBar
            value={draft}
            onChange={setDraft}
            onSend={handleSend}
            disabled={inputDisabled}
            placeholder={placeholder}
            status={status}
            onJumpToPreview={() => setActiveTab('preview')}
          />
        </div>

<div className="ic-preview" hidden={activeTab !== 'preview'}>
          <RequestPreview
            request={request}
            status={status}
            lastFilled={lastFilled}
            burstActive={burstActive}
            onShare={handleShareNow}
          />
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ICApp/>);