/* @mentions (measured from the live client): the pill in messages and in the boxes, the highlight on a message
   that mentions you, and the "Members" suggestions above the box. The Light / Ash / Onyx values aren't measured. */
:root {
  --mention-bg: rgba(88, 101, 242, 0.239);
  --mention-fg: #a9bbff;
  --mentioned-bg: rgba(248, 163, 0, 0.078);
  --mentioned-bg-hover: rgba(248, 163, 0, 0.039);
  --mentioned-bar: #ea9800;
}
html.theme-light {
  --mention-bg: rgba(88, 101, 242, 0.15);
  --mention-fg: #4654c0;
  --mentioned-bg: rgba(248, 163, 0, 0.1);
  --mentioned-bg-hover: rgba(248, 163, 0, 0.07);
  --mentioned-bar: #c27c0e;
}

/* the pill: hovering one in a message turns it solid, and underlines it in a message that mentions you */
.mention { padding: 0 2px; border-radius: 3px; background: var(--mention-bg); color: var(--mention-fg); font-weight: 500; unicode-bidi: plaintext; }
.msg-content .mention, .reply-text .mention { letter-spacing: -0.017em; }
.mention.interactive { cursor: pointer; }
.mention.interactive:hover { background: var(--brand); color: #fff; }
.msg.mentioned .mention.interactive:hover { text-decoration: underline; }
.reply-text .mention, .fwd-preview .mention, .pins .mention { pointer-events: none; }
/* a role pill takes the role's color: 10% behind it, 30% on hover (a role without a color looks like any mention) */
.mention.role-mention[style] { background: rgba(var(--role-rgb), 0.1); color: rgb(var(--role-rgb)); }
.mention.role-mention[style].interactive:hover { background: rgba(var(--role-rgb), 0.3); color: rgb(var(--role-rgb)); }

/* timestamps (<t:unix:style>, measured): a gray pill in messages, the box and the suggestions; hovering one gives the full date */
.timestamp { padding: 0 2px; border-radius: 3px; background: var(--bg-mod-normal); }
.tooltip.ts-tip { max-width: 200px; }

/* a message that mentions you: amber tint and a 2px bar on the left */
.msg.mentioned:not(.replying) { background: var(--mentioned-bg); box-shadow: inset 2px 0 0 var(--mentioned-bar); }
.msg.mentioned:not(.replying):hover, .msg.mentioned:not(.replying).ctx-open, .msg.mentioned:not(.replying).editing { background: var(--mentioned-bg-hover); }

/* pills while typing: the box's own text goes clear and the mirror on top draws it */
.ta-wrap, .edit-wrap { position: relative; }
.ta-mirror { position: absolute; z-index: 1; overflow: hidden; color: var(--text-default); white-space: pre-wrap; overflow-wrap: break-word; pointer-events: none; }
.ta-mirror .mention { margin: 0 -2px; padding-bottom: 1px; } /* drawn over the text without moving it */
.ta-mirror .timestamp { margin: 0 -2px; }
.ta-mirror .timestamp, .ta-mirror .opt-key, .ta-mirror .opt-mid, .ta-mirror .opt-val { letter-spacing: inherit; } /* the box's own spacing, so they line up */
/* the @time chip (measured): 26px tall with a 1px border (the system highlight while the caret is in it), "@time" on the
   popover color; its padding is spaces in the textarea, so only the box is drawn here, behind the text. The box grows 4px. */
textarea.has-opt { padding-top: 19px !important; padding-bottom: 19px !important; }
.opt-deco { position: absolute; z-index: -1; height: 26px; border: 1px solid var(--bg-base-lowest); border-radius: 4px; background: var(--bg-mod-normal); }
.opt-deco.sel { border-color: Highlight; }
.opt-deco-key { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px 0 0 4px; background: var(--bg-surface-high); }
/* the bar over the box while it has the chip (measured): 32px, "@time" in bold, then what it does */
.opt-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 33px; padding: 8px 16px; overflow: hidden; border: 1px solid var(--border-muted); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg-surface-higher); font-size: 12px; line-height: 16px; white-space: nowrap; }
.opt-bar-name { flex: none; color: var(--text-strong); font-weight: 600; }
.opt-bar-desc { min-width: 0; overflow: hidden; color: var(--text-muted); font-weight: 500; text-overflow: ellipsis; }
.composer.has-opt .input-box { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.composer.has-reply .opt-bar { height: 32px; border-top: 0; border-radius: 0; }
.composer:focus-within .opt-bar { border-color: var(--border-subtle); }
textarea.has-pills { color: transparent !important; caret-color: var(--text-default); }
textarea.has-pills::selection { background-color: Highlight; color: transparent; } /* the selection still shows under the mirror */

/* suggestions: attached 8px above the box, inset 8px / 16px */
.mention-ac {
  position: absolute;
  left: 8px;
  right: 16px;
  bottom: calc(100% + 8px);
  z-index: 3;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg-surface-high);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.24);
  white-space: nowrap;
}
.composer.has-reply .input-box > .mention-ac { bottom: calc(100% + 44px); } /* above the reply bar */
.composer.has-opt .input-box > .mention-ac { bottom: calc(100% + 40px); } /* above the @time bar */
.composer.has-reply.has-opt .input-box > .mention-ac { bottom: calc(100% + 76px); }
.mac-scroller { display: flex; flex-direction: column; max-height: 490px; padding-bottom: 8px; overflow: hidden auto; }
.mac-head { padding: 8px; }
.mac-title { padding: 4px 0; color: var(--text-subtle); font-size: 14px; font-weight: 500; line-height: 18.667px; }
.mac-row { padding: 0 8px; font-size: 14px; font-weight: 500; line-height: 16px; }
.mac-base { padding: 8px; border-radius: 3px; cursor: pointer; }
.mac-row[aria-selected="true"] > .mac-base { background: var(--interactive-bg-hover); }
.mac-content { display: flex; align-items: center; min-height: 16px; color: var(--text-default); }
.mac-icon { flex: none; margin-right: 8px; }
.mac-primary { flex: 0 1 auto; min-width: 10ch; overflow: hidden; }
.mac-name { overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); font-size: 16px; font-weight: 400; line-height: 20px; }
.mac-divider { padding: 0 8px; }
.mac-divider-line { padding: 8px; }
.mac-divider-line::after { content: ""; display: block; height: 1px; background: var(--border-subtle); }
.mac-secondary { flex: 1 0 10ch; min-width: 10ch; margin-left: 16px; overflow: hidden; color: var(--text-subtle); font-size: 12px; font-weight: 400; line-height: 16px; text-align: end; text-overflow: ellipsis; }

/* the reply bar's @ ON / OFF switch (groups and servers): padding 8px 12px, 16px icon 4px before the label */
.reply-actions { display: flex; align-items: center; }
.reply-ping { display: flex; align-items: center; height: 32px; padding: 8px 12px; color: var(--icon-subtle); font-size: 14px; font-weight: 700; line-height: 16px; text-transform: uppercase; }
.reply-ping .ic { flex: none; margin-right: 4px; }
.reply-ping:hover { color: var(--text-strong); }
.reply-ping.on { color: var(--text-link); }

/* clicking @everyone or a role in a message (measured): who has it, in a 242px popout 8px right of the pill,
   a header like the member list's ("@everyone", or "role — N") and the member rows */
.role-pop { position: fixed; z-index: 56; width: 242px; display: flex; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface-higher); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24); }
.role-pop-scroll { flex: 1; min-width: 0; max-height: 400px; margin: 4px 0 8px; overflow: hidden scroll; }
.role-pop-h { height: 40px; padding: 12px 8px 0 16px; color: var(--text-channels); font-size: 14px; font-weight: 500; line-height: 18px; }
.role-pop-head { display: flex; white-space: nowrap; }
.role-pop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.role-pop .member-row { width: 224px; }