// ===== App · Cockpit do processo individual =====
// Visão expandida pós-decisão "Participar" — timeline, agentes, docs, chat, lances.

function CockpitStat({ label, value, sub, tone }) {
  const toneCls = tone === "go" ? "text-verdict-go" : tone === "warn" ? "text-verdict-caution" : "text-pleita-ink";
  return (
    <div className="rounded-[10px] bg-surface-card border border-pleita-line p-4 shadow-pl-sm">
      <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{label}</div>
      <div className={`pl-num font-semibold text-2xl mt-1.5 leading-none ${toneCls}`}>{value}</div>
      {sub && <div className="pl-num text-[11px] text-pleita-stone-2 mt-2">{sub}</div>}
    </div>
  );
}

function ScreenCockpit({ beginnerMode, setBeginnerMode }) {
  const [tab, setTab] = React.useState("visao");
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="matches" crumb={["Pleita", "Processos", "EDT-2026-04-A1B2"]}>
      {/* Header do processo */}
      <header className="mb-6">
        <div className="flex items-center gap-2 pl-num text-[11px] text-pleita-stone-2 mb-3">
          <span>EDT-2026-04-A1B2</span><span>·</span>
          <span>Pregão Eletrônico</span><span>·</span>
          <span className="text-pleita-ink">aberto</span>
        </div>
        <h1 className="font-display text-3xl md:text-4xl text-pleita-ink leading-tight">Aquisição de equipamentos de TI<span className="text-pleita-lime">.</span></h1>
        <p className="text-sm text-pleita-stone mt-2">Pref. Campinas · SP · valor estimado <span className="pl-num text-pleita-ink">R$ 1.247.380</span> · abertura <span className="pl-num text-pleita-ink">21/mai 09:00</span></p>

        <div className="mt-5 grid grid-cols-2 md:grid-cols-4 gap-3">
          <CockpitStat label="Veredito" value="🟢 PARTICIPE" sub="Score 89/100 · alta convicção" tone="go" />
          <CockpitStat label="Win probability" value="62%" sub="3 concorrentes mapeados" />
          <CockpitStat label="Margem projetada" value="+18%" sub="BDI 23.5% · risco médio" tone="go" />
          <CockpitStat label="Próximo prazo" value="6 dias" sub="impugnação até 14/mai 23h59" tone="warn" />
        </div>
      </header>

      {/* Tabs */}
      <div className="mb-5 flex gap-1 border-b border-pleita-line overflow-x-auto scrollbar-pl">
        {[
          { id: "visao",    l: "Visão geral",  ico: "📊" },
          { id: "agentes",  l: "Agentes IA",   ico: "🤖" },
          { id: "docs",     l: "Documentos",   ico: "📋" },
          { id: "lances",   l: "Lances",       ico: "⚡" },
          { id: "timeline", l: "Histórico",    ico: "🕐" },
          { id: "chat",     l: "Chat",         ico: "💬" },
        ].map((t) => (
          <button key={t.id} onClick={() => setTab(t.id)} className={`pl-num text-xs uppercase tracking-wider px-4 py-2.5 whitespace-nowrap transition-colors border-b-2 -mb-px ${tab === t.id ? "border-pleita-lime text-pleita-ink font-semibold" : "border-transparent text-pleita-stone-2 hover:text-pleita-ink"}`}>
            <span className="text-sm normal-case mr-1.5">{t.ico}</span>{t.l}
          </button>
        ))}
      </div>

      {tab === "visao"    && <CockpitVisao />}
      {tab === "agentes"  && <CockpitAgentes />}
      {tab === "docs"     && <CockpitDocs />}
      {tab === "lances"   && <CockpitLances />}
      {tab === "timeline" && <CockpitTimeline />}
      {tab === "chat"     && <CockpitChat />}
    </AppFrame>
  );
}

function CockpitVisao() {
  return (
    <div className="grid grid-cols-12 gap-6">
      <div className="col-span-12 lg:col-span-8 space-y-5">
        <section className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
          <h2 className="font-display text-lg text-pleita-ink mb-3">Resumo executivo · pelo Coach</h2>
          <p className="text-pleita-stone leading-relaxed">
            Este edital é uma <strong className="text-pleita-ink">excelente oportunidade</strong> pra Souza Engenharia. O objeto cai no seu segmento principal, a Pref. Campinas tem histórico de pagamento em <span className="pl-num">21 dias</span> e o valor está dentro da sua faixa de operação confortável. Identificamos <strong className="text-pleita-ink">1 cláusula problemática</strong> (§4º exige atestado restritivo) que recomendamos impugnar nas próximas 48h.
          </p>
          <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
            {[
              ["✅", "5 ações no caminho certo",       "Documentação ok, preço competitivo, prazo viável"],
              ["⚠", "2 pontos de atenção",             "Atestado técnico restritivo · entrega em 30 dias é apertada"],
              ["🚫", "1 bloqueio a resolver",          "Balanço 2025 ainda não está no Cofre"],
            ].map(([i, t, d]) => (
              <div key={t} className="rounded-md border border-pleita-line/60 p-3">
                <div className="text-base">{i}</div>
                <div className="text-sm text-pleita-ink font-medium mt-1">{t}</div>
                <div className="text-xs text-pleita-stone mt-1 leading-snug">{d}</div>
              </div>
            ))}
          </div>
        </section>

        <section className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
          <h2 className="font-display text-lg text-pleita-ink mb-4">Inteligência competitiva</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              ["Preço sugerido",         "R$ 1,78", "/un"],
              ["Mediana vencedora",      "R$ 1,82", "histórico PNCP"],
              ["Preço-teto edital",      "R$ 2,40", "máximo"],
              ["Sua margem ao 1,78",     "+18%",    "líquida"],
            ].map(([l, v, s]) => (
              <div key={l}>
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{l}</div>
                <div className="pl-num text-xl font-semibold text-pleita-ink mt-1">{v}</div>
                <div className="pl-num text-[11px] text-pleita-stone-2">{s}</div>
              </div>
            ))}
          </div>
          <div className="mt-5 pt-5 border-t border-pleita-line/60">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Concorrentes prováveis · histórico PNCP</div>
            <ul className="space-y-2 text-sm">
              {[
                ["Vencom Tecnologia LTDA",  "vence 38% das licitações similares", "preço médio R$ 1,84"],
                ["Solução Digital MEI",     "agressiva em preço",                  "preço médio R$ 1,72"],
                ["TI Brasil Distribuidora", "foca em volume",                      "preço médio R$ 1,89"],
              ].map(([n, p, m]) => (
                <li key={n} className="flex items-center justify-between gap-3 p-3 rounded-md border border-pleita-line/60">
                  <div>
                    <div className="text-pleita-ink font-medium">{n}</div>
                    <div className="pl-num text-[11px] text-pleita-stone-2">{p}</div>
                  </div>
                  <span className="pl-num text-xs text-pleita-ink">{m}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>
      </div>

      <aside className="col-span-12 lg:col-span-4 space-y-4">
        <div className="rounded-[10px] bg-pleita-ink text-pleita-paper p-6 shadow-pl-sm">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-lime mb-2">Próxima ação sugerida</div>
          <h3 className="font-display text-xl leading-tight">Impugnar §4º antes de 14/mai 23h59</h3>
          <p className="text-sm text-pleita-paper/70 mt-2 leading-relaxed">O Agente Jurídico já redigiu a peça com base em jurisprudência TCU. Você só precisa revisar e protocolar.</p>
          <button className="mt-4 w-full pl-num text-xs px-3 py-2.5 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Revisar peça →</button>
        </div>

        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Datas críticas</div>
          <ul className="space-y-3">
            {[
              { d: "14/mai", h: "23:59", t: "Prazo de impugnação", tone: "warn" },
              { d: "19/mai", h: "23:59", t: "Prazo de esclarecimento" },
              { d: "21/mai", h: "09:00", t: "Abertura do pregão", tone: "go" },
              { d: "21/mai", h: "10:00", t: "Início dos lances", tone: "go" },
            ].map((x, i) => (
              <li key={i} className="flex items-start gap-3">
                <div className={`size-9 rounded-md grid place-items-center pl-num text-[10px] font-semibold ${x.tone === "warn" ? "bg-verdict-caution/15 text-verdict-caution" : x.tone === "go" ? "bg-verdict-go/15 text-verdict-go" : "bg-surface-2 text-pleita-stone"}`}>
                  {x.d.split("/")[0]}
                </div>
                <div className="flex-1 min-w-0 leading-tight pt-0.5">
                  <div className="text-sm text-pleita-ink">{x.t}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2">{x.d} às {x.h}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Responsáveis</div>
          <ul className="space-y-2 text-sm">
            <li className="flex items-center gap-3"><span className="size-7 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-xs">MS</span><span className="flex-1">Marcos Souza</span><span className="pl-num text-[10px] text-pleita-stone-2">Owner</span></li>
            <li className="flex items-center gap-3"><span className="size-7 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-xs">AC</span><span className="flex-1">Ana Costa</span><span className="pl-num text-[10px] text-pleita-stone-2">Jurídico</span></li>
          </ul>
        </div>
      </aside>
    </div>
  );
}

function CockpitAgentes() {
  const agents = [
    { k: "hunter",  ico: "🔍", n: "Caça-Editais",   model: "haiku-4.5",  status: "concluído", msg: "Match 89/100 · objetivo compatível com CNAE principal",        time: "há 4h" },
    { k: "analyst", ico: "🎯", n: "Analista",       model: "sonnet-4.5", status: "concluído", msg: "Win probability 62% · 3 concorrentes mapeados",               time: "há 4h" },
    { k: "legal",   ico: "⚖️", n: "Jurídico",       model: "sonnet-4.5", status: "concluído", msg: "Cláusula §4º atípica · impugnação redigida",                  time: "há 3h" },
    { k: "finance", ico: "💰", n: "Financeiro",     model: "sonnet-4.5", status: "concluído", msg: "Preço sugerido R$ 1,78 · margem +18% · BDI 23.5%",            time: "há 3h" },
    { k: "docs",    ico: "📋", n: "Documentalista", model: "haiku-4.5",  status: "atenção",   msg: "Balanço 2025 ausente · 1 atestado precisa renovação",        time: "há 2h" },
    { k: "coach",   ico: "🎓", n: "Coach",          model: "sonnet-4.5", status: "concluído", msg: "Resumo executivo em PT-BR claro disponível",                   time: "há 2h" },
  ];
  const tone = { concluído: { fg: "rgb(22 163 74)", bg: "rgb(34 197 94 / .14)" }, atenção: { fg: "rgb(245 158 11)", bg: "rgb(245 158 11 / .14)" } };
  return (
    <section className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {agents.map((a) => (
        <article key={a.k} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md transition-shadow">
          <header className="flex items-start justify-between gap-3 mb-3">
            <div className="flex items-center gap-3">
              <div className="size-11 rounded-md grid place-items-center text-xl" style={{ background: `rgb(var(--pleita-lime) / .15)` }}>{a.ico}</div>
              <div>
                <div className="font-display text-base text-pleita-ink leading-tight">{a.n}</div>
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mt-0.5">{a.model}</div>
              </div>
            </div>
            <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded font-semibold inline-flex items-center gap-1" style={{ background: tone[a.status].bg, color: tone[a.status].fg }}>
              <span className="size-1.5 rounded-full" style={{ background: tone[a.status].fg }} />{a.status}
            </span>
          </header>
          <p className="text-sm text-pleita-stone leading-relaxed">{a.msg}</p>
          <footer className="flex items-center justify-between mt-4 pt-3 border-t border-pleita-line/60">
            <span className="pl-num text-[11px] text-pleita-stone-2">{a.time}</span>
            <button className="pl-num text-xs text-pleita-info hover:underline">Ver análise completa →</button>
          </footer>
        </article>
      ))}
    </section>
  );
}

function CockpitDocs() {
  const docs = [
    { n: "Edital completo · EDT-2026-04-A1B2",      tipo: "PDF", tam: "2,4 MB", tag: "obrigatório", ok: true },
    { n: "Anexo I — Termo de Referência",            tipo: "PDF", tam: "486 KB", tag: "obrigatório", ok: true },
    { n: "Anexo II — Modelo de Proposta",            tipo: "DOCX", tam: "84 KB", tag: "modelo",      ok: true },
    { n: "Anexo III — Atestado de Capacidade",       tipo: "PDF", tam: "112 KB", tag: "modelo",      ok: true },
    { n: "Sua proposta comercial preenchida",        tipo: "DOCX", tam: "156 KB", tag: "minha",      ok: true,  edit: true },
    { n: "Carta de fiança bancária",                 tipo: "PDF", tam: "—",       tag: "minha",      ok: false, missing: true },
    { n: "Impugnação §4º · redigida pela IA",        tipo: "DOCX", tam: "32 KB",  tag: "minha",      ok: true,  draft: true },
  ];
  return (
    <section className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden">
      <header className="px-5 py-4 border-b border-pleita-line flex items-center justify-between flex-wrap gap-3">
        <div>
          <h2 className="font-display text-base text-pleita-ink">Documentos do processo</h2>
          <p className="text-xs text-pleita-stone-2 mt-0.5">7 arquivos · 3 MB total</p>
        </div>
        <div className="flex gap-2">
          <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">↓ Baixar tudo</button>
          <button className="pl-num text-xs px-3 py-1.5 rounded-md bg-pleita-ink text-pleita-paper font-semibold">+ Adicionar</button>
        </div>
      </header>
      <ul className="divide-y divide-pleita-line/60">
        {docs.map((d) => (
          <li key={d.n} className="px-5 py-3 flex items-center gap-4 hover:bg-surface-2/40 transition-colors">
            <span className={`size-10 rounded-md grid place-items-center text-xs pl-num font-bold ${d.tipo === "PDF" ? "bg-verdict-stop/10 text-verdict-stop" : "bg-pleita-info/10 text-pleita-info"}`}>
              {d.tipo}
            </span>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 flex-wrap">
                <span className="text-sm text-pleita-ink font-medium">{d.n}</span>
                {d.draft   && <span className="pl-num text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-verdict-caution/20 text-verdict-caution">rascunho</span>}
                {d.missing && <span className="pl-num text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-verdict-stop/15 text-verdict-stop">falta</span>}
              </div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{d.tag} · {d.tam}</div>
            </div>
            {d.missing
              ? <button className="pl-num text-xs px-3 py-1.5 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Anexar →</button>
              : <>
                  <button className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink px-2">Ver</button>
                  <button className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink px-2">↓</button>
                </>}
          </li>
        ))}
      </ul>
    </section>
  );
}

function CockpitLances() {
  return (
    <div className="space-y-5">
      <section className="rounded-[10px] overflow-hidden relative" style={{ background: "linear-gradient(135deg, rgb(var(--pleita-ink)), rgb(var(--pleita-ink-2)))" }}>
        <div aria-hidden className="absolute -right-20 -top-20 size-72 rounded-full" style={{ background: "rgb(159 232 112 / .12)" }} />
        <div className="relative p-8 text-pleita-paper">
          <div className="flex items-center gap-2 pl-num text-[11px] uppercase tracking-wider text-pleita-lime mb-3">
            <span className="size-2 rounded-full bg-pleita-lime animate-pulse" />pregão começa em 5 dias 18h
          </div>
          <h2 className="font-display text-2xl text-pleita-paper leading-tight">Robô de lances · configuração</h2>
          <p className="text-sm text-pleita-paper/70 mt-2 max-w-xl">Defina sua estratégia e o robô disputa em tempo real respeitando seus limites.</p>
        </div>
      </section>

      <section className="grid md:grid-cols-2 gap-4">
        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Faixa de operação</div>
          <div className="space-y-4">
            <div>
              <div className="flex items-baseline justify-between mb-1">
                <span className="text-sm text-pleita-stone">Preço inicial</span>
                <span className="pl-num text-lg font-semibold text-pleita-ink">R$ 1,85</span>
              </div>
              <input type="range" min="0" max="100" defaultValue="65" className="w-full" />
            </div>
            <div>
              <div className="flex items-baseline justify-between mb-1">
                <span className="text-sm text-pleita-stone">Preço mínimo (stop)</span>
                <span className="pl-num text-lg font-semibold text-pleita-ink">R$ 1,72</span>
              </div>
              <input type="range" min="0" max="100" defaultValue="35" className="w-full" />
              <p className="pl-num text-[11px] text-pleita-stone-2 mt-1">Margem mínima: +12% · não baixa disso.</p>
            </div>
          </div>
        </div>

        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Estratégia</div>
          <div className="space-y-2">
            {[
              ["Conservadora", "Acompanha o segundo colocado · só cobre o mínimo necessário"],
              ["Equilibrada",  "Cobre lances até atingir 5% acima do segundo · default"],
              ["Agressiva",    "Mantém o primeiro lugar a todo custo até o preço mínimo"],
            ].map(([n, d], i) => (
              <label key={n} className={`block rounded-md border p-3 cursor-pointer transition-colors ${i === 1 ? "border-pleita-lime bg-pleita-lime/10" : "border-pleita-line hover:bg-surface-2"}`}>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-pleita-ink font-medium">{n}</span>
                  <input type="radio" name="strat" defaultChecked={i === 1} className="accent-pleita-ink" />
                </div>
                <p className="text-xs text-pleita-stone mt-1 leading-snug">{d}</p>
              </label>
            ))}
          </div>
        </div>
      </section>

      <section className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden">
        <header className="px-5 py-4 border-b border-pleita-line">
          <h3 className="font-display text-base text-pleita-ink">Simulação · últimos 50 pregões similares</h3>
        </header>
        <div className="p-5 grid grid-cols-3 gap-4 text-center">
          <div>
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Vitórias estimadas</div>
            <div className="pl-num text-3xl font-semibold text-verdict-go mt-1">31</div>
            <div className="pl-num text-[11px] text-pleita-stone-2">de 50 · 62%</div>
          </div>
          <div>
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Margem média</div>
            <div className="pl-num text-3xl font-semibold text-pleita-ink mt-1">+16%</div>
          </div>
          <div>
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Lances/min</div>
            <div className="pl-num text-3xl font-semibold text-pleita-ink mt-1">8,2</div>
          </div>
        </div>
      </section>
    </div>
  );
}

function CockpitTimeline() {
  const events = [
    { t: "agora",        ico: "💬", who: "Marcos Souza",  ev: "Adicionou comentário no processo" },
    { t: "há 2h",        ico: "🎓", who: "Coach",         ev: "Gerou resumo executivo em PT-BR" },
    { t: "há 3h",        ico: "⚖️", who: "Jurídico",      ev: "Redigiu impugnação da cláusula §4º · 4 páginas" },
    { t: "há 3h",        ico: "💰", who: "Financeiro",    ev: "Calculou preço sugerido R$ 1,78/un · margem +18%" },
    { t: "há 4h",        ico: "🎯", who: "Analista",      ev: "Mapeou 3 concorrentes prováveis · win prob 62%" },
    { t: "há 4h",        ico: "🔍", who: "Caça-Editais",  ev: "Encontrou edital · score de match 89/100" },
    { t: "ontem 14:00",  ico: "📥", who: "Sistema",       ev: "PNCP indexou novo edital · primeira detecção" },
  ];
  return (
    <section className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
      <ol className="relative">
        <span className="absolute left-[18px] top-2 bottom-2 w-0.5 bg-pleita-line" aria-hidden />
        {events.map((e, i) => (
          <li key={i} className="relative pl-14 pb-5 last:pb-0">
            <span className="absolute left-0 top-0 size-9 rounded-full grid place-items-center bg-surface-card border-2 border-pleita-line text-base">{e.ico}</span>
            <div className="flex items-center gap-2 flex-wrap">
              <span className="text-sm text-pleita-ink font-medium">{e.who}</span>
              <span className="pl-num text-[11px] text-pleita-stone-2">{e.t}</span>
            </div>
            <p className="text-sm text-pleita-stone mt-0.5">{e.ev}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}

function CockpitChat() {
  return (
    <div className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden flex flex-col" style={{ minHeight: 480 }}>
      <header className="px-5 py-3 border-b border-pleita-line flex items-center gap-3">
        <div className="flex items-center gap-1">
          {["🔍", "🎯", "⚖️", "💰", "📋", "🎓"].map((e, i) => (
            <span key={i} className="size-7 rounded-full bg-surface-2 grid place-items-center text-sm -ml-2 first:ml-0 border-2 border-surface-card">{e}</span>
          ))}
        </div>
        <div>
          <div className="text-sm text-pleita-ink font-medium">Comitê · 6 agentes ouvindo</div>
          <div className="pl-num text-[11px] text-pleita-stone-2">Pergunte qualquer coisa sobre este edital</div>
        </div>
      </header>

      <div className="flex-1 p-5 space-y-4 overflow-y-auto bg-surface-2/30">
        <div className="flex justify-end">
          <div className="max-w-md rounded-2xl rounded-tr-md bg-pleita-ink text-pleita-paper px-4 py-2.5 text-sm">Resumo do edital em 3 frases, por favor.</div>
        </div>
        <div className="flex gap-3">
          <span className="size-8 rounded-full bg-pleita-lime/20 grid place-items-center text-base shrink-0">🎓</span>
          <div className="max-w-xl rounded-2xl rounded-tl-md bg-surface-card border border-pleita-line px-4 py-3 text-sm text-pleita-stone leading-relaxed">
            Pref. Campinas quer comprar equipamentos de TI (notebooks, monitores, periféricos) por até <span className="pl-num text-pleita-ink">R$ 1,24M</span>. O pregão é eletrônico, abre <span className="pl-num text-pleita-ink">21/mai 09h</span>, e exige atestado técnico. Sua empresa tem perfil pra ganhar — só precisa do balanço 2025 e impugnar uma cláusula restritiva antes.
          </div>
        </div>
        <div className="flex justify-end">
          <div className="max-w-md rounded-2xl rounded-tr-md bg-pleita-ink text-pleita-paper px-4 py-2.5 text-sm">Qual o preço-teto e quanto eu deveria cotar?</div>
        </div>
        <div className="flex gap-3">
          <span className="size-8 rounded-full bg-verdict-go/15 grid place-items-center text-base shrink-0">💰</span>
          <div className="max-w-xl rounded-2xl rounded-tl-md bg-surface-card border border-pleita-line px-4 py-3 text-sm text-pleita-stone leading-relaxed">
            Preço-teto: <span className="pl-num text-pleita-ink">R$ 2,40/un</span>. Mediana vencedora histórica do PNCP nesse segmento: <span className="pl-num text-pleita-ink">R$ 1,82/un</span>. Recomendo cotar a <span className="pl-num text-pleita-ink">R$ 1,78/un</span> — competitivo, margem +18%, e ainda tem espaço pra um lance de cobertura se precisar.
          </div>
        </div>
      </div>

      <footer className="p-3 border-t border-pleita-line flex items-center gap-2">
        <input placeholder="Pergunte qualquer coisa…" className="form-pl flex-1" />
        <button className="pl-num text-xs px-4 py-2 rounded-md bg-pleita-ink text-pleita-paper font-semibold">Enviar</button>
      </footer>
    </div>
  );
}

window.ScreenCockpit = ScreenCockpit;