/* gap:24px between back/title-group/kebab, not justify-content:space-between
   — confirmed via fresh fetch of node 307:17380 ("top" row uses gap-[24px],
   not space-between). With the title-group already flex:1, space-between
   gave it ~48px more width than Figma's real gapped layout, which let long
   titles/tags truncate later than they should. */
.topscreen-message {
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 16px 0;
}

.topscreen-message__icon-button {
  flex-shrink: 0;
}

/* These two SVGs (chevron-left, elipsis) are the only icons in this project
   exported with a dark fill (#26063F) baked in rather than white — every
   other icon file already IS white, so this is the one place a recolor is
   needed. Previously done via mask-image (background-color painted through
   an alpha mask) — that wasn't rendering in real Chrome for reasons I
   couldn't pin down, so switched to object-fit (preserves the real
   non-square 9x15 / 4x14 aspect ratio inside the 16px box, same as the mask
   version did) + filter: brightness(0) invert(1), a plain <img> recolor
   trick with much older/broader browser support than mask-image — doesn't
   touch the real exported SVG file itself, just how it's painted on screen. */
.topscreen-message__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.topscreen-message__title-group {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}

.topscreen-message__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topscreen-message__avatar-icon {
  width: 18px;
  height: 18px;
}

/* Flush-top (not centered), matching Figma's real node (307:17211): title
   sits right at the top of the 40px avatar-height box (items-start). Not
   using justify-content:space-between (Figma's own literal mechanism)
   because that derives the gap from leftover space in exactly 40px, and
   title+tag's rendered height in THIS browser is unavoidably taller than
   Figma's (see each rule below for why) — space-between would collapse the
   gap back to 0, the bug this replaced. An explicit gap is immune to that.
   2px, not the 6px pixel-measured off Figma's own screenshot, because that
   6px was measured against Figma's tag height — once the tag is forced up
   to its real, verified-non-clipping browser height (20.3px, see
   .topscreen-message__tag below), title+gap+tag already overflows the 40px
   box by ~2px at gap:0 alone; 2px keeps a visible separation while keeping
   that overflow small instead of compounding it back up to ~10px.

   flex: 0 1 auto, not 1 0 0 — real Figma node (307:17380) has this text
   block as shrink-0 (natural content width, not growing to fill its
   parent). A flex-grow of 1 here was consuming 100% of
   .topscreen-message__title-group's own flex:1 space, leaving nothing for
   that parent's own justify-content:center to center — the avatar+text
   pair read as pinned to the left edge instead of centered as a unit,
   which is what was actually reported broken. flex-shrink stays 1 (not
   Figma's literal 0) so a genuinely long title/tag still truncates via
   ellipsis instead of overflowing the header — the same deliberate,
   already-established deviation this file's own comment above documents
   for a different property. */
.topscreen-message__text {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}

.topscreen-message__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  /* 1.2 is the smallest line-height verified (visually, glyph by glyph) not
     to clip a descender ("p"/"g"/"y") in this font/weight/browser. */
  line-height: 1.2;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topscreen-message__tag {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  /* text-transform:uppercase means this text never has a descender to
     protect against, so a tight explicit value (already used elsewhere in
     this app for compact italic labels) is safe for the TEXT. A leading
     emoji (formatEmojiLabel) renders at its own line-height (1.45 by
     default — see format-emoji-label.js for why that's the measured
     minimum that doesn't clip any emoji glyph), which — since a line's
     rendered height is set by its tallest inline box — makes this element
     20.3px tall (1.45*14) rather than 16.1px (1.15*14) regardless of this
     rule. That's accounted for in .topscreen-message__text's gap. */
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}