/* ============================================================
   Brite Bird Coach — Lead deep-dive sheet
   ============================================================ */

const InfoStat = ({ label, value, accent }) => (
  <div>
    <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--bb-ink-60)', marginBottom: 3 }}>{label}</div>
    <div style={{ fontSize: 16, fontWeight: 700, color: accent || 'var(--bb-plum)', letterSpacing: '-0.01em' }}>{value}</div>
  </div>
);

const SiroLink = ({ siro }) => (
  <a
    href={siro.url || '#'}
    target="_blank"
    rel="noopener noreferrer"
    style={{
      margin: '8px 22px 0',
      padding: '10px 14px',
      background: 'white',
      border: '1px solid var(--bb-ink-10)',
      borderRadius: 999,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontSize: 13, fontWeight: 700, color: 'var(--bb-plum)',
      textDecoration: 'none',
      width: 'fit-content',
    }}
  >
    <Icon name="mic" size={14} color="var(--bb-orange)" stroke={2.4} />
    Siro recording · {siro.duration}
    <Icon name="external-link" size={12} color="var(--bb-ink-60)" stroke={2.4} />
  </a>
);

const SiroSummaryCard = ({ lead, expandedObjections, toggleObjection }) => {
  const fields = [
    { label: 'Timeline',    value: lead.timeline },
    { label: 'Decide by',   value: lead.decideBy },
    { label: 'Install by',  value: lead.installBy },
    { label: 'Channel',     value: lead.channel },
  ];

  const sectionDivider = {
    paddingTop: 12, marginTop: 12, borderTop: '1px solid var(--bb-ink-10)',
  };
  const sectionLabel = {
    fontSize: 9, fontWeight: 700, letterSpacing: '0.12em',
    textTransform: 'uppercase', color: 'var(--bb-ink-60)', marginBottom: 8,
  };

  return (
    <div style={{
      margin: '0 22px',
      background: 'white',
      border: '1px solid var(--bb-ink-10)',
      borderRadius: 16,
      overflow: 'hidden',
    }}>
      {/* Plum header strip */}
      <div style={{
        background: 'var(--bb-plum)', color: 'white',
        padding: '10px 14px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="mic" size={14} color="var(--bb-yellow)" stroke={2.4} />
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--bb-yellow)' }}>
            From Siro · {lead.siro.duration}
          </span>
        </div>
        <a
          href={lead.siro.url || '#'}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            color: 'rgba(255,255,255,0.85)', fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4,
          }}
        >
          Open <Icon name="external-link" size={11} stroke={2.4} />
        </a>
      </div>

      <div style={{ padding: '14px' }}>
        {/* Why they said yes — featured quote */}
        {lead.buyingReason && (
          <div style={{
            background: 'var(--bb-cream)',
            borderLeft: '3px solid var(--bb-pink)',
            borderRadius: 10,
            padding: '10px 12px',
            marginBottom: 14,
            display: 'flex', alignItems: 'flex-start', gap: 10,
          }}>
            <Icon name="quote" size={14} color="var(--bb-pink)" stroke={2.4} />
            <div>
              <div style={{ ...sectionLabel, color: 'var(--bb-pink)', marginBottom: 4 }}>Why they're buying</div>
              <div style={{ fontSize: 14, fontWeight: 300, lineHeight: 1.35, color: 'var(--bb-plum)', letterSpacing: '-0.005em' }}>
                {lead.buyingReason}
              </div>
            </div>
          </div>
        )}

        {/* Highlight clip */}
        <div style={{
          fontSize: 13, fontWeight: 100, color: 'var(--bb-plum)', lineHeight: 1.4,
          display: 'flex', alignItems: 'flex-start', gap: 8,
        }}>
          <Icon name="play-circle" size={14} color="var(--bb-orange)" stroke={2.4} />
          <span style={{ flex: 1 }}>{lead.siro.clip}</span>
        </div>

        {/* 2x2 extracted fields */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 14px',
          ...sectionDivider,
        }}>
          {fields.map(f => (
            <div key={f.label}>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--bb-ink-60)', marginBottom: 2 }}>{f.label}</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--bb-plum)', letterSpacing: '-0.01em' }}>{f.value}</div>
            </div>
          ))}
        </div>

        {/* Decision makers */}
        {lead.decisionMakers && lead.decisionMakers.length > 0 && (
          <div style={sectionDivider}>
            <div style={sectionLabel}>Decision makers</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {lead.decisionMakers.map(dm => {
                const meta = ENTH_META[dm.enthusiasm];
                return (
                  <div key={dm.name} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{
                      width: 26, height: 26, borderRadius: 8,
                      background: meta.color, color: 'white',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 700, fontSize: 12, flex: 'none',
                    }}>{dm.name[0]}</div>
                    <span style={{ fontSize: 14, fontWeight: 700, flex: 1 }}>{dm.name}</span>
                    <span style={{ fontSize: 12, fontWeight: 700, color: meta.color, letterSpacing: '0.02em' }}>{meta.label}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Objections */}
        {lead.objections && lead.objections.length > 0 && (
          <div style={sectionDivider}>
            <div style={sectionLabel}>Objections</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {lead.objections.map((o, i) => {
                const expanded = expandedObjections.has(i);
                return (
                  <div key={i} onClick={() => toggleObjection(i)} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer',
                  }}>
                    <Icon name="alert-circle" size={14} color="var(--bb-magenta)" stroke={2.2} />
                    <span style={{
                      flex: 1, fontSize: 13, fontWeight: 100, color: 'var(--bb-plum)', lineHeight: 1.4,
                      display: '-webkit-box',
                      WebkitBoxOrient: 'vertical',
                      WebkitLineClamp: expanded ? 'unset' : 2,
                      overflow: 'hidden',
                    }}>{o}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Competing quotes */}
        {lead.competitors && lead.competitors.length > 0 && (
          <div style={sectionDivider}>
            <div style={sectionLabel}>Competing quotes</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {lead.competitors.map(c => (
                <div key={c.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 13, fontWeight: 100, color: 'var(--bb-plum)' }}>{c.name}</span>
                  <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--bb-orange)', letterSpacing: '-0.01em' }}>{money(c.amount)}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const TabRow = ({ tabs, active, onChange }) => (
  <div style={{
    display: 'grid',
    gridTemplateColumns: `repeat(${tabs.length}, 1fr)`,
    gap: 6, padding: '0 22px',
    margin: '20px 0 8px',
  }}>
    {tabs.map(t => (
      <button key={t} onClick={() => onChange(t)} style={{
        background: active === t ? 'var(--bb-plum)' : 'transparent',
        color: active === t ? 'white' : 'var(--bb-ink-60)',
        border: active === t ? 0 : '1.5px solid var(--bb-ink-20)',
        borderRadius: 999, padding: '8px 4px',
        fontFamily: 'var(--font-family-base)', fontSize: 13, fontWeight: 700,
        cursor: 'pointer', whiteSpace: 'nowrap',
        letterSpacing: '0.02em',
      }}>{t}</button>
    ))}
  </div>
);

const ThreadBubble = ({ msg, draft }) => {
  const isRep = msg.from === 'rep';
  const isDraft = !!draft;
  return (
    <div style={{
      display: 'flex', justifyContent: isRep || isDraft ? 'flex-end' : 'flex-start',
      marginBottom: 6,
    }}>
      <div style={{ maxWidth: '78%' }}>
        {isDraft && (
          <div style={{
            fontSize: 9, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--bb-plum)', marginBottom: 4, textAlign: 'right',
          }}>Coach draft · awaiting your tap</div>
        )}
        <div style={{
          padding: '10px 13px',
          borderRadius: 18,
          background: isDraft ? 'var(--bb-yellow)' :
                      isRep ? 'var(--bb-pink)' : 'var(--bb-ink-10)',
          color: isDraft ? 'var(--bb-plum)' :
                 isRep ? 'white' : 'var(--bb-plum)',
          fontSize: 14.5, fontWeight: 100, lineHeight: 1.35,
          border: isDraft ? '1.5px dashed var(--bb-plum)' : 0,
        }}>{msg.body}</div>
        <div style={{
          fontSize: 10, color: 'var(--bb-ink-40)', marginTop: 3,
          textAlign: isRep || isDraft ? 'right' : 'left',
        }}>{msg.t}</div>
      </div>
    </div>
  );
};

const LeadDeepDive = ({ lead, onClose, onApprove }) => {
  const [tab, setTab] = React.useState('Overview');
  const [expandedObjections, setExpandedObjections] = React.useState(() => new Set());
  const [editedDraft, setEditedDraft] = React.useState(lead.draft.body);
  const [draftExpanded, setDraftExpanded] = React.useState(false);
  const [editingDraft, setEditingDraft] = React.useState(false);
  // Per-promise action: 'confirmed' | 'dismissed'. Default = pending (no entry).
  const [promiseActions, setPromiseActions] = React.useState({});
  const stateMeta = STATE_META[lead.state];
  const bodyRef = React.useRef(null);
  const draftTextareaRef = React.useRef(null);

  const toggleObjection = (i) => setExpandedObjections(s => {
    const next = new Set(s);
    if (next.has(i)) next.delete(i); else next.add(i);
    return next;
  });

  const actOnPromise = (idx, action) => {
    setPromiseActions(s => ({ ...s, [idx]: action }));
  };

  const autoSizeTextarea = (el) => {
    if (!el) return;
    el.style.height = 'auto';
    el.style.height = el.scrollHeight + 'px';
  };

  const enterDraftEdit = () => {
    setDraftExpanded(true);
    setEditingDraft(true);
    setTimeout(() => {
      const ta = draftTextareaRef.current;
      if (ta) { autoSizeTextarea(ta); ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length); }
    }, 0);
  };

  // Reset scroll to top when switching tabs — avoids landing mid-content
  React.useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = 0;
  }, [tab]);

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 200,
      background: 'var(--bb-cream)',
      display: 'flex', flexDirection: 'column',
      animation: 'sheetUp var(--dur-base) var(--ease-out)',
    }}>
      <style>{`@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }`}</style>

      {/* Header band — plum, extends to top of viewport (covers status bar area) */}
      <div style={{
        background: 'var(--bb-plum)', color: 'white',
        padding: 'max(68px, calc(env(safe-area-inset-top, 0px) + 14px)) 20px 22px',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <button onClick={onClose} style={{
            width: 38, height: 38, borderRadius: 999,
            background: 'rgba(255,255,255,0.12)', color: 'white', border: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}>
            <Icon name="chevron-down" size={20} stroke={2.4} />
          </button>
          <div style={{ display: 'flex', gap: 8 }}>
            <Pill color="rgba(255,255,255,0.16)" fg="white">{stateMeta.label}</Pill>
            <Pill color="rgba(255,255,255,0.16)" fg="white" icon="clock">Day {lead.days}</Pill>
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--bb-yellow)', marginBottom: 4 }}>
              {lead.package}
            </div>
            <div style={{ fontSize: 28, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              {lead.names.join(' & ')}
            </div>
            <div style={{ fontSize: 13, fontWeight: 100, opacity: 0.78, marginTop: 4 }}>
              {lead.address}
            </div>
          </div>
          <div style={{ flex: 'none', textAlign: 'center' }}>
            <ScoreRing score={lead.score} size={58} stroke={5} />
          </div>
        </div>

        {/* numbers strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 10, marginTop: 18,
        }}>
          {[
            { label: 'Quote', value: money(lead.quote) },
            { label: 'Footage', value: lead.footage + ' ft' },
            { label: 'Decide', value: lead.decideBy },
            { label: 'Install', value: lead.installBy },
          ].map(s => (
            <div key={s.label}>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 2 }}>{s.label}</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'white', letterSpacing: '-0.01em' }}>{s.value}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Body — scrolling. paddingBottom reserves space for action bar + draft preview + safe-area */}
      <div ref={bodyRef} style={{
        flex: 1, overflowY: 'auto',
        paddingBottom: `calc(${draftExpanded || editingDraft ? 220 : 180}px + env(safe-area-inset-bottom, 0px))`,
        transition: 'padding-bottom var(--dur-fast) var(--ease-out)',
      }}>
        {/* Siro recording — compact link, full summary lives in From-Siro card on Overview tab */}
        <SiroLink siro={lead.siro} />

        <TabRow tabs={['Overview', 'Contact', 'Thread', 'Promises']} active={tab} onChange={setTab} />

        {tab === 'Overview' && (
          <div style={{ paddingTop: 4 }}>
            <SiroSummaryCard
              lead={lead}
              expandedObjections={expandedObjections}
              toggleObjection={toggleObjection}
            />
          </div>
        )}

        {tab === 'Contact' && (
          <div>
            <SectionLabel>Reach out</SectionLabel>
            <div style={{ margin: '0 22px', background: 'white', borderRadius: 16, overflow: 'hidden' }}>
              {[
                { icon: 'phone',          label: lead.phone,                 href: `tel:${lead.phone}` },
                { icon: 'mail',           label: lead.email,                 href: `mailto:${lead.email}` },
                { icon: 'message-square', label: 'Prefers ' + lead.channel,  href: null },
                { icon: 'map-pin',        label: lead.address,               href: null },
              ].map((r, i, arr) => {
                const inner = (
                  <>
                    <Icon name={r.icon} size={16} color="var(--bb-pink)" stroke={2.2} />
                    <span style={{ fontSize: 14, fontWeight: 100, flex: 1 }}>{r.label}</span>
                    {r.href && <Icon name="chevron-right" size={16} color="var(--bb-ink-40)" stroke={2.4} />}
                  </>
                );
                const baseStyle = {
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '13px 14px',
                  borderBottom: i < arr.length - 1 ? '1px solid var(--bb-ink-10)' : 0,
                  textDecoration: 'none', color: 'var(--bb-plum)',
                };
                return r.href
                  ? <a key={r.icon} href={r.href} style={baseStyle}>{inner}</a>
                  : <div key={r.icon} style={baseStyle}>{inner}</div>;
              })}
            </div>
          </div>
        )}

        {tab === 'Thread' && (
          <div style={{ padding: '0 22px', marginTop: 4 }}>
            {lead.thread.map((m, i) => <ThreadBubble key={i} msg={m} />)}
            {/* Draft is shown persistently above the action bar, not duplicated here */}
          </div>
        )}

        {tab === 'Promises' && (
          <div style={{ padding: '0 22px', marginTop: 4 }}>
            {lead.promises.length === 0 ? (
              <div style={{ background: 'white', padding: 18, borderRadius: 16, color: 'var(--bb-ink-60)', fontSize: 14 }}>
                No open promises.
              </div>
            ) : (
              <>
                {/* Explainer — confirms purpose of chips */}
                <div style={{
                  fontSize: 12, fontWeight: 100, color: 'var(--bb-ink-60)',
                  lineHeight: 1.45, marginBottom: 10, padding: '0 4px',
                }}>
                  Coach extracted these from the in-home. <strong style={{ fontWeight: 700, color: 'var(--bb-plum)' }}>Confirm</strong> to track, <strong style={{ fontWeight: 700, color: 'var(--bb-plum)' }}>Dismiss</strong> if it wasn't really a promise.
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {lead.promises.map((p, i) => {
                    const action = promiseActions[i]; // 'confirmed' | 'dismissed' | undefined
                    const isDismissed = action === 'dismissed';
                    const isConfirmed = action === 'confirmed';
                    return (
                      <div key={i} style={{
                        background: 'white', borderRadius: 16, padding: '13px 15px',
                        opacity: isDismissed ? 0.5 : 1,
                        transition: 'opacity var(--dur-fast) var(--ease-out)',
                      }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                          <div style={{
                            width: 26, height: 26, borderRadius: 999,
                            border: isConfirmed ? 0 : '2px solid var(--bb-pink)',
                            background: isConfirmed ? 'var(--bb-pink)' : 'transparent',
                            color: 'white',
                            flex: 'none',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                          }}>
                            {isConfirmed && <Icon name="check" size={14} stroke={3} />}
                            {isDismissed && <Icon name="x" size={14} stroke={3} color="var(--bb-ink-60)" />}
                          </div>
                          <div style={{ flex: 1 }}>
                            <div style={{
                              fontSize: 14.5, fontWeight: 700,
                              textDecoration: isDismissed ? 'line-through' : 'none',
                            }}>{p.text}</div>
                            <div style={{ fontSize: 12, fontWeight: 100, color: 'var(--bb-ink-60)', marginTop: 2 }}>
                              Due {p.due}
                            </div>
                          </div>
                          {isConfirmed && (
                            <Pill color="var(--bb-pink)" fg="white" size="sm">Tracking</Pill>
                          )}
                          {isDismissed && (
                            <span style={{
                              fontSize: 11, fontWeight: 700, color: 'var(--bb-ink-40)',
                              letterSpacing: '0.06em', textTransform: 'uppercase',
                            }}>Dismissed</span>
                          )}
                        </div>

                        {/* Chips — only when no action taken yet */}
                        {!action && (
                          <div style={{
                            display: 'flex', gap: 6, marginTop: 10,
                          }}>
                            <button onClick={() => actOnPromise(i, 'confirmed')} style={{
                              flex: 1,
                              background: 'var(--bb-pink)', color: 'white',
                              border: 0, borderRadius: 999,
                              padding: '8px 12px',
                              fontFamily: 'var(--font-family-base)',
                              fontSize: 13, fontWeight: 700, letterSpacing: '0.02em',
                              cursor: 'pointer',
                              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                            }}>
                              <Icon name="check" size={14} stroke={2.6} /> Confirm
                            </button>
                            <button onClick={() => actOnPromise(i, 'dismissed')} style={{
                              flex: 1,
                              background: 'transparent', color: 'var(--bb-ink-60)',
                              border: '1.5px solid var(--bb-ink-20)', borderRadius: 999,
                              padding: '8px 12px',
                              fontFamily: 'var(--font-family-base)',
                              fontSize: 13, fontWeight: 700, letterSpacing: '0.02em',
                              cursor: 'pointer',
                              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                            }}>
                              <Icon name="x" size={14} stroke={2.4} /> Dismiss
                            </button>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </>
            )}
          </div>
        )}
      </div>

      {/* Persistent draft preview — visible on every tab so rep always sees what Send sends */}
      <div style={{
        position: 'absolute', left: 12, right: 12,
        bottom: 'calc(82px + env(safe-area-inset-bottom, 0px))',
        background: 'var(--bb-yellow)',
        borderRadius: 16,
        padding: editingDraft ? '12px 14px' : (draftExpanded ? '12px 14px' : '10px 14px'),
        boxShadow: '0 6px 16px -4px rgba(52,14,48,0.28)',
        zIndex: 250,
        cursor: editingDraft ? 'default' : 'pointer',
        transition: 'all var(--dur-fast) var(--ease-out)',
      }}
      onClick={editingDraft ? undefined : () => {
        if (draftExpanded) setDraftExpanded(false);
        else setDraftExpanded(true);
      }}
      >
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4,
        }}>
          <Icon name="edit-3" size={11} color="var(--bb-plum)" stroke={2.6} />
          <span style={{
            fontSize: 9, fontWeight: 700, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: 'var(--bb-plum)', flex: 1,
          }}>Draft · {lead.channel}</span>
          {!editingDraft && (
            <button
              onClick={(e) => { e.stopPropagation(); enterDraftEdit(); }}
              style={{
                background: 'transparent', border: 0, padding: 2,
                color: 'var(--bb-plum)', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 3,
                fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
                opacity: 0.7,
              }}
            >
              <Icon name="pencil" size={11} stroke={2.4} /> Edit
            </button>
          )}
          {editingDraft && (
            <button
              onClick={(e) => { e.stopPropagation(); setEditingDraft(false); }}
              style={{
                background: 'var(--bb-plum)', color: 'white',
                border: 0, borderRadius: 999,
                padding: '4px 10px', cursor: 'pointer',
                fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
                display: 'inline-flex', alignItems: 'center', gap: 3,
              }}
            >
              <Icon name="check" size={11} stroke={2.6} /> Done
            </button>
          )}
        </div>
        {editingDraft ? (
          <>
            <textarea
              ref={draftTextareaRef}
              value={editedDraft}
              onChange={(e) => { setEditedDraft(e.target.value); autoSizeTextarea(e.target); }}
              onClick={(e) => e.stopPropagation()}
              style={{
                width: '100%',
                fontSize: 13.5, lineHeight: 1.4, color: 'var(--bb-plum)',
                fontWeight: 100, fontFamily: 'var(--font-family-base)',
                background: 'transparent', border: 0, outline: 'none', resize: 'none',
                padding: 0, margin: 0, display: 'block',
              }}
            />
            <SmsCounter text={editedDraft} />
          </>
        ) : (
          <div style={{
            fontSize: 13.5, lineHeight: 1.4, color: 'var(--bb-plum)', fontWeight: 100,
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: draftExpanded ? 'unset' : 2,
            overflow: 'hidden',
          }}>{editedDraft}</div>
        )}
      </div>

      {/* Action bar — sticky */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(12px)',
        borderTop: '1px solid var(--bb-ink-10)',
        padding: '12px 16px calc(12px + env(safe-area-inset-bottom))',
        display: 'grid', gridTemplateColumns: 'auto auto 1fr auto', gap: 8,
      }}>
        <IconButton icon="phone" color="var(--bb-orange)" fg="white" size={48} />
        <IconButton icon="message-square" color="var(--bb-ink-10)" fg="var(--bb-plum)" size={48} />
        <button onClick={() => onApprove && onApprove(lead.id)} style={{
          background: 'var(--bb-pink)', color: 'white', border: 0, borderRadius: 999,
          fontFamily: 'var(--font-family-base)', fontSize: 15, fontWeight: 700,
          cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          boxShadow: '0 4px 0 0 var(--bb-plum)',
        }}>
          <Icon name="send" size={16} stroke={2.4} /> Send draft
        </button>
        <button style={{
          width: 48, height: 48, borderRadius: 999,
          background: 'var(--bb-ink-10)', color: 'var(--bb-plum)', border: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <Icon name="more-horizontal" size={18} stroke={2.4} />
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { LeadDeepDive });