/* ===== Mesaj Tepkileri (reactions) — Discord tarzi ===== */

/* Tepki balonlarini tutan bar: mesaj text'inin hemen altinda */
.msg-reactions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  margin-top:4px;
}

/* Tek bir tepki balonu (pill): emoji + sayi
   Discord: .reactionInner padding 2px 6px, radius var(--radius-sm)=8px,
   border 1px solid transparent, yukseklik ~24px */
.reaction-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 6px;
  min-height:24px;
  border-radius:var(--radius-sm,8px);
  border:1px solid transparent;
  background:var(--panel2,var(--popout-bg));
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:background .1s ease,border-color .1s ease,transform .08s ease;
}
/* Yeni tepki balonu eklenince kucuk "pop" animasyonu */
.reaction-pill{animation:reactionPop .18s ease;}

.reaction-pill:hover{
  background:var(--hover);
  transform:translateY(-1px); /* hafif yukari kalkma */
}

/* Discord: emoji 16px, sayi 14px font-weight semibold, margin-inline-start 6px */
.reaction-emoji{font-size:16px;line-height:1;}
.reaction-count{
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  min-width:8px;
  margin-inline-start:6px;
  text-align:center;
}

/* "mine" — kendi verdigim tepki: blurple kenar + rgba(accent) bg
   Discord: brand-15a bg, brand-50a border, brand-300 sayi rengi */
.reaction-pill.mine{
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  border-color:color-mix(in srgb, var(--accent) 50%, transparent);
}
.reaction-pill.mine .reaction-count{color:var(--accent);}
.reaction-pill.mine:hover{
  background:color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Tepki ekleme "+" butonu: soluk, hover'da belirginlesir */
.reaction-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:24px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--radius-sm,8px);
  background:var(--panel2,var(--popout-bg));
  color:var(--muted);
  cursor:pointer;
  opacity:.55;
  transition:background .12s ease,opacity .12s ease,color .12s ease,transform .08s ease;
}
.reaction-add:hover{
  background:var(--hover);
  color:var(--text);
  opacity:1;
  transform:translateY(-1px);
}
.reaction-add svg{display:block;}

/* Tepki "pop" animasyonu */
@keyframes reactionPop{
  0%{transform:scale(.5);opacity:0;}
  60%{transform:scale(1.15);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}