/* WhatsApp + iMessage emoji reactions. */
html[data-social-app="whatsapp"] .yappy-reaction-target,
html[data-social-app="imessage"] .yappy-reaction-target{
  position:relative!important;
  overflow:visible!important;
}

/* WhatsApp: small neutral reaction pill hanging below the message bubble. */
html[data-social-app="whatsapp"] .yappy-wa-reaction{
  position:absolute!important;
  bottom:-14px!important;
  z-index:12!important;
  min-width:29px!important;
  height:25px!important;
  padding:1px 7px!important;
  box-sizing:border-box!important;
  border-radius:13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(0,0,0,.08)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.16)!important;
  color:#5f6368!important;
  line-height:1!important;
  pointer-events:none!important;
}
html[data-theme="dark"][data-social-app="whatsapp"] .yappy-wa-reaction{
  background:#202c33!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.42)!important;
  color:#aebac1!important;
}
html[data-social-app="whatsapp"] .yappy-reaction-in>.yappy-wa-reaction{left:10px!important;right:auto!important}
html[data-social-app="whatsapp"] .yappy-reaction-out>.yappy-wa-reaction{right:10px!important;left:auto!important}
html[data-social-app="whatsapp"] .yappy-wa-reaction>b{
  font:inherit!important;
  font-size:15px!important;
  line-height:1!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
}
html[data-social-app="whatsapp"] .yappy-wa-reaction>small{
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:500!important;
  color:inherit!important;
}
html[data-social-app="whatsapp"] .msg-row:has(.yappy-wa-reaction){
  margin-bottom:15px!important;
}

/* iMessage: emoji tapback bubble with two little attachment dots. */
html[data-social-app="imessage"] .yappy-im-reaction{
  position:absolute!important;
  top:-19px!important;
  z-index:16!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  background:#0a84ff!important;
  border:2px solid var(--im-bg,#fff)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.16)!important;
  color:#fff!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-size:22px!important;
  line-height:1!important;
  pointer-events:none!important;
}
html[data-social-app="imessage"] .yappy-reaction-out>.yappy-im-reaction{left:-15px!important;right:auto!important}
html[data-social-app="imessage"] .yappy-reaction-in>.yappy-im-reaction{right:-15px!important;left:auto!important}
html[data-social-app="imessage"] .yappy-im-reaction::before,
html[data-social-app="imessage"] .yappy-im-reaction::after{
  content:""!important;
  position:absolute!important;
  border-radius:50%!important;
  background:#0a84ff!important;
  border:1.5px solid var(--im-bg,#fff)!important;
}
html[data-social-app="imessage"] .yappy-im-reaction::before{
  width:9px!important;height:9px!important;bottom:-5px!important;
}
html[data-social-app="imessage"] .yappy-im-reaction::after{
  width:5px!important;height:5px!important;bottom:-11px!important;
}
html[data-social-app="imessage"] .yappy-reaction-out>.yappy-im-reaction::before{left:6px!important}
html[data-social-app="imessage"] .yappy-reaction-out>.yappy-im-reaction::after{left:2px!important}
html[data-social-app="imessage"] .yappy-reaction-in>.yappy-im-reaction::before{right:6px!important}
html[data-social-app="imessage"] .yappy-reaction-in>.yappy-im-reaction::after{right:2px!important}

/* Reaction editor in the existing message action sheet. */
.yappy-reaction-action-icon{
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-size:18px!important;
}
.yappy-reaction-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
  margin:8px 0 14px!important;
}
.yappy-reaction-grid button{
  height:48px!important;
  border:1px solid var(--line,rgba(127,127,127,.18))!important;
  border-radius:13px!important;
  background:var(--card-bg,var(--bg-card,transparent))!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-size:24px!important;
}
.yappy-reaction-grid button.selected{
  border-color:#0a84ff!important;
  box-shadow:0 0 0 1px #0a84ff inset!important;
}
.yappy-reaction-custom,
.yappy-reaction-count{
  margin-bottom:10px!important;
}