/* ARTIZS.SAY v0.5.19.4 — @mentions + exact message-action centering */

/* Message actions: text/sticker actions are anchored to the mathematical
   vertical center set by app.js. This intentionally overrides legacy
   translateY rules from v0.5.15/v0.5.16. */
.message .msg-actions[data-anchor-mode="center"],
.message .msg-actions.no-persistent-actions[data-anchor-mode="center"]{
  transform:translateY(-50%) scale(.985)!important;
  transform-origin:right center!important;
}
.message.actions-visible .msg-actions[data-anchor-mode="center"],
.message.actions-open .msg-actions[data-anchor-mode="center"],
.message:focus-within .msg-actions[data-anchor-mode="center"],
.message.actions-visible:hover .msg-actions[data-anchor-mode="center"],
.message.actions-open:hover .msg-actions[data-anchor-mode="center"]{
  transform:translateY(-50%) scale(1)!important;
}
@media (hover:hover) and (pointer:fine){
  .message:not(.actions-visible):not(.actions-open):hover .msg-actions[data-anchor-mode="center"]:not(:focus-within){
    transform:translateY(-50%) scale(.985)!important;
  }
}

/* Mention text inside a message behaves like a profile link, but stays cleaner
   than a traditional underlined hyperlink. */
.msg-mention{
  appearance:none;
  border:0;
  background:transparent;
  color:#2f7de1;
  display:inline;
  padding:0;
  margin:0;
  font:inherit;
  font-weight:800;
  line-height:inherit;
  cursor:pointer;
  text-decoration:none;
  vertical-align:baseline;
}
.msg-mention:hover,.msg-mention:focus-visible{color:#175fbd;outline:none}
.msg-mention.is-self-mention{
  background:#eaf3ff;
  color:#1768c5;
  border-radius:5px;
  padding:1px 3px;
  margin:0 1px;
}
html[data-theme="dark"] .msg-mention{color:#75adff}
html[data-theme="dark"] .msg-mention:hover,html[data-theme="dark"] .msg-mention:focus-visible{color:#a4caff}
html[data-theme="dark"] .msg-mention.is-self-mention{background:#193454;color:#9cc6ff}

/* @ autocomplete — floating above the composer, so opening it never pushes the
   message history. */
.mention-suggestions{
  position:absolute;
  left:16px;
  bottom:calc(100% - 2px);
  z-index:92;
  width:min(360px,calc(100% - 32px));
  max-height:292px;
  overflow:auto;
  padding:6px;
  border:1px solid #e3e8ef;
  border-radius:14px;
  background:rgba(255,255,255,.98);
  box-shadow:0 16px 42px rgba(15,23,42,.16),0 3px 9px rgba(15,23,42,.07);
  backdrop-filter:blur(12px);
}
.mention-candidate{
  width:100%;
  min-height:46px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 22px;
  align-items:center;
  gap:9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#172033;
  padding:6px 8px;
  text-align:left;
  cursor:pointer;
}
.mention-candidate:hover,.mention-candidate.active{background:#f1f6fc}
.mention-avatar{width:32px!important;height:32px!important;min-width:32px!important;border-radius:50%!important;object-fit:cover!important}
.mention-candidate-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
.mention-candidate-copy strong{font-size:11px;line-height:1.25;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-candidate-copy small{font-size:9px;line-height:1.2;color:#8b96a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-at{font-size:15px;line-height:1;color:#8fa1b5;font-weight:850;text-align:center}
html[data-theme="dark"] .mention-suggestions{background:rgba(20,27,35,.98);border-color:#303a46;box-shadow:0 18px 46px rgba(0,0,0,.42)}
html[data-theme="dark"] .mention-candidate{color:#edf3fa}
html[data-theme="dark"] .mention-candidate:hover,html[data-theme="dark"] .mention-candidate.active{background:#202c39}
html[data-theme="dark"] .mention-candidate-copy small{color:#93a0af}
html[data-theme="dark"] .mention-at{color:#7e91a6}

@media(max-width:700px){
  .mention-suggestions{
    left:10px;
    width:calc(100% - 20px);
    max-height:min(260px,42vh);
    border-radius:13px;
  }
  .mention-candidate{min-height:50px;grid-template-columns:36px minmax(0,1fr) 22px;padding:7px 8px}
  .mention-avatar{width:34px!important;height:34px!important;min-width:34px!important}
  .mention-candidate-copy strong{font-size:12px}
  .mention-candidate-copy small{font-size:10px}
}