/* Real fetched background (node 259:8355) is this screen's own literal
   gradient, matching .chat-thread-screen's own (css/chat-thread-screen.css)
   — same values, kept separate per that file's own precedent of not
   promoting a screen-specific unbound gradient into a shared token. */
.chat-settings-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #300453, #100817);
  overflow: hidden;
  transition: transform var(--transition-standard);
}

/* .chat-setting-header-fixed (status bar + back button) is a real overlay,
   not a flow sibling above .chat-settings-screen__content — it has no
   background of its own (transparent, per the real fetched node — see
   css/chat-setting-header.css), so whatever has scrolled up underneath it
   in .content shows through in the gaps around its buttons, same as the
   real app's translucent glass nav bar. Corrected after an earlier version
   made .content a flex sibling starting below this header: that gave
   .content's own overflow-y:auto box a hard top edge at the header's
   bottom, so anything scrolled past it was flatly clipped in a straight
   line the full width of the row — not the intended look, where content
   simply continues underneath, occluded only by the header's own (mostly
   translucent) elements. */
.chat-setting-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  /* Transparent, but still a real hit-testable box at a higher z-index
     than the docked toggle (z-index: 2, css/chat-menu-toggle.css) — without
     this, any tap in the header's row (even where nothing is drawn, e.g.
     directly on the "Participants" label once docked) was swallowed by
     this box instead of reaching the toggle underneath it. Its own buttons
     opt back into pointer-events below. */
  pointer-events: none;
}

.chat-setting-header-fixed .icon-button {
  pointer-events: auto;
}

/* Spans the full screen from y:0 (not just the area below the fixed
   header) so its own overflow-y:auto box never clips content that has
   scrolled up underneath the header — padding-top (set in JS, from the
   header's real rendered height) only positions the hero correctly at
   rest; it doesn't move this box's own scrollable boundary. */
.chat-settings-screen__content {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 63px;
}

.chat-settings-screen__content .chat-setting-header-hero {
  flex-shrink: 0;
}

/* The list keeps scrolling in its normal, undisturbed position at all
   times — this box's own height is locked in JS (js/app.js, right after
   mounting the toggle) so it never changes size when docking, and nothing
   below it ever reflows. The docked toggle floats ON TOP of the list (like
   the fixed header already does), not pushed down to avoid it — confirmed
   explicitly against the reference: the list stays fully visible/scrolling
   underneath, just layered behind the toggle, never clipped away. Only
   .chat-menu-toggle itself (css/chat-menu-toggle.css) switches to
   position:fixed when docked, escaping this box (and the scroll area)
   without collapsing it. */
.chat-settings-screen__menu-mount {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
}

.chat-settings-screen__section-label {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 40px 24px 8px;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* flex-shrink:0 — without it, a flex column child taller than its
   container's own resolved height gets compressed to fit instead of
   overflowing (the container's own overflow-y:auto is what's supposed to
   handle content taller than it, not shrinking the content itself). Real
   bug hit while testing: a 12-row participant list rendered visibly
   squashed into ~200px instead of its real ~830px, and the container
   never scrolled because scrollHeight never actually exceeded
   clientHeight. */
.chat-settings-screen__card {
  flex-shrink: 0;
  box-sizing: border-box;
  /* Unlike the full-width header above it, this (like the toggle and
     section labels) sits inset 12px each side — its own margin now that
     the parent no longer applies a blanket padding (that would have also
     inset the header, which must stay full width). */
  width: calc(100% - 32px);
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid var(--border-modal-box);
  background-color: var(--background-modal-box);
  overflow: hidden;
}

/* Real fetched trailing spacer (node 302:10506, an empty 66px frame) —
   clearance below the last card instead of the scroll simply ending flush
   with it. */
.chat-settings-screen__bottom-spacer {
  flex-shrink: 0;
  height: 66px;
}