/* ==========================================================
 * Category Pills – horizontal scrollable filter bar
 * Uses ActivGate design tokens (--ag-*)
 * ========================================================== */

/* ---- wrapper (holds the fade mask) ---- */
.ag-category-pills-wrap {
  position: relative;
}

.ag-category-pills-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, var(--ag-color-bg-page));
  pointer-events: none;
}

/* ---- scrollable row ---- */
.ag-category-pills {
  display: flex;
  flex-direction: row;
  gap: var(--ag-space-sm);
  overflow-x: auto;
  padding: var(--ag-space-sm) 0;
  margin-bottom: var(--ag-space-lg);
  -webkit-overflow-scrolling: touch;
}

/* hide scrollbar across browsers */
.ag-category-pills::-webkit-scrollbar {
  display: none;
}

.ag-category-pills {
  scrollbar-width: none;
}

/* ---- individual pill ---- */
.ag-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ag-space-sm) var(--ag-space-lg);
  font-family: var(--ag-font-sans);
  font-size: var(--ag-font-size-sm);
  font-weight: var(--ag-font-weight-medium);
  color: var(--ag-color-text-body);
  background: var(--ag-color-bg-surface);
  border: 1px solid var(--ag-color-border);
  border-radius: var(--ag-radius-full);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: var(--ag-transition-colors), var(--ag-transition-shadow);
}

/* hover */
.ag-category-pill:hover {
  border-color: var(--ag-color-brand-primary-border);
  background: var(--ag-color-brand-primary-soft);
  color: var(--ag-color-brand-primary);
}

/* active / selected */
.ag-category-pill.is-active {
  background: var(--ag-color-brand-primary);
  color: var(--ag-color-text-on-primary);
  border-color: var(--ag-color-brand-primary);
  box-shadow: var(--ag-shadow-primary);
}

.ag-category-pill.is-active:hover {
  background: var(--ag-color-brand-primary-hover);
}

/* ---- icon inside pill ---- */
.ag-category-pill__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- count badge ---- */
.ag-category-pill__count {
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-text-muted);
  margin-left: 2px;
}

.ag-category-pill.is-active .ag-category-pill__count {
  color: rgba(255, 255, 255, 0.75);
}