/* css/visao-geral.css — folha da página / (dona: a página). Vem depois do site.css e do inbox.css.
   As folhas de todas as páginas carregam juntas: toda regra daqui fica sob main[data-page="visao-geral"].
   O desenho da tela do inbox (mensagens, cartões, faixa) é do inbox.css; aqui só o encaixe na página. */

/* ── topo: a tela do inbox no lugar do painel do claryt.com ── */
main[data-page="visao-geral"] .vg-hero-screen {
  min-width: 0;
}
main[data-page="visao-geral"] .vg-hero .ibx-body.has-list {
  grid-template-columns: 196px minmax(0, 1fr);
}

/* ── abas: o link para a página da parte, depois da lista ── */
main[data-page="visao-geral"] .vg-panel-link {
  margin-top: 22px;
}

/* no tablet a coluna do topo fica estreita para lista + conversa: fica a conversa */
@media (max-width: 1100px) {
  main[data-page="visao-geral"] .vg-hero .ibx-body.has-list {
    grid-template-columns: minmax(0, 1fr);
  }
  main[data-page="visao-geral"] .vg-hero .ibx-list {
    display: none;
  }
}
/* no celular a tela desce para baixo do texto, centrada e com a largura do painel do claryt.com */
@media (max-width: 800px) {
  main[data-page="visao-geral"] .vg-hero-screen {
    width: 100%;
    max-width: 580px;
    justify-self: center;
  }
  main[data-page="visao-geral"] .vg-panel-link {
    margin-top: 18px;
  }
}

/* ── movimento: a conversa do topo entra no ritmo de uma conversa ──
   A régua do site.css é 80 ms por item (feita para linhas de tabela); aqui cada mensagem espera a anterior.
   Sem JS ou com "reduzir movimento", o servidor já desenhou a conversa inteira, parada. */
@media (prefers-reduced-motion: no-preference) {
  .js-motion main[data-page="visao-geral"] .vg-hero-screen.is-in [style*="--i"] {
    animation-delay: calc(var(--i) * 600ms + 300ms);
  }
}