/*
 * Botão do chat do Chatwoot (includes/chat-chatwoot.php).
 *
 * Círculo na "cor do widget" da caixa no Chatwoot (a mesma da janela), lida pelo JS no
 * carregamento; sem ela, o azul padrão do Chatwoot. Fundo e fonte vêm dos tokens do tema.
 *
 * Altura fixa e círculo do mesmo tamanho nos dois estados: a pílula não muda de altura
 * enquanto recolhe. Mesma coluna dos botões flutuantes do tema (`.scroll-chat`: 60px,
 * right 24px, bottom 20px). z-index 1000001, o do Crisp, para o pop-up do NPS (1000002,
 * bb-nps-widget.css) continuar por cima.
 *
 * Documentado em docs/superpowers/2026-10-01-chat-chatwoot.md.
 */
#icl-chat-launcher {
  --icl-chat-cor: var(--icl-chat-cor-widget, #1f93ff);
  --icl-chat-fundo: var(--main-dark, #141414);
  --icl-chat-circulo: 60px;
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 1000001;
  box-sizing: border-box;
  height: var(--icl-chat-circulo);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 24px 0 0;
  border: 0;
  border-radius: 999px;
  background: var(--icl-chat-fundo);
  color: #fff;
  text-align: left;
  white-space: nowrap;
  font: inherit;
  font-family: var(--fonts-family), system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .15s ease, padding .35s ease, gap .35s ease, background-color .35s ease;
}

#icl-chat-launcher[hidden] {
  display: none;
}

#icl-chat-launcher:hover {
  transform: translateY(-2px);
}

.icl-chat-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icl-chat-circulo);
  height: var(--icl-chat-circulo);
  border-radius: 50%;
  background: var(--icl-chat-cor);
}

.icl-chat-icone svg {
  width: 24px;
  height: 24px;
}

.icl-chat-texto {
  max-width: 260px;
  overflow: hidden;
  transition: max-width .35s ease, opacity .25s ease;
}

.icl-chat-texto strong {
  display: block;
  font-size: 15px;
  line-height: 20px;
}

.icl-chat-texto small {
  display: block;
  font-size: 12.5px;
  line-height: 16px;
  opacity: .8;
}

/* Depois de 15 s fica só o círculo; o texto volta no hover ou no foco por teclado. */
#icl-chat-launcher.compacto:not(:hover):not(:focus-visible) {
  padding: 0;
  gap: 0;
  background: var(--icl-chat-cor);
}

#icl-chat-launcher.compacto:not(:hover):not(:focus-visible) .icl-chat-texto {
  max-width: 0;
  opacity: 0;
}

/* Celular: só o círculo, parado — sem texto, sem animação. */
@media (max-width: 480px) {
  #icl-chat-launcher,
  #icl-chat-launcher.compacto:not(:hover):not(:focus-visible) {
    padding: 0;
    gap: 0;
    background: var(--icl-chat-cor);
    transition: none;
    transform: none;
  }

  .icl-chat-texto {
    display: none;
  }
}