/* Layout do app: uma coluna de conversa, topo fixo e campo fixo embaixo. Cores e formas vêm do design system. */
html, body { height: 100%; }
body { margin: 0; background: var(--creme); font-size: 16px; line-height: 1.5; display: grid;
  grid-template-rows: auto 1fr auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--espaco-4);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  background: var(--creme); border-bottom: 1px solid var(--linha); }
.topo img { height: 28px; width: auto; display: block; }
.mercado { margin-left: auto; }
.mercado select { font: 600 14px/1.2 var(--font-sans); color: var(--tinta); background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio-botao); padding: 7px 8px; }
.mercado select:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

.conversa { width: 100%; max-width: 720px; margin: 0 auto; align-content: start; overflow-y: auto; min-height: 0;
  padding: var(--espaco-7) max(16px, env(safe-area-inset-right, 0px)) var(--espaco-7) max(16px, env(safe-area-inset-left, 0px)); }
.abertura { display: grid; gap: var(--espaco-4); margin-bottom: var(--espaco-4); }
.abertura h1 { margin: 0; font-family: var(--font-largo); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; font-size: clamp(30px, 7vw, 44px); text-wrap: balance; }
.apoio { margin: 0; color: var(--cinza); max-width: 60ch; }
.sugestoes { display: grid; gap: var(--espaco-2); }
.sugestao { text-align: left; font: 15px/1.4 var(--font-sans); color: var(--tinta); background: var(--branco);
  border: 1.5px solid var(--tinta); border-radius: var(--raio-balao); box-shadow: var(--sombra-1); padding: 10px 14px; cursor: pointer; }
.sugestao:hover { box-shadow: var(--sombra-2); }
.sugestao:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

.yb-balao { white-space: pre-wrap; overflow-wrap: anywhere; }
.resposta { display: grid; gap: var(--espaco-3); justify-items: start; }
.resposta .yb-oferta { width: min(100%, 420px); }
.avatar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cinza); }
.avatar img { width: 28px; height: 28px; padding: 3px; border-radius: 50%; background: var(--amarelo-claro); }
.cartao-pago { font-size: 13px; color: var(--cinza); }
.ver-calculo { width: min(100%, 420px); }
.ver-calculo summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--laranja-texto); padding: 4px 0; }
.ver-calculo summary:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.ver-calculo .yb-calculo { margin-top: var(--espaco-2); padding: 18px 20px; }
.ver-calculo .yb-calculo td:last-child { font-size: 22px; }
.ver-calculo .yb-calculo tr.yb-total td:last-child { font-size: 32px; }
.aviso { font-size: 13px; color: var(--cinza); border: 1px dashed var(--linha); border-radius: var(--raio-oferta); padding: 8px 12px;
  max-width: 420px; }
.carregando { font-family: var(--font-lcd); font-size: 20px; text-transform: uppercase; color: var(--cinza); }
.carregando::after { content: "…"; animation: piscar 1.2s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

.campo { position: sticky; bottom: 0; width: 100%; max-width: 720px; margin: 0 auto; background: var(--creme);
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--linha); }
.campo input { font-size: 16px; padding: 12px 16px; }
.campo button:disabled { opacity: .5; cursor: wait; }

@media (prefers-reduced-motion: reduce) { .carregando::after { animation: none; } }