/* ProspecteiBrasil · módulo ASSISTENTE — balão flutuante + conversa (painel e página de vendas).
   Painel herda o design "Cadastro"; landing conserva "Porcelana": teclas claras e ação azul,
   sem glow, sem mascote. Tudo com prefixo .as- e tokens próprios em .as-raiz: o mesmo arquivo serve na plataforma
   (fonte Inter) e na landing (fonte da landing, herdada), sem depender de .btn, .cartao nem de nenhuma classe do núcleo. */
.as-raiz {
  --as-linho: #ECE8E1; --as-porcelana: #FBFAF7; --as-marfim: #F4F1EB; --as-fundo: #F3F0EA; --as-campo: #F2EEE7;
  --as-cartao: #FFFFFF; --as-cartao-borda: #EEE9E1;
  --as-tinta: #17150F; --as-tinta-2: #55504A; --as-tinta-3: #6E675B;
  --as-filete: #E5DFD5; --as-filete-forte: #D2C9BB;
  --as-azul: #0755DE; --as-azul-hover: #0649C4; --as-azul-lip: #043FA8; --as-azul-claro: #EBF1FC; --as-azul-borda: #C3D5F6;
  --as-verde: #1D6B3E; --as-verde-claro: #E8F2EA; --as-marca-verde: #549B3F;
  --as-ambar: #85520A; --as-ambar-claro: #FAF0DC; --as-ambar-borda: #EFD9AE;
  --as-escura: #17150F; --as-led: #FFD400;
  --as-tecla-face: linear-gradient(#FFFFFF, #F7F4EE); --as-tecla-borda: #D9D1C4; --as-tecla-lip: #D3C9B9;
  --as-sombra: 0 2px 4px rgba(40, 30, 15, .06), 0 18px 40px -16px rgba(40, 30, 15, .28);
  --as-mola: cubic-bezier(.3, .7, .4, 1);
  --as-rodape: 20px;             /* distância do balão até a borda de baixo */
  font-family: inherit; font-size: 14px; line-height: 1.45;
  color: var(--as-tinta);
  font-variant-numeric: tabular-nums;
}
.as-raiz[data-contexto=painel] {
  --as-porcelana: var(--sup); --as-fundo: var(--fundo); --as-campo: var(--sup-2);
  --as-tinta: var(--tinta); --as-tinta-2: var(--tinta-2); --as-tinta-3: var(--tinta-3);
  --as-filete: var(--linha); --as-filete-forte: var(--linha-forte); --as-cartao-borda: var(--linha);
  --as-azul: var(--acao); --as-azul-hover: var(--acao-hover); --as-azul-lip: var(--acao-lip);
  --as-azul-claro: var(--acao-claro); --as-azul-borda: var(--acao-borda);
  --as-tecla-face: var(--sup); --as-tecla-borda: var(--linha-forte); --as-tecla-lip: var(--linha-lip);
  --as-sombra: var(--sombra-flutua);
}
.as-raiz[data-contexto=painel] .as-sobre { text-transform: none; letter-spacing: 0; color: var(--as-tinta-3); font-size: 12px; }
.as-raiz[data-contexto=painel] .as-tecla { border-radius: 8px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(17,24,32,.06); }
.as-amostra { margin: 10px 0; }
.as-amostra > p { margin: 0 0 6px; font-size: 12px; color: var(--as-tinta-3); }
.as-amostra ul { list-style: none; margin: 0; padding: 0; }
.as-amostra li { padding: 8px 0; border-top: 1px solid var(--as-filete); overflow-wrap: anywhere; }
.as-amostra strong { display: block; font-size: 13px; font-weight: 600; }
.as-amostra span { display: block; margin-top: 2px; font-size: 12px; color: var(--as-tinta-3); }
.as-raiz *, .as-raiz *::before, .as-raiz *::after { box-sizing: border-box; }
.as-raiz [hidden] { display: none !important; }
:where(.as-raiz) button { font: inherit; }   /* :where = sem peso: o tamanho de cada tecla (.as-chip, .as-tecla) vale */

/* ------------------------------------------------------------------ teclas (receita Porcelana, versão própria) */
.as-tecla {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--as-tecla-borda); background: var(--as-tecla-face); color: var(--as-tinta);
  font-size: 13px; font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 #FFF, 0 3px 0 var(--as-tecla-lip), 0 4px 10px -3px rgba(40, 30, 15, .20);
  transition: transform 90ms var(--as-mola), box-shadow 90ms var(--as-mola), background-color 90ms;
}
.as-tecla:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #FFF, 0 4px 0 var(--as-tecla-lip), 0 8px 14px -5px rgba(40, 30, 15, .24); }
.as-tecla:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(40, 30, 15, .20); }
.as-tecla.prim { background: var(--as-azul); border-color: var(--as-azul); color: #FFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 3px 0 var(--as-azul-lip), 0 5px 12px -3px rgba(20, 24, 40, .30); }
.as-tecla.prim:hover { background: var(--as-azul-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 4px 0 var(--as-azul-lip), 0 8px 16px -4px rgba(20, 24, 40, .32); }
.as-tecla.prim:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28); }
.as-tecla.assinar { background: var(--as-escura); border-color: var(--as-escura); color: #FFF; padding: 0 16px 0 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 #000, 0 5px 12px -3px rgba(20, 20, 20, .35); }
.as-tecla.assinar:hover { background: #26231C; }
.as-led { width: 8px; height: 8px; border-radius: 50%; background: var(--as-led); box-shadow: 0 0 0 2px rgba(255, 212, 0, .25); flex: none; }
.as-tecla:focus-visible, .as-chip:focus-visible, .as-link:focus-visible, .as-lancador:focus-visible,
.as-x:focus-visible, .as-aval button:focus-visible, .as-campo:focus-visible, .as-enviar:focus-visible,
.as-bairros button:focus-visible { outline: 2px solid var(--as-azul); outline-offset: 2px; }
.as-link { background: none; border: 0; padding: 4px 2px; color: var(--as-azul); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; }
.as-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ balão (lançador) */
.as-lancador {
  position: fixed; right: 20px; bottom: var(--as-rodape); z-index: 1200;
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  border: 1px solid var(--as-azul); background: var(--as-azul); color: #FFF; font-size: 14px; font-weight: 650;
  cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 3px 0 var(--as-azul-lip), 0 10px 24px -8px rgba(20, 24, 40, .45);
  transition: transform 90ms var(--as-mola), box-shadow 90ms var(--as-mola), right 220ms var(--as-mola);
}
.as-lancador:hover { background: var(--as-azul-hover); transform: translateY(-1px); }
.as-lancador:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28); }
.as-lancador svg { width: 20px; height: 20px; flex: none; }
.as-lancador .as-ponto { position: absolute; top: 6px; left: 34px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--as-marca-verde); box-shadow: 0 0 0 2px var(--as-azul); }
.as-raiz.aberto .as-lancador { display: none; }
.as-raiz.com-ficha .as-lancador { right: 498px; }
/* no mapa (tela larga) o cartão de contagem ocupa o canto de baixo à direita: o balão fica ao lado dele e não cobre
   o botão "Ver empresas" */
@media (min-width: 900px) {
  body[data-tela="buscar"] .as-lancador, body[data-tela="buscar"] .as-dica { right: 336px; }
}

/* dica proativa (uma vez por sessão) */
.as-dica {
  position: fixed; right: 20px; bottom: calc(var(--as-rodape) + 60px); z-index: 1200; width: 280px;
  background: var(--as-cartao); border: 1px solid var(--as-filete); border-radius: 12px; box-shadow: var(--as-sombra);
  padding: 12px 36px 12px 14px; font-size: 13px; line-height: 1.45; color: var(--as-tinta-2);
  animation: as-entra 220ms var(--as-mola);
}
.as-dica b { color: var(--as-tinta); }
.as-dica button.as-dica-abrir { display: block; margin-top: 6px; padding: 0; background: none; border: 0; color: var(--as-azul);
  font-weight: 650; font-size: 13px; cursor: pointer; }
.as-dica-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: var(--as-tinta-3); cursor: pointer; font-size: 18px; line-height: 1; }
.as-dica-x:hover { background: var(--as-campo); }

/* ------------------------------------------------------------------ painel da conversa */
.as-painel {
  position: fixed; right: 20px; bottom: var(--as-rodape); z-index: 1400; width: 400px;
  height: min(660px, calc(100dvh - 40px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--as-porcelana); border: 1px solid var(--as-filete); border-radius: 16px; box-shadow: var(--as-sombra);
  animation: as-entra 220ms var(--as-mola);
}
.as-raiz.com-ficha .as-painel { right: 498px; }
@keyframes as-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.as-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px;
  border-bottom: 1px solid var(--as-filete); background: var(--as-porcelana); }
.as-marca { width: 30px; height: 30px; flex: none; border-radius: 50%; }
.as-tit { flex: 1; min-width: 0; }
.as-sobre { margin: 0; font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--as-azul); }
.as-tit h2 { margin: 1px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--as-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--as-tinta-2); cursor: pointer; }
.as-x:hover { background: var(--as-campo); color: var(--as-tinta); }
.as-x svg { width: 18px; height: 18px; }

.as-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px;
  background: var(--as-fundo); display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.as-m { max-width: 100%; font-size: 13.5px; line-height: 1.5; animation: as-entra 220ms var(--as-mola); }
.as-m.as-eu { align-self: flex-end; max-width: 86%; background: var(--as-azul-claro); border: 1px solid var(--as-azul-borda);
  color: var(--as-tinta); border-radius: 12px 12px 4px 12px; padding: 8px 12px; overflow-wrap: anywhere; }
.as-m.as-ele { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.as-txt { background: var(--as-cartao); border: 1px solid var(--as-cartao-borda); border-radius: 4px 12px 12px 12px;
  padding: 10px 12px; color: var(--as-tinta); overflow-wrap: anywhere; }
.as-txt strong { font-weight: 650; }
.as-txt a { color: var(--as-azul); }
.as-nota { font-size: 12.5px; color: var(--as-tinta-3); padding: 0 2px; overflow-wrap: anywhere; }
.as-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* digitando… */
.as-digitando { display: inline-flex; gap: 4px; align-self: flex-start; background: var(--as-cartao);
  border: 1px solid var(--as-cartao-borda); border-radius: 4px 12px 12px 12px; padding: 12px 14px; }
.as-digitando span { width: 6px; height: 6px; border-radius: 50%; background: var(--as-tinta-3); animation: as-pulo 1s infinite ease-in-out; }
.as-digitando span:nth-child(2) { animation-delay: .15s; }
.as-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes as-pulo { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* joinha */
.as-aval { display: flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--as-tinta-3); padding: 0 2px; }
.as-aval button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--as-tinta-3); cursor: pointer; }
.as-aval button:hover { background: var(--as-campo); color: var(--as-tinta); }
.as-aval button[aria-pressed="true"] { color: var(--as-azul); background: var(--as-azul-claro); }
.as-aval svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ cartões de ideia */
.as-ideias { display: flex; flex-direction: column; gap: 10px; }
.as-card { background: var(--as-cartao); border: 1px solid var(--as-cartao-borda); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.as-card h3 { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.as-porque { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--as-tinta-2); }
.as-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.as-num b { font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--as-tinta); }
.as-num > span { font-size: 13px; font-weight: 500; color: var(--as-tinta-2); }
.as-whats { display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; color: var(--as-tinta-2); }
.as-whats i { width: 6px; height: 6px; border-radius: 50%; background: var(--as-verde); }
.as-etqs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.as-etqs li { font-size: 11.5px; font-weight: 550; color: #4B463F; background: var(--as-campo); border: 1px solid #E2DBCF;
  border-radius: 6px; padding: 2px 7px; line-height: 1.5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-bairros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--as-tinta-3); }
.as-bairros button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--as-tecla-borda); background: var(--as-tecla-face); color: var(--as-tinta); font-size: 12px; font-weight: 600;
  cursor: pointer; box-shadow: inset 0 1px 0 #FFF, 0 2px 0 var(--as-tecla-lip); }
.as-bairros button b { font-weight: 500; color: var(--as-tinta-3); }
.as-bairros button:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(40, 30, 15, .2); }
.as-card-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.as-abordagem { background: var(--as-marfim); border: 1px dashed var(--as-filete-forte); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--as-tinta-2); }
.as-abordagem p { margin: 0 0 4px; }

/* ------------------------------------------------------------------ convite de assinatura (3ª ideia) */
.as-convite { background: var(--as-cartao); border: 1px solid var(--as-filete-forte); border-radius: 12px; overflow: hidden; }
.as-previa { position: relative; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 8px;
  background: var(--as-marfim); border-bottom: 1px solid var(--as-filete); }
.as-previa .as-fantasma { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--as-cartao); border: 1px solid var(--as-cartao-borda); border-radius: 10px; filter: blur(2.5px); user-select: none; }
.as-fantasma i { display: block; height: 10px; border-radius: 4px; background: #DDD6CA; }
.as-fantasma i.a { width: 58%; } .as-fantasma i.b { width: 18%; height: 16px; background: #CFC6B8; }
.as-previa::after { content: ""; position: absolute; inset: 0; background: rgba(244, 241, 235, .55); }
.as-cadeado { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center;
  gap: 6px; background: var(--as-escura); color: #FFF; font-size: 12px; font-weight: 650; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.as-cadeado svg { width: 13px; height: 13px; }
.as-convite-corpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.as-convite-corpo p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.as-convite-corpo .as-det { font-size: 12.5px; color: var(--as-tinta-2); }

/* ------------------------------------------------------------------ sugestões, campo e rodapé */
.as-sug { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 4px; background: var(--as-fundo);
  max-height: 76px; overflow: hidden; }
.as-chip { height: 30px; max-width: 100%; padding: 0 12px; border-radius: 999px; border: 1px solid var(--as-tecla-borda);
  background: var(--as-tecla-face); color: var(--as-tinta); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 #FFF, 0 2px 0 var(--as-tecla-lip); transition: transform 90ms var(--as-mola); }
.as-chip:hover { transform: translateY(-1px); }
.as-chip:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(40, 30, 15, .2); }
.as-form { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--as-porcelana);
  border-top: 1px solid var(--as-filete); }
.as-campo { flex: 1; min-width: 0; min-height: 40px; max-height: 120px; resize: none; padding: 10px 12px; border-radius: 10px;
  border: 1px solid transparent; background: var(--as-campo); color: var(--as-tinta); font: inherit; font-size: 14px; line-height: 1.4; }
.as-campo::placeholder { color: var(--as-tinta-3); }
.as-campo:hover { background: #EFEBE3; }
.as-campo:focus { outline: none; background: #FFF; border-color: var(--as-azul); box-shadow: 0 0 0 4px rgba(7, 85, 222, .14); }
.as-enviar { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--as-azul);
  background: var(--as-azul); color: #FFF; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 0 var(--as-azul-lip); }
.as-enviar:hover { background: var(--as-azul-hover); }
.as-enviar:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28); }
.as-enviar:disabled { background: #F2EEE7; border-color: #E5DFD5; color: #A39B8F; box-shadow: none; cursor: not-allowed; transform: none; }
.as-enviar svg { width: 18px; height: 18px; }
.as-pe { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 14px 10px;
  background: var(--as-porcelana); font-size: 11.5px; color: var(--as-tinta-3); }
.as-cota { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.as-pips { display: inline-flex; gap: 3px; }
.as-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--as-azul); }
.as-pips i.usada { background: transparent; box-shadow: inset 0 0 0 1.5px var(--as-filete-forte); }
.as-pe-dir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* entrada embutida (landing): caixa "O que você vende?" que abre a conversa */
.as-embutido { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.as-embutido form { display: flex; gap: 8px; }
.as-embutido .as-campo { min-height: 48px; font-size: 15px; background: #FFF; border-color: var(--as-filete-forte); }
.as-embutido .as-tecla.prim { min-height: 48px; padding: 0 18px; font-size: 14px; }
.as-embutido .as-sug-emb { display: flex; flex-wrap: wrap; gap: 6px; }

/* realce "Mostrar onde fica" */
.as-foco { position: fixed; z-index: 2400; pointer-events: none; border-radius: 12px; border: 3px solid var(--as-azul);
  box-shadow: 0 0 0 4px rgba(7, 85, 222, .18); animation: as-foco 1s var(--as-mola) 3; }
@keyframes as-foco { 0%, 100% { box-shadow: 0 0 0 4px rgba(7, 85, 222, .18); } 50% { box-shadow: 0 0 0 10px rgba(7, 85, 222, .10); } }

/* ------------------------------------------------------------------ celular (< 900 px): conversa em tela cheia */
@media (max-width: 899px) {
  .as-raiz { --as-rodape: calc(76px + env(safe-area-inset-bottom)); }   /* acima da barra de 64 px do painel */
  .as-raiz[data-contexto="lp"] { --as-rodape: calc(84px + env(safe-area-inset-bottom)); }
  .as-lancador { right: 12px; height: 52px; width: 52px; padding: 0; justify-content: center; }
  .as-lancador .as-lancador-txt { display: none; }
  .as-lancador .as-ponto { top: 7px; left: auto; right: 9px; }
  .as-raiz.com-ficha .as-lancador { display: none; }
  .as-dica { right: 12px; left: 12px; width: auto; bottom: calc(var(--as-rodape) + 64px); }
  .as-painel, .as-raiz.com-ficha .as-painel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0;
    z-index: 1700; animation: none; }
  .as-topo { padding-top: calc(14px + env(safe-area-inset-top)); }
  .as-form { padding-bottom: 10px; }
  .as-pe { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .as-pe-dir { display: none; }
  .as-embutido form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .as-raiz *, .as-raiz *::before, .as-raiz *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .as-foco { animation: none; }
}