/*
  Chat da IAra no site público da LM — pré-venda.

  Estilo próprio de propósito: o widget da área de membros
  (api/public/iara-suporte.css) atende cliente logada, tem o tema claro/escuro
  da plataforma e é o ÚNICO canal de suporte dela. Misturar os dois faria
  qualquer mexida aqui alcançar o suporte de quem paga.

  Tudo prefixado com .lmiara- e sem herdar variável da página: a mesma folha
  roda em página do worker e em página do WordPress.
*/
.lmiara-raiz {
  --lmiara-ink: #0C0F08;
  --lmiara-verde: #2C3520;
  --lmiara-moss: #4A5538;
  --lmiara-sand: #E2D9C4;
  --lmiara-cream: #F2EBD9;
  --lmiara-paper: #F8F5EE;
  --lmiara-linha: rgba(242, 235, 217, .16);
  /* --lmiara-barra: o quanto a barra fixa do rodapé ocupa agora. O JS mede e
     escreve; sem barra na tela vale 0 e nada muda. */
  --lmiara-barra: 0px;
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(clamp(14px, 3vw, 26px) + var(--lmiara-barra));
  z-index: 2147483000;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* display:flex/grid nos blocos abaixo ganha do [hidden] do navegador, e o
   widget esconde tudo por hidden. Sem esta linha, as sugestões continuavam na
   tela depois da primeira pergunta. */
.lmiara-raiz [hidden] { display: none !important; }

.lmiara-fab {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--lmiara-verde);
  color: var(--lmiara-cream);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(12, 15, 8, .65);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lmiara-fab:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -18px rgba(12, 15, 8, .7); }
.lmiara-fab img { width: 34px; height: 34px; border-radius: 50%; background: var(--lmiara-sand); object-fit: cover; }
.lmiara-fab[hidden] { display: none; }

.lmiara-painel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(380px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: var(--lmiara-paper);
  box-shadow: 0 30px 70px -28px rgba(12, 15, 8, .6);
  border: 1px solid rgba(12, 15, 8, .08);
}
.lmiara-painel[hidden] { display: none; }

.lmiara-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--lmiara-verde);
  color: var(--lmiara-cream);
}
.lmiara-topo img { width: 38px; height: 38px; border-radius: 50%; background: var(--lmiara-sand); object-fit: cover; }
.lmiara-topo h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.lmiara-topo p { margin: 2px 0 0; font-size: 12px; color: rgba(242, 235, 217, .72); }
.lmiara-fechar {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgba(242, 235, 217, .8);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}
.lmiara-fechar:hover { background: rgba(242, 235, 217, .12); color: #fff; }

.lmiara-conversa {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--lmiara-paper);
}
.lmiara-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  color: var(--lmiara-ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.lmiara-msg-iara { align-self: flex-start; background: #fff; border: 1px solid rgba(12, 15, 8, .09); border-bottom-left-radius: 6px; }
.lmiara-msg-eu { align-self: flex-end; background: var(--lmiara-sand); border-bottom-right-radius: 6px; }
.lmiara-msg a { color: var(--lmiara-moss); font-weight: 700; word-break: break-all; }
.lmiara-msg a:hover { color: var(--lmiara-verde); }
.lmiara-msg-time { align-self: flex-start; background: #EAF0E0; border: 1px solid #CBD8B6; border-bottom-left-radius: 6px; }
.lmiara-msg-time strong { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--lmiara-moss); margin-bottom: 3px; }

.lmiara-digitando { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.lmiara-digitando span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lmiara-moss); opacity: .35;
  animation: lmiara-pulo 1.1s infinite ease-in-out;
}
.lmiara-digitando span:nth-child(2) { animation-delay: .16s; }
.lmiara-digitando span:nth-child(3) { animation-delay: .32s; }
@keyframes lmiara-pulo { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .lmiara-digitando span { animation: none; } .lmiara-fab { transition: none; } }

.lmiara-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.lmiara-sugestoes button {
  border: 1px solid rgba(12, 15, 8, .16);
  background: #fff;
  color: var(--lmiara-moss);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.lmiara-sugestoes button:hover { background: var(--lmiara-cream); }

.lmiara-acao { padding: 0 16px 12px; }
.lmiara-acao button {
  width: 100%;
  border: 0;
  background: var(--lmiara-moss);
  color: var(--lmiara-cream);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
}
.lmiara-acao button:hover { background: var(--lmiara-verde); }
.lmiara-acao[hidden] { display: none; }

/* O formulário é um CARTÃO, não mais um pedaço do fundo do chat: o Junior
   abriu e disse que "se confunde com a caixa que já estava aberta" (msg 69492).
   Fundo branco, borda verde, sombra e um cabeçalho próprio com o caminho de
   volta — porque ele também não achou como sair sem preencher. */
.lmiara-form {
  margin: 0 12px 12px;
  padding: 14px;
  display: grid;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--lmiara-verde);
  border-radius: 16px;
  box-shadow: 0 18px 34px -20px rgba(12, 15, 8, .55);
}
.lmiara-form[hidden] { display: none; }
.lmiara-form p { margin: 0 0 2px; font-size: 13px; color: var(--lmiara-moss); }

.lmiara-form-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lmiara-form-topo b { font-size: 14.5px; color: var(--lmiara-verde); }
.lmiara-voltar {
  border: 0;
  background: transparent;
  color: var(--lmiara-moss);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  text-decoration: underline;
}
.lmiara-voltar:hover { background: var(--lmiara-cream); }
.lmiara-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(12, 15, 8, .18);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--lmiara-ink);
}
.lmiara-form input:focus { outline: 2px solid var(--lmiara-moss); outline-offset: 1px; }
.lmiara-form .lmiara-erro { color: #9B2C2C; font-size: 12.5px; margin: 0; }

.lmiara-rodape {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(12, 15, 8, .08);
  background: #fff;
}
.lmiara-rodape[hidden] { display: none; }
.lmiara-rodape textarea {
  flex: 1;
  /* textarea tem largura mínima própria (cols); sem isto ela estoura o painel
     no celular e empurra o Enviar para fora da tela (Jaqueline, msg 73594). */
  min-width: 0;
  resize: none;
  border: 1px solid rgba(12, 15, 8, .16);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  max-height: 96px;
  color: var(--lmiara-ink);
  background: #fff;
}
.lmiara-rodape textarea:focus { outline: 2px solid var(--lmiara-moss); outline-offset: 1px; }
.lmiara-rodape button {
  border: 0;
  border-radius: 12px;
  background: var(--lmiara-verde);
  color: var(--lmiara-cream);
  font: inherit;
  font-weight: 700;
  padding: 0 16px;
  cursor: pointer;
}
.lmiara-rodape button:disabled { opacity: .5; cursor: default; }

.lmiara-aviso { padding: 0 16px 12px; font-size: 11.5px; color: rgba(12, 15, 8, .5); }

@media (max-width: 480px) {
  .lmiara-raiz { right: 10px; bottom: calc(10px + var(--lmiara-barra)); left: 10px; }
  /* O iPhone dá zoom na página inteira quando o campo focado tem letra menor
     que 16px: foi isso que "desconfigurava" a IAra no celular da Jaqueline
     (msg 73601), com o painel saindo pela direita e o Enviar cortado. */
  .lmiara-rodape textarea, .lmiara-form input { font-size: 16px; }
  /* --lmiara-vh vem do visualViewport (o JS escreve): com o teclado aberto no
     iPhone, 100vh não encolhe e o topo do chat sumia acima da tela. */
  .lmiara-painel { width: auto; left: 0; right: 0; height: min(calc(var(--lmiara-vh, 100vh) * .74), 560px); }
  .lmiara-fab { margin-left: auto; }
  .lmiara-raiz > .lmiara-fab { float: right; }
}