/* ============================================================================
   ARQUIVO: assets/css/chat-suporte.css
   VERSÃO:  5.5.0

   Estilos do suporte por bate-papo. Mora dentro da folha de conversa que já
   existe (#senar-chat), então herda tipografia e cor de lá — o que aparece
   aqui é só o que é novo: a linha de sugestões e o campo de dúvida.

   Nenhuma cor solta: os mesmos tokens do formulário, repetidos como fallback
   porque este arquivo pode ser enfileirado antes do <style> do form-html.php.
   ============================================================================ */

#senar-suporte {
  flex: none;
  border-top: 1px solid var(--bd, #d0dbd0);
  background: var(--wh, #fff);
  padding: 8px 12px 10px;
  font-family: 'Nunito', sans-serif;
}

/* ── Sugestões da etapa ───────────────────────────────────────────────────
   Campo em branco convida ao silêncio. As sugestões dão ao aluno a primeira
   frase — e, por virem da etapa em que ele está, costumam já ser a dúvida. */
.senar-sup-sug {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  margin-bottom: 7px;
}
.senar-sup-sug::-webkit-scrollbar { display: none; }
.senar-sup-sug:empty { display: none; }

.senar-sup-chip {
  flex: none;
  border: 1px solid var(--bd, #d0dbd0);
  background: var(--g0, #f4f7f4);
  color: var(--t6, #3a5a3a);
  border-radius: 999px;
  padding: 6px 12px;
  font: 700 11.5px 'Nunito', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s, background .18s, color .18s;
  -webkit-tap-highlight-color: transparent;
}
.senar-sup-chip:hover {
  border-color: var(--g6, #009640);
  background: var(--g1, #e8f5e8);
  color: var(--g8, #1a5c2e);
}
.senar-sup-chip:focus-visible {
  outline: 3px solid var(--yw, #FCB61A);
  outline-offset: 2px;
}

/* ── Campo de dúvida ──────────────────────────────────────────────────── */
.senar-sup-form {
  display: flex;
  gap: 7px;
  align-items: center;
}
.senar-sup-lbl {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.senar-sup-campo {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--bd, #d0dbd0);
  border-radius: 999px;
  background: var(--g0, #f4f7f4);
  color: var(--t9, #1a2a1a);
  /* 16px é o piso: abaixo disso o Safari do iPhone dá zoom ao focar o campo
     e joga o formulário para fora do enquadramento */
  font: 600 16px 'Nunito', sans-serif;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.senar-sup-campo::placeholder { color: var(--t3, #8aaa8a); font-weight: 600; }
.senar-sup-campo:focus {
  border-color: var(--g6, #009640);
  background: var(--wh, #fff);
  box-shadow: 0 0 0 3px rgba(0, 150, 64, .12);
}
.senar-sup-campo:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* v5.5 — 44px é o alvo mínimo confortável para o polegar; eram 40. O
   ícone virou SVG, então `font-size` deixou de governar o desenho: quem
   dita o tamanho agora é a própria caixa do <svg>. */
.senar-sup-bt {
  flex: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--g8, #1a5c2e);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s, transform .18s, color .18s;
  -webkit-tap-highlight-color: transparent;
}
.senar-sup-bt svg { width: 19px; height: 19px; display: block; }
.senar-sup-bt:hover:not(:disabled) { background: var(--g9, #0d3a1c); }
.senar-sup-bt:active:not(:disabled) { transform: scale(.94); }
.senar-sup-bt:focus-visible {
  outline: 3px solid var(--yw, #FCB61A);
  outline-offset: 2px;
}
/* Campo vazio: o botão diz que não há o que enviar em vez de aceitar o
   toque e não fazer nada. `opacity` não serve aqui — em tela ao sol, um
   verde a 55% ainda parece um botão ativo; o cinza é inequívoco. */
.senar-sup-bt:disabled {
  background: #c3d2c3;
  color: #f4f7f4;
  cursor: not-allowed;
  transform: none;
}

/* ── Aviso de estado ──────────────────────────────────────────────────────
   Fala só quando tem o que dizer: base carregando ou base indisponível.
   Pronto e silencioso é o estado normal. */
.senar-sup-aviso {
  margin: 6px 2px 0;
  font: 600 10.5px 'Nunito', sans-serif;
  color: var(--t4, #5a7a5a);
  line-height: 1.45;
  display: none;
}
.senar-sup-aviso.on { display: block; }

/* ── Destaque do campo apontado pela conversa ─────────────────────────────
   Mesma animação que o form-scripts.js já usa; repetida aqui para o caso de
   este CSS carregar sozinho, sem o <style> embutido do formulário. */
.senar-field-flash { animation: senarFlash 1.6s ease; }
@keyframes senarFlash {
  0%, 100% { border-color: var(--bd, #d0dbd0); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
  20%, 70% { border-color: var(--yw, #FCB61A); box-shadow: 0 0 0 4px rgba(252,182,26,.24); }
}

/* ── Ajustes por contexto ─────────────────────────────────────────────── */
@media (min-width: 760px) {
  /* na folha ancorada o espaço é mais apertado que no celular */
  #senar-suporte { padding: 7px 11px 9px; }
  .senar-sup-campo { font-size: 13.5px; padding: 9px 13px; }
  /* no computador o alvo é o cursor, não o polegar: 38px basta e devolve
     largura ao campo de texto, que é onde a dúvida é escrita */
  .senar-sup-bt { width: 38px; height: 38px; }
  .senar-sup-bt svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .senar-sup-chip, .senar-sup-campo, .senar-sup-bt { transition: none; }
  .senar-field-flash { animation: none; outline: 3px solid var(--yw, #FCB61A); }
}

@media (prefers-contrast: more) {
  .senar-sup-chip { border-width: 1.5px; }
  .senar-sup-campo { border-width: 2px; }
}


/* ══════════════════════════════════════════════════════════════
   v5.7.2 — o polegar

   Discreto de propósito: pedir avaliação com destaque compete com a
   própria resposta, que é o que a pessoa foi ler.
   ══════════════════════════════════════════════════════════════ */
.senar-util {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 4px 30px;
  animation: senarUtilEntra .3s ease both;
}
@keyframes senarUtilEntra { from { opacity:0 } to { opacity:1 } }
.senar-util-rot {
  font-size: 11.5px; color: #8aaa8a; font-weight: 700;
}
.senar-util-bt {
  border: 1px solid #e0e8e0; background: #fff; border-radius: 999px;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0; -webkit-tap-highlight-color: transparent;
  transition: border-color .16s, transform .12s, background .16s;
}
.senar-util-bt:hover { border-color: #1a5c2e; background: #f4f7f4; }
.senar-util-bt:active { transform: scale(.9); }
.senar-util-bt:focus-visible { outline: 3px solid #FCB61A; outline-offset: 2px; }
@media (max-width: 759px) { .senar-util-bt { width: 34px; height: 34px; } }