/* Chat da IDEIA — pele clara com campo escuro, na identidade do site
   (branco, azul-tinta e âmbar). Estado vazio: título, apoio e campo centralizados.
   Com conversa: o campo desce e a conversa ocupa a tela.
   Nada de recurso externo: a política de segurança do site só permite o próprio domínio. */

/* o painel do mega menu é posicionado em absoluto e, numa página da altura da tela,
   criava rolagem sobrando. Fixo, ele não estende mais a página. */
html[data-tela="chat"] .lawx-mega {
  position: fixed;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-tela="chat"] { overscroll-behavior-y: none; }

/* página do tamanho exato da tela. Nada de 100vh: no celular ele conta a barra do
   navegador como se não existisse e o campo acabava cortado embaixo. A altura vem
   da cadeia de flex, com dvh quando o navegador entende (barra dinâmica e teclado). */
html[data-tela="chat"],
html[data-tela="chat"] body { height: 100%; }
/* onde o navegador entende dvh, a altura acompanha a barra dinâmica e o teclado */
@supports (height: 100dvh) {
  html[data-tela="chat"],
  html[data-tela="chat"] body { height: 100dvh; }
}
html[data-tela="chat"] body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html[data-tela="chat"] main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- cena ---------- */
.chat-cena {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf8 0%, #fff 46%, #fff 100%);
}
.chat-cena .svc-hero-bg { opacity: .85; }

/* brilho âmbar à esquerda, como na referência */
.chat-glow {
  position: absolute;
  left: -6%;
  top: 8%;
  width: min(620px, 58vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, #ffc0005c, #ffc0001f 52%, transparent 76%);
  filter: blur(34px);
  pointer-events: none;
  animation: chat-respira 13s ease-in-out infinite alternate;
  transition: opacity .7s ease;
}
/* aros concêntricos discretos */
.chat-aneis {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1240px, 118vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .7s ease;
}
.chat-aneis::before,
.chat-aneis::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.chat-aneis::before { inset: 0; border: 1px solid #0f172a0d; }
.chat-aneis::after { inset: 17%; border: 1px solid #ffc00024; }
.chat-cena.is-ativo .chat-glow,
.chat-cena.is-ativo .chat-aneis { opacity: 0; }

@keyframes chat-respira {
  from { opacity: .82; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.07); }
}

/* ---------- esqueleto ---------- */
.chat-shell {
  position: relative;
  z-index: 2;
  width: min(820px, 100% - 40px);
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 0 20px;
}
.chat-fluxo {
  flex: 0 0 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 26px;
  transition: flex-grow .6s cubic-bezier(.4, 0, .2, 1);
  scrollbar-width: thin;
  scrollbar-color: #0f172a29 transparent;
  overscroll-behavior: contain;
}
/* na conversa a lista ocupa o espaço livre (base 0) e rola por dentro: assim o campo
   nunca é empurrado para fora da tela, por mais mensagens que existam */
.chat-shell.is-ativo .chat-fluxo { flex: 1 1 0; padding: 30px 0 6px; }
.chat-fluxo::-webkit-scrollbar { width: 8px; }
.chat-fluxo::-webkit-scrollbar-thumb { background: #0f172a1f; border-radius: 8px; }
.chat-fluxo::-webkit-scrollbar-thumb:hover { background: #0f172a38; }

.chat-base {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  transition: flex-grow .6s cubic-bezier(.4, 0, .2, 1);
}
.chat-shell.is-ativo .chat-base { flex-grow: 0; }

/* ---------- estado vazio ---------- */
.chat-palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-height: 360px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .05s,
              transform .55s cubic-bezier(.4, 0, .2, 1), margin .55s ease;
}
.chat-shell.is-ativo .chat-palco {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  transform: translateY(-10px);
  pointer-events: none;
  visibility: hidden;
  transition: max-height .55s cubic-bezier(.4, 0, .2, 1), opacity .22s ease,
              transform .45s ease, visibility 0s linear .5s;
}

.chat-saudacao {
  margin: 0;
  font-size: clamp(31px, 3.7vw, 52px);
  font-weight: 850;
  letter-spacing: -.042em;
  line-height: 1.06;
  max-width: 20ch;
  text-wrap: balance;
  color: #07111f;
}
.chat-sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #64748b;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- campo (pílula escura) ---------- */
.chat-form { flex: 0 0 auto; width: min(700px, 100%); margin: 34px auto 0; }
.chat-campo {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 7px 7px 7px 16px;
  min-height: 68px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1d2735, #161f2c);
  border: 1px solid #ffffff14;
  box-shadow: 0 22px 46px #0f172a2e, 0 2px 8px #0f172a1a, inset 0 1px 0 #ffffff1a;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.chat-campo:focus-within {
  border-color: #ffc0006b;
  box-shadow: 0 24px 52px #0f172a33, 0 0 0 5px #ffc0001f, inset 0 1px 0 #ffffff1f;
}
.chat-icone {
  flex: 0 0 auto;
  width: 40px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #ffffffb8;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, color .2s ease;
}
.chat-icone .ico { width: 21px; height: 21px; }
.chat-icone:hover { background: #ffffff14; color: #fff; }
.chat-campo textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 2px 12px 8px;
  max-height: 180px;
  scrollbar-width: thin;
}
.chat-campo textarea::placeholder { color: #93a0b4; }
/* o site marca o foco com um contorno azul global (!important). Aqui o foco vive na
   pílula inteira, então o contorno interno sai — sem perder acessibilidade. */
html[data-tela="chat"] .chat-campo textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}
.chat-enviar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #1a1205;
  background: linear-gradient(135deg, #ffc000, #e5a900);
  box-shadow: 0 10px 22px #ffc00038;
  transition: transform .2s ease, filter .2s ease, opacity .25s ease, box-shadow .25s ease;
}
.chat-enviar .ico { width: 21px; height: 21px; stroke-width: 2.1; }
.chat-enviar:hover { transform: translateY(-1px); filter: brightness(1.05); }
.chat-enviar:active { transform: translateY(0) scale(.97); }
.chat-enviar[disabled] {
  opacity: .45;
  box-shadow: none;
  cursor: default;
  transform: none;
  filter: none;
}

/* ---------- conversa ---------- */
.chat-linha { display: flex; animation: chat-sobe .32s cubic-bezier(.2, .7, .3, 1) both; }
.chat-linha-usuario { justify-content: flex-end; }

.chat-texto {
  position: relative;
  color: #24303f;
  font-size: 16.5px;
  line-height: 1.74;
  letter-spacing: -.004em;
  max-width: 66ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-fala {
  background: #eef2f7;
  border: 1px solid #0f172a0f;
  border-radius: 20px;
  padding: 12px 18px;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.62;
  max-width: 74%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-copiar {
  position: absolute;
  top: -11px;
  right: -8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: #94a3b8;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 4px 14px #0f172a14;
  transition: opacity .2s ease, color .2s ease;
}
.chat-linha:hover .chat-copiar, .chat-copiar:focus-visible { opacity: 1; }
.chat-copiar:hover { color: #0f172a; }
.chat-copiar .ico { width: 15px; height: 15px; }
.chat-copiar.is-copiado { color: #b07d00; opacity: 1; }

/* ---------- hora e confirmação de leitura ---------- */
.chat-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1;
  color: #94a3b8;
  white-space: nowrap;
  user-select: none;
}
/* na fala do visitante a hora entra no fim da própria bolha, como no mensageiro */
.chat-fala .chat-meta {
  margin-left: 9px;
  transform: translateY(2px);
  color: #7d8b9e;
}
.chat-meta-agente { display: flex; margin-top: 7px; }
.chat-estado { display: inline-flex; align-items: center; }
.chat-check { width: 15px; height: 15px; display: block; }
.chat-estado.is-lida { color: #d99a00; }
.chat-estado.is-falhou { color: #b3261e; }

/* ---------- aviso do microfone ---------- */
.chat-aviso-voz {
  margin: 0 4px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  text-align: center;
  animation: chat-sobe .28s cubic-bezier(.2, .7, .3, 1) both;
}
.chat-aviso-voz[hidden] { display: none; }
.chat-aviso-voz.is-erro { color: #b3261e; }

/* microfone ouvindo: âmbar com anel pulsando, para ficar claro que está no ar */
.chat-icone.is-ouvindo {
  color: #ffc000;
  background: #ffc0001f;
}
.chat-icone.is-ouvindo .ico { animation: chat-mic 1.5s ease-in-out infinite; }
.chat-icone.is-ouvindo::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ffc0008c;
  animation: chat-anel 1.6s ease-out infinite;
}
.chat-icone { position: relative; }

@keyframes chat-mic {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
@keyframes chat-anel {
  0% { opacity: .85; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.32); }
}

.chat-pontos { display: flex; gap: 5px; align-items: center; padding: 8px 2px; }
.chat-pontos i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  animation: chat-pisca 1.15s infinite ease-in-out;
}
.chat-pontos i:nth-child(2) { animation-delay: .15s; }
.chat-pontos i:nth-child(3) { animation-delay: .3s; }

@keyframes chat-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes chat-pisca {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .chat-shell {
    width: calc(100% - 26px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .chat-palco { gap: 13px; }
  .chat-saudacao { font-size: clamp(27px, 7.4vw, 34px); letter-spacing: -.035em; }
  .chat-sub { font-size: 15.5px; max-width: 34ch; }
  .chat-form { margin-top: 22px; }
  .chat-campo { min-height: 60px; padding: 6px 6px 6px 10px; gap: 2px; }
  .chat-icone { width: 38px; height: 40px; }
  .chat-icone .ico { width: 20px; height: 20px; }
  .chat-campo textarea { font-size: 16px; padding: 11px 2px 11px 6px; }
  .chat-enviar { width: 46px; height: 46px; }
  .chat-enviar .ico { width: 19px; height: 19px; }
  .chat-texto { font-size: 16px; }
  .chat-fala { max-width: 86%; }
  .chat-aviso-voz { font-size: 12.5px; }
  .chat-icone.is-ouvindo::after { width: 36px; height: 36px; }
  .chat-shell.is-ativo .chat-fluxo { padding-top: 18px; gap: 22px; }
  .chat-glow { left: -34%; top: 14%; width: 84vw; }
}

/* telas estreitas: aperta o campo sem perder nenhum botão */
@media (max-width: 380px) {
  .chat-shell { width: calc(100% - 20px); }
  .chat-campo { padding-left: 8px; gap: 0; }
  .chat-icone { width: 34px; }
  .chat-enviar { width: 44px; height: 44px; }
}

/* tela baixa (celular deitado ou teclado aberto): o título encolhe e o apoio sai,
   para o campo nunca sair de vista */
@media (max-height: 560px) {
  .chat-palco { gap: 8px; }
  .chat-saudacao { font-size: clamp(21px, 5vw, 28px); max-width: 26ch; }
  .chat-sub { display: none; }
  .chat-form { margin-top: 16px; }
  .chat-campo { min-height: 54px; }
  .chat-enviar { width: 42px; height: 42px; }
  .chat-icone { height: 38px; }
}

/* o toque não precisa do realce azul do sistema */
.chat-icone,
.chat-enviar,
.chat-chip,
.chat-copiar,
.chat-campo textarea { -webkit-tap-highlight-color: transparent; }

/* em telas sem mouse o copiar fica sempre à vista — embaixo do texto, sem cobrir a última linha */
@media (hover: none) {
  .chat-texto { padding-bottom: 30px; }
  .chat-copiar {
    opacity: 1;
    top: auto;
    bottom: 0;
    right: 0;
    width: 34px;
    height: 34px;
  }
  .chat-copiar .ico { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-glow { animation: none; }
  .chat-linha, .chat-pontos i { animation: none; }
  .chat-shell.is-ativo .chat-fluxo, .chat-base, .chat-palco, .chat-glow, .chat-aneis { transition: none; }
  .chat-enviar:hover { transform: none; }
}