/* /account/agent — the three boxes above the rail and the chat.
 *
 * The boxes are the dashboard banner card (.rec-card, see
 * widgets/recommendations/banner-card.css). Only the rail around them and the
 * content rule below 64rem are agent-specific. */

.agent-stat-bar {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-8);
  flex-shrink: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox — hide the scrollbar, keep the swipe */
  cursor: grab; /* hint the mouse drag-to-scroll (drag-scroll controller) */
}
.agent-stat-bar::-webkit-scrollbar { display: none; } /* WebKit/Blink */
.agent-stat-bar.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.agent-stat-bar > .rec-card {
  flex: 0 0 17.5rem; /* Note: Figma card width 280px */
  height: auto;
  scroll-snap-align: start;
}

/* The chat column below is a fixed height, so these boxes are tighter than the
   dashboard banner's 32px card padding. */
.agent-stat-bar .agent-stat-card {
  padding: var(--spacing-16);
  gap: var(--spacing-8);
}

@media (min-width: 64rem) {
  .agent-stat-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-16);
    overflow: visible;
    cursor: auto;
  }
  .agent-stat-bar > .rec-card { flex: none; }
}