.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* min-height, not a fixed height — a card's label can now wrap to 2-3
     lines (see .filter-card__label below), so the row needs to be able to
     grow past the single-line-card height instead of clipping it. */
  min-height: 124px;
  box-sizing: border-box;
  padding: 16px 0 24px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter-row__end-spacer {
  flex-shrink: 0;
  width: 12px;
}

.filter-card {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  /* min-height (not height) so a 2-3 line label — real team/filter names,
     not decorative filler — can grow the card instead of being cut off;
     overflow:hidden stays, it's still needed to clip the background image/
     gradient to the rounded corners. */
  min-height: 70px;
  box-sizing: border-box;
  border-radius: 6px;
  border: none;
  padding: 4px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  cursor: pointer;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  font: inherit;
  text-align: left;
  /* 400ms ease-out, not var(--transition-standard) (300ms ease-out) —
     deliberately its own timing so it can stay in lockstep with the
     filter row's own centering scroll (js/app.js's
     scrollFilterCardToCenter, which uses a matching quadratic ease-out —
     a gentler curve than a cubic ease-out, less contrast between the
     initial burst and the tail, per explicit instruction — same
     ease-out family throughout, not ease-in-out). Applied identically
     here and on .filter-card__stroke/__icon/__label below, since all
     four are part of the same active-state transformation. */
  transition: width 400ms ease-out, min-height 400ms ease-out,
    padding 400ms ease-out;
}

.filter-card--active {
  width: 120px;
  min-height: 84px;
  padding: 6px;
}

.filter-card--icon {
  background-image: linear-gradient(180deg, var(--surface-filter-chip-from), var(--surface-filter-chip-to));
}

.filter-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(180deg, rgba(247, 205, 252, 0) 0%, rgba(87, 33, 127, 0.8) 63.462%);
}

/* Painted last (after the photo/gradient overlay) so the stroke sits on top of
   the fill, matching Figma's stroke-above-fill layer order — a border on
   .filter-card itself would paint underneath an absolutely-positioned
   .filter-card__overlay child instead of overlapping it. */
.filter-card__stroke {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  /* Matches .filter-card's own 400ms ease-out — see that rule's comment. */
  transition: border-width 400ms ease-out, border-color 400ms ease-out;
}

.filter-card--active .filter-card__stroke {
  border-width: 2px;
  border-color: var(--border-filter-chip-active);
}

.filter-card__icon {
  position: absolute;
  top: 50%;
  left: 34%;
  width: 33%;
  height: auto;
  transform: translateY(calc(-50% - 9.82px));
  /* Matches .filter-card's own 400ms ease-out — see that rule's comment. */
  transition: left 400ms ease-out, width 400ms ease-out,
    transform 400ms ease-out;
}

.filter-card--active .filter-card__icon {
  left: 32.5%;
  width: 35.03%;
  transform: translateY(calc(-50% - 11.2px));
}

/* Wraps onto 2-3 lines instead of being truncated — real team/filter
   names, not decorative filler, per explicit instruction (same principle
   as the earlier chat-type subtitle fix). */
.filter-card__label {
  position: relative;
  width: 100%;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  /* Matches .filter-card's own 400ms ease-out — see that rule's comment. */
  transition: font-size 400ms ease-out;
}

.filter-card--active .filter-card__label {
  font-size: 16px;
}

.filter-card--icon .filter-card__label {
  color: var(--text-filter-chip);
}

.filter-card--team .filter-card__label {
  color: var(--text-invert-white);
}