/* ============================================================
   App — assistente
   No celular, tela cheia que sobe de baixo, com o campo de escrever
   flutuando em vidro. A partir de 900 px, painel à direita.
   Ver docs/plano-design.md, 7.3.
   ============================================================ */

.chat { position: fixed; inset: 0; z-index: 80; }
.chat__scrim { display: none; }

.chat__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  overflow: hidden;
  animation: chat-sobe var(--lento) var(--suave);
}
@keyframes chat-sobe { from { transform: translateY(100%); } }

@media (min-width: 900px) {
  .chat__scrim { display: block; position: absolute; inset: 0; background: var(--veu); animation: fade 160ms linear; }
  .chat__panel {
    left: auto;
    width: 420px;
    border-left: 0.5px solid var(--separador);
    box-shadow: var(--sombra-flutuante);
    animation: chat-lado var(--medio) var(--suave);
  }
  @keyframes chat-lado { from { transform: translateX(100%); } }
}

.chat__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--alvo) 1fr var(--alvo);
  align-items: center;
  gap: var(--e-2);
  padding: calc(var(--area-topo) + 6px) var(--margem) 22px;
  background: linear-gradient(to bottom, var(--fundo) 62%, transparent);
  pointer-events: none;
}
.chat__head > * { pointer-events: auto; }
.chat__title { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.chat__title strong { font: var(--t-destaque); letter-spacing: var(--k-corpo); }
.chat__engine {
  max-width: 100%;
  font: var(--t-legenda1);
  letter-spacing: var(--k-legenda1);
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Log ───────────────────────────────────────────────────── */

.chat__log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--area-topo) + 72px) var(--margem) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  scrollbar-width: thin;
}

.msg { max-width: 88%; font: var(--t-chamada); letter-spacing: var(--k-chamada); }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin-bottom: 0; }
.msg strong { font-weight: 600; }
.msg code {
  font-size: .92em;
  background: var(--preench-3);
  padding: 1px 5px;
  border-radius: 6px;
}
.msg ul, .msg ol { margin: 6px 0; padding-left: 1.15em; }
.msg li { margin-bottom: 3px; }

/* ── A forma do que ele escreve (ui/chat.js, md) ───────────────
   A resposta dele era um parágrafo com <br>, num app que desenha
   tudo o resto. Aqui o título de uma secção é título, o número
   medido tem o mesmo desenho tabular do cartão, e duas linhas de
   "Proteína: 38 g" são uma tabela, não uma frase partida ao meio. */

.msg__tit {
  margin: 12px 0 5px;
  font: var(--t-rodape);
  font-weight: 600;
  color: var(--texto-2);
}
.msg__tit:first-child { margin-top: 0; }

.msg__n { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.msg__dados {
  margin: 8px 0;
  display: grid;
  gap: 1px;                      /* o fundo aparece entre as linhas: fio */
  background: var(--separador);
  border: 0.5px solid var(--separador);
  border-radius: 12px;
  overflow: hidden;
}
.msg__dados > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 7px 11px;
  background: var(--superficie);
}
.msg__dados dt { color: var(--texto-2); font: var(--t-rodape); }
.msg__dados dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.msg--me {
  align-self: flex-end;
  background: var(--destaque);
  color: var(--sobre-destaque);
  padding: 9px 14px;
  border-radius: 20px 20px 6px 20px;
}

/* sem balão: o assistente escreve direto na página */
.msg--bot { align-self: flex-start; }

.msg--sys {
  align-self: center;
  font-size: var(--fs-micro);
  color: var(--ink-3);
  text-align: center;
  max-width: 100%;
}

/* O erro e o aviso eram uma tira de cor na borda esquerda; passam a
   um bloco de canto redondo tingido pela cor do assunto, como as notas
   de aviso dos apps da Apple. */
.msg--err {
  align-self: stretch;
  background: color-mix(in srgb, var(--erro, #FF453A) 10%, var(--superficie));
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--erro, #FF453A) 30%, transparent);
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--texto-2);
}
/* As saídas de um motor que falhou: cabem lado a lado, e quebram
   quando não couberem. */
.err__saidas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: 9px; }

.msg--aviso {
  align-self: stretch;
  background: color-mix(in srgb, var(--atencao, #FFB340) 11%, var(--superficie));
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--atencao, #FFB340) 32%, transparent);
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--texto);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.msg--aviso p { margin: 0; }
.msg__aviso-pe { margin-top: 6px !important; color: var(--ink-2); }

/* ── Para começar: os pontos de partida de uma conversa nova ── */
.msg--ideias { align-self: stretch; margin-top: var(--e-4); }
.ideias__rotulo { margin: 0 0 var(--e-2) 4px; font: var(--t-rodape); color: var(--texto-2); }
.ideias__lista {
  display: grid;
  background: var(--superficie);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 0 0 .5px var(--aro, rgb(255 255 255 / .07));
}
.ideias__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--texto);
  font: var(--t-corpo, 400 1rem var(--fonte));
  text-align: left;
  cursor: pointer;
  animation: ideia-entra 380ms var(--suave) both;
}
.ideias__item + .ideias__item { box-shadow: inset 0 .5px 0 var(--separador); }
.ideias__item:nth-child(2) { animation-delay: 50ms; }
.ideias__item:nth-child(3) { animation-delay: 100ms; }
.ideias__item:nth-child(4) { animation-delay: 150ms; }
.ideias__item:active { background: var(--preench-1, rgb(120 120 128 / .2)); }
.ideias__icone {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--destaque) 15%, transparent);
  color: var(--destaque);
}
.ideias__icone svg { width: 17px; height: 17px; }
@keyframes ideia-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ideias__item { animation: none; } }

/* Ele a pensar, no sítio onde a resposta vai aparecer (ui/chat.js,
   `comecarAPensar`): o anel pequeno e, ao lado, o que está a fazer. Eram
   três pontinhos. */
.pensa { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.pensa__pg { display: grid; place-items: center; width: 40px; }
.pensa__txt { font: var(--t-rodape); letter-spacing: var(--k-rodape); color: var(--texto-2); }
.pensa__txt:empty { display: none; }

/* O mesmo, em linha, ao lado de um "Lendo a foto…" (personagem.js, `pensandoHTML`). */
.pg.pg--linha { display: inline-block; vertical-align: middle; margin: -6px 6px -4px 0; }

/* ── Itens pendentes de confirmação (o que foi entendido) ──── */

.chat__pending {
  border-radius: 22px;
  background: var(--superficie-2);
  padding: 12px 14px 14px;
  max-height: 46dvh;
  overflow-y: auto;
}
.pend__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pend__head b { font-size: var(--fs-small); font-weight: 650; margin-right: auto; }
.pend__head .num { font-size: var(--fs-small); font-weight: 600; }

/* quatro colunas: nome · gramas · kcal · remover.
   Com três, o botão de remover caía para a linha de baixo. */
.pend-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto 30px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.pend-item__name { font-weight: 600; min-width: 0; }
.pend-item__t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-item__name small {
  display: block; font-weight: 400; color: var(--ink-3);
  font-size: var(--fs-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pend-item .icon-btn { width: 30px; height: 30px; }
.pend-item .icon-btn svg { width: 15px; height: 15px; }
.pend-item__q {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  background: var(--surface);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  text-align: right;
}
.pend-item__kcal { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-micro); color: var(--ink-2); min-width: 58px; text-align: right; }
/* o "?" fica colado no nome, não numa linha só dele */
.pend-item.is-guess .pend-item__t::after {
  content: "?";
  color: var(--warn);
  font-weight: 800;
  margin-left: 5px;
}

.pend__foot {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  background: linear-gradient(to bottom, transparent, var(--bg-tint) 35%);
}
.pend__foot .btn { flex: 1; }

/* com itens a conferir, as sugestões só atrapalham */
.chat__pending:not([hidden]) ~ .chat__suggest { display: none; }

/* ── Sugestões ─────────────────────────────────────────────── */

.chat__suggest {
  display: flex;
  gap: var(--e-2);
  margin: 0 calc(-1 * var(--margem));
  padding: 2px var(--margem);
  overflow-x: auto;
  scrollbar-width: none;
  /* A barra de rolagem está escondida; o esbatido na borda direita é o
     sinal de que a fila continua. */
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  scroll-padding-inline: var(--margem);
}
.chat__suggest::-webkit-scrollbar { display: none; }
.chat__suggest:empty { display: none; }
.sugg {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
  color: var(--texto);
  font: var(--t-subtitulo);
  font-weight: 500;
  letter-spacing: var(--k-subtitulo);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--rapido) var(--suave);
}
.sugg:active { transform: scale(.96); }

/* ── Composer ──────────────────────────────────────────────── */

.chat__baixo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: 0 var(--margem) calc(var(--area-baixo) + var(--e-3));
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 5px;
  border-radius: 25px;
}

.composer__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--texto);
  padding: 8px 4px;
  font: var(--t-corpo);
  letter-spacing: var(--k-corpo);
  max-height: 132px;
  resize: none;
  /* `auto` punha uma barra de rolagem no PLACEHOLDER. Com `hidden`, o
     campo cresce à medida que se escreve (o JavaScript ajusta a altura)
     e a barra só aparece quando bate no teto. */
  overflow-y: hidden;
}
.composer__input::placeholder { color: var(--texto-3); }
.composer__input:not(:placeholder-shown) { overflow-y: auto; }
.composer__input:focus { outline: none; }
.composer:has(.composer__input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--destaque), var(--sombra-flutuante); }

.composer__mic, .composer__send, .composer__registrar {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-2);
  cursor: pointer;
}
.composer__mic::after, .composer__send::after, .composer__registrar::after { content: ""; position: absolute; inset: -4px; }
.composer__mic svg, .composer__send svg, .composer__registrar svg { width: 20px; height: 20px; }
.composer__send { background: var(--destaque); color: var(--sobre-destaque); }
/* Registrar: a pessoa diz que é comida, e o modelo do aparelho só lê.
   Tingido, para não se confundir com enviar ao assistente. */
.composer__registrar { background: var(--destaque-suave); color: var(--destaque); }
.composer__registrar[disabled], .composer__send[disabled] { opacity: .4; }

.composer__mic.is-live {
  background: var(--destaque);
  color: var(--sobre-destaque);
  animation: listen 1.4s ease-in-out infinite;
}
@keyframes listen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--destaque) 45%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--destaque) 0%, transparent); }
}
.composer__mic[disabled] { opacity: .4; }

.composer__hint {
  padding: 0 var(--e-4);
  font: var(--t-rodape);
  color: var(--texto-2);
}
.composer__hint b { color: var(--destaque); font-weight: 600; }

/* Atalhos de repetir: o que você come sempre, com a sua gramagem.
   Ganham a cor de sinal porque são ação, não exemplo de frase. */
.sugg--repetir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--destaque);
  background: var(--destaque-suave);
  font-weight: 600;
}
.sugg--repetir svg { width: 14px; height: 14px; flex: none; }

/* A nota de verificação: separa o que o modelo DISSE do que o app FEZ.
   Um modelo pequeno afirma "coloquei na sua meta" sem ter colocado —
   sem esta linha, a mentira dele passava por resposta do app. */
/* "registrar" debaixo da fala de quem tocou no botão: diz que isto não
   foi ao assistente. */
.msg__via {
  display: block;
  margin-top: 4px;
  font: var(--t-legenda1);
  opacity: .65;
}

.msg__nota {
  margin-top: 9px;
  padding: 7px 10px;
  border-left: 2px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--fs-micro);
  color: var(--ink-3);
  line-height: 1.45;
}
.msg__nota.is-alerta {
  border-left-color: var(--warn);
  color: var(--ink-2);
}

/* ── a foto (B4) ───────────────────────────────────────────── */

.composer__foto {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-2);
  cursor: pointer;
}
.composer__foto::after { content: ""; position: absolute; inset: -4px; }
.composer__foto svg { width: 20px; height: 20px; }
.composer__foto[hidden] { display: none; }

/* a foto à espera de ir, por cima do campo */
.chat__foto {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 6px;
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra-flutuante);
}
.chat__foto[hidden] { display: none; }
.chat__foto img { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; flex: none; }
.chat__foto-nota { flex: 1; min-width: 0; font: var(--t-rodape); letter-spacing: var(--k-rodape); color: var(--texto-2); }
.chat__foto-tirar {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--preench-3);
  color: var(--texto-2);
  cursor: pointer;
}
.chat__foto-tirar svg { width: 16px; height: 16px; }

/* na conversa, a foto que ela mandou, dentro do balão */
.msg__foto {
  display: block;
  width: min(220px, 100%);
  max-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  margin: 2px 0 6px;
}
.msg--me:has(.msg__foto) { padding: 5px 5px 9px; }
.msg--me:has(.msg__foto) p { padding: 0 9px; }
.msg--me:has(.msg__foto:only-child) { padding: 5px; background: none; }
.msg--me .msg__foto:only-child { margin: 0; }

/* ── o que ele sabe · como funciona (menu do assistente) ──── */

.memoria { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.memoria__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--superficie-2);
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
}
.memoria__item span { flex: 1; min-width: 0; }
.memoria__item .btn { flex: none; }
.como p { margin: 0 0 var(--e-3); font: var(--t-subtitulo); letter-spacing: var(--k-subtitulo); color: var(--texto-2); }
.como p b { color: var(--texto); font-weight: 600; }