/* Régua de cartões de notícia por baixo de uma resposta (21 set 2026).
   O cartão é o .home-story.home-feature de home.css, sem uma linha
   redesenhada; aqui só se define onde a régua fica e como desliza.
   Mockup: docs/design/2026-09-21/cartoes-na-conversa/. */

/* Alinhada com o texto da resposta: 37px = avatar 26 + gap 11 do .turn. */
.chat-cards { margin: 16px 0 2px 37px; animation: fade-in 0.3s ease both; }

.chat-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 9px; }
.chat-cards-head h3 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.chat-cards-head span { color: var(--muted); font-size: 11px; font-weight: 700; }

/* Começa alinhada com o texto e sangra para a direita, até à margem do ecrã:
   o cartão seguinte espreita e diz que há mais para o lado. */
.chat-cards-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  gap: 10px;
  margin-right: calc(-1 * var(--io-page-gutter, 20px));
  padding: 2px var(--io-page-gutter, 20px) 8px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.chat-cards-rail::-webkit-scrollbar { width: 0; height: 0; }
.chat-cards-rail > .home-story { scroll-snap-align: start; }

/* Uma notícia só não é régua: ocupa a largura da resposta, sem sangrar. */
.chat-cards.is-single .chat-cards-rail { grid-auto-columns: 100%; margin-right: 0; padding-right: 0; overflow: visible; }

/* Ecrãs com letra grande: o cartão ocupa quase todo o ecrã, para o título
   continuar a caber sem a régua ficar ilegível. */
@media (min-width: 601px) { .chat-cards-rail { grid-auto-columns: 68%; } }