/* Container */
.boosts {
  position: relative;
  left: -2px;
}

/* A grouped reaction chip: stacked reactor avatars then the emoji, in a 23px
   pill. Accent-tinted when the current user is in the group — boost--mine is
   stamped client-side (boost_toggle_controller) so the broadcast HTML stays the
   same for every viewer. The two hidden forms are the add/remove paths. */
.boost {
  display: inline-flex;
  margin-block-start: calc(var(--block-space-half) / 2);
}

.boost__form {
  display: none;
}

.boost__toggle {
  --boost-border-color: var(--color-border);

  align-items: center;
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--boost-border-color);
  border-radius: var(--border-radius-pill);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  line-height: 1;
  min-block-size: 23px;
  padding: 2px 8px 2px 3px;
  transition: box-shadow 150ms cubic-bezier(0.25, 1, 0.5, 1), background-color 150ms ease;

  .boost--mine & {
    --boost-border-color: var(--color-selected-dark);

    background-color: var(--color-selected);
  }

  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      --boost-border-color: var(--color-border-darker);

      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
    }
  }

  &:active {
    transform: scale(0.97);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent-brand);
  }
}

/* Reactor avatars: 17px, overlapping −5, ringed in the chip's ground so the
   stack reads as separate discs */
.boost__avatars {
  display: inline-flex;
}

.boost__avatar {
  block-size: 17px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--color-bg);
  inline-size: 17px;
  object-fit: cover;

  & + & {
    margin-inline-start: -5px;
  }

  .boost--mine & {
    box-shadow: 0 0 0 1.5px var(--color-selected);
  }
}

.boost__content {
  font-size: 0.8125rem;
}

.boost__overflow {
  color: var(--color-text-subtle);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Trailing pill that opens the reaction picker */
.boost__add {
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius-pill);
  color: var(--color-text-subtle);
  display: inline-flex;
  font-size: 0.8125rem;
  justify-content: center;
  line-height: 1;
  margin-block-start: calc(var(--block-space-half) / 2);
  min-block-size: 23px;
  padding: 2px 9px;

  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      border-color: var(--color-border-darker);
      color: var(--color-text);
    }
  }

  /* Anchor, not a .btn, so the base focus rule doesn't reach it — keep an
     explicit offset to match the app-wide 2px keyboard ring. */
  &:focus-visible {
    outline: 2px solid var(--color-accent-brand);
    outline-offset: 2px;
  }
}

/* Larger glyph for the picker grid and the quick-reaction bar */
.boost-character {
  font-size: 1.3rem;
  transition: transform 150ms cubic-bezier(0.25, 1, 0.5, 1);
}