/**
 * Lead Chat -- widget
 *
 * Layout medido a partir do Typebot em producao, para reproduzir o chat
 * original fielmente: janela 400px com raio 8px, baloes de raio 6px, avatar
 * de 24px ao fim de cada grupo, input dentro do fluxo (nao fixo no rodape) e
 * barra de rolagem oculta.
 *
 * Todo seletor e prefixado com #lead-chat-root: resets de tema como o do
 * Elementor usam [type="button"], que empata em especificidade com uma classe
 * e vence por vir depois na cascata.
 */

#lead-chat-root{
  --lc-bubble:#4A8BB2;
  --lc-bot:#4A8BB2;
  --lc-bot-text:#FFFFFF;
  --lc-guest:#666460;
  --lc-guest-text:#FFFFFF;
  --lc-buttons:#598E71;
  --lc-button-text:#FFFFFF;
  --lc-progress:#FFE747;
  --lc-window:#FFFFFF;
  --lc-text:#666460;
  --lc-teaser-bg:#FFFFFF;
  --lc-teaser-text:#0042DA;
  --lc-font:inherit;
  --lc-x:20px;
  --lc-y:20px;
  --lc-shadow-md:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);

  position:fixed;
  bottom:var(--lc-y);
  z-index:2147483000;
  font-family:var(--lc-font);
  line-height:1.5;
  font-size:16px;
}
#lead-chat-root.lc-right{right:var(--lc-x)}
#lead-chat-root.lc-left{left:var(--lc-x)}

#lead-chat-root *,
#lead-chat-root *::before,
#lead-chat-root *::after{box-sizing:border-box}

/* ============ bolha ============ */
#lead-chat-root .lc-launcher{
  width:48px;height:48px;
  border-radius:16px;
  background:var(--lc-bubble);
  color:#eee;
  border:none;margin:0;padding:0;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--lc-shadow-md);
  position:relative;
  transition:transform .2s ease;
  font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
#lead-chat-root .lc-launcher:hover{transform:scale(1.1)}
#lead-chat-root .lc-launcher:active{transform:scale(.95)}
#lead-chat-root .lc-launcher:focus-visible{outline:3px solid var(--lc-bubble);outline-offset:3px}
#lead-chat-root .lc-launcher svg{
  width:24px;height:24px;fill:currentColor;position:absolute;
  transition:transform .2s, opacity .2s;
}
#lead-chat-root .lc-ico-close{transform:scale(0);opacity:0}
#lead-chat-root.lc-open .lc-ico-chat{transform:scale(0);opacity:0}
#lead-chat-root.lc-open .lc-ico-close{transform:scale(1);opacity:1}

/* ============ mensagem de previa ============ */
#lead-chat-root .lc-teaser{
  position:absolute;
  bottom:calc(100% + 12px);
  width:256px;
  border-radius:6px;
  display:flex;align-items:center;gap:16px;
  padding:16px;
  background:var(--lc-teaser-bg);
  color:var(--lc-teaser-text);
  box-shadow:var(--lc-shadow-md);
  cursor:pointer;
  border:none;
  text-align:left;
  font-family:inherit;font-size:15px;line-height:1.4;
  animation:lc-fade-in .3s ease-out;
  transition:box-shadow .2s;
}
#lead-chat-root.lc-right .lc-teaser{right:0}
#lead-chat-root.lc-left .lc-teaser{left:0}
#lead-chat-root .lc-teaser:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)}
#lead-chat-root .lc-teaser img{
  width:32px;height:32px;border-radius:9999px;object-fit:cover;flex:0 0 32px;
}
#lead-chat-root .lc-teaser-text{flex:1 1 auto;min-width:0}
#lead-chat-root .lc-teaser-close{
  position:absolute;top:-8px;right:-8px;
  width:24px;height:24px;padding:4px;
  border-radius:9999px;border:none;
  background:#f7f8ff;color:#303235;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
#lead-chat-root .lc-teaser-close:hover{filter:brightness(.95)}
#lead-chat-root .lc-teaser-close svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2px}

/* ============ janela ============ */
#lead-chat-root .lc-window{
  position:absolute;
  bottom:calc(100% + 12px);
  width:400px;
  height:704px;
  max-height:calc(100vh - 100px);
  max-width:calc(100vw - 40px);
  background:var(--lc-window);
  border-radius:8px;
  box-shadow:0 5px 40px rgba(0,0,0,.16);
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:scale(.98);
  pointer-events:none;
  transition:opacity .15s ease-out, transform .15s ease-out;
}
#lead-chat-root.lc-right .lc-window{right:0}
#lead-chat-root.lc-left .lc-window{left:0}
#lead-chat-root.lc-open .lc-window{opacity:1;transform:none;pointer-events:auto}

/* area rolavel -- sem barra visivel, como no original */
#lead-chat-root .lc-view{
  flex:1 1 auto;
  overflow-y:auto;overflow-x:hidden;
  padding:40px 12px 0;
  display:flex;flex-direction:column;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
}
#lead-chat-root .lc-view::-webkit-scrollbar{display:none;width:0;height:0}
#lead-chat-root .lc-spacer{flex:0 0 16px}

/* ============ grupo de mensagens do bot ============ */
#lead-chat-root .lc-group{
  display:flex;align-items:flex-end;gap:4px;
  margin-bottom:8px;
}
#lead-chat-root .lc-avatar{
  width:24px;height:24px;flex:0 0 24px;
  border-radius:9999px;object-fit:cover;
  margin-bottom:2px;
  will-change:transform;
  animation:lc-fade-in .3s ease-out;
}
#lead-chat-root .lc-msgs{
  display:flex;flex-direction:column;gap:8px;
  min-width:0;max-width:348px;
}

/* balao do bot: fundo animado + texto em fade */
/*
 * O balao inteiro cresce do tamanho dos tres pontinhos ate o tamanho do
 * texto. Antes so o fundo crescia, e o espaco do texto invisivel ja ficava
 * reservado -- o avatar, alinhado pelo fim do grupo, descia antes da hora.
 */
#lead-chat-root .lc-bubble{
  position:relative;
  display:flex;align-items:center;
  align-self:flex-start;max-width:100%;
  color:var(--lc-bot-text);
  overflow:hidden;
  transition:width .4s ease-out, height .4s ease-out;
}
#lead-chat-root .lc-bubble-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--lc-bot);
  border-radius:6px;
}
#lead-chat-root .lc-bubble-text{
  position:relative;
  margin:8px 16px;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  font-size:16px;line-height:24px;
  opacity:0;
  transition:opacity .4s ease-in .2s;
}
#lead-chat-root .lc-bubble.lc-done .lc-bubble-text{opacity:1}

/* tres pontinhos: ficam sobre o fundo, sem ocupar espaco no fluxo, para o
   balao ja nascer com o tamanho final do texto e so o fundo crescer */
#lead-chat-root .lc-dots{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;gap:4px;
  width:58px;height:40px;padding:8px 16px;
}
#lead-chat-root .lc-dots span{
  width:6px;height:6px;border-radius:9999px;
  background:var(--lc-bot-text);opacity:.5;
  animation:lc-blink 1.3s infinite ease-in-out;
}
#lead-chat-root .lc-dots span:nth-child(2){animation-delay:.18s}
#lead-chat-root .lc-dots span:nth-child(3){animation-delay:.36s}

/* ============ mensagem do visitante ============ */
#lead-chat-root .lc-guest{
  display:flex;justify-content:flex-end;
  margin-bottom:8px;
  animation:lc-fade-in .3s ease-out;
}
#lead-chat-root .lc-guest span{
  display:inline-block;
  padding:7px 15px;
  background:var(--lc-guest);
  color:var(--lc-guest-text);
  border:1px solid var(--lc-guest);
  border-radius:6px;
  white-space:pre-wrap;overflow-wrap:break-word;
  max-width:348px;
  font-size:16px;line-height:24px;
}

/* ============ entrada ============ */
#lead-chat-root .lc-input-container{
  display:flex;justify-content:flex-end;gap:8px;
  margin-bottom:8px;
  animation:lc-fade-in .3s ease-out;
}
#lead-chat-root .lc-form{
  display:flex;width:100%;gap:8px;align-items:flex-end;
  max-width:350px;
  margin:0;
}
#lead-chat-root .lc-input{
  position:relative;
  display:flex;align-items:center;
  width:100%;
  background:var(--lc-window);
  border-radius:6px;
  box-shadow:var(--lc-shadow-md);
  padding:0 8px;
}
#lead-chat-root .lc-input input{
  flex:1 1 auto;width:100%;min-width:0;
  padding:16px;
  border:none;background:transparent;
  color:var(--lc-text);
  font-size:16px;line-height:24px;
  font-family:inherit;
  border-radius:6px;
  margin:0;
  -webkit-appearance:none;appearance:none;
}
#lead-chat-root .lc-input input:focus{outline:none;box-shadow:none}
#lead-chat-root .lc-input input::placeholder{color:var(--lc-text);opacity:.65}

/* seletor de pais do telefone */
#lead-chat-root .lc-country{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding-left:8px;padding-right:4px;
  flex:0 0 auto;
  color:var(--lc-text);
}
#lead-chat-root .lc-country .lc-flag{font-size:18px;line-height:1}
#lead-chat-root .lc-country svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2px}
#lead-chat-root .lc-country select{
  position:absolute;top:0;left:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;
  font-family:inherit;
}

#lead-chat-root .lc-send{
  flex:0 0 auto;
  height:56px;
  padding:8px 16px;
  border:none;border-radius:6px;
  background:var(--lc-buttons);
  color:var(--lc-button-text);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--lc-shadow-md);
  font-family:inherit;font-weight:600;
  transition:filter .2s;
  -webkit-appearance:none;appearance:none;
}
#lead-chat-root .lc-send:hover{filter:brightness(.9)}
#lead-chat-root .lc-send:active{filter:brightness(.75)}
#lead-chat-root .lc-send:disabled{opacity:.5;cursor:not-allowed;filter:none}
#lead-chat-root .lc-send svg{width:24px;height:24px;fill:currentColor}

/* ============ botoes de escolha ============ */
#lead-chat-root .lc-choices{
  display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;
  margin-bottom:8px;
  margin-left:auto;
  max-width:350px;width:100%;
}
#lead-chat-root .lc-choice{
  width:100%;
  padding:8px 16px;
  border:none;border-radius:6px;
  background:var(--lc-buttons);
  color:var(--lc-button-text);
  font-family:inherit;font-size:16px;font-weight:600;line-height:24px;
  text-align:center;
  white-space:normal;overflow-wrap:break-word;
  cursor:pointer;
  transition:filter .2s;
  animation:lc-fade-in .3s backwards;
  -webkit-appearance:none;appearance:none;
}
#lead-chat-root .lc-choice:hover{filter:brightness(.9)}
#lead-chat-root .lc-choice:active{filter:brightness(.75)}
#lead-chat-root .lc-choice:focus-visible{outline:2px solid var(--lc-buttons);outline-offset:2px}

/* ============ barra de progresso ============ */
#lead-chat-root .lc-progress{
  position:absolute;left:0;right:0;bottom:0;
  height:4px;
  background:rgba(255,255,255,.12);
}
#lead-chat-root .lc-progress.lc-top{top:0;bottom:auto}
#lead-chat-root .lc-progress i{
  display:block;height:100%;width:0;
  background:var(--lc-progress);
  transition:width .25s;
}

#lead-chat-root .lc-hp{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
#lead-chat-root .lc-badge{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:#dba617;color:#1d2327;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 8px;border-radius:9px;white-space:nowrap;
  text-transform:uppercase;z-index:2;
}

@keyframes lc-fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes lc-blink{
  0%,60%,100%{opacity:.35;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

@media (max-width:480px){
  #lead-chat-root .lc-window{
    width:calc(100vw - 24px);
    height:calc(100vh - 110px);
  }
  #lead-chat-root .lc-msgs,
  #lead-chat-root .lc-guest span{max-width:calc(100vw - 90px)}
  #lead-chat-root .lc-teaser{width:220px}
}

@media (prefers-reduced-motion:reduce){
  #lead-chat-root *{animation:none!important;transition:none!important}
  #lead-chat-root .lc-bubble-text{opacity:1}
}