/* Background gradient (#300453 -> #231131) is a literal fill, not the
   tokenized --background-screen-from/-to (#300453 -> #100817) the Messages
   screen uses — confirmed via get_variable_defs on node 195:8911 returning
   no match for it, so it's genuinely this screen's own unbound value. */
.chat-thread-screen {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(180deg, #300453, #231131);
  overflow: hidden;
  transition: transform var(--transition-standard);
}

/* Floats over the scrolling content as one translucent, blurred band (own
   status bar + header together) rather than living under the app's shared
   global status bar like the create-chat modals do — this is a real screen,
   not another modal in that stack. Matches Figma's own "top nav" frame
   (node 302:9962): fill #300453 at 20% (#30045333), Figma's own real
   fetched value — blur uses --topnav-hero-glass-blur (currently 8px, see
   tokens.css). */
.chat-thread-screen__top-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-bottom: 8px;
  background-color: #30045333;
  backdrop-filter: var(--topnav-hero-glass-blur);
  -webkit-backdrop-filter: var(--topnav-hero-glass-blur);
}

/* padding-top clears the floating top-nav band's own rendered height (status
   bar ~30px + topscreen-message's 24px top padding + its 40px button row +
   the band's own 8px bottom padding) so content starts right below it
   instead of hiding beneath it. */
/* position:absolute (not a flex child) so this doesn't consume space in
   .chat-thread-screen's flex column, and sits outside the scrollable
   .chat-thread-screen__content below it — see chat-thread-screen.js for why
   (must stay fixed relative to the panel, not scroll away with messages). */
#chat-thread-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* This screen's own real fetched value (node 195:8911: opacity-24, i.e.
   0.24) is genuinely higher than the shared .background-watermark default
   (0.1, correct for the Messages list's own lighter gradient, node
   175:4822: opacity-10) — two real, different fetched values, not one
   shared one.

   z-index needs its own override too, separate from the opacity fix: the
   shared class's z-index:-1 (header.css) only reaches behind sibling
   content on the Messages list because nothing between #background-watermark
   and .figma-frame's own root establishes a competing stacking context. Here
   #chat-thread-watermark is a CHILD of .chat-thread-screen, which paints its
   own opaque gradient background — and .chat-thread-screen is a positioned
   element (position:relative) but never establishes its own stacking
   context (no z-index/transform/isolation set), so per CSS's stacking order
   the watermark's negative z-index put it beneath .chat-thread-screen's own
   background paint, not just beneath its sibling content — invisible at
   ANY opacity (confirmed live: opacity:1 with the inherited z-index:-1
   still rendered nothing). z-index:0 here removes it from the negative
   stack level, so plain DOM order takes over: painted after
   .chat-thread-screen's own background (an earlier-painted parent box) but
   before .chat-thread-screen__content (a later sibling in the DOM) — behind
   the messages, in front of the screen's base fill, matching Figma. */
#chat-thread-watermark .background-watermark {
  z-index: 0;
  opacity: 0.24;
}

/* When the keyboard is open, this needs to "lift" too — not just the
   compose bar — so the tail of the conversation stays visible above the
   compose bar instead of scrolling out of view / sitting behind it (the
   compose bar's own translateY doesn't reserve layout space, so without
   this the last messages would end up hidden under it). Figma's own
   reference for the keyboard-open state (node 307:11907) only shows an
   empty chat, so there's no literal keyboard-open+populated-conversation
   frame to pixel-match — this reuses the exact same real
   --keyboard-open-offset value the compose bar already uses (set on the
   shared .chat-thread-screen ancestor so both can read it), just applied
   as extra bottom padding instead of a transform, since padding (unlike
   transform) actually grows the scrollable area — js/app.js also scrolls
   to the new bottom on open so the latest message is what's revealed. */
/* padding-bottom's base 84px clears the compose bar's own rendered height
   (40px input/plus row + its 44px bottom padding) now that the bar is a
   floating position:absolute overlay, not a normal-flow sibling — see
   .chat-thread-screen__compose below. Real Figma reference (node 302:9928)
   shows the compose bar floating directly over the scrolled message
   content with no opaque backing of its own — the last message/photo is
   visible right through and around the input pill when scrolled to the
   bottom, same relationship as the top-nav glass band above. Before this,
   content and compose were plain stacked flex siblings (never overlapping
   at all), which is why nothing ever showed through — not a missing
   blur/opacity value on the compose bar itself, a structural gap. */
.chat-thread-screen__content {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  padding-top: 134px;
  padding-bottom: calc(84px + var(--keyboard-open-offset, 0px));
  overflow-y: auto;
  transition: padding-bottom var(--transition-standard);
}

/* Sits above the watermark (z-index default stacking order — this comes
   after #chat-thread-watermark in the DOM) so bubbles are never see-through
   against it, matching how the Messages list's own watermark sits behind
   its cards. */
.chat-thread-screen__messages {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px 24px;
}

/* Figma's own reference for this exact screen (node 307:11907, keyboard
   open) shows this bar sitting well ABOVE its normal resting position —
   directly above the keyboard, not covered by it (compose Frame y=491,
   Keyboard/Default y=538, an 844px-tall frame — the bar has been pushed up
   ~260px from its usual near-bottom rest). The keyboard mockup is a
   separate absolutely-positioned overlay (see keyboard-mockup.css), so
   without this the compose bar stays at its normal flex position and gets
   hidden entirely underneath the keyboard's higher z-index — js/app.js
   sets --keyboard-open-offset to the keyboard's own real rendered height
   on focus, translating this bar up by exactly that amount, same
   var(--transition-standard) the keyboard itself slides in with. */
.chat-thread-screen__compose {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px 44px;
  transform: translateY(calc(-1 * var(--keyboard-open-offset, 0px)));
  transition: transform var(--transition-standard);
}

/* Spacing is per-child margin here, not a container `gap` — a uniform gap
   would still reserve 8px next to the send button even at its hidden 0px
   width (real Figma default state has the input field running the full
   remaining width with no dead space, see node 195:8911's own message-bar
   instance: input field is 318px wide, reaching the container's own right
   edge, with the collapsed send button literally overlapping its last 2px
   rather than sitting in separate reserved space). The plus button's own
   margin-right stays constant; the send button's own margin-left animates
   from 0 alongside its width in css/send-button.css, so hidden truly means
   zero footprint. */
.chat-thread-screen__compose .icon-button {
  margin-right: 8px;
}

.chat-thread-screen__compose .input-field {
  flex: 1 0 0;
  min-width: 0;
}

/* Announcements is a broadcast channel — a non-lead viewing it gets this
   instead of the compose row (js/app.js's openChatThread, js/components/
   chat-thread-screen.js's chatThreadComposeLockedHtml). Same glass-pill
   visual language as the swiped-row info pill for the same locked case
   (css/chat-card.css's .chat-row__info-pill) — reusing the established
   pattern, not inventing a new one. */
.chat-thread-screen__compose-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface-header-button);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-sizing: border-box;
}

.chat-thread-screen__compose-locked-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
}

/* The top-nav band above already carries this same fill + blur over its
   whole height — the status bar inside it must not stack a second copy. */
.chat-thread-screen__top-nav .status-bar {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}