/* ══════════════════════════════════════════════════════════════
   A janela do prato: a IA a preencher (ui/analise-prato.js)

   É a janela de uma refeição (nutrientes.css, v3.css: .ref-*) com duas
   coisas a mais: o ESQUELETO, enquanto a IA lê, e o PREENCHIMENTO, quando
   responde. As peças de dentro (o herói, os macros, as linhas) são as
   mesmas da refeição — só aparece a mais o que é desta janela.

   Movimento: só transform e opacity no que se mexe, curva forte de saída,
   nada acima de 300 ms por gesto, cascata curta. Com movimento reduzido, o
   mesmo preenchimento em fundido, sem deslocamentos.
   ══════════════════════════════════════════════════════════════ */

.ia {
  --ia-saida: cubic-bezier(0.23, 1, 0.32, 1);
  --ia-brilho: light-dark(rgb(255 255 255 / .62), rgb(255 255 255 / .10));
}

/* ── a foto, com a IA a olhar para ela ────────────────────── */

.ia-foto {
  position: relative;
  margin: 0 auto var(--e-4);
  /* A proporção da foto, e não a de uma caixa: as marcas da IA vêm em
     fração da imagem, e cortá-la (object-fit: cover) desalinhava-as. */
  width: min(100%, calc(44dvh * var(--prop, 1.3333)));
  aspect-ratio: var(--prop, 1.3333);
  border-radius: var(--raio-cartao);
  overflow: hidden;
  background: var(--preench-3);
}
.ia-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A varredura: uma faixa de luz desce pela foto enquanto a IA lê. */
.ia-varredura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms linear;
}
.ia[data-ia-estado="lendo"] .ia-varredura, .ia[data-ia-estado="reforco"] .ia-varredura { opacity: 1; }
.ia-varredura::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -40%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .34) 55%, rgb(255 255 255 / .62) 92%, transparent);
  mix-blend-mode: soft-light;
  animation: ia-desce 1.7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes ia-desce { to { transform: translateY(350%); } }

/* O que a IA diz de si, em cima da foto. */
.ia-lendo {
  position: absolute;
  left: var(--e-3); bottom: var(--e-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: rgb(0 0 0 / .46);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #FFFFFF;
  font: var(--t-legenda1);
  letter-spacing: var(--k-legenda1);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms linear, transform 220ms var(--ia-saida);
}
.ia[data-ia-estado="lendo"] .ia-lendo, .ia[data-ia-estado="reforco"] .ia-lendo, .ia[data-ia-estado="reconsiderando"] .ia-lendo { opacity: 1; transform: none; }
.ia-lendo [data-icon] { width: 14px; height: 14px; }
.ia-lendo [data-icon] svg { animation: ia-cintila 1.6s ease-in-out infinite; }
@keyframes ia-cintila { 50% { opacity: .4; transform: scale(.86); } }

/* As marcas: onde a IA viu cada coisa. */
.ia-marcas { position: absolute; inset: 0; pointer-events: none; transition: opacity 600ms linear; }
.ia-marcas.is-fora { opacity: 0; }
.ia-marca {
  position: absolute;
  border: 2px solid rgb(255 255 255 / .92);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25), inset 0 0 0 1px rgb(0 0 0 / .12);
  opacity: 0;
  transform: scale(.97);
  animation: ia-marca-entra 300ms var(--ia-saida) forwards;
}
.ia-marca.is-fora { opacity: 0 !important; transition: opacity 160ms linear; }
@keyframes ia-marca-entra { to { opacity: 1; transform: none; } }

/* ── o esqueleto ──────────────────────────────────────────── */

.ia-esq {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--raio-pequeno);
  background: var(--preench-2);
}
.ia-esq::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--ia-brilho) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ia-brilha 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ia-brilha { to { transform: translateX(100%); } }
.ia-esq--kcal { width: 52px; height: 18px; margin-left: auto; }
.ia-esq--titulo { width: 120px; height: 46px; border-radius: 12px; }
.ia-esq--linha { height: 14px; }
.ia-esq--barra { height: 8px; border-radius: 4px; }

.ia-heroi-esq { display: grid; gap: var(--e-2); margin-bottom: var(--e-5); }
.ia-heroi-esq__macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); margin-top: var(--e-1); }
.ia-micros-esq { display: grid; gap: var(--e-3); padding: var(--e-4); border-radius: var(--raio-cartao); background: var(--preench-3); }

/* ── o preenchimento ──────────────────────────────────────── */

.ia-novo {
  animation: ia-entra 300ms var(--ia-saida) var(--ia-atraso, 0ms) both;
}
@keyframes ia-entra {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* O selo da verificação: chega com um tranco curto, que diz "conferido". */
.ia-ver {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  font: var(--t-legenda1);
  letter-spacing: var(--k-legenda1);
  white-space: nowrap;
  animation: ia-selo 280ms var(--ia-saida) both;
}
.ia-ver svg, .ia-ver [data-icon] { width: 12px; height: 12px; flex: none; }
.ia-ver--confere { background: color-mix(in srgb, var(--sucesso) 15%, transparent); color: var(--sucesso); }
.ia-ver--trocado, .ia-ver--receita { background: color-mix(in srgb, var(--destaque) 14%, transparent); color: var(--destaque); }
.ia-ver--diverge { background: color-mix(in srgb, var(--atencao) 17%, transparent); color: var(--atencao); }
@keyframes ia-selo { from { opacity: 0; transform: scale(.86); } }

/* As linhas desta janela: a da refeição, com o que a IA ainda não disse em esqueleto. */
.ia-linha .linha__valor { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 64px; }
.ia-linha .linha__valor b { font-weight: 600; }
.ia-linha__etiquetas { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ia-linha.is-fora { opacity: .55; }

/* Um prato feito de ingredientes (molde, receita da IA): a linha-mãe e as filhas. */
.ia-grupo { position: relative; }
.ia-grupo + .ia-grupo::before, .ia-linha + .ia-grupo::before, .ia-grupo + .ia-linha::before {
  content: ""; position: absolute; left: var(--e-4); right: 0; top: 0; height: .5px; background: var(--separador, var(--preench-1));
}
.ia-grupo__topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-3) var(--e-4) var(--e-1);
}
.ia-grupo__nome { font: var(--t-destaque); letter-spacing: var(--k-corpo); }
.ia-grupo__filhas { padding-left: var(--e-3); }
.ia-grupo__filhas .linha { min-height: 44px; }

/* O painel de uma linha aberta: gramas, troca, e o que a IA e a tabela dizem. */
.ia-painel { display: grid; gap: var(--e-3); }
.ia-passo { display: inline-flex; align-items: center; gap: var(--e-2); }
.ia-passo__valor { min-width: 78px; text-align: center; font: var(--t-destaque); letter-spacing: var(--k-corpo); }
.ia-passo .botao-redondo { width: 36px; height: 36px; }
.ia-painel__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; justify-content: space-between; }
.ia-painel__nota { margin: 0; }

/* Os escondidos: o que a IA acha que está no preparo, para ligar ou desligar. */
.ia-escondido .linha__texto { opacity: 1; }
.ia-escondido.is-desligado .linha__texto { opacity: .55; }

/* O cartão de dúvida, que sobe devagar para não assustar. */
.ia-duvida { margin: 0 0 var(--e-4); }
.ia-duvida p { margin: 0; }
.ia-duvida .botao { margin-top: var(--e-2); }

/* O rodapé: o botão principal só acende quando a IA acabou. */
.sheet__foot [data-registrar]:disabled { opacity: .45; }
.sheet__foot [data-registrar]:not(:disabled) { animation: ia-pronto 360ms var(--ia-saida) both; }
@keyframes ia-pronto { from { opacity: .45; transform: scale(.985); } }

/* Sem leitura (o motor falhou, ou a foto não tem comida): o esqueleto não espera por nada,
   e o que resta é a foto e o que fazer. */
.ia[data-ia-estado="erro"] :is([data-bloco="heroi"], [data-bloco="ingredientes"], [data-bloco="micros-secao"], [data-bloco="nota"]),
.ia[data-ia-estado="vazio"] :is([data-bloco="heroi"], [data-bloco="ingredientes"], [data-bloco="micros-secao"], [data-bloco="nota"]) { display: none; }

/* O erro: sem esqueleto, sem varredura, e com o que fazer. */
.ia-erro { padding: var(--e-4); border-radius: var(--raio-cartao); background: var(--preench-3); display: grid; gap: var(--e-2); }
.ia-erro p { margin: 0; }

/* ── movimento reduzido: o mesmo preenchimento, sem deslocar nada ── */
@media (prefers-reduced-motion: reduce) {
  .ia-varredura::before, .ia-lendo [data-icon] svg, .ia-esq::after { animation: none; }
  .ia[data-ia-estado="lendo"] .ia-varredura { background: rgb(255 255 255 / .12); }
  .ia-novo { animation: ia-fundir 160ms linear var(--ia-atraso, 0ms) both; }
  .ia-ver { animation: ia-fundir 160ms linear both; }
  .ia-marca { animation: ia-fundir 160ms linear forwards; transform: none; }
  .sheet__foot [data-registrar]:not(:disabled) { animation: none; }
  .ia-lendo { transform: none; }
}
@keyframes ia-fundir { from { opacity: 0; } to { opacity: 1; } }