/* Mobile agent category pills: compact, colorful, and easy to scan. */
@media (max-width: 1180px), (max-width: 1366px) and (pointer: coarse) {
  :root body .workspace .agents-page .filter-bar {
    gap: 12px;
  }

  :root body .workspace .agents-page .cat-scroll {
    gap: 8px;
    align-items: center;
  }

  :root body .workspace .agents-page .cat-chip,
  :root body .workspace .agents-page .cat-chip:hover,
  :root body .workspace .agents-page .cat-chip.active {
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    background: rgba(148, 163, 184, .09);
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    gap: 5px;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
  }

  :root body .workspace .agents-page .cat-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
  }

  :root body .workspace .agents-page .cat-chip.active {
    border-color: var(--color-primary);
    background: rgba(0, 229, 160, .16);
    color: var(--color-primary);
    box-shadow: 0 0 12px rgba(0, 229, 160, .12);
    font-weight: 700;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(2) {
    border-color: rgba(0, 229, 160, .42);
    background: rgba(0, 229, 160, .12);
    color: #55edbd;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(3) {
    border-color: rgba(127, 154, 255, .45);
    background: rgba(127, 154, 255, .14);
    color: #b5c3ff;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(4) {
    border-color: rgba(97, 181, 255, .45);
    background: rgba(97, 181, 255, .13);
    color: #9bd4ff;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(5) {
    border-color: rgba(167, 139, 250, .48);
    background: rgba(167, 139, 250, .14);
    color: #d0c0ff;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(6) {
    border-color: rgba(232, 121, 249, .46);
    background: rgba(232, 121, 249, .13);
    color: #f2b6fa;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(7) {
    border-color: rgba(245, 165, 67, .48);
    background: rgba(245, 165, 67, .14);
    color: #ffd08c;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(8) {
    border-color: rgba(250, 204, 21, .42);
    background: rgba(250, 204, 21, .12);
    color: #ffe675;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(9) {
    border-color: rgba(251, 113, 133, .44);
    background: rgba(251, 113, 133, .12);
    color: #ffb2bf;
  }

  :root body .workspace .agents-page .cat-chip:nth-child(10) {
    border-color: rgba(45, 212, 191, .44);
    background: rgba(45, 212, 191, .12);
    color: #8af2e2;
  }

  :root body .workspace .agents-page .cat-chip.active,
  :root body .workspace .agents-page .cat-chip.active:hover {
    border-color: var(--color-primary);
    background: rgba(0, 229, 160, .19);
    color: var(--color-primary);
  }

  :root body .workspace .agents-page .cat-count {
    display: inline;
    font-size: 10px;
    opacity: .72;
  }
}

@media (max-width: 420px) {
  :root body .workspace .agents-page .cat-scroll {
    gap: 7px 6px;
  }

  :root body .workspace .agents-page .cat-chip,
  :root body .workspace .agents-page .cat-chip:hover,
  :root body .workspace .agents-page .cat-chip.active {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 11px;
  }
}

:root[data-theme="light"] body .workspace .agents-page .cat-chip {
  border-color: rgba(71, 85, 105, .24);
  background: rgba(241, 245, 249, .92);
  color: #475569;
}

:root[data-theme="light"] body .workspace .agents-page .cat-chip.active {
  border-color: #00a878;
  background: rgba(0, 168, 120, .12);
  color: #007b5c;
}