/* Fixed piece — status bar + back button, always visible, never scrolls.
   No padding-bottom here (that belonged to the old combined header,
   between it and whatever followed) — the hero below supplies its own
   spacing now that they're separate siblings. */
.chat-setting-header-fixed {
  width: 100%;
}

/* Real fetched value, re-confirmed live: no background — an earlier fetch
   of this same node had one (rgba(55,5,97,0.2)), since removed in Figma. */
.chat-setting-header__topbar {
  width: 100%;
}

/* Only 2 children now (back button, opacity-0 spacer) — space-between
   still pushes them to opposite edges correctly without the center avatar
   block that used to sit between them here (that's .chat-setting-header-
   hero's own job now). */
.chat-setting-header__row {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 12px;
}

.chat-setting-header__spacer {
  opacity: 0;
  pointer-events: none;
}

/* chevron-left/elipsis are exported with a dark fill (#26063F) baked in
   rather than white — same real asset issue already fixed once for
   .topscreen-message__icon (css/topscreen-message.css); this header's back/
   more buttons need the same recolor since .icon-button__icon itself
   (css/icon-button.css) doesn't apply one. */
.chat-setting-header-fixed .icon-button__icon {
  filter: brightness(0) invert(1);
}

/* Scrolling piece — the avatar/title/tag "hero" block, a normal
   scrollable-content child (js/components/chat-settings-screen.js), not
   fixed like the piece above. */
.chat-setting-header-hero {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

.chat-setting-header__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.chat-setting-header__avatar {
  position: relative;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
}

.chat-setting-header__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  border-radius: 100px;
  object-fit: cover;
}

/* Scaled-up version of .chat-card__avatar's own icon-badge pattern
   (css/chat-card.css) — same gradient-fill + centered-icon shape, bigger,
   plus the 3px border (real fetched literal #2e064d, the screen's own
   backdrop color, not a token) that cuts a visible ring out of the photo
   underneath. */
.chat-setting-header__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 3px solid #2e064d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-setting-header__badge-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.chat-setting-header__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.chat-setting-header__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}

.chat-setting-header__tag {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}