/* ═══════════════════════════════════════════════════════════════════════════
   Botão flutuante do chat (o "Eddy") — tooltip "Fale Conosco"

   O botão (#edconversa-fab) é criado pelo script do EdConversa, que não é
   nosso: aqui só se acrescenta o tooltip, pelos pseudo-elementos do próprio
   botão (o script não usa nenhum dos dois). Nada do widget é alterado.

     · ::after   a etiqueta, à esquerda do botão, na altura do meio dele;
     · ::before  a setinha que liga a etiqueta ao botão.

   Aparece ao passar o mouse ou ao focar pelo teclado. Com o chat ABERTO não
   aparece (a janela do chat já diz o que é). Em tela de toque não há hover:
   o botão só abre o chat, como antes.

   O botão vinha com a dica nativa do navegador (title="Fale conosco"), que
   demora e aparece junto com esta: o header.php tira o title e põe o mesmo
   texto em aria-label, para o leitor de tela não perder nada.

   Carregada pelo includes/header.php, então vale no site inteiro.
   ═══════════════════════════════════════════════════════════════════════════ */

#edconversa-fab::after,
#edconversa-fab::before {
  position: absolute;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .18s ease, transform .18s ease;
}
#edconversa-fab::after {
  content: "Fale Conosco";
  right: calc(100% + 14px);
  padding: 9px 14px;
  border-radius: 8px;
  background: #545252;                 /* o cinza das barras do site */
  color: #fff;
  font: 600 14px/1 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
#edconversa-fab::before {
  content: "";
  right: calc(100% + 8px);
  border: 6px solid transparent;
  border-right-width: 0;
  border-left-color: #545252;
}

@media (hover: hover) {
  #edconversa-fab:hover::after,
  #edconversa-fab:hover::before { opacity: 1; transform: translate(0, -50%); }
}
#edconversa-fab:focus-visible::after,
#edconversa-fab:focus-visible::before { opacity: 1; transform: translate(0, -50%); }

/* chat aberto: sem tooltip */
#edconversa-widget:has(#edconversa-box.aberto) #edconversa-fab::after,
#edconversa-widget:has(#edconversa-box.aberto) #edconversa-fab::before { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  #edconversa-fab::after,
  #edconversa-fab::before { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Janela do chat (o "Bem-vindo!" e a conversa) — acabamento  ·  06/10/2026

   A janela (#edconversa-box) também é do script do EdConversa, e o MESMO
   script atende o site no ar. Por isso o tratamento é feito por cima, só aqui:
   estas regras refinam o que a folha do widget (widget.css, de lá) define.
   Nada do comportamento muda — os mesmos campos, botões e textos; nenhum
   elemento é criado, só pseudo-elementos decorativos.

   Todas as regras começam por #edconversa-widget: ganham da folha do widget
   pela especificidade, sem !important. Se o EdConversa mudar os ids, a janela
   só volta ao visual de lá; nada quebra.

   Cores: laranja da marca #E37A36 no cabeçalho; o botão usa #b95a1c, o tom que
   o painel já adota para texto branco ficar legível (contraste 4,6).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── a janela ── */
#edconversa-widget #edconversa-box {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(38, 33, 30, .08), 0 18px 48px rgba(38, 33, 30, .22);
  transform-origin: bottom right;
}
#edconversa-widget #edconversa-box.aberto {
  animation: vp-chat-abre .24s cubic-bezier(.2, .8, .2, 1);
}
@keyframes vp-chat-abre {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── cabeçalho ── */
#edconversa-widget #edconversa-header {
  padding: 16px 16px 16px 18px;
  gap: 13px;
  background: linear-gradient(135deg, #ea8a48 0%, #E37A36 45%, #cf6a2a 100%);
}
#edconversa-widget #edconversa-header-avatar {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
#edconversa-widget #edconversa-header-avatar svg { width: 30px; height: 30px; }
/* o assistente virtual responde na hora: a bolinha verde diz isso sem texto */
#edconversa-widget #edconversa-header-avatar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34c26b;
  border: 2px solid #E37A36;
}
#edconversa-widget #edconversa-header-nome { font-size: 17px; font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
#edconversa-widget #edconversa-header-status { font-size: 12.5px; opacity: .92; line-height: 1.35; }
#edconversa-widget #edconversa-btn-fechar {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 34px;
  text-align: center;
  opacity: .9;
  transition: background-color .15s ease, opacity .15s ease;
}
#edconversa-widget #edconversa-btn-fechar:hover,
#edconversa-widget #edconversa-btn-fechar:focus { background: rgba(255, 255, 255, .2); color: #fff; opacity: 1; }
#edconversa-widget #edconversa-btn-fechar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── tela "Bem-vindo!" ── */
#edconversa-widget #edconversa-tela-id {
  padding: 30px 28px 34px;
  gap: 0;
  background: radial-gradient(120% 60% at 50% 0%, #fdf1e7 0%, rgba(253, 241, 231, 0) 70%), #fff;
}
/* o selo no alto: um balão de conversa, para a tela não começar no vazio */
#edconversa-widget #edconversa-tela-id::before {
  content: "";
  flex: none;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E37A36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a7.5 7.5 0 0 1-11 6.6L4 20l1.4-4.7A7.5 7.5 0 1 1 20 12z'/%3E%3Cpath d='M9 11h.01M12.5 11h.01M16 11h.01'/%3E%3C/svg%3E") center / 38px no-repeat;
  box-shadow: 0 8px 22px rgba(227, 122, 54, .22), 0 0 0 8px rgba(227, 122, 54, .07);
}
#edconversa-widget #edconversa-tela-id-titulo {
  font-size: 23px;
  font-weight: 600;
  color: #33302e;
  letter-spacing: -.01em;
  line-height: 1.2;
}
#edconversa-widget #edconversa-tela-id-subtitulo {
  max-width: 280px;
  margin: 8px 0 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #6d6867;
}
#edconversa-widget #edconversa-input-tel {
  max-width: 300px;
  height: 54px;
  padding: 0 16px 0 48px;
  border: 1.5px solid #e2dedc;
  border-radius: 14px;
  background: #faf8f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8541c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E") 16px center / 20px no-repeat;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: left;
  color: #33302e;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#edconversa-widget #edconversa-input-tel::placeholder { color: #b0a9a5; font-weight: 400; }
#edconversa-widget #edconversa-input-tel:hover { border-color: #d3ccc8; }
#edconversa-widget #edconversa-input-tel:focus {
  border-color: #E37A36;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(227, 122, 54, .16);
}
#edconversa-widget #edconversa-btn-entrar {
  position: relative;
  max-width: 300px;
  height: 54px;
  margin-top: 12px;
  padding: 0 20px;
  border-radius: 14px;
  background: #b95a1c;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(185, 90, 28, .28);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#edconversa-widget #edconversa-btn-entrar::after {
  content: "→";
  display: inline-block;
  margin-left: 9px;
  font-weight: 500;
  transition: transform .18s ease;
}
#edconversa-widget #edconversa-btn-entrar:hover,
#edconversa-widget #edconversa-btn-entrar:focus {
  background: #a34e17;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(185, 90, 28, .34);
}
#edconversa-widget #edconversa-btn-entrar:hover::after { transform: translateX(4px); }
#edconversa-widget #edconversa-btn-entrar:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(185, 90, 28, .26); }
#edconversa-widget #edconversa-btn-entrar:focus-visible { outline: 3px solid rgba(227, 122, 54, .45); outline-offset: 2px; }
#edconversa-widget #edconversa-btn-entrar:disabled {
  background: #d9d4d1;
  color: #fff;
  transform: none;
  box-shadow: none;
}
#edconversa-widget #edconversa-btn-entrar:disabled::after { display: none; }
/* o aviso de erro, quando o script o mostra: uma faixa legível, não um texto vermelho solto */
#edconversa-widget #edconversa-id-erro {
  max-width: 300px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fbeae9;
  color: #b3261e;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* ── a conversa ── */
#edconversa-widget #edconversa-msgs { padding: 16px; background: #f6f4f2; }
#edconversa-widget .edconversa-msg { padding: 10px 14px; border-radius: 16px; font-size: 14.5px; }
#edconversa-widget .edconversa-msg-recebida { border-top-left-radius: 5px; color: #33302e; box-shadow: 0 1px 3px rgba(38, 33, 30, .08); }
/* a mensagem de quem escreve ganha o tom claro da marca: dá para ver de relance quem falou */
#edconversa-widget .edconversa-msg-enviada { padding: 10px 14px; border-top-right-radius: 5px; background: #fbe3cf; color: #3a2415; }
#edconversa-widget .edconversa-msg-separador span { padding: 4px 12px; border-radius: 999px; background: #ebe6e2; color: #6d6867; }
#edconversa-widget .edconversa-typing { border-radius: 16px; border-top-left-radius: 5px; }
#edconversa-widget #edconversa-input-area { padding: 12px 12px 12px 14px; gap: 10px; border-top-color: #ebe6e2; }
#edconversa-widget #edconversa-input-msg {
  padding: 11px 16px;
  border: 1.5px solid transparent;
  border-radius: 22px;
  background: #f6f4f2;
  font-size: 15px;
  color: #33302e;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#edconversa-widget #edconversa-input-msg:focus { border-color: #E37A36; background: #fff; box-shadow: 0 0 0 3px rgba(227, 122, 54, .14); }
/* campo de uma linha que cresce: sem a barrinha de rolagem com setas dentro dele */
#edconversa-widget #edconversa-input-msg { scrollbar-width: none; }
#edconversa-widget #edconversa-input-msg::-webkit-scrollbar { display: none; }
#edconversa-widget #edconversa-btn-enviar {
  width: 44px;
  height: 44px;
  padding: 0;
  background: #b95a1c;
  transition: background-color .15s ease, transform .15s ease;
}
#edconversa-widget #edconversa-btn-enviar:hover,
#edconversa-widget #edconversa-btn-enviar:focus { background: #a34e17; transform: scale(1.06); }
#edconversa-widget #edconversa-btn-enviar:disabled { background: #d9d4d1; transform: none; }

/* ── celular: a janela ocupa quase a tela; menos respiro para caber com o teclado aberto ── */
@media (max-width: 420px) {
  #edconversa-widget #edconversa-box { border-radius: 16px; }
  #edconversa-widget #edconversa-tela-id { padding: 22px 20px 26px; justify-content: flex-start; }
  #edconversa-widget #edconversa-tela-id::before { width: 64px; height: 64px; margin-bottom: 14px; background-size: 32px; }
  #edconversa-widget #edconversa-tela-id-titulo { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  #edconversa-widget #edconversa-box.aberto { animation: none; }
  #edconversa-widget #edconversa-btn-entrar,
  #edconversa-widget #edconversa-btn-entrar::after,
  #edconversa-widget #edconversa-btn-enviar { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Chat em TELA CHEIA no celular · 22/10/2026

   Pedido do usuário: no celular, o balão abre o chat ocupando a tela, com o logo
   da Velaplast em cima e um botão Fechar (o mesmo jeito da candidatura passo a
   passo). No computador nada muda. A barra (.vp-chat-topo) é posta pelo
   js/vp-chat.js, que também liga a classe vp-chat-cheio no <html> quando a janela
   abre num aparelho que conta como celular (até 767 px ou tela de toque).
   O "×" laranja do widget some: o Fechar da barra é o único fechar.
   ═══════════════════════════════════════════════════════════════════════════ */
#edconversa-widget .vp-chat-topo { display: none; }
html.vp-chat-cheio, html.vp-chat-cheio body { overflow: hidden !important; }
html.vp-chat-cheio #edconversa-widget #edconversa-box.aberto {
  position: fixed; left: 0; right: 0; bottom: auto; top: var(--vp-chat-top, 0);
  width: 100vw; height: 100vh; height: var(--vp-chat-h, 100dvh); max-width: none; max-height: none;
  border: 0; border-radius: 0; box-shadow: none; z-index: 2147483000; animation: vp-chat-cheio .2s ease;
}
@keyframes vp-chat-cheio { from { opacity: 0; } to { opacity: 1; } }
html.vp-chat-cheio #edconversa-widget .vp-chat-topo {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 58px; padding: 0 14px 0 18px; background: #fff; position: relative; z-index: 1;
  box-shadow: 0 6px 20px -12px rgba(20, 22, 40, .55);
}
html.vp-chat-cheio #edconversa-widget .vp-chat-logo { display: block; height: 30px; width: auto; }
html.vp-chat-cheio #edconversa-widget .vp-chat-fechar,
html.vp-chat-cheio #edconversa-widget .vp-chat-fechar:hover,
html.vp-chat-cheio #edconversa-widget .vp-chat-fechar:focus {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; cursor: pointer;
  border: 1.5px solid transparent; border-radius: 8px; background: none; color: #545971;
  font: 600 14px/1 Roboto, system-ui, sans-serif;
}
html.vp-chat-cheio #edconversa-widget .vp-chat-fechar:hover { background: #f1f2f6; color: #2f3348; }
html.vp-chat-cheio #edconversa-widget .vp-chat-fechar:focus { outline: none; }
html.vp-chat-cheio #edconversa-widget .vp-chat-fechar:focus-visible { outline: 2px solid #545971; outline-offset: 2px; }
html.vp-chat-cheio #edconversa-widget #edconversa-btn-fechar { display: none; }
html.vp-chat-cheio #edconversa-widget #edconversa-header { border-radius: 0; }
html.vp-chat-cheio #edconversa-widget #edconversa-tela-id { justify-content: center; }
html.vp-chat-cheio #edconversa-fab, html.vp-chat-cheio .vp-cookies { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.vp-chat-cheio #edconversa-widget #edconversa-box.aberto { animation: none; }
}