/* Demonstração "balcao": tudo prefixado por [data-demo="balcao"]. O celular vem de css/fone.css (a peça pronta).
   À esquerda, o celular do atendente; à direita, o catálogo de peças com a tradução da gíria: o que o
   atendente escreveu e a peça certa. Só tokens; só transform e opacity no movimento. */

[data-demo="balcao"] {
  container: demo / inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0;
}

[data-demo="balcao"] *,
[data-demo="balcao"] *::before,
[data-demo="balcao"] *::after { box-sizing: border-box; }

[data-demo="balcao"] [hidden] { display: none !important; }

[data-demo="balcao"] .bl-ui {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  column-gap: clamp(24px, 5cqw, 56px);
  padding: 24px clamp(20px, 5cqw, 48px);
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-in-out);
}
[data-demo="balcao"] .bl-ui.bl-sai { opacity: 0; }

/* A coluna do celular: o celular ocupa a altura toda */
[data-demo="balcao"] .bl-fone-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
[data-demo="balcao"] .fone { flex: 1 1 0; min-height: 0; height: auto; }

/* O que o campo de texto mostra: o que o atendente está digitando */
[data-demo="balcao"] .bl-entrada { white-space: nowrap; overflow: hidden; text-overflow: clip; }
[data-demo="balcao"] .bl-entrada.bl-digitado { color: var(--ink); }

/* A conversa que se apaga entre os dois casos */
[data-demo="balcao"] .fone-conversa { transition: opacity var(--dur-base) var(--ease-out); }
[data-demo="balcao"] .fone-conversa.bl-fade { opacity: 0; }
[data-demo="balcao"] .fone-msg b { font-weight: 600; }

/* Ao lado: o catálogo de peças, com o que o atendente escreveu e a peça certa */
[data-demo="balcao"] .bl-card {
  align-self: center;
  justify-self: start;
  width: 100%;
  max-width: 24rem;
  min-width: 0;
  padding: 22px 24px 26px;
  background: var(--bg);
  border: 1px solid var(--surface-2); /* taste-skill-ignore: a borda do painel da interface (data-ui) */
  border-radius: var(--radius-ui);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
[data-demo="balcao"] .bl-card.bl-on { opacity: 1; transform: none; }
[data-demo="balcao"] .bl-card-rotulo { margin: 0 0 20px; font-size: 14px; font-weight: 600; color: var(--ink); }
[data-demo="balcao"] .bl-de,
[data-demo="balcao"] .bl-para { margin: 0; }
[data-demo="balcao"] .bl-mini { display: block; margin-bottom: 2px; font-size: 13px; color: var(--muted); }
[data-demo="balcao"] .bl-giria { display: block; font-size: 22px; font-weight: 500; line-height: 1.2; color: var(--muted); }
[data-demo="balcao"] .bl-para {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
[data-demo="balcao"] .bl-para.bl-on { opacity: 1; transform: none; }
[data-demo="balcao"] .bl-peca { display: block; font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
[data-demo="balcao"] .bl-tec { display: block; margin-top: 2px; font-size: 16px; color: var(--ink); }
[data-demo="balcao"] .bl-lista {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

/* Pausa: congela também as animações em CSS */
[data-demo="balcao"] .bl-parado .fone-digitando i { animation-play-state: paused; }

/* O estado final, parado (movimento reduzido) */
[data-demo="balcao"] .bl-final .fone-msg,
[data-demo="balcao"] .bl-final .fone-conversa,
[data-demo="balcao"] .bl-final .bl-card,
[data-demo="balcao"] .bl-final .bl-para { transition: none; }

/* No celular: só o celular, centralizado */
@container demo (max-width: 640px) {
  [data-demo="balcao"] .bl-ui {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
  [data-demo="balcao"] .bl-card { display: none; }
  /* no estado final cabem as quatro mensagens: sem a hora para não cortar a primeira */
  [data-demo="balcao"] .bl-final .fone-hora { display: none; }
  [data-demo="balcao"] .bl-final .fone-msg { padding-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-demo="balcao"] .bl-ui,
  [data-demo="balcao"] .fone-conversa,
  [data-demo="balcao"] .bl-card,
  [data-demo="balcao"] .bl-para { transition: none; }
}

/* O texto de apoio do campo, um pouco mais escuro para ler bem sobre o branco */
[data-demo="balcao"] .fone-entrada span { color: #6b6b6b; }
[data-demo="balcao"] .fone-entrada span.bl-digitado { color: var(--ink); }