/* === Reactions & Popovers === */
.reactionBar{ display:inline-flex; gap:.3rem; margin-top:.45rem; align-items:center; flex-wrap:wrap }
.reactionBtn{
  position: relative;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-weight:600; letter-spacing:.02em;
  color:#fff;
  transition:transform .05s ease, background .15s ease, border-color .15s ease;
}
.reactionBtn .tooltip {
  position: absolute; bottom: 125%; left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.95); color: white;
  padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease-in-out; z-index: 999;
}
.reactionBtn:hover .tooltip { opacity: 1; }
.reactionBtn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18) }
.reactionBtn.user-reacted{ outline:1px solid rgba(45,180,166,.55); background:rgba(0,0,0,0.5) }
.reactionBtn:active{ transform:translateY(0) scale(.98) }

/* Tray / Backdrop */
.rxBackdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
  z-index: 1000;
}
.rxBackdrop.open { opacity: 1; pointer-events: auto; }

/* Modal */
.rxModal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.98);
  background: rgba(20,20,20,.98);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  width: min(560px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1001;
}
.rxModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

/* Header */
.rxHeader { display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); }
.rxClose { border: 0; background: transparent; color: #cfcfcf; font-size: 1.35rem; line-height: 1; cursor: pointer; padding: .1rem .25rem; }
.rxClose:hover { color: #fff; }

/* Grid */
.rxGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .4rem;
  padding: .6rem .75rem .8rem;
  overflow: auto;
}
@media (max-width: 720px) { .rxGrid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 520px) { .rxGrid { grid-template-columns: repeat(4, 1fr); } }

/* Remade chip + light theme support */

/* --- Tokens --- */
:root {
  /* dark/default */
  --chip-fg:            #ffffff;
  --chip-bg:            rgba(255,255,255,.06);
  --chip-border:        rgba(255,255,255,.14);
  --chip-hover-bg:      rgba(255,255,255,.12);
  --chip-active-bg:     rgba(255,255,255,.18);
  --chip-ring:          rgba(99,102,241,.45);

  --chip-me-fg:         #ffffff;
  --chip-me-bg:         rgba(186, 4, 238, .50);
  --chip-me-border:     #c400ff;
  --chip-me-hover-bg:   rgba(186, 4, 238, .60);
  --chip-me-active-bg:  rgba(186, 4, 238, .70);
}

:root[data-theme="light"] {
  --chip-fg:            #1a1f29;
  --chip-bg:            #f6f7fb;
  --chip-border:        #d9e0ea;
  --chip-hover-bg:      #eef2f7;
  --chip-active-bg:     #e7edf5;
  --chip-ring:          rgba(59,130,246,.35);

  --chip-me-fg:         #3b0764;
  --chip-me-bg:         #f5e8ff;
  --chip-me-border:     #c400ff;
  --chip-me-hover-bg:   #efdbff;
  --chip-me-active-bg:  #e8ccff;
}

/* --- Component --- */
.rxChip {
  margin: 1px 4px 1px 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  padding: .18rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--chip-border);

  color: var(--chip-fg);
  background: var(--chip-bg);

  font-size: .95rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .01em;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .06s ease;
}

.rxChip:hover { background: var(--chip-hover-bg); transform: translateY(-1px); }
.rxChip:active { background: var(--chip-active-bg); transform: translateY(0) scale(.98); }
.rxChip:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--chip-ring); }

/* pressed/selected state */
.rxChip.is-active,
.rxChip[aria-pressed="true"] {
  background: var(--chip-active-bg);
}

/* disabled */
.rxChip.is-disabled,
.rxChip[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* "me" accent */
.rxChip.me {
  color: var(--chip-me-fg);
  background: var(--chip-me-bg);
  border-color: var(--chip-me-border);
}
.rxChip.me:hover  { background: var(--chip-me-hover-bg); }
.rxChip.me:active { background: var(--chip-me-active-bg); }

/* useful inner bits */
.rxChip .emoji,
.rxChip .icon  { width: 1.1em; height: 1.1em; display: inline-block; }
.rxChip .count { font-variant-numeric: tabular-nums; opacity: .85; }

/* compact & comfy sizes if needed */
.rxChip--sm { padding: .1rem .45rem; font-size: .88rem; }
.rxChip--lg { padding: .28rem .75rem; font-size: 1.02rem; }

/* accessibility niceties */
@media (prefers-reduced-motion: reduce) {
  .rxChip { transition: none; }
}
@media (forced-colors: active) {
  .rxChip { border: 1px solid CanvasText; }
  .rxChip:focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}


.reactionsBar{ margin-top:10px;margin-bottom:10px; max-width:600px; }

.rxMiniTip{
  position:fixed; z-index:3000; pointer-events:none;
  max-width:340px; padding:.45rem .6rem; border-radius:10px;
  background:rgba(24,24,24,.96); color:#fff;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 14px 38px rgba(0,0,0,.35);
  font-size:.875rem; line-height:1.25; opacity:0; transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease;
}
.rxMiniTip.show{ opacity:1; transform:translateY(0); }
.rxMiniTip .row{ display:flex; gap:.5rem; align-items:center; margin-bottom:.25rem; }
.rxMiniTip .emoji{ font-size:1.05rem; }
.rxMiniTip .count{ font-weight:700; }
.rxMiniTip .pct{ color:#9aa3b2; font-weight:600; }
.rxMiniTip .users{ color:#cfd6e3; overflow-wrap:anywhere; }

/* anchored emoji popover */
.rxPop {
  position: fixed;
  z-index: 1001;
  display: none;
  background: rgba(20,20,20,.98);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  overflow: hidden;
}
/* ===== Light theme for anchored emoji popover ===== */
:root[data-theme="light"] .rxPop {
  /* use your palette if defined */
  color: var(--text, #1a1f29);
  background: color-mix(in oklab, var(--panel, #ffffff) 96%, white);
  border: 1px solid color-mix(in oklab, var(--text, #1a1f29) 12%, transparent);
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in oklab, black, white)) {
  :root[data-theme="light"] .rxPop {
    background: rgba(255,255,255,.96);
    border-color: rgba(0,0,0,.10);
  }
}

.rxPop.open { display: block; }
.rxPop emoji-picker.rxPicker { width: 100%; max-height: 360px; }
@media (max-width: 480px){ .rxPop emoji-picker.rxPicker { width: min(92vw, 360px); } }

.twemoji { width:1em; height:1em; vertical-align:-0.15em; }