/* ============================================================================
   Messages — the drawer of correspondence files, and one open file.

   A conversation here is rarely small talk. It is a hint that duplicated, a
   transfer that has to land, an address that has to be confirmed. So the inbox
   is built as a record, not a chat roster: one hairline-ruled column, unread
   filed first with its count, and each row carrying the correspondent's face,
   name and standing beside the last line either of you wrote. The thread opens
   as that correspondent's file — a cover sheet stating who they are and what
   the correspondence adds up to, then the transcript underneath.

   The transcript and the composer inside that file are not this sheet's: they
   are `chat.css`, which an alliance room mounts in its own frame. What is here
   is the drawer, the file around the conversation, and nothing else.

   The accent appears exactly twice on this surface: the unread mark, and the
   send button. It is never the fill of a message. An orange bubble spends the
   money colour on small talk and puts white text on an orange ground at 2.5:1;
   side is carried instead by alignment, one fill step, and the sender's own
   name printed once per run.
   ========================================================================= */

.mg {
  padding-block: var(--sp-8) var(--sp-16);
}

/* Both routes are one reading column. Capped here so a 90-character preview
   does not strand its timestamp three hundred pixels away on a 1280px page. */
.mg__col {
  max-width: 780px;
  margin-inline: auto;
}

.mg__head {
  margin-block-end: var(--sp-6);
}

.mg__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0 0 var(--sp-2);
}

.mg__subtitle {
  color: var(--ink-300);
  max-width: 58ch;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   The drawer — the inbox as one column of files, not a stack of cards.
   ------------------------------------------------------------------------ */

.mg-drawer {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.mg-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Group heading — the same sunken band the ledger uses for a day and the
   notifications feed uses for "new", so the three account surfaces share one
   rhythm. It also carries the word the dots below it are coloured for. */
.mg-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--ink-900);
  border-block: 1px solid var(--line);
}

.mg-list > .mg-group:first-child {
  border-block-start: 0;
}

.mg-group__name {
  color: var(--ink-300);
}

.mg-group__count {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--accent);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   A row — one file in the drawer.
   ------------------------------------------------------------------------ */

.mg-row {
  border-block-start: 1px solid var(--line);
}

.mg-list > .mg-row:first-child,
.mg-group + .mg-row {
  border-block-start: 0;
}

/* Two lines: who and when on top, the last thing said underneath. The gutter
   and the face span both, so the text block reads as one paragraph beside a
   single mark rather than as four loose cells. */
.mg-row__link {
  display: grid;
  grid-template-columns: 10px 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-1) var(--ease);
}

.mg-row__link:hover {
  background: var(--ink-800);
}

/* The row runs the full width of a drawer that clips its overflow, so the
   system ring drawn outside it would lose its inline edges and read as two
   loose bars. Same ring, turned inward so it closes. */
.mg-row__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink-950), inset 0 0 0 4px var(--accent);
}

/* A dot in a reserved column, not a coloured slab down the edge: rows keep one
   inline edge, and the mark survives dir="rtl" because the gutter is the
   grid's first track rather than a left border. */
.mg-row__flag {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-row__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--accent);
}

.mg-row__face {
  grid-column: 2;
  grid-row: 1 / span 2;
  --avatar-size: 40px;
}

.mg-row__who {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.mg-row__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
}

.mg-row .user-level-badge {
  flex: none;
}

/* Secondary ink, not tertiary: these sit on the row's hover fill, where
   --ink-400 drops to 4.31:1. */
/* `.num` and not `.mono`: the stamp carries a localised unit word beside its
   figure, so it takes the tabular face without being forced to LTR the way an
   address is. Isolated so the figure cannot reorder against the name beside it
   under dir="rtl". */
.mg-row__time {
  grid-column: 4;
  grid-row: 1;
  font-size: var(--fs-xs);
  color: var(--ink-300);
  white-space: nowrap;
  text-align: end;
  unicode-bidi: isolate;
}

.mg-row__preview {
  grid-column: 3;
  grid-row: 2;
  display: block;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--ink-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Who spoke last, told by weight rather than by a second colour. */
.mg-row__self {
  font-weight: 600;
}

.mg-row__excerpt {
  unicode-bidi: isolate;
}

.mg-row__tally {
  grid-column: 4;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  min-height: 20px;
}

.mg-row__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Unread is carried by ink and weight plus the gutter dot. Read rows are not
   faded — an opacity drop takes the preview under 4.5:1 and makes the archive
   unreadable rather than merely quieter. */
.mg-row.is-unread .mg-row__name {
  color: var(--ink-050);
  font-weight: 700;
}

.mg-row.is-unread .mg-row__preview {
  color: var(--ink-100);
}

.mg-row.is-unread .mg-row__time {
  color: var(--ink-200);
}

.mg-row__link:hover .mg-row__name {
  color: var(--ink-050);
}

.mg-pagination {
  margin-block-start: var(--sp-8);
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   The open file.

   A framed region rather than a panel: the page ground shows through it, and
   the two sunken bars — cover sheet above, composer below — hold it closed at
   the top and bottom of the viewport. The transcript between them is the only
   thing that scrolls.
   ------------------------------------------------------------------------ */

.mg--thread {
  padding-block: var(--sp-6);
}

/* The file is as long as the correspondence, up to the viewport. A fixed height
   would hold a three-message thread open over two hundred pixels of nothing;
   growing into the cap instead means the composer always sits directly under
   the last thing said, and only a thread long enough to need it scrolls.
   dvh, because a phone's viewport is shorter than 100vh whenever the browser
   chrome is showing, and a composer under the address bar cannot be typed
   into. The vh line is the fallback for clients without dvh. */
.mg-file {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--h-header) - var(--sp-6) * 2);
  max-height: calc(100dvh - var(--h-header) - var(--sp-6) * 2);
  min-height: 380px;
  background: var(--ink-950);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.mg-file__head {
  flex: none;
  background: var(--ink-900);
  border-block-end: 1px solid var(--line);
}

.mg-file__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.mg-file__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-height: 36px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-300);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.mg-file__back:hover {
  background: var(--ink-800);
  color: var(--ink-050);
}

/* The arrow points back the way the reader came, which is the other way round
   in Hebrew. */
[dir="rtl"] .mg-file__back .icon {
  transform: scaleX(-1);
}

.mg-file__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-md);
}

.mg-file__face {
  transition: border-color var(--dur-1) var(--ease);
}

.mg-file__who:hover .mg-file__face {
  border-color: var(--line-hard);
}

.mg-file__ident {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

.mg-file__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
}

.mg-file__ident .user-level-badge {
  flex: none;
}

/* What the correspondence amounts to. Two facts packed against the start edge
   and divided by a hairline, not stretched across the bar as two half-empty
   ledger cells — this is a caption on the cover sheet, not a position to read
   figures out of. */
.mg-file__facts {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border-block-start: 1px solid var(--line);
}

/* The element is always in the document so the send response has something to
   replace; with nothing in it, it is not a rule across the bar. */
.mg-file__facts:empty {
  display: none;
}

.mg-file__fact {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  min-width: 0;
}

.mg-file__fact + .mg-file__fact {
  border-inline-start: 1px solid var(--line);
}

.mg-file__fact-key {
  color: var(--ink-400);
}

.mg-file__fact-value {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-100);
}

/* ---------------------------------------------------------------------------
   Below 768px.

   The drawer row drops the level badge: at this width a name and
   "CAÇATAL AVANÇADO" cannot both hold their line, and the correspondent's
   standing is one tap away on the file's cover sheet. The cover sheet's facts
   stop being a boxed strip and run as one hairline-separated line, so a phone
   spends its vertical room on the transcript.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .mg {
    padding-block: var(--sp-6) var(--sp-12);
  }

  .mg__title {
    font-size: var(--fs-2xl);
  }

  .mg-group {
    padding-inline: var(--sp-4);
  }

  .mg-row__link {
    padding: var(--sp-4);
    column-gap: var(--sp-3);
  }

  .mg-row .user-level-badge {
    display: none;
  }

  .mg--thread {
    padding-block: var(--sp-3);
  }

  .mg-file {
    max-height: calc(100vh - var(--h-header) - var(--sp-3) * 2);
    max-height: calc(100dvh - var(--h-header) - var(--sp-3) * 2);
  }

  .mg-file__bar {
    padding: var(--sp-3);
    gap: var(--sp-2);
  }

  .mg-file__back span {
    /* The arrow alone is unambiguous once the correspondent's name sits
       beside it; the word is what would push that name off the bar. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mg-file__face {
    --avatar-size: 36px;
  }

  /* The name gets the whole line and the badge drops under it: side by side at
     this width, "MESTRE CAÇATAL" clips the name it is meant to qualify. */
  .mg-file__ident {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .mg-file__name {
    font-size: var(--fs-base);
  }

  .mg-file__fact {
    padding-inline: var(--sp-3);
  }
}