/* 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: 4px 8px;
  transition:
    box-shadow 150ms cubic-bezier(0.25, 1, 0.5, 1),
    background-color 150ms ease;

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

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

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

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

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

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

  /* The roster tooltip is an absolutely-positioned child, so it has to clear the
     stacking ladder .message owns (avatar 2, hover actions 3, avatar menu 4) or
     it paints under the avatar it overlaps. Lifted only while the tooltip is
     actually showing, so a resting chip never outranks an open avatar menu. */
  &:hover,
  &:focus-visible {
    position: relative;
    z-index: 5;
  }
}

.boost__content {
  font-size: 1rem;
}

/* The count carries the roster: tabular so chips do not jitter as it ticks,
   and quieter than the emoji it follows. */
.boost__count {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

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

  @media (hover: hover) and (pointer: fine) {
    &: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);

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}