/*
 * Post reactions (app/views/pages/tema/_reactions.twig, assets/js/reactions.js, docs/reactions.md), both themes.
 * Colors use the Moderna tokens (assets/modern/tokens.css, light and dark) when present, plain values in classic.
 */
.rx { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 2px; font-size: 12px; line-height: 1; }
.rx-form { display: contents; margin: 0; }
.rx-pills { display: contents; }
.rx-pill, .rx-add-btn {
  display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 24px; padding: 0 8px; margin: 0;
  border: 1px solid var(--border, #d4d8de); border-radius: 999px; background: var(--surface-2, #f6f7f9);
  color: var(--text-2, #3d4450); font: inherit; font-weight: 600; cursor: default; vertical-align: middle;
}
button.rx-pill, .rx-add-btn { cursor: pointer; }
.rx-pill img { width: 16px; height: 16px; display: block; }
.rx-pill.is-mine { border-color: var(--link, #1f5fbf); background: var(--link-soft, #eaf1fc); color: var(--link, #1f5fbf); }
button.rx-pill:hover, .rx-add-btn:hover { border-color: var(--border-strong, #aab2bd); }
.rx-pill:focus-visible, .rx-add-btn:focus-visible, .rx-choice:focus-visible { outline: 2px solid var(--link, #1f5fbf); outline-offset: 1px; }
.rx-pill[aria-busy="true"] { opacity: .6; }

.rx-add { position: relative; display: inline-block; }
.rx-add > summary { list-style: none; }
.rx-add > summary::-webkit-details-marker { display: none; }
.rx-add-btn { padding: 0 6px; color: var(--muted, #646d7e); }
.rx:not(:hover):not(:focus-within) .rx-add:not([open]) .rx-add-btn { opacity: .7; }
.rx-picker {
  position: absolute; z-index: 30; left: 0; bottom: calc(100% + 6px); display: flex; flex-wrap: wrap; gap: 2px; width: max-content;
  max-width: 260px; padding: 6px; background: var(--surface, #fff); border: 1px solid var(--border, #d4d8de);
  border-radius: 12px; box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .15));
}
.rx-choice { display: inline-flex; padding: 4px; margin: 0; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.rx-choice:hover { background: var(--surface-2, #f0f2f5); }
.rx-choice[aria-pressed="true"] { background: var(--link-soft, #eaf1fc); border-color: var(--link, #1f5fbf); }
.rx-choice img { width: 22px; height: 22px; display: block; }
.rx-credit { flex-basis: 100%; margin-top: 4px; font-size: 10px; font-weight: normal; color: var(--muted, #646d7e); text-decoration: none; }

.rx-tip {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; box-sizing: border-box; width: max-content; max-width: min(320px, 90vw);
  padding: 10px 12px; background: var(--chrome-bg, #1b1f27); color: var(--chrome-strong, #fff); border-radius: 10px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .25)); font-size: 12px; font-weight: normal; line-height: 1.45; text-align: left;
}
.rx-tip[hidden] { display: none; }
.rx-tip-icon { display: block; width: 36px; height: 36px; margin: 0 auto 6px; }
.rx-tip-text { display: block; text-align: center; }
.rx-tip a { color: inherit; font-weight: 600; text-decoration: underline; }
.rx-tip .rx-tip-hint { display: block; margin-top: 4px; opacity: .7; text-align: center; }

@media (prefers-reduced-motion: no-preference) { .rx-pill { transition: background-color .12s, border-color .12s; } }
@media print { .rx-add, .rx-tip { display: none !important; } }
.rx-msg { flex-basis: 100%; margin-top: 4px; color: var(--danger, #b3122e); font-weight: 600; line-height: 1.3; }