/* ARTIZS.SAY v0.5.14 — calm click-to-open reactions + six reaction types */

/*
 * Message actions are now an overlay in the natural gap below a message.
 * Nothing is inserted/removed from the document flow on hover, so moving the
 * pointer across messages no longer makes rows jump.
 */
.message-content{position:relative}
.msg-actions,
.msg-actions.no-persistent-actions{
  position:absolute!important;
  left:0!important;
  top:calc(100% + 1px)!important;
  z-index:48!important;
  height:23px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-2px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s ease!important;
}
.message:hover .msg-actions,
.message:focus-within .msg-actions,
.message.actions-open .msg-actions{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0);
}

/* Old rules used display:none on Reply / More / reaction buttons. Override them. */
.msg-actions .message-secondary-action,
.msg-actions .message-more,
.message:hover .msg-actions .message-secondary-action,
.message:hover .msg-actions .message-more,
.message.actions-open .msg-actions .message-secondary-action,
.message.actions-open .msg-actions .message-more{
  display:inline-flex!important;
  align-items:center!important;
}
.msg-actions .message-secondary-action{
  opacity:1!important;
  min-height:22px;
  padding:2px 7px!important;
  border-radius:999px!important;
  background:rgba(248,250,252,.96)!important;
  border:1px solid #edf0f3!important;
  color:#7c8491!important;
  box-shadow:0 2px 7px rgba(15,23,42,.04);
}
.msg-actions .message-secondary-action:hover{background:#f1f4f7!important;color:#1f2937!important}

.message-reaction-wrap{position:relative;display:inline-flex;align-items:center}
.message-reaction-trigger{
  width:26px!important;height:22px!important;min-width:26px!important;padding:0!important;
  display:inline-grid!important;place-items:center!important;
  border:1px solid #edf0f3!important;border-radius:999px!important;
  background:rgba(248,250,252,.96)!important;color:#7c8491!important;
  font-size:14px!important;line-height:1!important;
  box-shadow:0 2px 7px rgba(15,23,42,.04);
}
.message-reaction-trigger:hover,.message-reaction-trigger.active{background:#fff8dc!important;border-color:#f1d873!important;color:#6f5a00!important}

/* Picker opens only after clicking the neutral reaction button. It floats, so no chat layout jump. */
.message-reaction-picker{
  position:absolute;
  left:0;
  bottom:calc(100% + 7px);
  z-index:90;
  display:flex;
  align-items:center;
  gap:3px;
  width:max-content;
  max-width:min(330px,calc(100vw - 28px));
  padding:6px;
  border:1px solid #e5e9ee;
  border-radius:999px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 34px rgba(15,23,42,.16);
  backdrop-filter:blur(10px);
}
.message-reaction-picker.hidden{display:none!important}
.reaction-choice{
  width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:50%!important;background:transparent!important;
  font-size:22px!important;line-height:1!important;
  transition:transform .12s ease,background .12s ease!important;
}
.reaction-choice:hover,.reaction-choice:focus-visible{background:#f3f5f7!important;transform:translateY(-2px) scale(1.08)}
.reaction-choice.active{background:#fff4ba!important;box-shadow:inset 0 0 0 1px #ead169}

/* Only reactions that actually have a count remain visible under a message. */
.message-reaction-summary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}
.message-reaction-summary.hidden{display:none!important}
.reaction-summary-btn{
  min-width:34px!important;height:24px!important;padding:0 8px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
  border:1px solid #e8ebef!important;border-radius:999px!important;
  background:#fff!important;color:#68717e!important;
  font-size:13px!important;line-height:1!important;
  box-shadow:none!important;
}
.reaction-summary-btn span{font-size:9px;font-weight:800;color:#707986}
.reaction-summary-btn:hover{background:#f7f8fa!important;border-color:#dfe3e8!important}
.reaction-summary-btn.active{background:#fff8d9!important;border-color:#ead36e!important;color:#514300!important}
.reaction-summary-btn.active span{color:#675400}

/* More menu stays compact and is independent of the reaction picker. */
.msg-actions .message-more-btn{background:rgba(248,250,252,.96)!important;border:1px solid #edf0f3!important;box-shadow:0 2px 7px rgba(15,23,42,.04)}
.message-more-menu{top:calc(100% + 5px)!important}

html[data-theme="dark"] .msg-actions .message-secondary-action,
html[data-theme="dark"] .message-reaction-trigger,
html[data-theme="dark"] .msg-actions .message-more-btn{background:rgba(28,35,44,.98)!important;border-color:#303945!important;color:#aeb7c4!important;box-shadow:0 3px 9px rgba(0,0,0,.18)}
html[data-theme="dark"] .message-reaction-trigger:hover,
html[data-theme="dark"] .message-reaction-trigger.active{background:#3b3214!important;border-color:#6d5b20!important;color:#f0d86a!important}
html[data-theme="dark"] .message-reaction-picker{background:rgba(20,26,33,.98);border-color:#303945;box-shadow:0 14px 36px rgba(0,0,0,.38)}
html[data-theme="dark"] .reaction-choice:hover,html[data-theme="dark"] .reaction-choice:focus-visible{background:#27303a!important}
html[data-theme="dark"] .reaction-choice.active{background:#423814!important;box-shadow:inset 0 0 0 1px #765f1f}
html[data-theme="dark"] .reaction-summary-btn{background:#171e26!important;border-color:#303945!important;color:#d7dee7!important}
html[data-theme="dark"] .reaction-summary-btn span{color:#adb7c3}
html[data-theme="dark"] .reaction-summary-btn:hover{background:#202833!important;border-color:#3a4552!important}
html[data-theme="dark"] .reaction-summary-btn.active{background:#3b3214!important;border-color:#6d5b20!important}
html[data-theme="dark"] .reaction-summary-btn.active span{color:#f0d86a}

@media (hover:none){
  /* Touch devices reveal Reply / Reaction / More only after tapping a message. */
  .message:not(.actions-open):hover .msg-actions:not(:focus-within){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .message.actions-open .msg-actions,.message:focus-within .msg-actions{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
}

@media(max-width:700px){
  .message-reaction-picker{left:0;gap:1px;padding:5px}
  .reaction-choice{width:34px!important;height:34px!important;min-width:34px!important;font-size:20px!important}
}