/* WhatsApp do escritório (ver zap.js): botão no canto e cartão LIRA com logotipo, mascote, assuntos e campo de texto.
   O verde fica só no símbolo do WhatsApp; o resto segue o azul da marca. */
.zap-botao, .zap-cartao { --zap-verde: #1FA855; --zap-azul: #0075BD; --zap-luz: #2E9BE6; --zap-tinta: #0F2A40;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }

/* ---------- botão flutuante ---------- */
.zap-botao { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 25%, #3DD27A, var(--zap-verde) 60%, #168A45);
  box-shadow: 0 14px 30px -8px rgba(31,168,85,.55), 0 0 0 4px rgba(255,255,255,.85), 0 0 0 5px rgba(0,117,189,.18);
  transition: transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .3s; }
.zap-botao > svg { width: 32px; height: 32px; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.zap-botao:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px -8px rgba(31,168,85,.6), 0 0 0 4px #fff, 0 0 0 5px rgba(0,117,189,.3); }
.zap-botao::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31,168,85,.45); animation: zap-onda 2.6s ease-out infinite; pointer-events: none; }
@keyframes zap-onda { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.zap-botao.zap-aberto::before { animation: none; opacity: 0; }
.zap-botao.zap-aberto > svg { transform: rotate(-12deg) scale(.9); }
.zap-dica { position: absolute; right: calc(100% + 14px); top: 50%; white-space: nowrap; padding: 9px 14px; border-radius: 14px 14px 4px 14px;
  background: #fff; color: var(--zap-tinta); font-size: 13.5px; font-weight: 600; border: 1px solid rgba(0,117,189,.18); box-shadow: 0 12px 28px rgba(18,51,74,.14);
  opacity: 0; transform: translate(8px, -50%) scale(.96); transform-origin: right center; transition: opacity .3s, transform .4s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.zap-botao:hover .zap-dica, .zap-botao.zap-dica-on .zap-dica { opacity: 1; transform: translate(0, -50%); }
.zap-botao.zap-aberto .zap-dica { opacity: 0; }

/* ---------- cartão ---------- */
.zap-cartao { position: fixed; right: 24px; bottom: 100px; z-index: 41; width: 372px; max-width: calc(100vw - 32px); max-height: calc(100vh - 124px);
  overflow: visible; border-radius: 28px; background: #fff; color: var(--zap-tinta);
  box-shadow: 0 40px 80px -24px rgba(15,42,64,.35), 0 0 0 1px rgba(0,117,189,.12);
  opacity: 0; transform: translateY(18px) scale(.94); transform-origin: bottom right; transition: opacity .25s, transform .4s cubic-bezier(.2,1.2,.4,1); }
.zap-cartao.zap-visivel { opacity: 1; transform: none; }
.zap-cartao[hidden] { display: none; }

/* parte de cima: azul da marca com a curva do LIRA ao fundo, logotipo no círculo e o mascote em pé à direita */
.zap-topo { position: relative; height: 128px; border-radius: 28px 28px 0 0;
  background: linear-gradient(135deg, rgba(46,155,230,.9), rgba(0,117,189,.94) 55%, rgba(15,42,64,.96)), url(/comum/img/curva.jpg) center/cover; }
.zap-topo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 80% at 15% 0%, rgba(255,255,255,.28), transparent 70%); }
.zap-fechar { position: absolute; left: 14px; top: 14px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; transition: background .2s, transform .3s; }
.zap-fechar svg { width: 16px; height: 16px; }
.zap-fechar:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }
.zap-rotulo { position: absolute; left: 58px; top: 21px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: .02em; }
.zap-rotulo i { width: 8px; height: 8px; border-radius: 50%; background: #5BE38F; box-shadow: 0 0 10px #5BE38F; }
.zap-avatar { position: absolute; left: 22px; bottom: -44px; z-index: 2; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(#F4F9FE, #fff); border: 4px solid #fff; box-shadow: 0 14px 30px -10px rgba(15,42,64,.45), 0 0 0 1px rgba(0,117,189,.15); }
.zap-avatar img { width: 62px; height: 62px; object-fit: contain; margin: -4px 0 0 -4px; }
.zap-avatar::after { content: ""; position: absolute; right: 2px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: #2FB37A; border: 3px solid #fff; }
.zap-mascote.mascote { position: absolute; right: 20px; bottom: -34px; width: 96px; z-index: 3; }
.zap-mascote .mq-sombra { opacity: .2; }

/* parte de baixo */
.zap-corpo { padding: 52px 22px 20px; overflow-y: auto; max-height: calc(100vh - 124px - 128px); border-radius: 0 0 28px 28px; }
.zap-quem { display: flex; align-items: center; gap: 12px; margin-right: 96px; }
.zap-selo { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--zap-verde); background: #E9F8EF; }
.zap-selo svg { width: 26px; height: 26px; }
.zap-quem b { display: block; font-size: 18px; letter-spacing: -.02em;
  background: linear-gradient(100deg, #0F2A40, #0075BD 70%, #2E9BE6); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .2em; margin-bottom: -.2em; }
.zap-quem small { display: block; font-size: 12.5px; color: #5E6E7E; }

.zap-balao { position: relative; margin: 16px 0 12px; padding: 11px 14px; border-radius: 4px 16px 16px 16px; background: #EEF5FB; color: var(--zap-tinta);
  font-size: 14px; line-height: 1.4; font-weight: 500; }
.zap-balao.zap-novo { animation: zap-fala .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes zap-fala { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.zap-balao a { color: var(--zap-azul); font-weight: 700; }

.zap-temas { display: grid; gap: 6px; }
.zap-tema { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid #E3ECF4; background: #fff; color: var(--zap-tinta); font-family: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.2,.8,.2,1), background .2s; animation: zap-entra .45s calc(var(--i) * 60ms + 120ms) both cubic-bezier(.2,.8,.2,1); }
@keyframes zap-entra { from { opacity: 0; transform: translateY(8px); } }
.zap-tema:hover { border-color: rgba(0,117,189,.38); box-shadow: 0 8px 20px -8px rgba(0,117,189,.3); transform: translateX(3px); }
.zap-tema-icone { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(#2E9BE6, #0075BD); box-shadow: 0 6px 14px -6px rgba(0,117,189,.6); }
.zap-tema-icone svg { width: 18px; height: 18px; }
.zap-tema > span:nth-child(2) { flex: 1; }
.zap-tema i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9D7E3; transition: all .25s; }
.zap-tema[aria-pressed="true"] { border-color: var(--zap-azul); background: #F2F8FD; }
.zap-tema[aria-pressed="true"] i { border-color: var(--zap-azul); background: var(--zap-azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }

.zap-form { margin-top: 12px; }
.zap-form textarea { display: block; width: 100%; resize: none; padding: 11px 13px; border-radius: 14px; border: 1px solid #D3DEE8; background: #FBFDFF;
  font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--zap-tinta); transition: border-color .2s, box-shadow .2s; }
.zap-form textarea:focus { outline: none; border-color: var(--zap-azul); box-shadow: 0 0 0 4px rgba(0,117,189,.12); background: #fff; }
.zap-enviar { margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border: 0; border-radius: 14px; cursor: pointer;
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, #2BC06A, var(--zap-verde) 55%, #168A45);
  box-shadow: 0 14px 26px -12px rgba(31,168,85,.7); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.zap-enviar svg { width: 20px; height: 20px; }
.zap-enviar svg:last-child { width: 18px; transition: transform .25s; }
.zap-enviar:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(31,168,85,.8); }
.zap-enviar:hover svg:last-child { transform: translateX(4px); }
.zap-nota { margin: 9px 0 0; text-align: center; font-size: 12px; color: #6B7B8A; }
.zap-cartao .so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* o rodapé do cliente abre espaço para o botão no canto */
@media (min-width: 601px) { .rodape-cliente .rodape-dentro { padding-right: 104px; } }
@media (max-width: 600px) { .rodape-cliente .rodape-dentro { padding-bottom: 90px; } }  /* no celular, espaço embaixo: o botão não cobre o aviso da senha */

/* celular: o cartão vira uma folha que sobe de baixo, e o botão fica menor */
@media (max-width: 560px) {
  .zap-botao { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .zap-botao > svg { width: 28px; height: 28px; }
  .zap-cartao { left: 10px; right: 10px; bottom: 78px; width: auto; max-width: none; transform-origin: bottom center; }
  .zap-topo { height: 112px; }
  .zap-avatar { width: 82px; height: 82px; bottom: -38px; }
  .zap-avatar img { width: 54px; height: 54px; }
  .zap-mascote.mascote { width: 80px; bottom: -28px; }
  .zap-corpo { max-height: calc(100vh - 78px - 20px - 112px); padding: 46px 16px 16px; }
  .zap-quem { margin-right: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .zap-botao, .zap-botao *, .zap-cartao, .zap-cartao * { animation: none !important; transition: none !important; }
  .zap-botao::before { display: none; }
}

/* telefone dentro do balão do WhatsApp: verde sobre o balão branco; branco no selo verde */
.zap-fone { fill: var(--zap-verde); }
.zap-selo svg path:first-child { fill: var(--zap-verde); }
.zap-selo .zap-fone { fill: #fff; }
.zap-corpo { scrollbar-width: thin; scrollbar-color: #C9D7E3 transparent; }

/* sem barra de rolagem (pedido do Rômulo, 09/10/2026): em telas baixas o cartão fica mais compacto;
   se ainda faltar espaço, rola com o dedo/roda do mouse, mas sem mostrar a barra */
.zap-corpo { scrollbar-width: none; -ms-overflow-style: none; }
.zap-corpo::-webkit-scrollbar { display: none; }
@media (max-height: 860px) {
  .zap-corpo { padding-top: 44px; padding-bottom: 14px; }
  .zap-balao { margin: 10px 0 8px; padding: 9px 12px; }
  .zap-tema { padding: 6px 10px 6px 6px; }
  .zap-tema-icone { width: 30px; height: 30px; }
  .zap-form { margin-top: 8px; }
  .zap-form textarea { height: 62px; }
  .zap-enviar { margin-top: 8px; padding: 11px 14px; }
}

/* sai de cena enquanto o botão principal da tela está à vista (ex.: "Enviar") */
.zap-botao.zap-recolhido { transform: translateY(140%) scale(.8); opacity: 0; pointer-events: none; }