/* ============================================================================
   BitcoinPuzzles — naming someone

   An @name is written and read on two surfaces now: a line in an alliance
   room, and a comment on a puzzle. The syntax is one thing (see the Mention
   module, read from both ends), so its appearance is one thing too — it was
   written for the room first, and it lives here rather than there so a comment
   cannot slowly drift into looking like a different feature.

   Two blocks, and they are strangers to each other despite the names:
   `.mention` is the chip in finished text, `.mentions` is the picker that
   writes one. A surface mounts the picker by giving it a positioned parent —
   `.chat-composer` in a room, `.mention-field` around a comment box.

   Depends on tokens.css and base.css.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   The chip — a named person, inside the text that names them.
   ------------------------------------------------------------------------ */

/* Not underlined like an autolink: a handle is already marked as one by the @
   it carries, and a page where half the sentences are underlined is a page
   nobody can read. The pill is what says it is a person and not a word. */
.mention {
  display: inline-block;
  padding-inline: 0.35em;
  border-radius: var(--r-sm);
  background: var(--ink-800);
  color: var(--ink-050);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mention:hover {
  background: var(--ink-750);
}

/* Being the one named is the thing a reader scrolls looking for, so it is the
   only mention that takes the accent. In a room the line carrying it is marked
   as a whole too — `.chat-msg.is-named`, in the transcript sheet. */
.mention.is-me {
  background: var(--accent-wash-hi);
  color: var(--accent-hi);
}

.mention.is-me:hover {
  background: var(--accent-wash-hi);
  color: var(--ink-050);
}

/* ---------------------------------------------------------------------------
   The picker, opened by typing an @.
   ------------------------------------------------------------------------ */

/* It floats over the page rather than sitting in the form's flow: growing the
   form would shove everything below it down the screen every time somebody
   reached for a name, and re-flowing the page under a menu is the one thing
   that makes a menu impossible to aim at.

   Downwards by default, which is where a form with a page under it has room.
   A composer pinned to the foot of a room takes `--up` instead. */
.mentions {
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% - var(--sp-1));
  inset-inline-start: var(--sp-2);
  width: min(320px, calc(100% - var(--sp-4)));
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--ink-850);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

/* Upwards, for the same reason a phone keyboard's suggestions sit above the
   keys — below the composer is where the page ends. The lines it covers are
   the ones already read. */
.mentions--up {
  top: auto;
  bottom: calc(100% - var(--sp-2));
  inset-inline-start: var(--sp-4);
  width: min(320px, calc(100% - var(--sp-8)));
}

.mentions[hidden] {
  display: none;
}

.mentions__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  cursor: pointer;
}

/* One highlight, driven from the keyboard. Hover paints the same row state so
   the pointer and the arrow keys never disagree about what Enter would pick. */
.mentions__row.is-active,
.mentions__row:hover {
  background: var(--ink-750);
}

.mentions__face {
  flex: none;
}

.mentions__name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--ink-050);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
}

/* The handle is what actually gets written into the text, so it is shown
   rather than hidden behind the friendly name — the second time someone uses
   the picker they already know what to type. */
.mentions__handle {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--fs-2xs);
  color: var(--ink-400);
}

/* The positioned parent a comment form wraps its box in. It exists only to
   give the picker something to hang off; a room's composer is already
   positioned and needs no equivalent. */
.mention-field {
  position: relative;
}