/* ATENDIMENTO NA PÁGINA — peça solta, entra em qualquer matriz.
   FONTE ÚNICA: sites/ferramentas-edicao/atendimento/atendimento.css (cópia em site = gerada).
   Requisitos W-01 a W-08 do kit comercial parte 3.
   Herda os tokens do site hospedeiro; cai nos valores abaixo se não houver. */

.at{
  --at-canvas:var(--panel,#1E1813);
  --at-borda:var(--accent-muted,#5A3C1F);
  --at-acento:var(--accent,#C8752A);
  --at-acento-claro:var(--accent-hover,#E08D3C);
  --at-texto:var(--text-primary,#F2E9DE);
  --at-fraco:var(--text-secondary,#A99B8C);
  --at-fundo-visitante:var(--accent-muted,#5A3C1F);
  --at-casa:rgba(255,255,255,.045);
  --at-casa-borda:rgba(255,255,255,.07);

  position:fixed;
  right:clamp(14px,2.2vw,28px);
  bottom:clamp(14px,2.2vw,28px);
  z-index:9000;
  font-family:var(--texto,system-ui,sans-serif);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  pointer-events:none;
}
.at > *{pointer-events:auto}

/* ---------- o botão que chama ----------
   Versão 2 (05/10, pedido do André: "o fale conosco tem que ser mais vivo"): cor cheia, maior,
   duas linhas, ponto de "online". Tudo isso é visível SEM animação (a máquina dele desliga). */
.at-bolha{
  --at-chamada-fundo:var(--at-chamada,#187a42);
  display:flex; align-items:center; gap:12px;
  border:0;
  background:var(--at-chamada-fundo);
  color:#fff;
  font:inherit; text-align:left;
  padding:9px 22px 9px 9px;
  min-height:62px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.9);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.at-bolha:hover{transform:translateY(-2px); filter:brightness(1.08)}
.at-bolha:focus-visible{outline:3px solid var(--at-chamada-fundo); outline-offset:4px}
.at-icone{
  position:relative; flex:none;
  width:44px;height:44px;border-radius:50%;
  background:#fff; display:grid; place-items:center;
}
.at-icone svg{width:24px;height:24px;stroke:var(--at-chamada-fundo);fill:none;stroke-width:1.8}
.at-bolha .at-pulso{
  position:absolute; right:-1px; top:-1px;
  width:12px;height:12px;border-radius:50%;
  background:#3ddc84; border:2px solid var(--at-chamada-fundo);
}
.at-bolha .at-pulso::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid #3ddc84; animation:at-onda 2s ease-out infinite;
}
@keyframes at-onda{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.at-textos{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.at-rotulo{font-size:1.02rem;font-weight:700;letter-spacing:.005em}
.at-sub{font-size:.76rem;opacity:.9}
.at-bolha.respondido{background:#c2410c}

/* ---------- o convite escrito ---------- */
.at-convite{
  position:relative; max-width:290px;
  background:#fff; color:#18181a;
  border-radius:16px 16px 4px 16px;
  padding:14px 36px 14px 16px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
  cursor:pointer;
  animation:at-entra .35s ease both;
  font-size:.9rem; line-height:1.4;
}
.at-convite[hidden]{display:none}
.at-convite p{margin:0}
.at-convite-titulo{font-weight:700;font-size:.97rem;margin-bottom:3px!important}
.at-convite-texto{color:#4a4a50}
.at-convite-x{
  position:absolute; top:6px; right:6px;
  width:26px;height:26px;border:0;border-radius:50%;
  background:none;color:#77777d;font-size:1.2rem;line-height:1;cursor:pointer;
}
.at-convite-x:hover{background:#f0f0ec;color:#18181a}
.at.aberto .at-convite{display:none}

/* ---------- o painel ---------- */
.at-painel{
  width:min(380px,calc(100vw - 28px));
  height:min(540px,calc(100vh - 120px));
  display:none;
  flex-direction:column;
  background:var(--at-canvas);
  /* cor própria: sem ela o texto herda a cor da página (Cryox: #333 sobre painel escuro = 1,24:1, medido 09/10) */
  color:var(--at-texto);
  border:1px solid var(--at-borda);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.at.aberto .at-painel{display:flex}
.at.aberto .at-bolha{display:none}

.at-topo{
  display:flex;align-items:center;gap:11px;
  padding:14px 14px 13px 16px;
  border-bottom:1px solid var(--at-borda);
  flex:none;
}
.at-topo .at-nome{
  font-family:var(--display,Georgia,serif);
  font-size:1.02rem;font-weight:400;line-height:1.2;
  color:var(--at-texto);
  margin:0;
}
.at-topo .at-estado{
  font-family:var(--rotulo,ui-monospace,monospace);
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--at-acento);margin:2px 0 0;
}
.at-topo .at-cresce{flex:1}
.at-fechar{
  background:none;border:0;color:var(--at-fraco);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;
}
.at-fechar:hover{color:var(--at-texto)}

.at-fluxo{
  flex:1;overflow-y:auto;
  padding:16px 16px 6px;
  display:flex;flex-direction:column;gap:11px;
  scrollbar-width:thin;
  scrollbar-color:var(--at-borda) transparent;
}
.at-fluxo::-webkit-scrollbar{width:7px}
.at-fluxo::-webkit-scrollbar-thumb{background:var(--at-borda);border-radius:99px}

.at-msg{
  max-width:86%;
  padding:9px 13px;
  border-radius:14px;
  font-size:.9rem;line-height:1.55;
  animation:at-entra .28s ease both;
}
@keyframes at-entra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.at-msg.casa{
  align-self:flex-start;
  background:var(--at-casa);
  color:var(--at-texto);
  border:1px solid var(--at-casa-borda);
  border-bottom-left-radius:5px;
}
.at-msg.visitante{
  align-self:flex-end;
  background:var(--at-fundo-visitante);
  color:var(--at-texto);
  border-bottom-right-radius:5px;
}
.at-msg.aviso{
  align-self:center;max-width:100%;text-align:center;
  font-family:var(--rotulo,ui-monospace,monospace);
  font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--at-acento);
  background:none;border:0;padding:4px 0;
}
.at-msg p{margin:0;white-space:pre-line}
.at-msg p + p{margin-top:.55em}

/* os três pontinhos */
.at-digitando{
  align-self:flex-start;display:flex;gap:4px;
  padding:12px 14px;border-radius:14px;border-bottom-left-radius:5px;
  background:var(--at-casa);border:1px solid var(--at-casa-borda);
}
.at-digitando i{
  width:5px;height:5px;border-radius:50%;background:var(--at-fraco);
  animation:at-ponto 1.25s ease-in-out infinite;
}
.at-digitando i:nth-child(2){animation-delay:.16s}
.at-digitando i:nth-child(3){animation-delay:.32s}
@keyframes at-ponto{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* atalhos de pergunta */
.at-atalhos{
  display:flex;flex-wrap:wrap;gap:7px;
  padding:6px 16px 12px;flex:none;
}
.at-atalho{
  border:1px solid var(--at-borda);
  background:none;color:var(--at-fraco);
  font:inherit;font-size:.78rem;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.at-atalho:hover{color:var(--at-texto);border-color:var(--at-acento)}

.at-zap{
  flex:none;margin:0 14px 10px;padding:9px 14px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#187a42;color:#fff;text-decoration:none;
  font-size:.86rem;font-weight:600;line-height:1.2;
  transition:background .18s ease;
}
.at-zap[hidden]{display:none}
.at-zap:hover{background:#25a35a}
.at-zap svg{width:18px;height:18px;fill:#fff;flex:none}

.at-base{
  flex:none;border-top:1px solid var(--at-borda);
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 10px 10px 14px;
}
.at-campo{
  flex:1;background:none;border:0;resize:none;
  color:var(--at-texto);font:inherit;font-size:.9rem;
  line-height:1.5;max-height:96px;padding:6px 0;
}
.at-campo:focus{outline:none}
.at-campo::placeholder{color:var(--at-fraco)}
.at-enviar{
  flex:none;width:36px;height:36px;border-radius:50%;
  border:0;background:var(--at-acento);cursor:pointer;
  display:grid;place-items:center;
  transition:background .18s ease,opacity .18s ease;
}
.at-enviar:hover{background:var(--at-acento-claro)}
.at-anexo{
  flex:none;width:32px;height:36px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.at-anexo[hidden]{display:none}
.at-anexo svg{width:19px;height:19px;stroke:var(--at-fraco);fill:none;stroke-width:1.8;transition:stroke .18s ease}
.at-anexo:hover svg{stroke:var(--at-texto)}
.at-enviar:disabled{opacity:.3;cursor:default}
.at-enviar svg{width:17px;height:17px;stroke:var(--at-canvas);fill:none;stroke-width:2}

.at-rodape{
  flex:none;text-align:center;padding:0 16px 11px;
  font-family:var(--rotulo,ui-monospace,monospace);
  font-size:.58rem;letter-spacing:.06em;
  color:var(--at-fraco);   /* sem opacity: .62 sobre o cinza fraco dava 3,5:1 (medido 09/10) */
}

/* ---------- redes sociais (P-17): seção, não ícone ---------- */
.at-redes{
  --at-r-fundo:var(--at-canvas,#ffffff);
  background:var(--at-r-fundo);
  color:var(--at-texto,#1b1b1d);
  padding:clamp(56px,8vw,104px) 20px;
  font-family:inherit;
}
.at-redes-in{max-width:1120px;margin:0 auto}
.at-redes-selo-topo{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--at-chamada-texto,var(--at-chamada,#187a42));
}
.at-redes-selo-topo::before{content:"";width:22px;height:2px;background:currentColor}
.at-redes h2{
  margin:0 0 12px;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;font-weight:700;
  color:inherit;max-width:18ch;
}
.at-redes-texto{margin:0 0 34px;max-width:58ch;font-size:1.05rem;line-height:1.55;color:var(--at-fraco,#5b5b60)}
.at-redes-grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.at-rede{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 22px 20px;border-radius:18px;
  background:var(--at-casa,rgba(0,0,0,.03));
  border:1px solid var(--at-casa-borda,rgba(0,0,0,.08));
  color:inherit;text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.at-rede:hover{transform:translateY(-3px);border-color:var(--at-chamada,#1f8f4e);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.at-rede:focus-visible{outline:3px solid var(--at-chamada,#1f8f4e);outline-offset:3px}
.at-rede-icone{
  width:48px;height:48px;border-radius:14px;margin-bottom:10px;
  display:grid;place-items:center;color:#fff;background:#333;
}
.at-rede-icone svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.at-rede-instagram .at-rede-icone{background:linear-gradient(135deg,#f9ce34,#ee2a7b 50%,#6228d7)}
.at-rede-youtube .at-rede-icone{background:#ff0033}
.at-rede-facebook .at-rede-icone{background:#1877f2}
.at-rede-linkedin .at-rede-icone{background:#0a66c2}
.at-rede-tiktok .at-rede-icone{background:#111}
.at-rede-whatsapp .at-rede-icone{background:#1f8f4e}
.at-rede-nome{font-weight:700;font-size:1.08rem}
.at-rede-usuario{font-size:.86rem;color:var(--at-fraco,#6b6c70);margin-top:-4px}
.at-rede-usuario:empty{display:none}
.at-rede-chamada{font-size:.95rem;line-height:1.45;flex:1;margin-top:4px}
.at-rede-acao{margin-top:12px;font-weight:700;font-size:.92rem;color:var(--at-chamada-texto,var(--at-chamada,#187a42))}
.at-redes-confianca{
  margin:26px 0 0;font-size:.86rem;color:var(--at-fraco,#6b6c70);
  display:flex;gap:8px;align-items:flex-start;
}
.at-redes-confianca::before{content:"✓";font-weight:700;color:var(--at-chamada-texto,var(--at-chamada,#187a42))}

/* celular: o painel ocupa a tela */
@media (max-width:520px){
  .at{left:0;right:0;bottom:0;align-items:stretch}
  .at-bolha{align-self:flex-end;margin:0 14px 14px;min-height:56px;padding-right:18px}
  .at-sub{display:none}
  .at-convite{align-self:flex-end;margin:0 14px;max-width:min(290px,calc(100vw - 28px))}
  .at-painel{
    width:100%;height:82vh;height:82dvh;
    border-radius:18px 18px 0 0;border-bottom:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .at-bolha .at-pulso::after,.at-digitando i,.at-convite{animation:none}
  .at-msg{animation:none}
}

.at-atalho-principal{font-weight:700;border-color:var(--at-chamada,#1f8f4e)}

/* ---------- linha legal e aviso de cookies (RQ-11/12/15) ---------- */
.at-legal{background:var(--at-canvas,#17181b);color:var(--at-fraco,#a4a6ab);padding:28px 20px 96px;font-size:.84rem;line-height:1.55;border-top:1px solid var(--at-borda,#34363c);font-family:inherit}
.at-legal-in{max-width:1120px;margin:0 auto}
.at-legal p{margin:0 0 8px}
.at-legal-atend{color:var(--at-texto,#f3f2ef);font-weight:600}
.at-legal a{color:var(--at-texto,#f3f2ef);text-decoration:underline;text-underline-offset:2px}
.at-legal-linha{margin-top:14px!important;padding-top:12px;border-top:1px solid var(--at-borda,#34363c);font-size:.8rem}
.at-cookies{position:fixed;left:16px;bottom:16px;z-index:2147483000;max-width:420px;display:flex;align-items:center;gap:12px;background:var(--at-canvas,#17181b);color:var(--at-texto,#f3f2ef);
  border:1px solid var(--at-borda,#34363c);border-radius:12px;padding:8px 12px;box-shadow:0 10px 28px rgba(0,0,0,.35);font:13px/1.35 system-ui,sans-serif}
.at-cookies p{margin:0;flex:1}
.at-cookies-b{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.at-cookies-l{color:var(--at-fraco,#a4a6ab);text-decoration:underline;font-size:13px}
.at-cookies-ok{background:var(--at-texto,#f3f2ef);color:var(--at-canvas,#17181b);border:0;border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer;font-size:13px}
@media (max-width:520px){.at-cookies{left:10px;right:10px;bottom:84px;max-width:none;padding:6px 10px}}
/* painel aberto: o aviso de cookies sai da frente do "Continuar no WhatsApp" (medido 09/10 no CORDON, 390x844).
   Some só enquanto o painel está aberto; fechou o painel, o aviso volta. O aviso entra no body depois do .at. */
.at.aberto ~ .at-cookies,body:has(.at.aberto) .at-cookies{display:none}
/* link da Política de Privacidade no rodapé do painel (RQ-12) */
.at-rodape-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-size:.7rem;padding:6px 2px}