/* Lawyer Case Detail. Tabbed: Overview, Documents, Evidence, Messages, Trial Prep, Filings */

const LawyerCaseDetail = ({ caseId = 'chen', onBack }) => {
  const [tab, setTab] = React.useState('overview');
  const [aiPanel, setAiPanel] = React.useState(true);
  const [aiLevel, setAiLevel] = React.useState(2);

  const caseInfo = {
    name: 'Chen v. Northbay Contracting, LLC',
    client: 'Marcus J. Chen',
    clientAvatar: 'MC',
    type: 'Small Claims · Breach of Contract',
    jurisdiction: 'Alameda County Superior Court',
    caseNo: 'SC-2026-04117',
    opposing: 'Northbay Contracting, LLC (pro se)',
    nextDeadline: 'Apr 14, 9:00 AM · Complaint filing',
    amount: '$7,400',
    feeModel: '$850 flat · 60% earned',
  };

  return (
    <div style={{ height: '100%', display: 'flex', overflow: 'hidden' }}>
      {/* Main column */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* Header */}
        <div style={{ padding: '22px 26px 16px', borderBottom: `1px solid ${THEME.line}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, fontSize: 12, color: THEME.textDim }}>
            <span style={{ cursor: 'pointer' }} onClick={onBack}>← Caseload</span>
            <span style={{ color: THEME.textMute }}>/</span>
            <span>{caseInfo.caseNo}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
            <div style={{ width: 44, height: 44, borderRadius: 22, background: `linear-gradient(135deg, #3a4680, ${THEME.blue})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 14, flexShrink: 0 }}>{caseInfo.clientAvatar}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'Fraunces, serif', fontSize: 24, color: THEME.text, fontWeight: 500, lineHeight: 1.15, letterSpacing: -0.3, marginBottom: 4 }}>{caseInfo.name}</div>
              <div style={{ fontSize: 12, color: THEME.textDim, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <span><strong style={{ color: THEME.text }}>Client:</strong> {caseInfo.client}</span>
                <span><strong style={{ color: THEME.text }}>Venue:</strong> {caseInfo.jurisdiction}</span>
                <span><strong style={{ color: THEME.text }}>Opposing:</strong> {caseInfo.opposing}</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
              <button style={lawBtn('ghost')}><Icon d={Icons.send} size={12} stroke={THEME.text}/> Message</button>
              <button style={lawBtn('ghost')}><Icon d={Icons.calendar} size={12} stroke={THEME.text}/> Schedule</button>
              <button style={lawBtn('primary')}><Icon d={Icons.edit} size={12} stroke="#fff"/> Work on case</button>
            </div>
          </div>

          {/* Status strip */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 10, marginTop: 16 }}>
            <MiniStat label="Next deadline" value={caseInfo.nextDeadline} urgent/>
            <MiniStat label="Claim amount" value={caseInfo.amount}/>
            <MiniStat label="Fee" value={caseInfo.feeModel}/>
            <MiniStat label="Case health" value="Strong" accent={THEME.success}/>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 2, padding: '0 26px', borderBottom: `1px solid ${THEME.line}` }}>
          {[
            { id: 'overview', label: 'Overview' },
            { id: 'docs', label: 'Documents', count: 7 },
            { id: 'evidence', label: 'Evidence', count: 8 },
            { id: 'filings', label: 'Filings', count: 3 },
            { id: 'messages', label: 'Messages', count: 2 },
            { id: 'trialprep', label: 'Trial Prep' },
            { id: 'opposing', label: 'Opposing counsel' },
            { id: 'settle', label: 'Settlement' },
          ].map(t => (
            <div key={t.id} onClick={() => setTab(t.id)} style={{
              padding: '12px 14px', fontSize: 12.5, cursor: 'pointer',
              color: tab === t.id ? THEME.text : THEME.textDim,
              fontWeight: tab === t.id ? 600 : 450,
              borderBottom: `2px solid ${tab === t.id ? THEME.blue : 'transparent'}`,
              marginBottom: -1,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              {t.label}
              {t.count != null && <span style={{ fontSize: 10, padding: '1px 5px', borderRadius: 8, background: tab === t.id ? THEME.blueSoft : THEME.glassHi, color: tab === t.id ? THEME.accent : THEME.textMute, fontWeight: 600 }}>{t.count}</span>}
            </div>
          ))}
        </div>

        {/* Body */}
        <div style={{ flex: 1, overflow: 'auto' }}>
          {tab === 'overview' && <OverviewTab/>}
          {tab === 'docs' && <DocsTab/>}
          {tab === 'evidence' && <EvidenceTab/>}
          {tab === 'filings' && <FilingsTab/>}
          {tab === 'messages' && <MessagesTab/>}
          {tab === 'trialprep' && <TrialPrepTab/>}
          {tab === 'opposing' && <OpposingTab/>}
          {tab === 'settle' && <SettlementTab/>}
        </div>
      </div>

      {/* AI Co-counsel rail. Animated pill ↔ full panel */}
      <AICoCounselRail open={aiPanel} level={aiLevel} setLevel={setAiLevel}
        onOpen={() => setAiPanel(true)} onClose={() => setAiPanel(false)}/>
    </div>
  );
};

const MiniStat = ({ label, value, urgent, accent }) => (
  <div style={{
    padding: '10px 12px', borderRadius: 8,
    background: urgent ? 'rgba(240,113,119,0.08)' : THEME.glassSubtle,
    border: urgent ? `1px solid rgba(240,113,119,0.25)` : `1px solid ${THEME.lineSoft}`,
  }}>
    <div style={{ fontSize: 10, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>{label}</div>
    <div style={{ fontSize: 13, color: urgent ? THEME.danger : accent || THEME.text, fontWeight: 600 }}>{value}</div>
  </div>
);

/* ── Overview tab ── */
const OverviewTab = () => (
  <div style={{ padding: '22px 26px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18 }}>
    <div>
      <SectionLabel>Case timeline</SectionLabel>
      <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: '6px 18px 10px' }}>
        {[
          { date: 'Jan 8', event: 'Contract executed with Northbay Contracting.', done: true },
          { date: 'Jan 15', event: 'Client paid $12,400 deposit (Exhibit A).', done: true },
          { date: 'Jan 22', event: 'Work commenced on property.', done: true },
          { date: 'Mar 11', event: 'Defendant abandoned project at ~40% completion.', done: true, highlight: true },
          { date: 'Mar 24', event: 'Client retained successor contractor · $8,200.', done: true },
          { date: 'Apr 3', event: 'Case intake on AllLaw Studio.', done: true },
          { date: 'Apr 9', event: 'Accepted by Sarah Adeyemi, Esq.', done: true },
          { date: 'Apr 14', event: 'Complaint filing deadline.', done: false, urgent: true },
          { date: 'May 28', event: 'Hearing (tentative).', done: false },
        ].map((t, i) => (
          <div key={i} style={{ display: 'flex', gap: 14, padding: '11px 0', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, alignItems: 'flex-start' }}>
            <div style={{ width: 52, fontSize: 11.5, color: THEME.textMute, fontWeight: 500, fontVariantNumeric: 'tabular-nums', paddingTop: 1 }}>{t.date}</div>
            <div style={{
              width: 8, height: 8, borderRadius: 4, marginTop: 5,
              background: t.urgent ? THEME.danger : t.done ? THEME.success : THEME.textMute,
              boxShadow: t.urgent ? `0 0 8px ${THEME.danger}` : 'none',
              flexShrink: 0,
            }}/>
            <div style={{ fontSize: 12.5, color: t.highlight ? THEME.text : THEME.textDim, lineHeight: 1.5, fontWeight: t.highlight ? 600 : 450, flex: 1 }}>{t.event}</div>
          </div>
        ))}
      </div>

      <SectionLabel style={{ marginTop: 22 }}>Client facts (AI-extracted & verified)</SectionLabel>
      <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16 }}>
        <div style={{ fontSize: 12.5, color: THEME.textDim, lineHeight: 1.65 }}>
          Plaintiff entered a written agreement with defendant on <strong style={{ color: THEME.text }}>Jan 8, 2026</strong> for kitchen renovation. Total contract price was <strong style={{ color: THEME.text }}>$24,800</strong>, with <strong style={{ color: THEME.text }}>$12,400 paid upfront</strong> as deposit (50%). Defendant commenced work on Jan 22 and worked intermittently for ~7 weeks before ceasing all activity. Plaintiff attempted contact 11 times via text and email between Mar 11–Mar 20 without response. Successor contractor quoted <strong style={{ color: THEME.text }}>$8,200</strong> to complete the remaining scope, representing a <strong style={{ color: THEME.success }}>$3,600 premium</strong> over the original contract rate. Net damages: <strong style={{ color: THEME.text }}>$7,400</strong>.
        </div>
      </div>
    </div>

    <div>
      <SectionLabel>AI confidence · strategy</SectionLabel>
      <div style={{ background: 'rgba(91,123,255,0.06)', border: `1px solid rgba(91,123,255,0.2)`, borderRadius: 12, padding: 16, marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <div style={{ width: 24, height: 24, borderRadius: 12, background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon d={Icons.sparkle} size={12} stroke="#fff" fill="#fff"/>
          </div>
          <span style={{ fontSize: 12.5, color: THEME.text, fontWeight: 600, flex: 1 }}>Case strength</span>
          <span style={{ fontSize: 18, color: THEME.accent, fontWeight: 600, fontFamily: 'Fraunces, serif' }}>87%</span>
        </div>
        <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.55 }}>
          Strong paper trail, clear breach, favorable venue. Recommended strategy: file in small claims (under $10K cap), move for default if no appearance (68% probability based on Northbay's history. 4 defaults in 11 prior cases).
        </div>
      </div>

      <SectionLabel>Risks flagged</SectionLabel>
      <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4, marginBottom: 14 }}>
        {[
          { level: 'Med', color: THEME.warn, text: 'Mitigation duty. Successor contractor premium may be challenged as unreasonable.' },
          { level: 'Low', color: THEME.blue, text: 'Defendant could counter-claim for materials already delivered ($1,800).' },
          { level: 'Info', color: THEME.textDim, text: 'Statute of limitations: 4 years. No immediate concern.' },
        ].map((r, i) => (
          <div key={i} style={{ padding: '10px 12px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'flex', gap: 10 }}>
            <span style={{ fontSize: 9.5, padding: '2px 6px', borderRadius: 4, background: THEME.glassHi, color: r.color, fontWeight: 700, height: 'fit-content' }}>{r.level.toUpperCase()}</span>
            <span style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.5 }}>{r.text}</span>
          </div>
        ))}
      </div>

      <SectionLabel>Suggested next actions</SectionLabel>
      <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4 }}>
        {[
          'Review AI-drafted SC-100. 4 items flagged for your attention.',
          'Schedule 15-min client call to verify $3,600 successor premium reasoning.',
          'Request certified copy of LLC registration from SOS.',
          'File and serve by Apr 14 (5 days out).',
        ].map((a, i) => (
          <div key={i} style={{ padding: '10px 12px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'flex', gap: 10, alignItems: 'center', cursor: 'pointer' }}>
            <div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${THEME.line}`, flexShrink: 0 }}/>
            <span style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5, flex: 1 }}>{a}</span>
            <Icon d={Icons.chevronRight} size={12} stroke={THEME.textMute}/>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const SectionLabel = ({ children, style = {} }) => (
  <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600, marginBottom: 10, ...style }}>{children}</div>
);

/* ── Documents tab ── */
const DocsTab = () => {
  const docs = [
    { name: 'Plaintiff\'s Claim (SC-100)', status: 'AI-drafted', v: '3 revisions', date: 'Apr 9', size: '4 pp', lock: false, flag: true },
    { name: 'Statement of Facts', status: 'AI-drafted', v: '1 revision', date: 'Apr 9', size: '3 pp', lock: false },
    { name: 'Exhibit List', status: 'Lawyer draft', v: 'v2', date: 'Apr 9', size: '2 pp', lock: false },
    { name: 'Demand Letter (pre-suit)', status: 'Sent', v: 'Final', date: 'Apr 5', size: '2 pp', lock: true },
    { name: 'Contract (Exhibit A)', status: 'Evidence', v: '-', date: 'Jan 8', size: '6 pp', lock: true },
    { name: 'Text messages (Exhibit B)', status: 'Evidence', v: '-', date: 'Mar 11–20', size: '14 pp', lock: true },
    { name: 'Successor quote (Exhibit C)', status: 'Evidence', v: '-', date: 'Mar 24', size: '1 p', lock: true },
  ];
  return (
    <div style={{ padding: '22px 26px' }}>
      <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
        <button style={lawBtn('primary')}><Icon d={Icons.plus} size={12} stroke="#fff" sw={2.2}/> New document</button>
        <button style={lawBtn('ghost')}><Icon d={Icons.book} size={12} stroke={THEME.text}/> From template</button>
        <button style={lawBtn('ghost')}><Icon d={Icons.sparkle} size={12} stroke={THEME.accent}/> AI draft</button>
        <div style={{ flex: 1 }}/>
        <button style={lawBtn('ghost')}><Icon d={Icons.download} size={12} stroke={THEME.text}/> Export packet</button>
      </div>
      <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, overflow: 'hidden' }}>
        {docs.map((d, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 2fr 1fr 0.8fr 0.6fr 90px', padding: '14px 16px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, alignItems: 'center', gap: 12 }}>
            <Icon d={Icons.doc} size={16} stroke={d.flag ? THEME.warn : THEME.textDim}/>
            <div>
              <div style={{ fontSize: 13, color: THEME.text, fontWeight: 550, marginBottom: 2 }}>{d.name}</div>
              {d.flag && <div style={{ fontSize: 10.5, color: THEME.warn, fontWeight: 600 }}>● 4 items flagged for lawyer review</div>}
            </div>
            <div>
              <LawPill color={d.status === 'AI-drafted' ? THEME.accent : d.status === 'Sent' ? THEME.success : d.status === 'Evidence' ? THEME.textDim : THEME.blue} bg={THEME.glassSubtle}>{d.status}</LawPill>
            </div>
            <span style={{ fontSize: 11.5, color: THEME.textDim }}>{d.v}</span>
            <span style={{ fontSize: 11.5, color: THEME.textMute, fontVariantNumeric: 'tabular-nums' }}>{d.date} · {d.size}</span>
            <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
              <Icon d={Icons.eye} size={14} stroke={THEME.textDim}/>
              {!d.lock && <Icon d={Icons.edit} size={14} stroke={THEME.blue}/>}
              <Icon d={Icons.download} size={14} stroke={THEME.textDim}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ── Evidence tab ── */
const EvidenceTab = () => (
  <div style={{ padding: '22px 26px' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
      <SectionLabel style={{ margin: 0 }}>Evidence (8 items · 4.2 MB)</SectionLabel>
      <button style={lawBtn('ghost')}><Icon d={Icons.upload} size={12} stroke={THEME.text}/> Upload</button>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
      {[
        { label: 'Contract · Jan 8', type: 'PDF · 6 pp', tag: 'Exhibit A', color: THEME.blue },
        { label: 'Deposit receipt', type: 'PDF · 1 p', tag: 'Exhibit A-1', color: THEME.blue },
        { label: 'SMS thread (11 msgs)', type: 'Transcript · 14 pp', tag: 'Exhibit B', color: THEME.accent },
        { label: 'Email · Mar 12', type: 'EML · 1 p', tag: 'Exhibit B-1', color: THEME.accent },
        { label: 'Jobsite photos', type: '14 JPG', tag: 'Exhibit C', color: THEME.warn },
        { label: 'Successor quote', type: 'PDF · 1 p', tag: 'Exhibit D', color: THEME.success },
        { label: 'LLC registration', type: 'PDF · 2 pp', tag: 'Exhibit E', color: THEME.textDim },
        { label: 'Prior complaints', type: 'Research · 4 pp', tag: 'Ref only', color: THEME.textMute },
      ].map((e, i) => (
        <div key={i} style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 10, overflow: 'hidden' }}>
          <div style={{ height: 110, background: `linear-gradient(135deg, rgba(91,123,255,0.08), rgba(159,179,255,0.04))`, display: 'flex', alignItems: 'center', justifyContent: 'center', borderBottom: `1px solid ${THEME.lineSoft}`, position: 'relative' }}>
            <Icon d={Icons.paperclip} size={28} stroke={THEME.textFaint}/>
            <span style={{ position: 'absolute', top: 8, left: 8, fontSize: 9.5, padding: '2px 6px', borderRadius: 4, background: e.color, color: '#fff', fontWeight: 700, letterSpacing: 0.3 }}>{e.tag}</span>
          </div>
          <div style={{ padding: '10px 12px' }}>
            <div style={{ fontSize: 12, color: THEME.text, fontWeight: 550, marginBottom: 2 }}>{e.label}</div>
            <div style={{ fontSize: 10.5, color: THEME.textMute }}>{e.type}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

/* ── Filings tab ── */
const FilingsTab = () => (
  <div style={{ padding: '22px 26px' }}>
    <SectionLabel>Court filing tracker · Alameda Co. Superior Court</SectionLabel>
    <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, overflow: 'hidden' }}>
      {[
        { step: 1, label: 'Small Claims Complaint (SC-100)', status: 'Pending · due Apr 14', color: THEME.warn, fee: '$75 filing fee', action: 'File & serve' },
        { step: 2, label: 'Proof of Service (SC-104)', status: 'Not started', color: THEME.textDim, fee: '', action: 'Auto-generate after service' },
        { step: 3, label: 'Hearing · initial appearance', status: 'Scheduled May 28, 9:00 AM · Dept 7', color: THEME.blue, fee: '', action: 'Prep witnesses' },
        { step: 4, label: 'Judgment · if defendant defaults', status: 'Not applicable yet', color: THEME.textDim, fee: '', action: '-' },
      ].map((f, i) => (
        <div key={i} style={{ padding: '16px 18px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 14,
            background: f.color === THEME.warn ? 'rgba(245,184,76,0.12)' : f.color === THEME.blue ? THEME.blueSoft : THEME.glassHi,
            border: `1px solid ${f.color}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: f.color, fontSize: 12, fontWeight: 700, flexShrink: 0,
          }}>{f.step}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: THEME.text, fontWeight: 550, marginBottom: 2 }}>{f.label}</div>
            <div style={{ fontSize: 11.5, color: f.color, fontWeight: 500 }}>{f.status}{f.fee && ` · ${f.fee}`}</div>
          </div>
          <button style={{ ...lawBtn('ghost'), fontSize: 11.5, padding: '6px 10px' }}>{f.action}</button>
        </div>
      ))}
    </div>

    <SectionLabel style={{ marginTop: 24 }}>Contact magistrate</SectionLabel>
    <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16, display: 'flex', gap: 14, alignItems: 'center' }}>
      <div style={{ width: 44, height: 44, borderRadius: 22, background: `linear-gradient(135deg, #4a3a64, #8b5cf6)`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 13, fontFamily: 'Fraunces, serif' }}>HV</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13.5, color: THEME.text, fontWeight: 600 }}>Hon. Helena Vasquez</div>
        <div style={{ fontSize: 11.5, color: THEME.textDim }}>Commissioner · Alameda Co. Dept 7 · Small Claims calendar</div>
        <div style={{ fontSize: 11, color: THEME.textMute, marginTop: 3 }}>Clerk: (510) 891-6000 · Ex parte hours: 8:30–9:00 AM</div>
      </div>
      <button style={lawBtn('ghost')}><Icon d={Icons.send} size={12} stroke={THEME.text}/> Request ex parte</button>
    </div>
  </div>
);

/* ── Messages tab ── */
const MessagesTab = () => (
  <div style={{ padding: '22px 26px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 18, height: 'calc(100% - 44px)' }}>
    <div>
      <SectionLabel>Threads</SectionLabel>
      <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 10, overflow: 'hidden' }}>
        {[
          { who: 'Marcus Chen (client)', last: 'Got it, sending now.', unread: 2, active: true },
          { who: 'Northbay Contracting', last: 'Received your letter.', unread: 0 },
          { who: 'Hon. Vasquez · clerk', last: 'Hearing confirmed.', unread: 0 },
        ].map((t, i) => (
          <div key={i} style={{
            padding: 11, borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, cursor: 'pointer',
            background: t.active ? 'rgba(91,123,255,0.08)' : 'transparent',
            borderLeft: t.active ? `2px solid ${THEME.blue}` : '2px solid transparent',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
              <span style={{ fontSize: 12, color: THEME.text, fontWeight: 550, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.who}</span>
              {t.unread > 0 && <span style={{ fontSize: 9.5, padding: '1px 5px', borderRadius: 8, background: THEME.blue, color: '#fff', fontWeight: 600 }}>{t.unread}</span>}
            </div>
            <div style={{ fontSize: 11, color: THEME.textMute, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.last}</div>
          </div>
        ))}
      </div>
    </div>

    <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', borderBottom: `1px solid ${THEME.lineSoft}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: 14, background: `linear-gradient(135deg, #3a4680, ${THEME.blue})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 11 }}>MC</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600 }}>Marcus Chen</div>
          <div style={{ fontSize: 11, color: THEME.success }}>● Secure channel · end-to-end encrypted</div>
        </div>
        <Icon d={Icons.calendar} size={15} stroke={THEME.textDim}/>
      </div>
      <div style={{ flex: 1, padding: 16, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Msg from="them">Hi Sarah. Got the updated SC-100 draft. Quick question: should I also include the photos from Feb?</Msg>
        <Msg from="me">Yes. Feb jobsite photos will strengthen the "incomplete work" element. Drop them in the Evidence tab and I'll mark them Exhibit C-5 through C-9.</Msg>
        <Msg from="me" ai>Suggested by AI: "The Feb photos are timestamped, which supports continuity of breach from Jan through Mar."</Msg>
        <Msg from="them">Done. Uploaded 4 photos.</Msg>
        <Msg from="them">Got it, sending now.</Msg>
      </div>
      <div style={{ padding: 12, borderTop: `1px solid ${THEME.lineSoft}`, display: 'flex', gap: 8, alignItems: 'center' }}>
        <Icon d={Icons.paperclip} size={16} stroke={THEME.textDim}/>
        <input placeholder="Message Marcus…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: THEME.text, fontSize: 13 }}/>
        <button style={{ ...lawBtn('ghost'), padding: '6px 10px' }}><Icon d={Icons.sparkle} size={12} stroke={THEME.accent}/> Draft with AI</button>
        <button style={{ ...lawBtn('primary'), padding: '6px 12px' }}><Icon d={Icons.send} size={12} stroke="#fff"/></button>
      </div>
    </div>
  </div>
);

const Msg = ({ from, children, ai }) => {
  const mine = from === 'me';
  return (
    <div style={{ display: 'flex', justifyContent: mine ? 'flex-end' : 'flex-start' }}>
      <div style={{
        maxWidth: '70%', padding: '9px 12px', borderRadius: 12,
        background: ai ? 'rgba(91,123,255,0.1)' : mine ? THEME.blue : THEME.glassHi,
        color: ai ? THEME.accent : mine ? '#fff' : THEME.text,
        fontSize: 12.5, lineHeight: 1.5,
        border: ai ? `1px dashed rgba(91,123,255,0.35)` : 'none',
      }}>
        {ai && <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.2, marginBottom: 3, opacity: 0.8 }}>AI SUGGESTION</div>}
        {children}
      </div>
    </div>
  );
};

/* ── Trial Prep tab ── */
const TrialPrepTab = () => {
  const [sync, setSync] = React.useState(true);
  return (
    <div style={{ padding: '22px 26px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <SectionLabel style={{ margin: 0 }}>Trial Preparation</SectionLabel>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 12px', background: 'rgba(79,211,154,0.08)', border: `1px solid rgba(79,211,154,0.25)`, borderRadius: 10 }}>
          <Icon d={Icons.link} size={13} stroke={THEME.success}/>
          <span style={{ fontSize: 11.5, color: THEME.text, fontWeight: 500 }}>Synced to client's app</span>
          <div onClick={() => setSync(!sync)} style={{ width: 26, height: 14, borderRadius: 7, background: sync ? THEME.success : THEME.line, position: 'relative', cursor: 'pointer', transition: 'background 0.2s' }}>
            <div style={{ position: 'absolute', top: 2, left: sync ? 14 : 2, width: 10, height: 10, borderRadius: 5, background: '#fff', transition: 'left 0.2s' }}/>
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
        {/* Argument builder */}
        <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <Icon d={Icons.scale} size={15} stroke={THEME.blue}/>
            <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600, flex: 1 }}>Argument builder</span>
            <span style={{ fontSize: 11, color: THEME.textMute }}>3 claims · 1 counter</span>
          </div>
          {[
            { type: 'CLAIM', title: 'Material breach of contract', strength: 'Strong', color: THEME.success, supports: ['Ex. A §4', 'Ex. B msgs', 'Ex. D quote'] },
            { type: 'CLAIM', title: 'Failure to mitigate (defense rebuttal)', strength: 'Med', color: THEME.warn, supports: ['Ex. D', 'Client testimony'] },
            { type: 'CLAIM', title: 'Reliance damages', strength: 'Strong', color: THEME.success, supports: ['Ex. A-1', 'Ex. D'] },
            { type: 'COUNTER', title: 'Materials already delivered', strength: 'Anticipated', color: THEME.textDim, supports: ['Prepare rebuttal: Ex. C photos show incomplete'] },
          ].map((a, i) => (
            <div key={i} style={{ padding: '10px 0', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ fontSize: 9.5, padding: '1px 5px', borderRadius: 3, background: a.type === 'COUNTER' ? 'rgba(240,113,119,0.12)' : 'rgba(91,123,255,0.12)', color: a.type === 'COUNTER' ? THEME.danger : THEME.blue, fontWeight: 700, letterSpacing: 0.5 }}>{a.type}</span>
                <span style={{ fontSize: 12.5, color: THEME.text, fontWeight: 550, flex: 1 }}>{a.title}</span>
                <span style={{ fontSize: 10.5, color: a.color, fontWeight: 600 }}>{a.strength}</span>
              </div>
              <div style={{ fontSize: 10.5, color: THEME.textMute, paddingLeft: 4 }}>
                Supports: {a.supports.join(' · ')}
              </div>
            </div>
          ))}
        </div>

        {/* Witnesses */}
        <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <Icon d={Icons.user} size={15} stroke={THEME.blue}/>
            <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600, flex: 1 }}>Witness list</span>
            <span style={{ fontSize: 11, color: THEME.textMute }}>3 scheduled</span>
          </div>
          {[
            { name: 'Marcus Chen', role: 'Plaintiff', prep: 'Prep session Apr 23', color: THEME.blue },
            { name: 'Jordan Bak', role: 'Successor contractor', prep: 'Declaration obtained', color: THEME.success },
            { name: 'Lena Ortiz', role: 'Neighbor (observed jobsite)', prep: 'Subpoena pending', color: THEME.warn },
          ].map((w, i) => (
            <div key={i} style={{ padding: '10px 0', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 14, background: THEME.glassHi, display: 'flex', alignItems: 'center', justifyContent: 'center', color: THEME.text, fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
                {w.name.split(' ').map(n=>n[0]).join('')}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 550 }}>{w.name}</div>
                <div style={{ fontSize: 11, color: THEME.textMute }}>{w.role}</div>
              </div>
              <span style={{ fontSize: 11, color: w.color, fontWeight: 500 }}>{w.prep}</span>
            </div>
          ))}
          <button style={{ ...lawBtn('ghost'), marginTop: 10, width: '100%', justifyContent: 'center', fontSize: 11.5 }}>
            <Icon d={Icons.plus} size={11} stroke={THEME.text} sw={2}/> Add witness
          </button>
        </div>

        {/* Exhibits */}
        <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16, gridColumn: 'span 2' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <Icon d={Icons.paperclip} size={15} stroke={THEME.blue}/>
            <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600, flex: 1 }}>Exhibit manager</span>
            <span style={{ fontSize: 11, color: THEME.textMute }}>Drag to reorder · marked for admission</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
            {[
              { tag: 'A', name: 'Contract', color: THEME.blue },
              { tag: 'A-1', name: 'Deposit receipt', color: THEME.blue },
              { tag: 'B', name: 'SMS thread', color: THEME.accent },
              { tag: 'C', name: 'Jobsite photos', color: THEME.warn },
              { tag: 'D', name: 'Successor quote', color: THEME.success },
            ].map((e, i) => (
              <div key={i} style={{ padding: 10, background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 8 }}>
                <div style={{ display: 'inline-block', fontSize: 10, padding: '2px 6px', borderRadius: 3, background: e.color, color: '#fff', fontWeight: 700, marginBottom: 6 }}>EX {e.tag}</div>
                <div style={{ fontSize: 11.5, color: THEME.text, fontWeight: 500 }}>{e.name}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ padding: 14, background: 'rgba(79,211,154,0.06)', border: `1px solid rgba(79,211,154,0.2)`, borderRadius: 10, display: 'flex', alignItems: 'center', gap: 12 }}>
        <Icon d={Icons.link} size={16} stroke={THEME.success}/>
        <div style={{ flex: 1, fontSize: 12, color: THEME.textDim, lineHeight: 1.5 }}>
          <strong style={{ color: THEME.text }}>Client sees this too.</strong> Marcus can review witnesses, exhibits, and argument summary from his app. He gets a read-only view. Edits stay with you. Last synced 3 min ago.
        </div>
        <button style={{ ...lawBtn('ghost'), fontSize: 11.5, padding: '6px 10px' }}>Preview client view</button>
      </div>
    </div>
  );
};

/* ── Opposing counsel tab ── */
const OpposingTab = () => (
  <div style={{ padding: '22px 26px' }}>
    <SectionLabel>Opposing party</SectionLabel>
    <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 18, marginBottom: 16, display: 'flex', gap: 16 }}>
      <div style={{ width: 48, height: 48, borderRadius: 10, background: 'rgba(240,113,119,0.1)', border: `1px solid rgba(240,113,119,0.2)`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon d={Icons.folder} size={22} stroke={THEME.danger}/>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, color: THEME.text, fontWeight: 600 }}>Northbay Contracting, LLC</div>
        <div style={{ fontSize: 12, color: THEME.textDim, marginTop: 2 }}>Registered agent: David R. Morrison · 2100 Franklin St, Oakland CA</div>
        <div style={{ display: 'flex', gap: 12, marginTop: 10, fontSize: 11.5, color: THEME.textMute }}>
          <span>● Pro se (no counsel)</span>
          <span>● 11 prior small-claims cases · 4 defaults</span>
          <span>● CSLB license: suspended 2/2026</span>
        </div>
      </div>
    </div>

    <SectionLabel>Communication log</SectionLabel>
    <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4 }}>
      {[
        { date: 'Apr 5', ev: 'Demand letter sent · USPS certified #7019...4421', status: 'Delivered Apr 7' },
        { date: 'Apr 8', ev: 'Response received from D. Morrison acknowledging receipt', status: 'No substantive offer' },
        { date: 'Apr 9', ev: 'Meet-and-confer attempt via phone', status: 'No answer · voicemail left' },
      ].map((e, i) => (
        <div key={i} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <div style={{ width: 48, fontSize: 11.5, color: THEME.textMute, fontWeight: 500, flexShrink: 0 }}>{e.date}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 500 }}>{e.ev}</div>
            <div style={{ fontSize: 11, color: THEME.textDim, marginTop: 2 }}>{e.status}</div>
          </div>
          <Icon d={Icons.doc} size={14} stroke={THEME.textMute}/>
        </div>
      ))}
    </div>
  </div>
);

/* ── Settlement tab ── */
const SettlementTab = () => (
  <div style={{ padding: '22px 26px' }}>
    <SectionLabel>Settlement tracker</SectionLabel>
    <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 18, marginBottom: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>Demand</div>
          <div style={{ fontSize: 20, color: THEME.text, fontWeight: 600, fontFamily: 'Fraunces, serif' }}>$7,400</div>
        </div>
        <div style={{ flex: 1, height: 2, background: THEME.line, borderRadius: 1, margin: '0 10px', position: 'relative' }}>
          <div style={{ position: 'absolute', left: '40%', top: -5, width: 12, height: 12, borderRadius: 6, background: THEME.blue, boxShadow: `0 0 8px ${THEME.blue}` }}/>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>Latest offer</div>
          <div style={{ fontSize: 20, color: THEME.warn, fontWeight: 600, fontFamily: 'Fraunces, serif' }}>$3,000</div>
        </div>
      </div>
      <div style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.5, paddingTop: 12, borderTop: `1px solid ${THEME.lineSoft}` }}>
        <strong style={{ color: THEME.accent }}>AI analysis: </strong>
        Initial offer is 40.5% of demand. Based on similar cases in Alameda Co. (n=42), median settlement ratio is 62% pre-trial. Recommend counter at $6,200. Leaves room for concessions while anchoring above median.
      </div>
    </div>

    <SectionLabel>Offer history</SectionLabel>
    <div style={{ background: THEME.glassSubtle, border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4 }}>
      {[
        { date: 'Apr 5', who: 'Plaintiff', amt: '$7,400', note: 'Initial demand (in pre-suit letter)' },
        { date: 'Apr 8', who: 'Defendant', amt: '$3,000', note: '"Best we can do. Cash only."' },
        { date: 'Pending', who: 'Plaintiff', amt: '$6,200', note: 'AI-suggested counter · awaiting your approval', pending: true },
      ].map((o, i) => (
        <div key={i} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'grid', gridTemplateColumns: '60px 80px 90px 1fr auto', gap: 12, alignItems: 'center' }}>
          <span style={{ fontSize: 11.5, color: THEME.textMute }}>{o.date}</span>
          <LawPill color={o.who === 'Plaintiff' ? THEME.success : THEME.danger} bg={THEME.glassSubtle}>{o.who}</LawPill>
          <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600, fontFamily: 'Fraunces, serif' }}>{o.amt}</span>
          <span style={{ fontSize: 12, color: THEME.textDim }}>{o.note}</span>
          {o.pending && <button style={{ ...lawBtn('primary'), fontSize: 11, padding: '5px 10px' }}>Send counter</button>}
        </div>
      ))}
    </div>
  </div>
);

/* ── AI Co-counsel rail: animated pill ↔ panel ── */
const AICoCounselRail = ({ open, level, setLevel, onOpen, onClose }) => {
  return (
    <div style={{
      width: open ? 340 : 60,
      height: '100%',
      flexShrink: 0,
      position: 'relative',
      transition: 'width 420ms cubic-bezier(0.22, 1, 0.36, 1)',
      overflow: 'hidden',
    }}>
      {/* Collapsed pill. Rendered when collapsed. Fully rounded capsule floating in rail. */}
      <div
        onClick={onOpen}
        style={{
          position: 'absolute',
          top: 18,
          bottom: 18,
          left: 10,
          width: 40,
          borderRadius: 20,
          background: `linear-gradient(180deg, ${THEME.blueSoft}, ${THEME.glassSubtle})`,
          border: `1px solid ${THEME.glassBorder}`,
          backdropFilter: 'blur(16px) saturate(140%)',
          WebkitBackdropFilter: 'blur(16px) saturate(140%)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingTop: 14,
          paddingBottom: 14,
          cursor: 'pointer',
          opacity: open ? 0 : 1,
          transform: open ? 'translateX(8px)' : 'translateX(0)',
          transition: 'opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1)',
          pointerEvents: open ? 'none' : 'auto',
          boxShadow: `0 8px 24px -12px ${THEME.blue}40, inset 0 1px 0 ${THEME.glassHi}`,
        }}
      >
        {/* sparkle icon. Top */}
        <div style={{
          width: 26, height: 26, borderRadius: 13,
          background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 4px 10px -2px ${THEME.blue}80`,
        }}>
          <Icon d={Icons.sparkle} size={13} stroke="#fff" fill="#fff"/>
        </div>

        {/* vertical label */}
        <div style={{
          writingMode: 'vertical-rl',
          transform: 'rotate(180deg)',
          fontSize: 10.5, color: THEME.accent, fontWeight: 600,
          letterSpacing: 2.2, textTransform: 'uppercase',
          fontFamily: 'Inter, system-ui',
        }}>
          AI Co-counsel
        </div>

        {/* pulse dot. Bottom */}
        <div style={{ position: 'relative', width: 8, height: 8 }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 4,
            background: THEME.success,
            boxShadow: `0 0 6px ${THEME.success}`,
          }}/>
          <div style={{
            position: 'absolute', inset: -3, borderRadius: 7,
            border: `1px solid ${THEME.success}`,
            opacity: 0.5,
            animation: 'ailCoPulse 2s ease-out infinite',
          }}/>
        </div>
      </div>

      {/* Expanded full panel. Absolutely positioned to fit rail */}
      <div style={{
        position: 'absolute',
        inset: 0,
        opacity: open ? 1 : 0,
        transform: open ? 'translateX(0)' : 'translateX(16px)',
        transition: 'opacity 280ms ease 80ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1)',
        pointerEvents: open ? 'auto' : 'none',
      }}>
        <AICoCounselPanel level={level} setLevel={setLevel} onClose={onClose}/>
      </div>

      {/* pulse keyframes */}
      <style>{`
        @keyframes ailCoPulse {
          0% { transform: scale(0.9); opacity: 0.6; }
          70% { transform: scale(1.8); opacity: 0; }
          100% { transform: scale(1.8); opacity: 0; }
        }
      `}</style>
    </div>
  );
};

/* ── AI Co-counsel panel (right rail) ── */
const AICoCounselPanel = ({ level, setLevel, onClose }) => {
  const [input, setInput] = React.useState('');
  const [convo, setConvo] = React.useState([
    { from: 'ai', text: 'Reviewed the case file. Key questions I can help with: damages calculation, precedent cases, drafting strategy, mitigation analysis.' },
    { from: 'me', text: 'What\'s the best precedent for arguing the $3,600 successor premium is reasonable?' },
    { from: 'ai', text: 'Best match: **Brandon v. Meridian Construction** (Alameda Co. 2023). Court allowed 48% premium on successor contractor where original contractor abandoned >30% of work and emergency completion was needed. Your facts are stronger. Full abandonment and weather-sensitive scope.', cites: ['Brandon v. Meridian', 'Cal. Civ. Code §3300'] },
  ]);

  return (
    <div style={{ width: '100%', height: '100%', background: THEME.panel, backdropFilter: 'blur(24px) saturate(140%)', WebkitBackdropFilter: 'blur(24px) saturate(140%)', borderLeft: `1px solid ${THEME.glassBorder}`, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '16px 16px 12px', borderBottom: `1px solid ${THEME.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 12, background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon d={Icons.sparkle} size={12} stroke="#fff" fill="#fff"/>
          </div>
          <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600, flex: 1, fontFamily: 'Fraunces, serif' }}>AI Co-counsel</span>
          <span onClick={onClose} style={{ fontSize: 16, color: THEME.textMute, cursor: 'pointer' }}>×</span>
        </div>
        <div style={{ display: 'flex', gap: 3, marginBottom: 6 }}>
          {[0,1,2,3].map(i => (
            <div key={i} onClick={() => setLevel(i)} style={{
              flex: 1, height: 4, borderRadius: 2, cursor: 'pointer',
              background: i <= level ? `linear-gradient(90deg, ${THEME.blue}, ${THEME.accent})` : THEME.line,
            }}/>
          ))}
        </div>
        <div style={{ fontSize: 10.5, color: THEME.textMute, textAlign: 'right', fontWeight: 500 }}>
          {['AI off', 'Minimal', 'Assistant', 'Co-counsel'][level]}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {convo.map((m, i) => (
          <div key={i} style={{
            padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.55,
            background: m.from === 'ai' ? 'rgba(91,123,255,0.08)' : THEME.blue,
            color: m.from === 'ai' ? THEME.textDim : '#fff',
            border: m.from === 'ai' ? `1px solid rgba(91,123,255,0.2)` : 'none',
            alignSelf: m.from === 'ai' ? 'flex-start' : 'flex-end', maxWidth: '92%',
          }}>
            <div dangerouslySetInnerHTML={{ __html: m.text.replace(/\*\*(.+?)\*\*/g, `<strong style="color: ${THEME.text}">$1</strong>`) }}/>
            {m.cites && (
              <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', marginTop: 7, paddingTop: 7, borderTop: `1px solid ${THEME.line}` }}>
                {m.cites.map((c, j) => (
                  <span key={j} style={{ fontSize: 10, padding: '2px 6px', borderRadius: 4, background: 'rgba(91,123,255,0.15)', color: THEME.accent, fontWeight: 500 }}>{c}</span>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>

      <div style={{ padding: '10px 12px', borderTop: `1px solid ${THEME.line}` }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
          {['Find precedent', 'Draft motion', 'Calc damages', 'Cite check'].map(s => (
            <span key={s} style={{ fontSize: 10.5, padding: '4px 8px', borderRadius: 10, background: 'rgba(91,123,255,0.08)', color: THEME.accent, border: `1px solid rgba(91,123,255,0.2)`, cursor: 'pointer', fontWeight: 500 }}>{s}</span>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', background: THEME.bg, border: `1px solid ${THEME.line}`, borderRadius: 10, padding: '8px 10px' }}>
          <Icon d={Icons.sparkle} size={13} stroke={THEME.accent}/>
          <input value={input} onChange={e => setInput(e.target.value)} placeholder="Ask about law, strategy, drafting…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: THEME.text, fontSize: 12 }}/>
          <Icon d={Icons.send} size={13} stroke={THEME.blue} fill={THEME.blue}/>
        </div>
      </div>
    </div>
  );
};

window.LawyerCaseDetail = LawyerCaseDetail;
window.SectionLabel = SectionLabel;