/* ============================================================
   Tàng Thư Các — Thả cảm xúc (reactions.css)
   Dùng cho .cmt (bình luận chương), .pcom-item (bình luận đoạn), .review (đánh giá).
   ============================================================ */
.ttc-rx { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; vertical-align: middle; }

/* chip cảm xúc đang có */
.ttc-rx__chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1; transition: border-color .14s, background .14s, transform .12s;
}
.ttc-rx__chip:hover { transform: translateY(-1px); }
.ttc-rx__chip.is-on { color: var(--text); background: color-mix(in oklab, var(--accent) 18%, var(--surface-2)); border-color: var(--accent-line); }
.ttc-rx__e { font-size: 13px; line-height: 1; }
.ttc-rx__n { font-variant-numeric: tabular-nums; }

/* nút mở bảng chọn */
.ttc-rx__add { position: relative; display: inline-flex; }
.ttc-rx__addbtn {
  display: inline-flex; align-items: center; gap: 1px; cursor: pointer;
  height: 24px; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-3);
  font: inherit; transition: color .14s, background .14s, border-color .14s;
}
.ttc-rx__addbtn:hover, .ttc-rx__add.is-open .ttc-rx__addbtn { color: var(--text); background: var(--surface-2); border-color: var(--border-2); }
.ttc-rx__addbtn.has-mine { color: var(--accent); border-color: var(--accent-line); }
.ttc-rx__plus { font-size: 13px; font-weight: 800; line-height: 1; }

/* bảng chọn cảm xúc */
.ttc-rx__picker {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(calc(-50% + var(--rx-shift, 0px))) translateY(6px) scale(.96);
  display: flex; gap: 2px; padding: 6px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--border-2); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s, transform .16s, visibility .16s; z-index: 60;
}
.ttc-rx__add.is-open .ttc-rx__picker { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(calc(-50% + var(--rx-shift, 0px))) translateY(0) scale(1); }
.ttc-rx__picker::after { content: ''; position: absolute; top: 100%; left: calc(50% - var(--rx-shift, 0px)); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--border-2); }
.ttc-rx__opt {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: none; font-size: 20px; line-height: 1; transition: transform .12s, background .12s;
}
.ttc-rx__opt:hover { transform: scale(1.25); background: var(--surface-2); }
.ttc-rx__opt.is-on { background: color-mix(in oklab, var(--accent) 22%, transparent); }

/* khi picker mở gần mép màn nhỏ: JS sẽ tự dịch (--rx-shift) để không tràn ra ngoài. */

/* pop nhẹ khi số đếm đổi */
.ttc-rx__chip.just { animation: ttc-rx-pop .32s ease; }
@keyframes ttc-rx-pop { 0%{transform:scale(1)} 45%{transform:scale(1.22)} 100%{transform:scale(1)} }

/* canh trong từng khu hành động */
.cmt__acts, .pcom-item__acts, .review__acts { flex-wrap: wrap; row-gap: 8px; }
.cmt__acts .ttc-rx, .pcom-item__acts .ttc-rx, .review__acts .ttc-rx { margin-left: 2px; }