/* chat/02_shell_topbar.css
 * ------------------------------------------------------------
 * Split 2 of 10 from web/account/css/chat.css (CLAUDE.md §8.16 — see
 * 01_tokens_reset.css's header for the split's background; loaded second,
 * right after the reset/tokens file, in chat.html).
 *
 * Covers: .chat-shell (app_shell.js) — the phone-width column, its
 * header/body/footer regions, the derived --chat-wash and --chat-scrim
 * custom properties used throughout the rest of the surface — and the top
 * bar (top_bar.js): back button, avatar, title/subtitle, and the brand
 * header variant shown on the list screen's front page.
 * ------------------------------------------------------------ */

/* ===== Shell (app_shell.js) ===== */

.chat-shell {
  /* Derived translucent washes, named once and reused everywhere below —
     see the file header for why color-mix() rather than a new token. */
  --chat-wash-soft: color-mix(in srgb, var(--chat-bubble-text) 6%, transparent);
  --chat-wash-medium: color-mix(in srgb, var(--chat-bubble-text) 12%, transparent);
  --chat-wash-strong: color-mix(in srgb, var(--chat-bubble-text) 18%, transparent);
  --chat-scrim: color-mix(in srgb, var(--chat-bg) 78%, transparent);
  --chat-media-overlay: color-mix(in srgb, var(--chat-bg) 55%, transparent);

  width: 100%;
  max-width: 400px; /* the phone, not a breakpoint — see file header */
  /* …and min-width:0 is what makes that max-width actually hold.

     The shell is a FLEX ITEM of `body` (01_tokens_reset.css centres it with
     display:flex). A flex item's default `min-width: auto` is its CONTENT's
     minimum width — and the conversation list sets `white-space: nowrap` on
     every row's name and preview, so a line that cannot wrap has a minimum
     width equal to the WHOLE line. One long last message therefore gave this
     column a 900px automatic minimum, which outranks max-width (a maximum
     never beats an automatic minimum), and the phone-shaped column silently
     became as wide as the chattiest person in the list: the page scrolled
     sideways, the top bar ran off the edge, and the layout read as broken
     (owner report 2026-08-13, with a screenshot of exactly that).

     The ellipsis rules in 03_list_and_empty.css were never the problem —
     they were already there, and they cannot help: `overflow:hidden` clips
     what is drawn, it does not reduce what the element ASKS for. Only
     min-width:0 does that, and it has to be set here, on the outermost item
     that is allowed to shrink. */
  min-width: 0;
  /* …but never a THIN strip of background either side of it. The column has
     always been centred, and the gap beside it was invisible while everything
     was the same near-black. Colouring the top bar sage made that gap read as a
     black frame around the app rather than as the space around a phone-shaped
     column.

     Below the media query further down, the column simply fills the window.
     This is not a second layout: it is the same one, without a margin too
     narrow to look deliberate. */
  height: 100%;
  position: relative; /* anchors the toast host and (if mounted here) the lightbox */
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  overflow: hidden;
}

/* A window only a little wider than the column gets no margin at all — see the
   note on max-width above. 520px is where the gap becomes wide enough to read
   as space around the app rather than as a border on it. */
@media (max-width: 520px) {
  .chat-shell { max-width: none; }
}

.chat-shell__header {
  flex: 0 0 auto; /* fixed — never grows, never scrolls */
  /* Sage, not the dark --chat-bg-top this surface started with. CLAUDE.md §6
     is unambiguous that ALL navigation and top bars are navBg (= primary), and
     that rule is what makes a screen recognisable as this product rather than
     as a WhatsApp clone — the dark chat theme applies to the CONVERSATION, not
     to the frame around it.

     One header rule covers both screens, the list and the open thread, because
     both mount into this same element. --primary rather than --nav-bg: the two
     hold the same value, and primary is the name the rest of this stylesheet
     already uses for the brand accent (the focus ring above). */
  background: var(--primary);
}

.chat-shell__body {
  /* Deliberately NOT a scroll container — see the file header's "which
     region scrolls" section. It only sizes the space the current screen
     fills; the screen decides where its own scrollbar, if any, lives. */
  flex: 1 1 auto;
  min-height: 0; /* required for a flex child to actually shrink below its content height */
  overflow: hidden;
  position: relative;
}

.chat-shell__footer {
  flex: 0 0 auto; /* fixed — the composer lives here when a thread is open */
}

/* ===== Top bar (top_bar.js) ===== */

.chat-top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 56px;
}

.chat-top-bar__back {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 50%;
}
.chat-top-bar__back:hover { background: var(--chat-wash-soft); }
/* The button carries no glyph child of its own (top_bar.js passes only an
   aria-label) — this is the one purely decorative arrow in the surface,
   drawn in CSS because it needs no translation and no accessible text of
   its own; the button's own aria-label (set in JS) is what a screen
   reader announces, this glyph is visual-only. */
.chat-top-bar__back::before { content: "←"; }

.chat-top-bar__avatar { flex-shrink: 0; }

.chat-top-bar__titles {
  flex: 1 1 auto;
  min-width: 0; /* lets the ellipsis rules below actually take effect in a flex child */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The brand mark on the front screen. The explicit size is not decoration —
   an <img> with an SVG source and no width takes the space it is given, and
   with none given that is the whole header. 34px is the app's own figure
   (dashboard_screen.dart), so the two headers read at the same weight. */
.chat-top-bar__logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

/* The wordmark is bigger than an ordinary screen title, and the strapline
   under it is brighter than an ordinary subtitle: on sage they are the
   product's name and promise, not a heading and a caption. Both figures are
   the app's (22px / 12px, white and white70). Scoped to the brand header so
   a thread's title and its "2 deltagere" line keep their own smaller
   treatment. */
.chat-top-bar__logo + .chat-top-bar__titles .chat-top-bar__title {
  font-size: 22px;
  line-height: 1.1;
  color: var(--chat-bubble-text);
}
.chat-top-bar__logo + .chat-top-bar__titles .chat-top-bar__subtitle {
  font-weight: 600;
  line-height: 1.15;
}

.chat-top-bar__title {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-top-bar__subtitle {
  font-size: 12px;
  /* Light, not the muted grey the rest of the surface uses for secondary text.
     That grey is tuned for the near-black thread background; the top bar is
     sage, and on sage it very nearly disappears. Derived from the surface's own
     light text colour at 78% rather than a new value, so it still reads as
     secondary next to the white title above it. */
  color: color-mix(in srgb, var(--chat-bubble-text) 78%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-top-bar__actions { flex-shrink: 0; display: flex; gap: 4px; }
.chat-top-bar__actions button {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chat-top-bar__actions button:hover { background: var(--chat-wash-soft); }