.bo-rxn-row {
  position: relative;
  margin-top: 0.28rem;
  min-width: 0;
}

.bo-rxn-summary {
  display: inline-block;
  margin: 0 0 0.16rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(20, 26, 38, 0.66);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.bo-rxn-summary:hover,
.bo-rxn-summary:focus-visible {
  color: #1c4fa3;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  outline: none;
}

.bo-rxn-row__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.bo-rxn-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.bo-rxn-choice__toggle,
.bo-rxn-row__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.72rem;
  height: 1.72rem;
  min-width: 1.72rem;
  min-height: 1.72rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.bo-rxn-choice__toggle:hover,
.bo-rxn-choice__toggle:focus-visible,
.bo-rxn-row__more:hover,
.bo-rxn-row__more:focus-visible {
  border-color: rgba(28, 79, 163, 0.26);
  background: rgba(28, 79, 163, 0.08);
  outline: none;
}

.bo-rxn-choice.is-active .bo-rxn-choice__toggle {
  border-color: rgba(28, 79, 163, 0.46);
  background: rgba(28, 79, 163, 0.14);
  box-shadow: inset 0 0 0 1px rgba(28, 79, 163, 0.08);
}

.bo-rxn-choice__toggle:disabled {
  cursor: default;
  opacity: 0.82;
}

.bo-rxn-choice__count {
  min-width: 0.92rem;
  height: 1.25rem;
  margin-left: -0.22rem;
  padding: 0 0.16rem;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 26, 38, 0.07);
  color: rgba(20, 26, 38, 0.72);
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.bo-rxn-choice__count:hover,
.bo-rxn-choice__count:focus-visible {
  background: rgba(28, 79, 163, 0.12);
  color: #1c4fa3;
  outline: none;
}

.bo-rxn-row__more {
  margin-left: 1px;
  border-color: rgba(20, 26, 38, 0.14);
  background: rgba(20, 26, 38, 0.035);
  font-size: 1.04rem;
  font-weight: 900;
}

.bo-rxn-row__status {
  min-height: 0;
  margin-top: 0.15rem;
  color: #8a2431;
  font-size: 0.74rem;
}

.bo-rxn-row__status:empty {
  display: none;
}

.bo-rxn-row.is-saving {
  opacity: 0.72;
}

.bo-rxn-picker {
  position: fixed;
  z-index: 10060;
  width: min(23rem, calc(100vw - 16px));
  max-height: min(20rem, 58vh);
  box-sizing: border-box;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0.3rem 0.3rem 0.72rem;
  scroll-padding-bottom: 0.55rem;
  border: 1px solid rgba(20, 26, 38, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 14px 42px rgba(20, 26, 38, 0.22);
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep wheel/touch scrolling, but hide the native scrollbar chrome. */
.bo-rxn-picker::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.bo-rxn-picker[hidden] {
  display: none !important;
}

.bo-rxn-picker__quick {
  display: grid;
  grid-template-columns: repeat(12, 1.78rem);
  justify-content: start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.22rem;
  padding: 0.06rem 0.08rem 0.24rem;
  border-bottom: 1px solid rgba(28, 79, 163, 0.18);
  border-radius: 7px 7px 2px 2px;
  background: rgba(28, 79, 163, 0.035);
}

.bo-rxn-picker__quick[hidden] {
  display: none !important;
}

.bo-rxn-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1.78rem);
  justify-content: start;
  gap: 0;
  padding-bottom: 0.18rem;
}

.bo-rxn-picker__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.78rem;
  height: 1.78rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

.bo-rxn-picker__button:hover,
.bo-rxn-picker__button:focus-visible {
  border-color: rgba(28, 79, 163, 0.26);
  background: rgba(28, 79, 163, 0.08);
  outline: none;
}

.bo-rxn-picker__button.is-active {
  border-color: rgba(28, 79, 163, 0.5);
  background: rgba(28, 79, 163, 0.15);
}

.bo-rxn-picker__button:disabled {
  cursor: default;
}

.bo-rxn-picker__emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.bo-rxn-picker__count {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 0.70rem;
  padding: 0 0.08rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 26, 38, 0.14);
  color: rgba(20, 26, 38, 0.82);
  font-size: 0.50rem;
  font-weight: 900;
  line-height: 0.72rem;
  text-align: center;
}

.bo-rxn-names-popover {
  position: fixed;
  z-index: 10070;
  max-width: min(22rem, calc(100vw - 16px));
  padding: 0.48rem 0.62rem;
  border: 1px solid rgba(20, 26, 38, 0.16);
  border-radius: 10px;
  background: rgba(20, 26, 38, 0.95);
  color: #fff;
  box-shadow: 0 10px 28px rgba(20, 26, 38, 0.22);
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: normal;
}

.bo-rxn-names-popover[hidden] {
  display: none !important;
}

.bo-rxn-names-popover--all {
  width: min(26rem, calc(100vw - 16px));
  max-height: min(70vh, 32rem);
  overflow: auto;
}

.bo-rxn-names-popover__title {
  margin-bottom: 0.32rem;
  font-weight: 800;
}

.bo-rxn-names-popover__list {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bo-rxn-names-popover__person {
  display: inline;
  white-space: nowrap;
}

.bo-rxn-names-popover__user,
.bo-rxn-names-popover__user:link,
.bo-rxn-names-popover__user:visited,
.bo-rxn-names-popover__user:hover,
.bo-rxn-names-popover__user:focus {
  color: #fff;
  text-decoration: none;
}

.bo-rxn-names-popover__emoji {
  margin-left: 0.08rem;
  font-size: 1.02rem;
}

.bo-rxn-names-popover__comma,
.bo-rxn-names-popover__more {
  opacity: 0.82;
}

.bo-rxn-names-popover__loading,
.bo-rxn-names-popover__empty {
  opacity: 0.9;
}

@media (max-width: 575.98px) {
  .bo-rxn-row__quick {
    gap: 0;
  }

  .bo-rxn-choice__toggle,
  .bo-rxn-row__more {
    width: 1.66rem;
    height: 1.66rem;
    min-width: 1.66rem;
    min-height: 1.66rem;
  }

  .bo-rxn-picker {
    width: min(22rem, calc(100vw - 12px));
    padding: 0.22rem;
  }

  .bo-rxn-picker__quick {
    grid-template-columns: repeat(12, 1.78rem);
  }
}


/* v58: give the last catalog row enough room to clear the rounded panel edge. */
@media (min-width: 768px) {
  .bo-rxn-picker {
    max-height: min(21rem, calc(100dvh - 16px));
  }
}

/* PM reactions belong on full message bubbles, never inbox/thread previews. */
.block-private-message-inbox-block .bo-rxn-row[data-target-type="private_message"],
.private-message-thread-inbox .bo-rxn-row[data-target-type="private_message"],
.bo-activity-pm-inbox .bo-rxn-row[data-target-type="private_message"] {
  display: none !important;
}

/* v75: compact frequent-reaction row + inline catalog search. */
.bo-rxn-picker__search-toggle,
.bo-rxn-picker__search-exit {
  grid-column: 11 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  width: 3.56rem;
  height: 1.78rem;
  min-width: 0;
  padding: 0 0.22rem;
  border: 1px solid rgba(28, 79, 163, 0.18);
  border-radius: 6px;
  background: rgba(28, 79, 163, 0.09);
  color: rgba(20, 26, 38, 0.78);
  cursor: pointer;
  line-height: 1;
}

.bo-rxn-picker__search-toggle:hover,
.bo-rxn-picker__search-toggle:focus-visible,
.bo-rxn-picker__search-exit:hover,
.bo-rxn-picker__search-exit:focus-visible {
  border-color: rgba(28, 79, 163, 0.36);
  background: rgba(28, 79, 163, 0.15);
  color: #1c4fa3;
  outline: none;
}

.bo-rxn-picker__search-icon {
  width: 0.88rem;
  height: 0.88rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.bo-rxn-picker__search-label {
  font-size: 0.60rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bo-rxn-picker__search-x {
  margin-top: -0.04rem;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1;
}

.bo-rxn-picker__search-field {
  grid-column: 1 / span 10;
  display: flex;
  align-items: center;
  gap: 0.30rem;
  height: 1.78rem;
  min-width: 0;
  padding: 0 0.38rem;
  border: 1px solid rgba(28, 79, 163, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(20, 26, 38, 0.72);
  box-sizing: border-box;
}

.bo-rxn-picker__search-field:focus-within {
  border-color: rgba(28, 79, 163, 0.52);
  box-shadow: 0 0 0 2px rgba(28, 79, 163, 0.08);
}

.bo-rxn-picker__search-input {
  width: 100%;
  min-width: 0;
  height: 1.48rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(20, 26, 38, 0.92);
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.2;
}

.bo-rxn-picker__search-input::placeholder {
  color: rgba(20, 26, 38, 0.48);
}

.bo-rxn-picker__quick.is-searching {
  background: rgba(28, 79, 163, 0.045);
}

.bo-rxn-picker__button[hidden] {
  display: none !important;
}

.bo-rxn-picker__search-empty {
  margin: 0.28rem 0.12rem 0;
  padding: 0.42rem 0.5rem;
  border-radius: 7px;
  background: rgba(20, 26, 38, 0.045);
  color: rgba(20, 26, 38, 0.58);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
}

.bo-rxn-picker__search-empty[hidden] {
  display: none !important;
}

/* v76: preserve the two-cell search tool on very narrow phones, but save
 * horizontal breathing room by collapsing its visible label to icon-only.
 * The accessible name remains on the button via aria-label/title in JS. */
@media (max-width: 340px) {
  .bo-rxn-picker__search-toggle .bo-rxn-picker__search-label {
    display: none;
  }

  .bo-rxn-picker__search-toggle {
    gap: 0;
    padding-inline: 0;
  }
}