/* ==========================================================================
   O CHAT DO PORTAL — o card da proposta.
   O balão, o painel e as falas estão em application.css (nasceram com o chat
   do pedido). Aqui mora só o que o chat flutuante acrescentou: a proposta que
   espera o clique. Folha separada porque ela vai crescer (o card de navegação
   e o de alteração são os dois primeiros) e não tem por que engordar o CSS de
   todas as telas.
   ========================================================================== */

.proposta {
  display: flex; flex-direction: column; gap: var(--spacing-8);
  padding: var(--spacing-12); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  /* A borda esquerda é o que distingue "proposta" de "fala": é um pedido de
     decisão, e decisão precisa saltar do fio da conversa. */
  border-left: 3px solid var(--color-coral-pulse);
  font-size: var(--text-caption);
}
.proposta--navegacao { border-left-color: var(--color-sky-signal); }
.proposta--respondida { opacity: 0.72; border-left-color: var(--color-ash); }

.proposta__resumo {
  margin: 0; display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--text-body-sm); line-height: 1.4; color: var(--text-primary);
}
.proposta__resumo svg { flex: 0 0 auto; margin-top: 3px; color: var(--color-sky-signal); }
.proposta__depois { margin: 0; color: var(--text-meta); font-style: italic; }

/* A tabela do "de → para". Sem cabeçalho: o "de" e o "para" se explicam pela
   seta, e um cabeçalho numa coluna de 400px é uma linha a menos de conteúdo. */
.proposta__mudancas {
  width: 100%; border-collapse: collapse; font-size: var(--text-caption);
}
.proposta__mudancas td {
  padding: 4px 4px; border-top: 1px solid var(--color-cloud-gray);
  vertical-align: top; line-height: 1.35;
}
.proposta__mudancas tr:first-child td { border-top: 0; }
.proposta__alvo { color: var(--text-secondary); max-width: 34%; }
.proposta__campo { color: var(--text-meta); white-space: nowrap; }
.proposta__de { color: var(--text-meta); text-decoration: line-through; text-align: right; white-space: nowrap; }
.proposta__seta { color: var(--text-meta); padding: 4px 2px; }
.proposta__para { font-weight: var(--font-weight-semibold); color: var(--text-heading-color); white-space: nowrap; }
.proposta__mais { margin: 0; color: var(--text-meta); }

.proposta__botoes { display: flex; gap: var(--spacing-8); margin-top: 2px; }
.proposta__botoes form { display: contents; }
.proposta__confirmar, .proposta__recusar {
  border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
  padding: 8px var(--spacing-16); font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}
/* O coral é a ação primária do sistema — e confirmar é a única ação primária
   que existe dentro do chat. */
.proposta__confirmar { background: var(--color-coral-pulse); color: var(--color-paper-white); }
.proposta__confirmar:hover { filter: brightness(1.08); }
.proposta__recusar { background: var(--color-cloud-gray); color: var(--text-secondary); }
.proposta__recusar:hover { background: var(--color-frost-gray); }
.proposta__estado { color: var(--text-meta); font-size: 11px; }

/* A fala do sistema (feito, recusado, fomos para X): não é ninguém falando, é
   o registro do que aconteceu. Centrada e miúda, como o "fulano entrou" de um
   grupo de mensagens. */
.fala--sistema { align-self: center; align-items: center; max-width: 100%; }
.fala--sistema .fala__texto {
  background: transparent; color: var(--text-meta); font-size: var(--text-caption);
  padding: 2px var(--spacing-8); text-align: center;
}
/* A pessoa fala do lado direito — como o comprador no chat do pedido. */
.fala--pessoa { align-self: flex-end; align-items: flex-end; }
.fala--pessoa .fala__texto { background: var(--color-canopy-green); color: var(--text-on-dark); }