/* /conversa — pele de caderno (§8.1).
   Carregado via content_for :head DEPOIS do application.css (cascata controlada §5.7). */

.conversa {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.conversa__cabecalho {
  margin-bottom: var(--space-lg);
}

.conversa__cabecalho h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.conversa__sub {
  display: inline-block;
  margin-top: var(--space-xs);
}

/* ---------- Folha pautada ---------- */

.folha {
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  max-height: min(62vh, 640px);
  min-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.msg {
  margin-bottom: var(--space-lg);
}

/* Entrada suave SÓ da mensagem NOVA (o mensagens_controller marca .msg--novo nas que chegam
   depois do load — o histórico no reload NÃO re-anima). Reduced-motion cai no kill-switch global. */
@media (prefers-reduced-motion: no-preference) {
  .msg--novo { animation: msg-entra .4s cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes msg-entra { from { opacity: 0; transform: translateY(10px); } }
  /* o "escrevendo…" aparece com um fade suave (crossfade com a msg que chega) */
  .digitando { animation: digitando-in .32s var(--ease-out) both; }
  @keyframes digitando-in { from { opacity: 0; transform: translateY(6px); } }

  /* payoff: o card de escopo se MONTA escalonado quando chega (só na msg nova, não no reload) */
  .msg--novo .escopo__nome, .msg--novo .escopo__formato, .msg--novo .escopo__problema,
  .msg--novo .escopo .checklist-mao, .msg--novo .escopo__rodape { animation: escopo-in .45s var(--ease-out) both; }
  .msg--novo .escopo__nome     { animation-delay: .10s; }
  .msg--novo .escopo__formato  { animation-delay: .18s; }
  .msg--novo .escopo__problema { animation-delay: .26s; }
  .msg--novo .escopo .checklist-mao { animation-delay: .34s; }
  .msg--novo .escopo__rodape   { animation-delay: .42s; }
  @keyframes escopo-in { from { opacity: 0; transform: translateY(8px); } }
}

/* ---------- Mensagens do agente: tinta direto no papel ---------- */

.msg--agente {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* Avatar do agente = glifo B da marca (máscara b-logo sobre LED), num disco limpo */
.avatar-b {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 0;               /* esconde o "B" textual do markup */
  box-shadow: var(--shadow-sm);
}
.avatar-b::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--b-grad);
  -webkit-mask: url("/assets/b-logo-e8147234.png") center / contain no-repeat;
          mask: url("/assets/b-logo-e8147234.png") center / contain no-repeat;
}

.msg__conteudo {
  line-height: 32px; /* alinha o texto com a pauta da folha */
  min-width: 0;
}

.msg__conteudo p {
  margin: 0 0 var(--space-sm);
}

.msg__conteudo p:last-child {
  margin-bottom: 0;
}

/* ---------- Mensagens do visitante: cartões creme à direita ---------- */

.msg--visitante {
  display: flex;
  justify-content: flex-end;
}

.msg--visitante .msg__cartao {
  max-width: 85%;
  background: var(--creme);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
}

.msg--visitante .msg__cartao p {
  margin: 0 0 var(--space-xs);
}

.msg--visitante .msg__cartao p:last-child {
  margin-bottom: 0;
}


/* ---------- Card de escopo (tool entregar_escopo) ---------- */

.escopo {
  background: var(--areia);
  margin: var(--space-lg) auto;
  max-width: 560px;
  transform: none;
}

.escopo__kicker {
  display: inline-block;
  margin-bottom: var(--space-xs);
}

.escopo__nome {
  margin: 0 0 var(--space-sm);
}

.escopo__formato {
  display: inline-block;
  margin-bottom: var(--space-md);
}

.escopo__problema {
  margin-bottom: var(--space-md);
}

.escopo .checklist-mao {
  margin: 0 0 var(--space-md);
}

.escopo__detalhe {
  margin-bottom: var(--space-sm);
  font-size: .95rem;
}

.escopo__rodape {
  display: block;
  margin-top: var(--space-md);
  font-size: 1.15rem;
}

/* ---------- Indicador "escrevendo…" (pontinhos de caneta) ---------- */

.digitando {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
  color: var(--color-text-muted);
}

.digitando__pontos {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.digitando__pontos i {
  width: 6px;
  height: 6px;
  background: var(--tinta);
  border-radius: 50%;
  animation: digitando-pulso 1.2s ease-in-out infinite;
}

.digitando__pontos i:nth-child(2) { animation-delay: .2s; }
.digitando__pontos i:nth-child(3) { animation-delay: .4s; }

@keyframes digitando-pulso {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.digitando__texto {
  font-family: var(--font-mao);
  font-size: 1.2rem;
}

/* Failsafe sem JS (§8.1): aviso oculto que aparece via animation-delay 45s, CSS puro. */
.digitando__demora {
  flex-basis: 100%;
  margin: var(--space-xs) 0 0;
  font-size: .9rem;
  opacity: 0;
  animation: digitando-demora 0s linear 22s forwards;
}

@keyframes digitando-demora {
  to { opacity: 1; }
}

/* ---------- Composer ---------- */

.composer {
  margin-top: var(--space-md);
}

.composer__form {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.composer__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-corpo);
  font-size: 16px; /* iOS não dá zoom */
  color: var(--tinta);
  background: var(--papel-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  line-height: 1.5;
  min-height: 44px;
  max-height: 160px;
  resize: none;
  field-sizing: content;
}

.composer__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.composer__enviar {
  flex-shrink: 0;
}

.composer__rodape {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}

.composer__lgpd {
  margin: 0;
  font-size: .85rem;
  color: var(--color-text-faded);
}

.composer__recomecar-form {
  display: inline;
}

.composer__recomecar {
  background: none;
  border: none;
  padding: 0;
  color: var(--sepia);
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Mini-form de fallback (§8.8) ---------- */

.fallback-contato {
  margin-top: var(--space-sm);
  background: var(--creme);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  max-width: 440px;
  line-height: 1.5;
}

.fallback-contato .field {
  margin-bottom: var(--space-sm);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* pontinhos somem; fica o texto estático "escrevendo…" (§8.1) */
  .digitando__pontos {
    display: none;
  }

  /* o failsafe de 45s é revelação estática, não movimento: re-liga por cima do
     kill-switch global (especificidade de classe ganha do seletor universal) */
  .digitando__demora {
    animation: digitando-demora 0s linear 22s forwards !important;
  }
}

/* ---------- ≥768px ---------- */

@media (min-width: 768px) {
  .folha {
    padding: var(--space-lg);
  }

  .msg--visitante .msg__cartao {
    max-width: 70%;
  }
}

/* ---------- Ponte de conversão (após o escopo, só visitante anônimo) ---------- */
/* Sementes de partida — chips que semeiam o chat vazio (§8.4). Somem na 1ª troca. */
.sementes { margin: var(--space-md) 0 0; display: grid; gap: 10px; }
.sementes__titulo { font-family: var(--font-mao); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin: 0; }
.sementes__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sementes__chip { font-size: .92rem; }

.ponte { display: grid; gap: var(--space-md); margin-top: var(--space-md); justify-items: start; }
.ponte__texto { color: var(--gray-700); }
.ponte__acoes { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.ponte__salvar { color: var(--accent-text); font-size: .92rem; text-decoration: underline; }
.ponte__salvar:hover { color: var(--ink); }