/* Chat app, empty-state welcome hero and quick-prompt cards. */
/* ---- welcome hero ---- */
/* `width: 100%` (capped by max-width) so the hero has a REAL width for its children to
   measure against. Without it the box is shrink-to-fit around its widest line, which
   made .chips' own `width: 100%` resolve to whatever the heading happened to be -- a
   single-column prompt list came out 350px wide next to a heading reading "About
   Stripe", and would have changed width with the company name. */
/* --empty-gap is a token, not a literal, because .hero-sub below cancels it out to sit
   tight under the heading. A breakpoint that retunes the gap has to move both numbers
   together or the subtitle collides with the title -- which is exactly what happened
   when the short-viewport band set gap: 10px against a -10px pull-in and the gap
   became 0. One token, so that cannot recur. */
/* No horizontal shift: the name and the description are both CENTRED. An earlier version
   nudged the pair 20.7px left so the star + wordmark read as a centred unit; that is
   reverted -- the heading text and the description now sit on the container's own centre
   axis, which is also the axis the prompt grid below uses. The star is positioned outside
   the heading's box (see .hero-star) so it cannot pull the text off centre. */
.empty { --hero-star-ratio: 0.95; --hero-star-gap: 9px;
         --empty-gap: 16px; margin: auto; text-align: center; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: var(--empty-gap); width: 100%; max-width: 620px; padding: 24px 0; }
/* The hero mark: the AlphaVenture star (see .av-star / --star-mask in chat-base.css),
   now INLINE inside the <h2> beside the product name rather than a standalone block
   above it.
   Sized in `em` so it tracks the heading's own font-size: it is part of a type lockup
   now, not a standalone logo, so it has to resize with the text at every breakpoint
   instead of following --hero-logo (which was tuned for a much larger block mark and
   would tower over 32px text). Width only, no height: .av-star's aspect-ratio derives
   that, so the star keeps its proportions at any size.
   `flex: none` stops the flex row from shrinking the star when a long context name
   ("About <company>") competes for the line. */
.empty .hero-star {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  margin-right: var(--hero-star-gap);
  width: var(--hero-star-w); flex: none; color: var(--accent);
}
/* align-items: baseline would sit the star's box on the text baseline and leave it
   looking dropped, because the star's mask is centred in its own box rather than
   sitting on a baseline like a glyph. Optical centring is the right call for a mark. */
/* font-weight 500 (Satoshi Medium). The app has two weights, 400 and 500; the hero is
   set apart by SIZE (--hero-h2), not by going bold. */
/* The star is taken OUT of the h2's own box, so the heading centres on its TEXT.
   Why: the star used to be a flex child, which meant centring the h2 centred the whole
   LOCKUP and pushed the words right by half the star's footprint -- measured, the
   container, subtitle and prompt grid all sat at 370 while the wordmark's text sat at
   385, so "YC Parallax" and "Your analyst is in." did not share a centre axis. That is
   what reads as the description being off-centre.

   A negative margin was tried first and is the wrong tool: the h2 is a flex item under
   `align-items: center`, so a margin only shifts it by HALF its value, making the
   correction depend on arithmetic that changes with --hero-h2 at every breakpoint (it
   landed 7.5px out). Positioning the star absolutely removes it from the h2's content
   box entirely, so the text centres exactly, at any font size, with no arithmetic.
   `right: 100%` puts it immediately left of the heading; the gap is its own margin. */
.empty h2 {
  --hero-star-w: calc(var(--hero-star-ratio) * 1em);
  /* The star is positioned outside this box (see .hero-star), so centring the h2 centres
     its TEXT rather than the whole lockup -- which is what keeps "YC Parallax" and the
     description beneath it on a single centre axis.
     Nothing shifts it horizontally: with the star out of the box, centring the h2 centres
     the TEXT, which is what puts the name and the description on one axis. */
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: 500; font-size: var(--hero-h2);
  letter-spacing: -0.025em; line-height: 1.12;
  text-wrap: balance;
}
.empty p { margin: 0; font-size: var(--hero-sub); color: var(--muted); line-height: 1.55; }
/* The tagline under the product name. BLACK (--text), not grey: it is the one line of
   copy on the first screen, so it is content rather than a caption, and the brand's
   greyscale is for supporting elements. font-weight 400 (Regular) against the heading's
   500 (Medium): the pair is the app's whole weight vocabulary, and the description should
   read as body copy under the name rather than as a second title.
   margin-top cancels .empty's flex gap down to a flat 6px, so the name and its
   description read as one block instead of two separate lines. It subtracts
   --empty-gap (not a hardcoded 16px) so it stays 6px at every breakpoint. */
.empty .hero-sub {
  margin: calc(6px - var(--empty-gap)) 0 0;

  font-size: var(--hero-sub); font-weight: 400; line-height: 1.5;
  /* text-wrap: balance evens the two lines rather than leaving one trailing word
     alone on the second line. Unsupported browsers just ignore it. */
  text-wrap: balance;
  color: var(--text);
}
/* Quick-prompt cards (Figma reference), a row of white rounded cards holding the
   prompt text, rather than pill-shaped chips. These selectors are scoped to `.empty`
   so .followup-chips below, which reuses the base .chip class for its own small pill
   look, is completely unaffected.
   There used to be a small orange "QUICK PROMPT" eyebrow label above each prompt,
   drawn with a ::before. It has been removed: the cards are self-evidently prompts,
   and labelling each one repeated the same three words four times on first paint. */
/* A GRID, not wrapping flex, because the cards must be identical in both axes.
   The main page always shows 4 prompts (pickGenericPrompts in js/chat/context.js), so a
   fixed 2-column grid gives:
     - equal WIDTHS: every card is one `1fr` column;
     - equal HEIGHTS: `grid-auto-rows: 1fr` sizes every row to the tallest row, so a
       one-line card matches a two-line one. Measured before this change, the two rows
       were 50px and 68px;
     - NO ORPHANS: 4 into 2 columns is two full rows, and the single-column phone case
       is four full rows. Neither can leave a lone card on a short last row.
   Wrapping flex could not do any of it: `align-items: stretch` equalises heights only
   WITHIN a row, never across rows, and how many items land per row is whatever happens
   to fit -- which is where an orphan row comes from in the first place.

   Spacing is a uniform 16px: one `gap` covers both axes, plus 16 above the group.
   --sp-4 IS 16px, used in preference to a literal so this stays on the spacing scale.
   max-width is two of the previous 260px cards plus the gap, so moving to a grid keeps
   the cards exactly the width they already were instead of letting them grow to fill
   .empty's 620px; margin-inline centres the group now that `justify-content` no longer
   applies. */
.empty .chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-4);
  /* Half the inter-card gap: the description above is the label for this group, so it
     should sit closer to the cards than the cards sit to each other. */
  margin-top: var(--sp-2);
  width: 100%;
  max-width: calc(260px * 2 + var(--sp-4));
  margin-inline: auto;
}
/* An ODD number of prompts falls back to a single column.
   Two columns can only be orphan-free when the count is even, and the company
   deep-link is the one caller that returns 5 (contextPrompts' company branch) -- it
   laid out 2 + 2 + 1, leaving exactly the lone half-width card on a short last row
   that "no orphans" rules out. With 5 items there is no 2-column arrangement that is
   both orphan-free and uniform, so the tie is broken in favour of uniformity: one
   column makes every card identical in width AND height, and a single column cannot
   orphan at all.
   `:has(.chip:nth-child(odd):last-child)` reads as "the last card sits at an odd
   position", which is true exactly when the total is odd. It is a layout fact derived
   from the markup, so the count can change in context.js without anything here needing
   to be kept in step. :has() is already relied on elsewhere in this stylesheet layer
   (body:has(.drawer.open) in chat-responsive.css). */
.empty .chips:has(.chip:nth-child(odd):last-child) { grid-template-columns: minmax(0, 1fr); }
.empty .chip {
  /* White (#FFFFFF, --surface-1), not the grey these used to be. The cards sat on the
     white chat card as surface-2 grey; that card is gone and they now sit on the
     shell's #F2F2F2, so grey-on-grey would erase them. No stroke: separation comes
     from the fill contrast, per the surface-alternation scale. */
  /* Tokens, not the literals that used to be here. Both were pinned because --surface-1
     and --text inverted in dark mode (a #141414 card, near-white type) while these cards
     were meant to stay white; with one theme nothing inverts, so they read from the
     surface scale like every other card. */
  background: var(--surface-1); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.35;
  /* ---- text LEFT-ALIGNED, block VERTICALLY centred in the card --------------------
     `text-align: left` keeps each line's ragged edge on the left, reading like a normal
     sentence rather than a centred caption. `justify-content: center` still centres the
     TEXT BLOCK vertically, because `grid-auto-rows` makes every card the height of the
     tallest one -- a two-line prompt and a one-line prompt still land in the same box, so
     without vertical centring the shorter one would sit pinned to the top while its
     neighbour fills the card. `align-items: flex-start` (not `center`) is what keeps the
     block pinned to the LEFT edge instead of also centring it horizontally.

     `text-wrap: balance` stays gone. It was here to stop a last word dropping onto a line
     of its own, but that fight was about CENTRING; left-aligned text reads fine with a
     ragged last line, and orphans are explicitly acceptable here.
     -------------------------------------------------------------------------------- */
  text-align: left;
  /* --r-sm (16px). These are small cards -- 260x68 -- and at the 24px default the arc ate
     into the label's corners; 16 reads as a card instead of a lozenge.
     The 16px inter-card `gap` on .chips is unchanged (--sp-4), so radius and gutter now
     happen to be the same 16, which is what makes the grid read as one even field. */
  padding: var(--sp-4); border-radius: var(--r-sm); cursor: pointer;
  /* No `flex`/`max-width` any more: as a grid item its width comes from the column
     track and its height from `grid-auto-rows`, so a flex-basis would do nothing and a
     max-width could only fight the track. The column width is capped on .chips instead. */
  box-shadow: var(--elev-1);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  /* report-theme.css (loaded on this page too, for shared tokens) has its own bare
     `.chip { margin: 0 6px 6px 0; }` for the tag pills on companies.html/company.html.
     That rule's selector is less specific than this one, but it is the ONLY rule that
     sets `margin` on this element at all, so it still wins on that one property, CSS
     cascades per-property, not per-rule. The result was 12px of intended `gap` reading
     as 18px on screen: the actual "too much space" this was supposed to fix. Zeroing
     it here makes `gap` the single source of truth for spacing again. */
  margin: 0;
  transition: box-shadow 0.15s;
}
/* Clean border-only highlight, no lift/jump, no focus ring. */
/* No orange border ring, the reference site's cards only get a slightly
   stronger shadow on hover, no color change at all. */
/* STATIC. No hover state at all -- no fill change, no shadow, no lift. These cards are
   white and stay white; the cursor is the affordance. An earlier version darkened them to
   #F2F2F2 on hover, which is the colour of the ground behind them, so the card appeared to
   dissolve as you pointed at it. `outline: none` is kept because the app suppresses
   outlines globally (see chat-base.css). */
.empty .chip:hover, .empty .chip:focus-visible { outline: none; }
/* margin: 0 for the same reason as .empty .chip above -- report-theme.css's bare
   .chip rule otherwise adds a stray 6px right + 6px bottom on top of this row's own
   `gap`, and .followup-chips relies on `gap` alone for its spacing. */
/* WHITE (--surface-1), no stroke, no shadow. These sit on the shell's #F2F2F2, so white is
   the correct next step on the surface-alternation scale and it makes them the same object
   as the quick-prompt cards on the empty state -- both are "a suggested prompt you can
   click", so both are white pills on grey. They were --surface-2 grey, i.e. the same value
   as the ground behind them, which is the one thing the scale forbids: the pill's edge came
   entirely from the shadow, and with shadows globally disabled it had no edge at all.
   No border and no box-shadow, per the brand rules (both are also killed globally in
   chat-base.css) -- the fill contrast IS the separation. */
.followup-chips .chip { background: var(--surface-1); color: var(--text); font: inherit; font-size: 13px; font-weight: 400; padding: 10px 15px; border-radius: var(--r-pill); cursor: pointer; box-shadow: none; margin: 0; }
/* COMPLETELY STATIC -- no :hover and no :active rule at all. Not a fill change, not a
   shadow, not the 1px lift this used to have. The cursor is the affordance, exactly as on
   the .empty .chip quick-prompt cards below, so the two kinds of suggested prompt behave
   identically as well as looking identical. (A grey hover was never an option either: it
   would tint the pill toward #F2F2F2, the exact colour of the ground behind it, so
   pointing at a chip would make it appear to dissolve.) `transition` is gone from the base
   rule too -- with nothing left to animate it was describing a state that cannot happen. */
.followup-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
/* font-weight 400 (Regular), not 500. These are suggestions the user may skim past, not
   labels or headings -- body weight is the honest level for them, and it also separates
   them from the composer/sidebar chrome, which is the 500 tier. */
.followup-chips .chip { font-size: 12.5px; font-weight: 400; padding: 7px 13px; white-space: nowrap; box-shadow: none; }
.empty .ctx-line { font-size: 13.5px; color: var(--muted); }
.empty .ctx-line b { color: var(--accent-press); font-weight: 500; }

body.panel-mode .sidebar,
body.panel-mode .rail,
body.panel-mode #toggleSidebar,
body.panel-mode #minimizeChatBtn,
body.panel-mode #closeChatBtn { display: none !important; }
/* Embedded (widget) mode: the raised chat surface should sit flush in the drawer. */
body.panel-mode header { min-height: 0; padding: 10px 14px; }

.working { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; margin-top: 0; align-self: flex-start; }
/* "Building report/chart/table…" indicator: same dots + elapsed timer as
   .working, shown as a persistent sibling below the streaming bubble while an
   artifact fence is still open. */
.building { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; margin-top: 8px; }
.typing { display: flex; gap: 4px; }
.typing span { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--accent); animation: blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.2s; } .typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,60%,100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }