@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --nschat-roxo: #8745D5;
  --nschat-navy: #0B2540;
  --nschat-navy-deep: #071A2E;
}

#nschat-root, #nschat-root * {
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#nschat-root {
  /* Precisa ser declarada aqui (não em :root) — é neste elemento que
     widget.js define "--nschat-cor-principal" via inline style. Se
     "--nschat-azul" fosse calculada em :root (html), o var() ali resolveria
     usando o valor de --nschat-cor-principal NO <html> (nunca definido, cai
     sempre no fallback) e esse resultado fixo é que seria herdado — a cor
     escolhida no admin nunca chegaria a aparecer. */
  --nschat-azul: var(--nschat-cor-principal, #015D9E);
  position: fixed;
  z-index: 2147483000;
  bottom: 24px;
  right: 24px;
}
#nschat-root.nschat-esquerda { right: auto; left: 24px; }
#nschat-root.nschat-esquerda .nschat-painel { right: auto; left: 0; }

/* ---------------------------------------------------------------- */
/* Bolha flutuante                                                   */
/* ---------------------------------------------------------------- */
.nschat-bolha {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--nschat-azul);
  box-shadow: 0 10px 30px -6px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nschat-bolha:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 36px -6px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);
}
.nschat-bolha svg { width: 27px; height: 27px; color: #fff; }
.nschat-bolha .nschat-ponto-online {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #fff;
}
.nschat-bolha .nschat-badge-nao-lidas {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 100px;
  background: #ef4444;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

@keyframes nschat-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0.35); }
  70%  { box-shadow: 0 0 0 14px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.nschat-bolha.nschat-pulsando { animation: nschat-pulso 2.4s infinite; }

/* ---------------------------------------------------------------- */
/* Painel do chat                                                    */
/* ---------------------------------------------------------------- */
.nschat-painel {
  position: absolute;
  bottom: 78px;
  right: 0;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.06);
  animation: nschat-abrir 0.25s ease;
}
.nschat-painel.nschat-aberto { display: flex; }

@keyframes nschat-abrir {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nschat-cabecalho {
  background: linear-gradient(135deg, var(--nschat-navy) 0%, var(--nschat-navy-deep) 100%);
  padding: 18px 18px 14px;
  position: relative;
  flex-shrink: 0;
}
.nschat-cabecalho::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -10%, rgba(135,69,213,0.35), transparent 60%);
  pointer-events: none;
}
.nschat-cabecalho-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.nschat-avatar-wrap { position: relative; flex-shrink: 0; }
.nschat-avatar-consultor {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--nschat-azul);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.2);
}
.nschat-avatar-consultor img { width: 100%; height: 100%; object-fit: cover; }
.nschat-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #6b7280;
  border: 2px solid var(--nschat-navy, #0b1220);
}
.nschat-status-dot.nschat-online { background: #22c55e; }
.nschat-avatar-consultor.nschat-avatares-empilhados { background: transparent; border: none; overflow: visible; }
.nschat-avatar-consultor.nschat-avatares-empilhados #nschat-avatar-conteudo { display: flex; align-items: center; }
.nschat-avatar-mini {
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--nschat-navy, #0b1220);
  background: var(--nschat-azul);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px; margin-left: -10px;
}
.nschat-avatar-mini:first-child { margin-left: 0; }
.nschat-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.nschat-msg-sistema {
  text-align: center; color: #94a3b8; font-size: 11.5px; margin: 6px 0; padding: 0 12px;
}
.nschat-digitando { color: #9fc4e8; font-size: 11.5px; font-style: italic; padding: 4px 14px; }
.nschat-cabecalho-info { flex: 1; min-width: 0; }
.nschat-cabecalho-nome { color: #fff; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.nschat-cabecalho-cargo { color: #9fc4e8; font-size: 11.5px; font-weight: 500; }
.nschat-fechar {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #cbd5e1;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.nschat-fechar:hover { background: rgba(255,255,255,0.18); color: #fff; }
.nschat-fechar svg { width: 16px; height: 16px; }

.nschat-marca {
  margin-top: 10px;
  font-size: 12px;
  color: #a8bcd4;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}
.nschat-marca a { color: #93c5fd; font-weight: 700; text-decoration: none; }
.nschat-marca a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- */
/* Corpo (mensagens / formulários)                                   */
/* ---------------------------------------------------------------- */
.nschat-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nschat-saudacao {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.55;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.nschat-msg { max-width: 82%; font-size: 13.5px; line-height: 1.5; padding: 10px 13px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); white-space: pre-wrap; word-break: break-word; }
.nschat-msg-visitante { align-self: flex-end; background: var(--nschat-azul); color: #fff; border-bottom-right-radius: 4px; }
.nschat-msg-consultor { align-self: flex-start; background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.nschat-msg-hora { display: block; margin-top: 4px; font-size: 10px; opacity: 0.65; text-align: right; }
.nschat-msg a { color: var(--nschat-azul); text-decoration: underline; font-weight: 600; }
.nschat-msg-nome { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 3px; }

/* Mensagem só com emoji (sem texto) fica bem maior, sem bolha ao redor —
   mesmo padrão do WhatsApp/iMessage. */
.nschat-msg-emoji-grande { background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 4px !important; font-size: 40px; line-height: 1.2; }
.nschat-msg-emoji-grande .nschat-msg-hora { color: #94a3b8 !important; opacity: 1; }

/* Formulário pré-chat */
.nschat-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.nschat-form-titulo { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 12px; }
.nschat-campo { position: relative; margin-bottom: 12px; }
.nschat-campo label { display: block; font-size: 11px; color: #64748b; margin-bottom: 4px; font-weight: 600; }
.nschat-campo input, .nschat-campo textarea {
  width: 100%;
  padding: 10px 34px 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: 13.5px;
  color: #1e293b;
  font-family: inherit;
  transition: border-color 0.15s ease;
}
.nschat-campo textarea { resize: vertical; min-height: 64px; padding-right: 12px; }
.nschat-campo input:focus, .nschat-campo textarea:focus { outline: none; border-color: var(--nschat-azul); }
.nschat-campo .nschat-check {
  position: absolute;
  right: 10px;
  top: 30px;
  color: #22c55e;
  display: none;
  width: 16px;
  height: 16px;
}
.nschat-campo.nschat-valido .nschat-check { display: block; }

.nschat-btn {
  width: 100%;
  background: var(--nschat-azul);
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nschat-btn:hover { transform: translateY(-1px); }
.nschat-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.nschat-erro { color: #dc2626; font-size: 12px; margin-top: 6px; }
.nschat-erro-conversa { display: flex; align-items: flex-start; gap: 8px; margin: 0 10px 6px; padding: 8px 10px; border-radius: 8px; background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; font-size: 12.5px; line-height: 1.4; }
.nschat-erro-conversa span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nschat-erro-conversa button { flex-shrink: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; opacity: 0.65; }
.nschat-erro-conversa button:hover { opacity: 1; }

.nschat-offline-icone {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #d97706;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}

.nschat-sucesso-offline { text-align: center; padding: 10px 4px; }
.nschat-sucesso-offline svg { width: 42px; height: 42px; color: #22c55e; margin-bottom: 8px; }
.nschat-sucesso-offline p { font-size: 13.5px; color: #334155; line-height: 1.55; }

/* ---------------------------------------------------------------- */
/* Menu do bot (fora do horário)                                     */
/* ---------------------------------------------------------------- */
.nschat-bot-perguntas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.nschat-bot-btn-pergunta {
  width: 100%; text-align: left; background: #fff; color: #334155;
  border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nschat-bot-btn-pergunta:hover { border-color: var(--nschat-azul); background: rgba(1, 93, 158, 0.05); }
.nschat-bot-btn-pergunta-selecionada, .nschat-bot-btn-pergunta-selecionada:hover {
  border-color: var(--nschat-azul); background: rgba(1, 93, 158, 0.08);
}
.nschat-btn-link {
  width: 100%; background: transparent; border: none; color: #64748b;
  font-size: 12.5px; font-weight: 600; text-decoration: underline;
  cursor: pointer; font-family: inherit; padding: 6px 0;
}
.nschat-btn-link:hover { color: var(--nschat-azul); }
.nschat-bot-resposta {
  font-size: 13px; color: #334155; line-height: 1.55; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}

/* Chat livre do bot de IA — mesmo visual de campo do resto do formulário
   (".nschat-campo input"), mas fora dessa estrutura porque aqui não tem
   label nem check de validação. */
.nschat-bot-ia-input {
  padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 9px;
  font-size: 13.5px; color: #1e293b; font-family: inherit; transition: border-color 0.15s ease;
}
.nschat-bot-ia-input:focus { outline: none; border-color: var(--nschat-azul); }
.nschat-bot-ia-input:disabled { opacity: 0.6; }

/* ---------------------------------------------------------------- */
/* Rodapé (caixa de digitação)                                       */
/* ---------------------------------------------------------------- */
.nschat-rodape {
  border-top: 1px solid #e2e8f0;
  padding: 10px 12px;
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
}
.nschat-rodape.nschat-visivel { display: flex; }
.nschat-rodape textarea {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13.5px;
  padding: 10px 6px;
  font-family: inherit;
  color: #1e293b;
  resize: none;
  max-height: 90px;
  overflow-y: auto;
  line-height: 1.4;
}
.nschat-rodape button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--nschat-azul);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.nschat-rodape button svg { width: 17px; height: 17px; }
#nschat-btn-enviar:disabled { background: #cbd5e1; cursor: not-allowed; }

.nschat-opcoes-wrap { position: relative; flex-shrink: 0; }
/* Mesmo motivo do ".nschat-btn-emoji": especificidade maior que
   ".nschat-rodape button" para não herdar o botão circular com gradiente. */
.nschat-opcoes-wrap .nschat-btn-opcoes {
  width: 26px; height: 38px; border-radius: 8px; border: none; background: transparent;
  color: #94a3b8; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nschat-opcoes-wrap .nschat-btn-opcoes:hover { color: #475569; background: rgba(0,0,0,0.05); }
.nschat-opcoes-menu {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
  min-width: 220px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  padding: 6px; box-shadow: 0 20px 50px -15px rgba(0,0,0,0.4); white-space: nowrap;
}
.nschat-opcoes-menu.aberto { display: block; }
.nschat-opcoes-menu button {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  text-align: left; background: transparent; border: none; padding: 10px 12px;
  font-size: 13px; color: #1e293b; cursor: pointer; border-radius: 8px; font-family: inherit;
}
.nschat-opcoes-menu button svg { width: 16px; height: 16px; flex-shrink: 0; color: #64748b; }
.nschat-opcoes-menu button:hover { background: rgba(0,0,0,0.05); }
.nschat-opcoes-menu button:disabled { opacity: 0.5; cursor: not-allowed; background: transparent; }

.nschat-emoji-wrap { position: relative; flex-shrink: 0; }
/* Especificidade maior que ".nschat-rodape button" de propósito — sem isso,
   aquela regra genérica (botão circular com gradiente) sobrescrevia o
   fundo transparente deste botão. */
.nschat-emoji-wrap .nschat-btn-emoji {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent;
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.nschat-emoji-wrap .nschat-btn-emoji:hover { background: rgba(0,0,0,0.05); }

.nschat-emoji-painel {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
  width: 232px; max-height: 220px; overflow-y: auto; background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 10px;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.4);
  grid-template-columns: repeat(5, 1fr); gap: 2px;
}
.nschat-emoji-painel.aberto { display: grid; }
.nschat-emoji-painel .nschat-emoji-item {
  background: transparent; border: none; font-size: 22px; cursor: pointer; border-radius: 8px;
  padding: 6px 0; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.nschat-emoji-painel .nschat-emoji-item:hover { background: rgba(0,0,0,0.06); }

/* Imagens do Twemoji — mesma técnica usada no painel do consultor, para os
   emojis ficarem coloridos e consistentes em qualquer sistema. */
.nschat-emoji-painel img.emoji { width: 24px; height: 24px; }
.nschat-emoji-wrap img.emoji { width: 20px; height: 20px; }
.nschat-msg img.emoji { width: 16px; height: 16px; vertical-align: -3px; }
.nschat-msg-emoji-grande img.emoji { width: 40px; height: 40px; }

/* Mensagem de imagem — sem o padding/fundo de bolha de texto, só a moldura
   arredondada, igual ao padrão do WhatsApp/JivoChat. */
.nschat-msg-com-imagem { padding: 4px; background: transparent !important; box-shadow: none; }
.nschat-msg-imagem { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; cursor: pointer; }
.nschat-msg-com-imagem .nschat-msg-nome { padding: 0 4px; }
.nschat-msg-com-imagem .nschat-msg-hora { padding: 2px 4px 0; }

/* Anexo que não é imagem (ex.: PDF) — cartão com ícone + nome do arquivo,
   dentro da bolha normal de mensagem (mantém o fundo/padding, diferente da
   imagem, que fica sem moldura). */
.nschat-msg-arquivo {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.08); text-decoration: none; color: inherit; max-width: 200px;
}
.nschat-msg-arquivo svg { width: 20px; height: 20px; flex-shrink: 0; }
.nschat-msg-arquivo span { font-size: 12.5px; word-break: break-word; line-height: 1.3; }

/* Destaque ao arrastar uma imagem sobre a janela do chat */
.nschat-painel.nschat-arrastando { outline: 2px dashed var(--nschat-cor-principal); outline-offset: -4px; }

.nschat-carregando { text-align: center; color: #94a3b8; font-size: 12.5px; padding: 20px 0; }

@media (max-width: 480px) {
  #nschat-root { bottom: 14px; right: 14px; }
  .nschat-painel { width: calc(100vw - 24px); height: calc(100vh - 100px); bottom: 76px; right: -6px; }
  #nschat-root.nschat-esquerda { right: auto; left: 14px; }
  #nschat-root.nschat-esquerda .nschat-painel { right: auto; left: -6px; }
}

/* ------------------------------------------------------------------
   Tema do site x botões do widget. Alguns temas (ex.: Hello Elementor)
   dão padding a todo <button> e, no hover e no foco, pintam o fundo e o
   texto com as cores do tema: o "X" do topo sumia e a bolha mudava de
   cor. Aqui o widget reafirma o próprio desenho nos três estados.
   ------------------------------------------------------------------ */
.nschat-bolha, .nschat-fechar, #nschat-btn-enviar,
.nschat-opcoes-wrap .nschat-btn-opcoes, .nschat-emoji-wrap .nschat-btn-emoji { padding: 0; }
.nschat-bolha:hover, .nschat-bolha:focus,
.nschat-btn:hover, .nschat-btn:focus,
#nschat-btn-enviar:hover:not(:disabled), #nschat-btn-enviar:focus:not(:disabled) { background: var(--nschat-azul); color: #fff; }
.nschat-fechar:focus:not(:hover) { background: rgba(255,255,255,0.08); color: #cbd5e1; }
.nschat-bot-btn-pergunta:hover, .nschat-bot-btn-pergunta:focus { color: #334155; }
.nschat-bot-btn-pergunta:focus:not(:hover) { background: #fff; }
.nschat-bot-btn-pergunta-selecionada:focus, .nschat-bot-btn-pergunta-selecionada:focus:not(:hover) { background: rgba(1, 93, 158, 0.08); }
.nschat-btn-link:hover, .nschat-btn-link:focus { background: transparent; }
.nschat-btn-link:focus:not(:hover) { color: #64748b; }
.nschat-opcoes-wrap .nschat-btn-opcoes:focus:not(:hover) { background: transparent; color: #94a3b8; }
.nschat-emoji-wrap .nschat-btn-emoji:focus:not(:hover),
.nschat-emoji-painel .nschat-emoji-item:focus:not(:hover) { background: transparent; }
.nschat-opcoes-menu button:hover, .nschat-opcoes-menu button:focus { color: #1e293b; }
.nschat-opcoes-menu button:focus:not(:hover) { background: transparent; }
.nschat-erro-conversa button:hover, .nschat-erro-conversa button:focus { background: transparent; color: inherit; }