/* cute-chat-stickers theme vars (subset) + reactions.css — CC BY-NC-SA 4.0 */
:root{
  --cs-ink: #4a3a42;
  --cs-soft: #8a7480;
  --cs-line: rgba(120, 90, 105, .22);
  --cs-paper: #fffdfd;
  --cs-accent: #b0607f;
  --cs-press: rgba(217, 163, 189, .18);
  --cs-scrim: rgba(40, 28, 34, .18);
  --cs-shadow: 0 14px 34px rgba(120, 70, 95, .18);
  --cs-radius: 16px;
  --cs-ease: cubic-bezier(.22, .8, .24, 1);
  --cs-emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.cs-press-area{ -webkit-touch-callout: none; }

.rx-layer{ position: fixed; inset: 0; z-index: 250; }
.rx-layer[hidden]{ display: none; }
.rx-scrim{ position: absolute; inset: 0; background: var(--cs-scrim); opacity: 0; transition: opacity .2s ease; }
.rx-layer.open .rx-scrim{ opacity: 1; }
.rx-clone{
  position: fixed !important; margin: 0 !important; z-index: 1; pointer-events: none; box-sizing: border-box;
  transform-origin: center; transition: transform .22s var(--cs-ease), box-shadow .22s ease;
}
.rx-layer.open .rx-clone{ transform: scale(1.03); box-shadow: var(--cs-shadow); }
.rx-card{
  position: fixed; z-index: 2; padding: 6px; border-radius: var(--cs-radius);
  background: var(--cs-paper); border: 1px solid var(--cs-line); box-shadow: var(--cs-shadow); color: var(--cs-ink);
  opacity: 0; transform: scale(.94); transition: opacity .16s ease, transform .22s var(--cs-ease);
}
.rx-layer.open .rx-card{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .rx-card, .rx-clone, .rx-scrim{ transition: none; } }
.rx-grid{ display: grid; grid-template-columns: repeat(4, 56px); gap: 4px; }
.rx-cell{
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; width: 56px; height: 52px; padding: 0;
  border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--cs-soft); -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .12s ease;
}
.rx-glyph{ font-family: var(--cs-emoji-font); font-size: 30px; line-height: 1; display: flex; }
.rx-glyph img{ width: 32px; height: 32px; object-fit: contain; }
.rx-cell svg{ width: 22px; height: 22px; }
.rx-cell:hover{ background: var(--cs-press); }
.rx-cell:active{ transform: scale(.94); background: var(--cs-press); }
.rx-cell.on{ background: var(--cs-press); box-shadow: inset 0 0 0 1.5px var(--cs-accent); }
.rx-actions{ display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--cs-line); }
.rx-actions[hidden]{ display: none; }
.rx-act{
  appearance: none; -webkit-appearance: none; border: 0; background: none; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; color: var(--cs-ink); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.rx-act svg{ width: 18px; height: 18px; }
.rx-act:hover{ background: var(--cs-press); }

.rx-has{ margin-bottom: 10px; }
.rx-has-sticker{ margin-bottom: 31px; }
.rx-chips{ position: absolute; right: -7px; bottom: -11px; z-index: 2; display: flex; gap: 3px; align-items: center; white-space: nowrap; }
.rx-has-sticker > .rx-chips{ bottom: -27px; right: -13px; }
.rx-chip{
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; box-sizing: border-box;
  border-radius: 50%; font-family: var(--cs-emoji-font); font-size: 15px; line-height: 1;
  background: var(--cs-paper); border: 1px solid var(--cs-line); box-shadow: 0 2px 8px rgba(78, 94, 108, .14);
  user-select: none; -webkit-user-select: none; animation: rxPop .52s cubic-bezier(.34, 1.56, .5, 1) both;
}
.rx-chip-sticker{ width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 2px 4px rgba(78, 94, 108, .22)); }
.rx-chip-sticker img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.rx-left > .rx-chips{ right: auto; left: -4px; }
.sticker-row{ position: relative; }
.sticker-row.rx-has{ margin-bottom: 14px; }
@keyframes rxPop{ 0%{ transform: scale(0) rotate(-16deg); opacity: 0; } 55%{ transform: scale(1.22) rotate(5deg); opacity: 1; } 100%{ transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .rx-chip{ animation: none; } }

/* murmur: keep reaction layer above chat UI */
#page-murmur .rx-layer{ z-index: 420; isolation: isolate; }
#page-murmur .rx-card{ z-index: 3 !important; background: #fffdfd !important; }
#page-murmur .rx-clone{ display: none !important; } /* skins break without .row parent */
#page-murmur .rx-scrim{ background: rgba(40, 28, 34, .28); }
/* long-press = react, not iOS text loupe */
#page-murmur #scroll .bubble,
#page-murmur #scroll .sticker-row,
#page-murmur #scroll .stk-msg{
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}