/* =========================================================
   Chat online (motor @n8n/chat, mode:"window") — camada visual própria.
   O JS/backend do chat (webhook, sessão, IA) não é tocado aqui, só o CSS.
   ========================================================= */

:root {
  --chat--color-primary: #1e88e5;
  --chat--color-primary-shade-50: #1565c0;
  --chat--color-primary-shade-100: #0d47a1;
  --chat--color-secondary: #20b69e;

  --chat--border-radius: 12px;
  --chat--message--border-radius: 12px;

  --chat--window--width: 380px;
  --chat--window--height: 560px;

  --chat--header--background: linear-gradient(135deg, #1e88e5, #0d47a1);
  --chat--header--color: #ffffff;
  --chat--heading--font-size: 1.15em;

  --chat--toggle--size: 64px;
  --chat--toggle--background: #e5721e;
  --chat--toggle--hover--background: #1565c0;

  /* Altura aproximada da barra de preço fixa das páginas de curso
     (.cdp-mobile-cta) — usada para desviar o botão do chat dela no mobile. */
  --eo-chat-course-bar-h: 70px;
}

/* ---------- Janela (desktop: flutuante; fechado: só o botão) ---------- */
.chat-window-wrapper {
  background-image: url(/uploads/estamos-online-1.png);
  background-repeat: no-repeat;
  min-width: 220px;
  background-position-y: center;
}
@media (max-width: 850px) {
  .chat-window-wrapper { background-image: none; }
}

/* ---------- Cabeçalho ---------- */
.chat-layout .chat-header {
  background-image: url(/uploads/atendente.png);
  background-repeat: no-repeat;
  background-position-x: 1.2rem;
  background-position-y: 0.8rem;
  height: 80px;
  background-color: #4d03ff;
  gap: 0;
}
.chat-layout .chat-header h1 { margin-block-end: 0; }
.chat-layout .chat-header p {
  line-height: var(--chat--subtitle--line-height, 0px);
  padding-left: 80px;
  margin-top: 0;
}
.chat-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-repeat: no-repeat;
  padding-left: 80px;
  height: 30px;
}

/* Remove o "Powered by" */
.chat-powered-by { display: none; }

/* ---------- Mensagens ---------- */
.chat-message p { line-height: var(--chat--message-line-height, 1.2); }
.chat-message-markdown { font-size: 100%; }

/* ---------- Botão flutuante (fechado) ---------- */
.n8n-chat-toggle {
  border-radius: 28px !important;
  box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3) !important;
  font-weight: 500 !important;
}
.n8n-chat-toggle::after {
  content: "Fale conosco 24hrs" !important;
  position: absolute;
  right: 60px;
  white-space: nowrap;
  background: #1e88e5;
  padding: 8px 12px;
  border-radius: 20px;
  color: white;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.n8n-chat-toggle:hover::after { background: #1565c0; }

/* ---------- Campo de entrada e botão de enviar ---------- */
.chat-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px;
  background: #f1f1f1;
  border-top: 1px solid #ddd;
  border-radius: 0 0 12px 12px;
}
.chat-inputs textarea {
  flex: 1;
  resize: none;
  height: 40px !important;
  padding: 0px;
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
  background-color: #fff;
  transition: border 0.2s ease-in-out;
  overflow: hidden !important;
}
.chat-inputs textarea:focus {
  border-color: var(--chat--color-primary);
  box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.1);
}
.chat-inputs-controls button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.chat-inputs-controls button:hover {
  background-color: var(--chat--color-primary-shade-50);
  color: #0083ff;
}
.chat-inputs-controls button svg { fill: white; width: 18px; height: 18px; }

/* =========================================================
   MOBILE (≤960px) — botão flutuante desviando da barra de preço fixa
   das páginas de curso (.cdp-mobile-cta, altura ~70px, z-index:100).
   Só afeta o botão FECHADO: aberto, o chat vira tela cheia (≤640px)
   e cobre a tela toda de propósito.
   ========================================================= */
@media (max-width: 960px) {
  body:has(.cdp-mobile-cta) .chat-window-wrapper:not(:has(.chat-window:not([style*="none"]))) {
    bottom: calc(var(--eo-chat-course-bar-h) + 16px);
  }
}

/* =========================================================
   MOBILE (≤640px) — chat em tela cheia, como um app.
   Importante: o .chat-window NUNCA some do DOM — o widget alterna
   aberto/fechado via v-show (só troca display:none inline), não remove
   o elemento. Por isso o filtro certo é ":not([style*=\"none\"])": só
   conta como "aberto" quando o .chat-window não estiver com display:none.
   Sem esse filtro, :has(.chat-window) bateria sempre (aberto e fechado)
   e o botão flutuante ficaria preso na posição do estado aberto o tempo
   todo, mesmo com a janela fechada.
   ========================================================= */
@media (max-width: 640px) {
  .chat-window-wrapper:has(.chat-window:not([style*="none"])) {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    /* svh (small viewport height) = tamanho já considerando o pior caso
       (teclado/UI do navegador abertos). dvh faz a caixa encolher de forma
       drástica toda vez que o teclado abre — svh fica estável o tempo todo. */
    height: 100svh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100svh;
    border-radius: 0;
    background: none;
  }

  .chat-window-wrapper:has(.chat-window:not([style*="none"])) .chat-window {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  /* O .chat-window-toggle (botão redondo) é irmão do .chat-window dentro do
     mesmo flex-direction:column — por padrão ele empilha ABAIXO da caixa de
     chat e "come" espaço da área de mensagens. Tirando ele do fluxo do flex
     (position:absolute) ele passa a flutuar por cima, sem espremer o chat. */
  .chat-window-wrapper:has(.chat-window:not([style*="none"])) .chat-window-toggle {
    position: absolute;
    top: 20px;
    right: 14px;
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 3;
  }

  /* Cabeçalho compacto por padrão no mobile: uma linha só, sem subtítulo,
     pra já sobrar mais espaço de mensagens mesmo sem o teclado aberto. */
  .chat-window-wrapper:has(.chat-window:not([style*="none"])) .chat-layout .chat-header {
    height: 56px;
    padding: 8px 16px;
    background-position-x: 16px;
    background-position-y: 8px;
    background-size: 40px;
  }
  .chat-window-wrapper:has(.chat-window:not([style*="none"])) .chat-layout .chat-header h1 {
    font-size: 15px;
  }
  .chat-window-wrapper:has(.chat-window:not([style*="none"])) .chat-layout .chat-header p {
    display: none;
  }
  .chat-window-wrapper:has(.chat-window:not([style*="none"])) .chat-heading {
    padding-left: 56px;
    height: auto;
  }

  /* Teclado do celular aberto (classe adicionada via JS em chat-widget.js):
     cabeçalho vira uma barrinha ainda mais fina, sem foto — só o nome —
     pra sobrar o máximo de altura pras mensagens quando a tela útil encolhe. */
  body.eo-chat-kbd .chat-layout .chat-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 14px !important;
    gap: 0 !important;
    background-image: none !important;
  }
  body.eo-chat-kbd .chat-layout .chat-header h1 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }
  body.eo-chat-kbd .chat-heading {
    padding-left: 0 !important;
    height: auto !important;
  }
}