/* ---------------------------------------------------------------------------
   LIA — a atendente do site.

   Bolha no canto e uma janela de conversa. No celular a janela toma a tela
   inteira, como um aplicativo de mensagens; no computador é um cartão no
   canto direito. Nada aqui depende do estilo.css do site além das fontes —
   o widget precisa continuar de pé em qualquer página, inclusive a de planos.
--------------------------------------------------------------------------- */
:root {
  --lia-brand: #f97316;
  --lia-brand-dark: #ea580c;
  --lia-ink: #0b1120;
  --lia-text: #1f2937;
  --lia-muted: #6b7280;
  --lia-bg: #ffffff;
  --lia-bg-chat: #f6f7f9;
  --lia-border: #e5e7eb;
  --lia-bubble: #ffffff;
  --lia-bubble-me: #ffedd5;
  --lia-z: 9000;
}

.lia-bolha {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--lia-z);
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 18px 0 8px; border: 0; border-radius: 999px;
  background: var(--lia-brand); color: #fff; cursor: pointer;
  font: 600 15px/1 'Inter', system-ui, sans-serif;
  box-shadow: 0 12px 28px -10px rgba(249, 115, 22, .7), 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lia-bolha:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(249, 115, 22, .8), 0 2px 8px rgba(0, 0, 0, .18); }
.lia-bolha:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lia-bolha.is-oculta { display: none; }
.lia-bolha-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--lia-brand);
  display: grid; place-items: center; font: 800 13px/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .04em;
}
.lia-bolha-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lia-bolha-texto small { font: 500 11px/1 'Inter', sans-serif; opacity: .9; }
.lia-bolha-novas {
  position: absolute; top: -4px; right: -2px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #ef4444; color: #fff; font: 700 12px/22px 'Inter', sans-serif; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.lia-bolha-novas.is-vazia { display: none; }

.lia-janela {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--lia-z);
  width: 380px; height: min(600px, calc(100vh - 36px));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--lia-bg); color: var(--lia-text);
  border: 1px solid var(--lia-border); border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(11, 17, 32, .45), 0 4px 16px rgba(0, 0, 0, .12);
  font: 15px/1.45 'Inter', system-ui, sans-serif;
}
.lia-janela.is-aberta { display: flex; }

.lia-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; background: var(--lia-ink); color: #fff;
}
.lia-topo-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--lia-brand); color: #fff;
  display: grid; place-items: center; font: 800 13px/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .04em;
}
.lia-topo-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lia-topo-nome strong { font-size: 15px; font-weight: 700; }
.lia-topo-nome span { font-size: 12px; color: rgba(255, 255, 255, .72); display: flex; align-items: center; gap: 6px; }
.lia-ponto { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.lia-ponto.is-humano { background: #60a5fa; }
.lia-ponto.is-espera { background: #f59e0b; }
.lia-fechar {
  width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.lia-fechar:hover { background: rgba(255, 255, 255, .16); }

.lia-corpo {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  background: var(--lia-bg-chat); display: flex; flex-direction: column; gap: 8px;
  overscroll-behavior: contain;
}
.lia-msg { display: flex; flex-direction: column; max-width: 86%; }
.lia-msg.is-eu { align-self: flex-end; align-items: flex-end; }
.lia-msg.is-outro { align-self: flex-start; align-items: flex-start; }
.lia-msg.is-sistema { align-self: center; max-width: 100%; }
.lia-autor { font-size: 11px; font-weight: 600; color: var(--lia-muted); margin: 0 6px 3px; }
.lia-balao {
  padding: 9px 12px; border-radius: 16px; background: var(--lia-bubble);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08); white-space: pre-wrap; word-wrap: break-word;
}
.lia-msg.is-eu .lia-balao { background: var(--lia-bubble-me); border-bottom-right-radius: 6px; }
.lia-msg.is-outro .lia-balao { border-bottom-left-radius: 6px; }
.lia-msg.is-sistema .lia-balao {
  background: transparent; box-shadow: none; color: var(--lia-muted); font-size: 12px; text-align: center; padding: 4px 8px;
}
.lia-balao a { color: var(--lia-brand-dark); font-weight: 600; text-decoration: underline; }
.lia-hora { font-size: 10.5px; color: var(--lia-muted); margin: 3px 6px 0; }

.lia-digitando { display: inline-flex; gap: 4px; padding: 12px 14px; }
.lia-digitando i {
  width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; animation: lia-pulo 1.1s infinite ease-in-out;
}
.lia-digitando i:nth-child(2) { animation-delay: .15s; }
.lia-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes lia-pulo { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

.lia-atalhos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; background: var(--lia-bg-chat); }
.lia-atalho {
  border: 1px solid var(--lia-brand); background: #fff; color: var(--lia-brand-dark);
  border-radius: 999px; padding: 7px 12px; font: 600 13px/1 'Inter', sans-serif; cursor: pointer;
}
.lia-atalho:hover { background: var(--lia-bubble-me); }

.lia-envio {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--lia-border); background: var(--lia-bg);
}
.lia-envio textarea {
  flex: 1; min-height: 44px; max-height: 120px; resize: none;
  padding: 11px 12px; border: 1px solid var(--lia-border); border-radius: 12px;
  font: 15px/1.4 'Inter', system-ui, sans-serif; color: var(--lia-text); background: #fff;
}
.lia-envio textarea:focus { outline: 2px solid var(--lia-brand); outline-offset: 0; border-color: transparent; }
.lia-enviar {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px;
  background: var(--lia-brand); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.lia-enviar:disabled { opacity: .5; cursor: default; }
.lia-rodape { padding: 6px 12px 8px; font-size: 11px; color: var(--lia-muted); text-align: center; background: var(--lia-bg); }
.lia-rodape a { color: inherit; }

.lia-erro { margin: 0 12px 8px; padding: 8px 10px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 13px; }

@media (max-width: 600px) {
  .lia-janela { right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; border: 0; }
  /*
   * No celular a bolha vira só o círculo: com o texto ela cobria a borda dos
   * botões ao rolar (auditoria 03/10/2026, BUG-006). E a página ganha um fim
   * de folga para o último botão nunca ficar embaixo dela.
   */
  .lia-bolha { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 56px; padding: 0; justify-content: center; }
  .lia-bolha-texto { display: none; }
  body { padding-bottom: 84px; }
  .lia-topo { padding-top: max(12px, env(safe-area-inset-top)); }
  .lia-envio { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .lia-bolha, .lia-digitando i { transition: none; animation: none; }
}