.reaction-widget { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:8px; min-height:28px; }
.reaction-widget[data-reaction-type="message"]:empty { display:none; }
.rx-popover.rx-message-picker { width:min(360px,calc(100vw - 16px));padding:8px;border-radius:20px; }
.rx-rail-row { display:flex;align-items:center;gap:4px;min-width:0; }
.rx-rail { display:flex;gap:3px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin; }
.rx-rail button,.rx-scroll { border:0;background:transparent;color:var(--text);cursor:pointer;border-radius:12px;flex:0 0 auto; }
.rx-rail button { display:grid;place-items:center;width:40px;height:40px;padding:8px; }
.rx-rail .rx-image { width:25px;height:25px; }
.rx-scroll { width:24px;height:40px;padding:0;font-size:24px; }
.rx-rail button:hover,.rx-rail button[aria-pressed="true"] { background:var(--accent-soft); }
.rx-rail button:focus-visible,.rx-scroll:focus-visible { outline:2px solid var(--accent);outline-offset:-2px; }
.rx-message-picker .rx-credit { margin-top:4px;font-size:9px; }
.rx-chip { display:inline-flex; align-items:center; border:1px solid var(--border-light); background:var(--surface,#121318); border-radius:16px; overflow:hidden; }
.rx-chip.is-mine { border-color:var(--accent); background:rgba(214,51,46,.13); }
.rx-chip button,.rx-add,.rx-grid button { border:0; background:transparent; color:var(--text); cursor:pointer; padding:4px 6px; min-height:28px; }
.rx-chip button:hover,.rx-add:hover { background:rgba(255,255,255,.06); }
.rx-chip [data-rx-users] { font:600 12px Inter,sans-serif; padding-left:1px; }
.rx-image { width:20px; height:20px; display:inline-block; vertical-align:middle; object-fit:contain; }
.rx-add { border:1px dashed var(--border-light); border-radius:16px; font-size:17px; line-height:20px; }
.rx-add span { font-size:12px; margin-left:3px; }
.reaction-widget.is-busy { opacity:.6; pointer-events:none; }
.rx-error { color:#ff8984; font-size:12px; width:100%; }
.rx-popover { position:fixed; z-index:1600; width:min(300px,calc(100vw - 16px)); max-height:min(360px,calc(100dvh - 20px)); overflow-y:auto; background:var(--surface,#111217); color:var(--text); border:1px solid var(--border-light); border-radius:14px; padding:12px; box-shadow:0 12px 36px #0008; }
.rx-heading { font:600 12px Inter,sans-serif; margin-bottom:10px; color:var(--text-secondary); }
.rx-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px; }
.rx-grid button { padding:7px 1px; border-radius:8px; }
.rx-grid button:hover,.rx-grid button:focus-visible { background:rgba(214,51,46,.18); outline:1px solid var(--accent); }
.rx-credit { display:block; color:var(--text-muted); font-size:10px; text-align:right; margin-top:10px; }
.rx-person { display:flex; align-items:center; gap:8px; padding:7px 3px; text-decoration:none; color:var(--text); border-radius:7px; }
.rx-person:hover { background:rgba(255,255,255,.04); }
.rx-person b { display:block; font-size:12px; overflow-wrap:anywhere; }
.rx-person small { display:block; color:var(--text-muted); font-size:11px; }
.rx-avatar { width:32px; height:32px; flex-shrink:0; position:relative; display:grid; place-items:center; border-radius:50%; background:#552224; font:600 11px Inter,sans-serif; overflow:hidden; }
.rx-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rx-more { display:block; width:100%; background:transparent; color:var(--accent); border:1px solid var(--border); padding:8px; border-radius:8px; cursor:pointer; }

/* Interaction motion: composite transforms/opacity only, outside the message layout. */
.rx-is-closing { pointer-events:none; }
.rx-celebration { position:fixed;inset:0;z-index:2000;pointer-events:none;overflow:hidden;contain:strict; }
.rx-burst-origin { position:absolute;width:0;height:0; }
.rx-burst-main { position:absolute;width:42px;height:42px;left:-21px;top:-21px; }
.rx-burst-particle { position:absolute;width:17px;height:17px;left:-8px;top:-8px; }
@media (prefers-reduced-motion:no-preference) {
  .rx-popover { animation:rx-popover-in 220ms var(--motion-ease-decel,cubic-bezier(0,0,.2,1)) backwards; }
  .rx-popover.rx-is-closing { animation:rx-popover-out 140ms var(--motion-ease-accel,cubic-bezier(.4,0,1,1)) forwards; }
  .rx-picker .rx-grid button,.rx-picker .rx-rail [data-choose] {
    animation:rx-emoji-in 160ms var(--motion-ease-decel,cubic-bezier(0,0,.2,1)) backwards;
  }
  .rx-grid button:nth-child(2),.rx-rail [data-choose]:nth-child(2) { animation-delay:14ms; }
  .rx-grid button:nth-child(3),.rx-rail [data-choose]:nth-child(3) { animation-delay:28ms; }
  .rx-grid button:nth-child(4),.rx-rail [data-choose]:nth-child(4) { animation-delay:42ms; }
  .rx-grid button:nth-child(5),.rx-rail [data-choose]:nth-child(5) { animation-delay:56ms; }
  .rx-grid button:nth-child(6),.rx-rail [data-choose]:nth-child(6) { animation-delay:70ms; }
  .rx-grid button:nth-child(n+7),.rx-rail [data-choose]:nth-child(n+7) { animation-delay:84ms; }
  .rx-grid button .rx-image,.rx-rail button .rx-image { transition:transform 160ms var(--motion-ease-emphasized,cubic-bezier(.2,0,0,1)); }
  .rx-grid button:active .rx-image,.rx-rail button:active .rx-image { transform:scale(.86); }
  .rx-chip.rx-activated { animation:rx-chip-pop 280ms var(--motion-ease-emphasized,cubic-bezier(.2,0,0,1)) backwards; }
  .rx-burst-main { animation:rx-burst-main 620ms cubic-bezier(.2,.75,.2,1) both; }
  .rx-burst-particle { animation:rx-burst-particle 650ms cubic-bezier(.15,.6,.3,1) both; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .rx-grid button:hover .rx-image,.rx-rail button:hover .rx-image { transform:translateY(-2px) scale(1.17) rotate(-7deg); }
}
@media (prefers-reduced-motion:reduce) {
  .rx-popover,.rx-grid button,.rx-rail button,.rx-chip,.rx-image { animation:none!important;transition:none!important; }
  .rx-celebration { display:none; }
}
@keyframes rx-popover-in {
  from { opacity:0;transform:translateY(var(--rx-enter-y,-6px)) scale(.94); }
  to { opacity:1;transform:translateY(0) scale(1); }
}
@keyframes rx-popover-out { to { opacity:0;transform:translateY(var(--rx-enter-y,-6px)) scale(.97); } }
@keyframes rx-emoji-in { from { opacity:0;transform:translateY(5px) scale(.72); } }
@keyframes rx-chip-pop { 0% { transform:scale(.85); } 45% { transform:scale(1.18); } 75% { transform:scale(.96); } 100% { transform:scale(1); } }
@keyframes rx-burst-main {
  0% { opacity:0;transform:translateY(5px) scale(.35) rotate(-12deg); }
  22% { opacity:1;transform:translateY(-23px) scale(1.2) rotate(8deg); }
  68% { opacity:1;transform:translateY(-37px) scale(1) rotate(-4deg); }
  100% { opacity:0;transform:translateY(-54px) scale(.65) rotate(3deg); }
}
@keyframes rx-burst-particle {
  0% { opacity:0;transform:translate(0,0) scale(.2); }
  18% { opacity:.85; }
  100% { opacity:0;transform:translate(var(--rx-x),var(--rx-y)) scale(.55) rotate(var(--rx-spin)); }
}