/* ===== Emoji Reactions ===== */
.reaction-bar{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:6px;
}
.reaction-btn{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border, rgba(148,163,184,.15));
  background:transparent;
  cursor:pointer;
  font-size:14px;
  line-height:1.4;
  transition:background .15s, border-color .15s;
  color:var(--text);
}
.reaction-btn:hover{
  background:rgba(96,165,250,.08);
  border-color:rgba(96,165,250,.3);
}
.reaction-btn.is-active{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.4);
}
.reaction-btn .reaction-count{
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.reaction-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  border:1px dashed var(--border, rgba(148,163,184,.2));
  background:transparent;
  cursor:pointer;
  font-size:14px;
  opacity:.5;
  transition:opacity .15s, background .15s;
}
.reaction-add:hover{ opacity:1; background:rgba(96,165,250,.08); }
.reaction-picker{
  position:absolute;
  bottom:110%;
  left:0;
  background:var(--card-bg,#fff);
  border:1px solid var(--border, rgba(148,163,184,.15));
  border-radius:12px;
  padding:6px 8px;
  display:flex;
  gap:4px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  z-index:100;
}
.reaction-picker button{
  border:none;
  background:transparent;
  font-size:20px;
  padding:4px 6px;
  border-radius:8px;
  cursor:pointer;
  transition:background .1s, transform .1s;
}
.reaction-picker button:hover{
  background:rgba(96,165,250,.1);
  transform:scale(1.2);
}