/* Demonstração: a central de atendimento (data-ui), no campo preto.
   Cada linha é um par: o que o cliente mandou → o que a assistente fez. Verde: resolvido. Cinza: com a equipe. */
[data-demo="central"] {
  container: demo / inline-size;
  display: block;
  height: 100%;
  margin: 0;
  color: var(--field-ink);
  font-size: 15px;
  line-height: 1.4;
}
[data-demo="central"] .ce-ui {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: #141414;
  border-radius: var(--radius-ui);
  overflow: hidden;
}
[data-demo="central"] .ce-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  padding: 18px 24px;
  background: #1c1c1c;
}
[data-demo="central"] .ce-titulo { font-size: 17px; font-weight: 600; }
[data-demo="central"] .ce-resumo { margin: 0; font-size: 14px; color: var(--field-muted); }
[data-demo="central"] .ce-resumo b { font-weight: 600; color: var(--field-ink); font-variant-numeric: tabular-nums; }

[data-demo="central"] .ce-colunas,
[data-demo="central"] .ce-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  padding: 0 24px;
}
[data-demo="central"] .ce-colunas { padding-top: 16px; padding-bottom: 6px; font-size: 13px; color: var(--field-muted); }
[data-demo="central"] .ce-colunas span:last-child { grid-column: 3; }

[data-demo="central"] .ce-lista { list-style: none; margin: 0; padding: 0; overflow: hidden; }
[data-demo="central"] .ce-linha {
  align-items: center;
  padding-top: 8px; padding-bottom: 8px;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-demo="central"] .ce-linha.ce-entrando { opacity: 0; transform: translateY(-14px); }

/* o que o cliente mandou: um balão, como no celular */
[data-demo="central"] .ce-chegou {
  padding: 10px 14px;
  background: #262626;
  border-radius: 14px;
  border-top-left-radius: 4px;
  min-width: 0;
}
[data-demo="central"] .ce-canal { display: block; margin-bottom: 2px; font-size: 12px; color: var(--field-muted); }
[data-demo="central"] .ce-msg { margin: 0; color: #f2f2f2; }
[data-demo="central"] .ce-seta { justify-self: center; font-size: 20px; line-height: 1; color: #6b6b6b; }

/* o que a assistente fez: verde quando resolveu, cinza quando passou para a equipe */
[data-demo="central"] .ce-fez {
  padding: 10px 14px;
  background: var(--acento-claro, #dcf2e4);
  color: #0a0a0a;
  border-radius: 14px;
  min-width: 0;
}
[data-demo="central"] .ce-estado { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--acento, #127a52); }
[data-demo="central"] .ce-acao { margin: 0; font-weight: 500; }
[data-demo="central"] .ce-linha--equipe .ce-fez { background: #333333; color: var(--field-ink); }
[data-demo="central"] .ce-linha--equipe .ce-estado { color: #bdbdbd; }

/* caixa estreita: o par fica um embaixo do outro */
@container demo (max-width: 720px) {
  [data-demo="central"] .ce-topo { padding: 16px 18px; }
  [data-demo="central"] .ce-colunas { display: none; }
  [data-demo="central"] .ce-linha { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 10px 18px; }
  [data-demo="central"] .ce-seta { display: none; }
  [data-demo="central"] .ce-fez { margin-left: 28px; }
  /* no celular, três pares cabem inteiros na tela da demonstração */
  [data-demo="central"] .ce-linha:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-demo="central"] .ce-linha { transition: none; }
}