/* ============================================================
   TELA · JORDÃO NO WHATSAPP
   ============================================================
   Duas metades:
     ESQUERDA · o WhatsApp do vendedor conversando com o número do
       Jordão IA. Não é rota do CRM · é o app do celular.
     DIREITA  · a página do negócio no CRM (/deals/[id]), aba
       Timeline, recebendo os registros AO VIVO enquanto o áudio é
       processado. É isso que prova que a atualização é instantânea.

   Fontes:
     src/lib/jordao-wa/          · pipeline, tools, transcrição
     src/app/(app)/deals/[id]/   · a página do negócio
     src/components/deal/timeline-panel.tsx · rótulos dos eventos
     src/lib/deal-events.ts      · o event log que a timeline lê

   O desenho do app do WhatsApp não vem do produto · é o contexto
   onde a conversa acontece. Registrado em missing-information.md.
   ============================================================ */

.tela[data-tela="jordao-wa"] {
  /* WhatsApp do celular */
  --zap-bg:#0b141a; --zap-head:#202c33; --zap-in:#202c33; --zap-out:#005c4b;
  --zap-ink:#e9edef; --zap-ink-2:#8696a0; --zap-green:#25d366;

  /* CRM · tokens do produto (globals.css tema claro) */
  --crm-bg:#FFFFFF; --crm-muted:#F5F5F5; --crm-line:#E5E5E5;
  --crm-ink:#0A0A0A; --crm-ink-2:#666666; --crm-ink-3:#A3A3A3;
  --crm-y:#FFD400; --crm-y-deep:#B89700;
  --crm-green:#16A34A; --crm-blue:#1D4ED8;
}

.jwa {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 31% 69%;
  background: var(--rm-black);
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
}
.jwa *, .jwa *::before, .jwa *::after { box-sizing: border-box; }

/* ── ESQUERDA · o celular ──────────────────────────────────────
   Fundo em degradê amarelo, de cima pra baixo: amarelo claro no
   topo até o amarelo oficial da LP embaixo (#F5C518). Pedido do
   Matheus em 04/08. O celular ficou mais alto pra ocupar melhor
   a faixa.
   ------------------------------------------------------------ */
.jwa-lado {
  display: grid; place-items: center;
  padding: 1.1cqw;
  background: linear-gradient(180deg, #FFF3C4 0%, #FFE47A 45%, #F5C518 100%);
}
.fone {
  /* Proporção 19,5:9 (altura:largura) · 23cqw de largura dão
     49,8cqw de altura · a faixa tem 54cqw úteis. */
  width: 23cqw;
  aspect-ratio: 9/19.5;
  background: var(--zap-bg);
  border: 0.4cqw solid #2b2b30;
  border-radius: 1.3cqw;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1.25cqw 3cqw rgba(90,60,0,.28), 0 0.31cqw 0.94cqw rgba(90,60,0,.18);
}
.fone-head {
  background: var(--zap-head);
  padding: 0.69cqw 0.81cqw;
  display: flex; align-items: center; gap: 0.56cqw;
  flex-shrink: 0;
}
.fone-head .av {
  width: 1.8cqw; height: 1.8cqw; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 0.09cqw solid var(--rm-yellow);
}
.fone-head .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fone-head .nm { display: block; font-size: 0.75cqw; font-weight: 600; color: var(--zap-ink); }
.fone-head .st { display: block; font-size: 0.58cqw; color: var(--zap-ink-2); }
.fone-body {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 0.81cqw 0.69cqw;
  display: flex; flex-direction: column; gap: 0.4cqw;
  background: var(--zap-bg);
}
.zap {
  max-width: 84%;
  padding: 0.4cqw 0.56cqw 0.28cqw;
  border-radius: 0.45cqw;
  font-size: 0.66cqw; line-height: 1.45;
  color: var(--zap-ink);
}
.zap.in  { background: var(--zap-in);  align-self: flex-start; border-top-left-radius: 0.125cqw; }
.zap.out { background: var(--zap-out); align-self: flex-end;   border-top-right-radius: 0.125cqw; }
.zap .h { display: block; text-align: right; font-size: 0.5cqw; color: rgba(233,237,239,.6); margin-top: 0.09cqw; }
.zap.audio { display: flex; align-items: center; gap: 0.4cqw; min-width: 10cqw; }
.zap.audio .play {
  width: 1.1cqw; height: 1.1cqw; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--zap-ink);
  display: grid; place-items: center; flex-shrink: 0;
}
.zap.audio .play svg { width: 0.56cqw; height: 0.56cqw; }
.zap.audio .onda { display: flex; align-items: flex-end; gap: 0.08cqw; height: 0.9cqw; flex: 1; }
.zap.audio .onda i { width: 0.11cqw; background: rgba(233,237,239,.55); display: block; border-radius: 999px; }
.zap.audio .dur { font-size: 0.55cqw; color: rgba(233,237,239,.7); flex-shrink: 0; }
.zap-transcricao {
  align-self: flex-end; max-width: 84%;
  font-size: 0.58cqw; line-height: 1.4;
  color: var(--zap-ink-2); font-style: italic;
  padding: 0 0.19cqw;
}
.fone-input {
  flex-shrink: 0; background: var(--zap-head);
  padding: 0.45cqw 0.56cqw;
  display: flex; align-items: center; gap: 0.45cqw;
}
.fone-input .campo {
  flex: 1; background: #2a3942; border-radius: 999px;
  padding: 0.34cqw 0.69cqw;
  font-size: 0.6cqw; color: var(--zap-ink-2);
}
.fone-input .mic {
  width: 1.35cqw; height: 1.35cqw; border-radius: 50%;
  background: var(--zap-green); color: #0b141a;
  display: grid; place-items: center; flex-shrink: 0;
}
.fone-input .mic svg { width: 0.72cqw; height: 0.72cqw; }

/* ── DIREITA · o CRM, com a moldura do app ─────────────────────
   Aprovado em 04/08: sidebar EXPANDIDA e menu APAGADO.

   O menu apagado é fiel: activeNavHref casa a rota com os href do
   menu (nav-items.ts:138) e /deals/[id] não é nenhum deles. No
   produto, abrir um negócio deixa o menu todo sem destaque.

   O topbar aqui é mais estreito que na vida real, onde ele
   atravessa a tela inteira · a metade esquerda é o celular. Os
   elementos são os reais, na ordem real · muda só o espaçamento.
   É um recorte da tela, não a tela inteira.
   ------------------------------------------------------------ */
.jwa-crm-wrap {
  position: relative;
  min-width: 0; overflow: hidden;
  border-left: 0.0625cqw solid #26262c;
  background: var(--crm-bg);
}
/* A moldura do app é posicionada dentro DESTA metade, não da tela
   inteira · por isso o override das regras de componentes.css. */
.jwa-crm-wrap .app-topbar { left: 0; right: 0; top: 0; }
.jwa-crm-wrap .app-sidebar { left: 0; top: 5.75cqw; bottom: 0; }
.jwa-crm-wrap .app-main { left: 13cqw; top: 5.75cqw; right: 0; bottom: 0; }

.crm {
  position: absolute; inset: 0;
  background: var(--crm-bg);
  color: var(--crm-ink);
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}

/* Cabeçalho do negócio · deal-header.tsx */
.crm-head {
  padding: 0.81cqw 1.1cqw 0.63cqw;
  border-bottom: 0.0625cqw solid var(--crm-line);
  flex-shrink: 0;
}
.crm-head .linha1 { display: flex; align-items: baseline; gap: 0.75cqw; }
.crm-head h1 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.13cqw; font-weight: 700; letter-spacing: -0.02em;
}
.crm-head .valor {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.06cqw; font-weight: 700; color: var(--crm-ink);
}
.crm-head .sp { flex: 1; }
.crm-head .meta {
  display: flex; align-items: center; gap: 0.5cqw;
  font-size: 0.72cqw; color: var(--crm-ink-2); margin-top: 0.25cqw;
}
.crm-badge {
  background: var(--crm-y); color: var(--crm-ink);
  font-size: 0.63cqw; font-weight: 700;
  border-radius: 0.31cqw; padding: 0.16cqw 0.5cqw;
}

/* Barra de estágios · stage-progress-bar.tsx */
.crm-etapas { display: flex; gap: 0.19cqw; margin-top: 0.69cqw; }
.crm-etapas span {
  flex: 1; height: 0.31cqw; border-radius: 999px;
  background: var(--crm-line);
}
.crm-etapas span.feito { background: var(--crm-y); }

/* Abas · page.tsx */
.crm-abas {
  display: flex; gap: 0.88cqw;
  padding: 0 1.1cqw;
  border-bottom: 0.0625cqw solid var(--crm-line);
  flex-shrink: 0;
}
.crm-abas span {
  padding: 0.63cqw 0;
  font-size: 0.78cqw; font-weight: 500; color: var(--crm-ink-2);
  border-bottom: 0.125cqw solid transparent;
}
.crm-abas span.ativa {
  color: var(--crm-ink); font-weight: 700;
  border-bottom-color: var(--crm-y);
}

/* Timeline · timeline-panel.tsx */
.crm-timeline { flex: 1; min-height: 0; overflow: hidden; padding: 0.81cqw 1.1cqw; }
.crm-grupo-lbl {
  font-size: 0.66cqw; font-weight: 700; color: var(--crm-ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.63cqw;
}
.crm-ev {
  display: flex; gap: 0.75cqw;
  padding-bottom: 0.94cqw;
  position: relative;
}
/* fio vertical ligando os eventos */
.crm-ev::before {
  content: ""; position: absolute;
  left: 0.84cqw; top: 1.9cqw; bottom: 0;
  width: 0.0625cqw; background: var(--crm-line);
}
.crm-ev:last-child::before { display: none; }
.crm-ev .ic {
  width: 1.75cqw; height: 1.75cqw; border-radius: 0.5cqw;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--crm-muted); color: var(--crm-ink-2);
  z-index: 1;
}
.crm-ev .ic svg { width: 0.88cqw; height: 0.88cqw; }
.crm-ev .ic.nota  { background: rgba(255,212,0,.18); color: var(--crm-y-deep); }
.crm-ev .ic.ativ  { background: rgba(29,78,216,.10); color: var(--crm-blue); }
.crm-ev .ic.feito { background: rgba(22,163,74,.12); color: var(--crm-green); }
.crm-ev .corpo { flex: 1; min-width: 0; padding-top: 0.09cqw; }
.crm-ev .cab {
  display: flex; align-items: center; gap: 0.44cqw;
  font-size: 0.66cqw; color: var(--crm-ink-3);
}
.crm-ev .cab .lbl {
  font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--crm-ink);
}
.crm-ev .cab .ator {
  display: inline-flex; align-items: center; gap: 0.19cqw;
  color: var(--crm-y-deep); font-weight: 600;
}
.crm-ev .cab .ator svg { width: 0.6cqw; height: 0.6cqw; }
.crm-ev .txt { font-size: 0.81cqw; margin-top: 0.19cqw; line-height: 1.4; }
.crm-ev .sub { font-size: 0.7cqw; color: var(--crm-ink-2); margin-top: 0.09cqw; }

/* Marca de "acabou de entrar" · só na demonstração, some sozinha */
.crm-ev.novo .ic { box-shadow: 0 0 0 0.19cqw rgba(255,212,0,.35); }

/* ── DEMO ──────────────────────────────────────────────────── */
[data-estado]:not(.mostrar) { display: none; }
/* Os elementos que entram ao longo dos 3 turnos usam data-desde ·
   o script marca .mostrar a partir do passo indicado. */
[data-desde]:not(.mostrar) { display: none; }
.oculto { display: none !important; }
.jwa-entra { animation: mt-card-in 0.24s ease-out both; }

/* A homepage usa a mesma peça, focada nos dois turnos pedidos na seção:
   registro da visita e leitura da meta. A LP de funcionalidades preserva
   seus quatro turnos quando o parâmetro `homepage` não está presente. */
html.homepage .jwa-intro,
html.homepage .jwa-turno-extra { display: none !important; }