.agent-suggestions { width: 100%; max-width: 46.25rem; }
.agent-suggestions-title { color: var(--text-secondary); font-size: var(--font-size-14); font-weight: var(--font-weight-600); margin-bottom: var(--spacing-8); }
.agent-suggestions-list { display: flex; gap: var(--spacing-8); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--spacing-4); }
.agent-suggestion { flex: 0 0 min(20rem, 85%); display: grid; gap: var(--spacing-4); text-align: left; scroll-snap-align: start; padding: var(--spacing-12); border: var(--stroke-weight-1) solid var(--border-default); border-radius: var(--corner-radius-xs); background: var(--background-surface-1); color: var(--text-primary); }
.agent-suggestion:hover, .agent-suggestion:focus-visible { background: var(--background-hover); }
.agent-suggestion small { color: var(--text-tertiary); }
.agent-suggestions--compact .agent-suggestion { flex-basis: min(15rem, 70%); padding: var(--spacing-8); }

/* As the third box of the stat bar the suggestions fill the card: the title is
   the card's label, and one question shows at a time so the rotation reads. */
.agent-suggestions--card { display: flex; flex-direction: column; gap: var(--spacing-8); max-width: none; flex: 1 1 auto; }
.agent-suggestions--card .agent-suggestions-title { margin-bottom: 0; }
.agent-suggestions--card .agent-suggestion { flex-basis: 100%; border: 0; background: var(--background-surface-2); }
.agent-suggestions--card .agent-suggestion:hover, .agent-suggestions--card .agent-suggestion:focus-visible { background: var(--background-hover); }
@media (prefers-reduced-motion: reduce) { .agent-suggestions-list { scroll-behavior: auto; } }