/* ============================================================
   TELA · WHATSAPP (/inbox)
   ============================================================
   Conversão de src/app/(app)/inbox/whatsapp.css (1.762 linhas).
   Medidas em cqw, escala de referência 1600px (1cqw = 16px).
   Regras marcadas /* DEMO */ /* não existem no produto.
   ============================================================ */

/* Tokens locais do inbox · whatsapp.css:9-21 */
.tela[data-tela="whatsapp"] {
  --wa-success: #10b981;   /* hsl(160 84% 39%) */
  --wa-warning: #f5a623;   /* hsl(37 92% 55%)  */
  --wa-danger:  #e5533c;   /* hsl(0 78% 55%)   */
  --wa-pink:    #f7d0d5;
  --wa-lilac:   #ded4e8;
  --wa-turquoise: #b8e8e2;
  --wa-beige:   #eee3cd;
  --wa-cream:   #f6f5f1;
  --wa-cream-soft: #faf9f5;
  --wa-ink:     #1a1a16;
  --wa-border:  #e5e5e5;   /* hsl(0 0% 90%) · globals.css */
  --wa-mute:    #666666;   /* hsl(0 0% 40%) */
  --wa-out:     #d4f4d9;   /* whatsapp.css:924 */
}

/* Grid de 3 colunas · whatsapp.css:26 · 280 | 1fr | 380 */
.wa-page {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 17.5cqw minmax(0, 1fr) 23.75cqw;
  background: var(--wa-cream);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8125cqw;
  color: #0a0a0a;
  overflow: hidden;
}
.wa-page *, .wa-page *::before, .wa-page *::after { box-sizing: border-box; }
.wa-page button { font-family: inherit; cursor: pointer; }

/* ── COLUNA 1 · lista de conversas ─────────────────────────── */
.wa-left {
  background: #fff;
  border-right: 0.0625cqw solid var(--wa-border);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.wa-left-head {
  padding: 0.875cqw 1cqw 0.625cqw;
  display: flex; align-items: center; gap: 0.625cqw;
  border-bottom: 0.0625cqw solid var(--wa-border);
}
.wa-brand {
  width: 1.75cqw; height: 1.75cqw;
  border-radius: 0.5cqw;
  background: var(--rm-yellow);
  color: var(--wa-ink);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.wa-brand svg { width: 1cqw; height: 1cqw; }
.wa-brand-text {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700; font-size: 0.94cqw;
  letter-spacing: -0.02em; flex: 1;
}
.wa-live {
  display: inline-flex; align-items: center; gap: 0.25cqw;
  font-size: 0.625cqw; font-weight: 700;
  color: var(--wa-success);
}
.wa-live .dot {
  width: 0.375cqw; height: 0.375cqw; border-radius: 50%;
  background: var(--wa-success);
  animation: wa-dot-pulse 2s ease-in-out infinite;
}
.wa-search {
  margin: 0.625cqw 1cqw;
  display: flex; align-items: center; gap: 0.44cqw;
  background: var(--wa-cream);
  border: 0.0625cqw solid var(--wa-border);
  border-radius: 0.5cqw;
  padding: 0.44cqw 0.625cqw;
  font-size: 0.72cqw; color: var(--wa-mute);
}
.wa-search svg { width: 0.75cqw; height: 0.75cqw; }
.wa-list { flex: 1; overflow-y: auto; }
.wa-item {
  display: flex; gap: 0.625cqw;
  padding: 0.75cqw 1cqw;
  border-bottom: 0.0625cqw solid #f2f2f0;
  cursor: pointer;
  transition: background 0.12s;
}
.wa-item:hover { background: var(--wa-cream-soft); }
.wa-item.ativo { background: var(--wa-cream); box-shadow: inset 0.19cqw 0 0 var(--rm-yellow); }
.wa-item .av {
  width: 2.25cqw; height: 2.25cqw; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.75cqw; font-weight: 700; color: var(--wa-ink);
  flex-shrink: 0;
}
.wa-item .av.c-lilac     { background: var(--wa-lilac); }
.wa-item .av.c-turquoise { background: var(--wa-turquoise); }
.wa-item .av.c-beige     { background: var(--wa-beige); }
.wa-item .av.c-pink      { background: var(--wa-pink); }
/* display:block porque aqui são <span> dentro de <span> (no produto são
   div) · sem isso nome e prévia colam na mesma linha */
.wa-item .corpo { flex: 1; min-width: 0; display: block; }
.wa-item .nome { display: block; font-size: 0.8125cqw; font-weight: 700; }
.wa-item .previa {
  display: block;
  font-size: 0.72cqw; color: var(--wa-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 0.06cqw;
}
.wa-item .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25cqw; flex-shrink: 0; }
.wa-item .hora { font-size: 0.625cqw; color: var(--wa-mute); }
.wa-item .naolidas {
  background: var(--rm-yellow); color: var(--wa-ink);
  font-size: 0.625cqw; font-weight: 700;
  border-radius: 999px; padding: 0.06cqw 0.375cqw; min-width: 1cqw; text-align: center;
}

/* ── COLUNA 2 · chat ───────────────────────────────────────── */
.wa-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wa-chat-head {
  background: #fff;
  border-bottom: 0.0625cqw solid var(--wa-border);
  padding: 0.625cqw 1.25cqw;
  display: flex; align-items: center; gap: 0.75cqw;
  flex-shrink: 0;
}
.wa-chat-head .avatar {
  width: 2.25cqw; height: 2.25cqw; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.78cqw; font-weight: 700; color: var(--wa-ink);
  flex-shrink: 0;
}
.wa-chat-head .avatar.c-lilac { background: var(--wa-lilac); }
.wa-chat-head .info { flex: 1; min-width: 0; }
.wa-chat-head .info h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.94cqw; font-weight: 700; letter-spacing: -0.02em;
}
.wa-chat-head .info .meta {
  display: flex; align-items: center; gap: 0.375cqw;
  font-size: 0.688cqw; color: var(--wa-mute); margin-top: 0.06cqw;
}
.wa-chat-head .info .meta .online { color: var(--wa-success); font-weight: 600; }
.wa-chat-head .info .meta .pulse {
  width: 0.31cqw; height: 0.31cqw; border-radius: 50%;
  background: var(--wa-success);
  animation: wa-dot-pulse 2s ease-in-out infinite;
}
.wa-chat-head .actions { display: flex; gap: 0.375cqw; }
.wa-chat-head .actions button {
  width: 1.75cqw; height: 1.75cqw; border-radius: 0.44cqw;
  border: 0.0625cqw solid var(--wa-border); background: #fff;
  color: var(--wa-mute);
  display: grid; place-items: center;
  transition: background 0.12s, color 0.12s;
}
.wa-chat-head .actions button:hover { background: var(--wa-cream); color: var(--wa-ink); }
.wa-chat-head .actions svg { width: 0.875cqw; height: 0.875cqw; }

/* Corpo do chat · o pontilhado é do produto (whatsapp.css:873-879) */
.wa-chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 1.125cqw 1.75cqw;
  display: flex; flex-direction: column; gap: 0.5cqw;
  background-image: radial-gradient(circle, rgba(102,102,102,.06) 0.06cqw, transparent 0.06cqw);
  background-size: 1.375cqw 1.375cqw;
  background-color: var(--wa-cream);
}
.wa-day-pill {
  align-self: center;
  font-size: 0.625cqw; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wa-mute); background: #fff;
  padding: 0.25cqw 0.75cqw; border-radius: 999px;
  margin: 0.375cqw 0;
  box-shadow: 0 0.06cqw 0.19cqw rgba(0,0,0,.04);
}
.wa-bubble {
  max-width: 70%;
  padding: 0.563cqw 0.875cqw 0.5cqw;
  border-radius: 0.875cqw;
  font-size: 0.844cqw; line-height: 1.45;
  position: relative;
}
.wa-bubble .author {
  font-size: 0.625cqw; font-weight: 700; letter-spacing: 0.04em;
  color: var(--rm-yellow-700); margin-bottom: 0.125cqw;
}
.wa-bubble.in {
  background: #fff; color: #0a0a0a;
  border-bottom-left-radius: 0.25cqw;
  align-self: flex-start;
  box-shadow: 0 0.06cqw 0.125cqw rgba(0,0,0,.05);
}
.wa-bubble.out {
  background: var(--wa-out); color: var(--wa-ink);
  border-bottom-right-radius: 0.25cqw;
  align-self: flex-end;
}
.wa-bubble .time { font-size: 0.625cqw; color: var(--wa-mute); margin-left: 0.625cqw; }
.wa-bubble.out .time { color: #4a6e3a; }
/* Bolha destacada pela IA · whatsapp.css:938 */
.wa-bubble.ai-highlight { animation: wa-ai-pulse 2.4s ease-in-out infinite; }

.wa-input-area {
  flex-shrink: 0;
  background: #fff;
  border-top: 0.0625cqw solid var(--wa-border);
  padding: 0.75cqw 1.25cqw;
  display: flex; align-items: center; gap: 0.625cqw;
}
.wa-input-area .campo {
  flex: 1;
  background: var(--wa-cream);
  border: 0.0625cqw solid var(--wa-border);
  border-radius: 0.75cqw;
  padding: 0.563cqw 0.875cqw;
  font-size: 0.8125cqw; color: var(--wa-mute);
}
.wa-input-area .env {
  width: 2.125cqw; height: 2.125cqw; border-radius: 0.563cqw;
  background: var(--rm-yellow); color: var(--wa-ink);
  border: 0; display: grid; place-items: center; flex-shrink: 0;
}
.wa-input-area .env svg { width: 0.875cqw; height: 0.875cqw; }

/* ── COLUNA 3 · copiloto ───────────────────────────────────── */
.wa-right {
  background: #fff;
  border-left: 0.0625cqw solid var(--wa-border);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow-y: auto;
}
.wa-cp-head {
  padding: 0.875cqw 1cqw;
  border-bottom: 0.0625cqw solid var(--wa-border);
  display: flex; align-items: center; gap: 0.5cqw;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.875cqw; font-weight: 700;
}
.wa-cp-head svg { width: 0.94cqw; height: 0.94cqw; color: var(--rm-yellow-700); }

/* 3 cards de sinais · ai-pane.tsx:178-204 · Temperatura, Risco, Intenção */
.wa-cp-signals { padding: 0.875cqw 1cqw; display: flex; flex-direction: column; gap: 0.5cqw; }
.wa-sig {
  background: var(--wa-cream-soft);
  border: 0.0625cqw solid var(--wa-border);
  border-radius: 0.625cqw;
  padding: 0.563cqw 0.688cqw;
}
.wa-sig .lbl {
  display: flex; align-items: center; gap: 0.25cqw;
  font-size: 0.594cqw; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wa-mute);
}
.wa-sig .lbl svg { width: 0.563cqw; height: 0.563cqw; }
.wa-sig .val { font-size: 0.938cqw; font-weight: 700; margin-top: 0.19cqw; }
.wa-sig .val.tight { font-size: 0.78cqw; line-height: 1.3; }
.wa-sig .val.quente { color: var(--wa-danger); }
.wa-sig .val.baixo  { color: var(--wa-success); }
.wa-sig .note { font-size: 0.625cqw; color: var(--wa-mute); margin-top: 0.125cqw; }

/* HERO da resposta sugerida em 3 tons · ai-pane.tsx:69 */
.wa-cp-hero {
  margin: 0 1cqw 0.875cqw;
  border: 0.094cqw solid var(--rm-yellow);
  border-radius: 0.75cqw;
  background: #fffdf2;
  overflow: hidden;
}
.wa-cp-hero .cab {
  display: flex; align-items: center; gap: 0.375cqw;
  padding: 0.5cqw 0.688cqw;
  background: var(--rm-yellow);
  color: var(--wa-ink);
  font-size: 0.625cqw; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wa-cp-hero .cab svg { width: 0.688cqw; height: 0.688cqw; }
.wa-cp-hero .texto { padding: 0.688cqw; font-size: 0.8125cqw; line-height: 1.5; }
.wa-tons { display: flex; gap: 0.31cqw; padding: 0 0.688cqw 0.688cqw; }
.wa-tom {
  flex: 1;
  border: 0.0625cqw solid var(--wa-border);
  background: #fff; color: var(--wa-mute);
  border-radius: 999px;
  padding: 0.31cqw 0;
  font-size: 0.688cqw; font-weight: 600;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.wa-tom:hover { border-color: var(--rm-yellow); color: var(--wa-ink); }
.wa-tom.ativo { background: var(--rm-yellow); border-color: var(--rm-yellow); color: var(--wa-ink); }
.wa-cp-acoes { display: flex; flex-direction: column; gap: 0.375cqw; padding: 0 1cqw 1cqw; }

/* Bloco "negócio atualizado pela IA" */
.wa-deal {
  margin: 0 1cqw 0.875cqw;
  border: 0.0625cqw solid var(--wa-border);
  border-radius: 0.625cqw;
  overflow: hidden;
}
.wa-deal .cab {
  padding: 0.5cqw 0.688cqw;
  background: var(--wa-cream-soft);
  border-bottom: 0.0625cqw solid var(--wa-border);
  font-size: 0.625cqw; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--wa-mute);
}
.wa-deal .linha {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5cqw 0.688cqw;
  font-size: 0.75cqw;
  border-bottom: 0.0625cqw solid #f2f2f0;
}
.wa-deal .linha:last-child { border-bottom: 0; }
.wa-deal .linha .k { color: var(--wa-mute); }
.wa-deal .linha .v { font-weight: 700; }
.wa-deal .linha .v.novo { color: var(--wa-success); }
.wa-chip-ok {
  display: inline-flex; align-items: center; gap: 0.25cqw;
  background: rgba(16,185,129,.12); color: var(--wa-success);
  font-size: 0.656cqw; font-weight: 700;
  border-radius: 999px; padding: 0.19cqw 0.5cqw;
}
.wa-chip-ok svg { width: 0.625cqw; height: 0.625cqw; }

.wa-vazio {
  display: grid; place-items: center; height: 100%;
  padding: 1.5cqw; text-align: center;
  color: var(--wa-mute); font-size: 0.875cqw;
}

/* ── DEMO · troca de estado ────────────────────────────────── */
[data-estado]:not(.mostrar) { display: none; }
.oculto { display: none !important; }

/* Revelação do bloco que a IA preencheu · usa a entrada de card do
   produto (mt-card-in, 0.22s ease-out) */
.wa-revela { animation: mt-card-in 0.22s ease-out both; }