/* Chat app, composer (textarea, ghost autocomplete) and live activity feed. */
/* ---- composer: a floating pill on the shell's grey ---- */
/* The <form> is only a layout strip -- it centres the pill in the reading column and
   holds the bottom padding. It is transparent and unrounded: it used to paint --panel
   white and round its bottom two corners to finish off the white chat card, but .chat
   is no longer a card (see chat-messages.css), so a white strip here would now be a
   lone white band across the bottom of a grey area. The visible composer surface is
   .field below.

   `flex: none` is load-bearing: .chat is a fixed-height column with
   overflow:hidden, so a shrinkable composer is one the message list can squeeze
   when vertical space runs short, which shows up as text clipped inside the
   pill rather than as a scrollbar. The composer always gets the height it asks
   for; .messages (a scroll container) absorbs the difference. */
form {
  flex: none;
  display: flex; align-items: flex-end; background: transparent;
  padding: 10px max(var(--reading-pad), calc((100% - var(--reading-max)) / 2)) 20px;
}
/* Fully pill-shaped at one line, matching the "Ask anything" bar on the reference
   site, not just softly rounded corners.
   `min-width: 0` lets the field shrink inside the flex row instead of being forced
   to its content width, which is what keeps a long single word from pushing the
   send button out past the panel edge. */
.field {
  /* ---- composer metrics, in one place ------------------------------------
     Three boxes have to agree on these numbers: the textarea, the ghost
     overlay stacked exactly on top of it, and the send button beside it. When
     they were literals the three drifted (the ghost's right padding had to be
     hand-matched to the button's width), so they are tokens now and the
     responsive band at the bottom of chat-responsive.css retunes the tokens
     rather than re-stating the rules.
       --pad-x / --pad-y  text inset from the pill edge
       --send-size        send/stop button diameter
       --send-gap         button inset from the pill's right and bottom edges
       --send-lead        clear space between the text column and the button
       --send-space       total width the button takes out of the text column
     ---------------------------------------------------------------------- */
  --pad-x: 20px;
  /* --pad-y is NOT declared here: it lives on :root in chat-base.css so --field-h can be
     derived from it (the search fields size themselves off that). Inherited here. */
  --send-size: 36px;
  --send-gap: 8px;
  --send-lead: 10px;
  --send-space: calc(var(--send-size) + var(--send-gap) + var(--send-lead));

  /* align-items: flex-end keeps the button pinned to the last line of text as
     the field grows, instead of drifting to the vertical middle of a tall box. */
  flex: 1; min-width: 0; position: relative; display: flex; align-items: flex-end;
  /* Back to the token. This was a hardcoded #FFFFFF, and so were the text, placeholder,
     ghost and send-button colours below -- all five pinned because those tokens INVERTED
     in dark mode and would have left white-on-white inside a deliberately always-white
     pill. There is one theme now, so nothing inverts and the literals were just five
     copies of the palette; each is a token again, and the composer picks up a palette
     change like everything else. */
  background: var(--field-bg);
  border-radius: var(--r-pill); box-shadow: var(--elev-1);
  /* NO `overflow: hidden` here, deliberately. It was added to keep the textarea's
     scrollbar inside the pill's curve, but the send button carries the "Send" tooltip
     (.tip::after, positioned ABOVE it by .tip-up), and clipping the pill sliced that
     tooltip in half -- leaving a stray dark fragment above the composer. The scrollbar
     no longer needs the clip: it is styled to 10px with a rounded thumb (see
     chat-messages.css) and the textarea is inset from the pill's edges on every side,
     so it never reaches the curve in the first place. */
  transition: box-shadow 0.15s, background 0.15s, border-radius 0.12s var(--ease);
}
/* Once the composer wraps to a second line the pill has to stop being a pill.
   A pill radius resolves to half the box height, so at multi-line heights
   the "pill" becomes a lozenge whose curved ends cut into the text, which sits
   only 20px from the edge. js/chat/composer.js adds this class from the same
   measurement that sets the height, so the two can never disagree. */
.field.multiline { border-radius: var(--r); }
/* Every placeholder in the app is --placeholder; see the note on .field's background. */
.field textarea::placeholder { color: var(--placeholder); }
/* No focus ring/glow, the field just keeps its normal resting look when clicked into. */
.field:focus-within { box-shadow: var(--elev-1); }
/* The textarea and the ghost overlay are two renderings of the same string on top
   of each other, so EVERY metric that affects line breaking has to be identical:
   the box width, the padding, the font, the line height and the wrapping rules.
   They are declared together for exactly that reason, the pair used to specify
   wrapping differently (overflow-wrap: anywhere vs word-break: break-word), which
   made a pasted URL break at a different column in each layer and slid the ghost
   suggestion out of register with the real text. */
textarea, .ghost {
  padding: var(--pad-y) 0 var(--pad-y) var(--pad-x);
  font: inherit; font-size: var(--chat-font-size); line-height: 1.5;
  overflow-wrap: anywhere; word-break: normal;
}
/* max-height is the real ceiling on growth and the single source of truth for it:
   composer.js reads the computed value rather than duplicating the number.
   `min(...)` matters on a short window (a laptop in landscape, a phone with the
   keyboard up) where a fixed 168px composer would eat the message list.
   overflow-y starts hidden so a one-line box never shows a scrollbar inside the
   pill; the script flips it to auto only once the content exceeds the cap. */
textarea {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  resize: none; border: none; background: transparent; color: var(--text);
  max-height: min(168px, 40dvh); overflow-y: hidden;
  outline: none;
}
textarea:focus, textarea:focus-visible { outline: none; box-shadow: none; }
/* The overlay is absolutely positioned, so it does not get the button's width
   taken out of it the way the textarea does as a flex sibling, `right` has to
   subtract it explicitly, from the same token, so the two can never disagree. */
.ghost {
  position: absolute; inset: 0 var(--send-space) 0 0; z-index: 0;
  /* The ghost is a suggestion, not typed text, so it takes --placeholder like the
     placeholder it visually replaces rather than --text. */
  white-space: pre-wrap; overflow: hidden; pointer-events: none; color: var(--placeholder);
}
.ghost .typed { color: transparent; }
.ghost .tab-hint { border-radius: var(--r); padding: 0 5px; font-size: 11px; margin-left: 4px; opacity: 0.8; }
/* Send / stop -- brand black, not orange.
   #0A0A0A and #FFFFFF are the other two thirds of the AlphaVenture Primary palette
   (with #F06731), so this stays on-brand while leaving orange for the accents.
   --btn-solid-* rather than literals: this is the same solid brand-black button role as
   the New chat pill, the tooltips and the search field's circle, so it reads from the same
   pair they do. (It was pinned to literals while dark mode existed, because those tokens
   inverted to a white button and the composer pill is always white.)

   Laid out as a real flex sibling of the textarea rather than absolutely positioned
   over it. Absolute positioning meant the text column had to dodge the button with
   a padding-right roughly its width, so every line of a wrapped message stopped
   ~56px short of the pill edge while the left inset stayed 20px: text visibly
   off-centre in its own box, and an early wrap. As a flex item the button occupies
   real width, the textarea's content box excludes it automatically, and the text
   gets symmetric insets. --send-gap is both margins on the block-end/right sides,
   which (with align-items: flex-end above) also centres it vertically at one line. */
.send { position: relative; z-index: 2; border: none; background: var(--btn-solid-bg); color: var(--btn-solid-fg); border-radius: var(--r-pill); width: var(--send-size); height: var(--send-size); flex: none; margin: var(--send-gap) var(--send-gap) var(--send-gap) var(--send-lead); cursor: pointer; display: grid; place-items: center; transition: background 0.15s, opacity 0.15s, transform 0.1s; }
.send:hover:not(:disabled) { background: var(--btn-solid-bg-hover); }
.send:active:not(:disabled) { transform: scale(0.94); }
.send:disabled { opacity: 0.35; cursor: default; }
.send svg { width: 18px; height: 18px; }
/* Mid-turn the same button becomes Stop. Deliberately the SAME black: only the icon
   changes (arrow -> square), so the control reads as one thing in two states rather
   than two different buttons swapping places. */
.send.stop { background: var(--btn-solid-bg); color: var(--btn-solid-fg); }
.send.stop:hover:not(:disabled) { background: var(--btn-solid-bg-hover); }

/* live activity feed */
.feed { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
/* A translucent tint, not a solid surface fill: these rows are transient (live
   streaming only, torn down once the turn finishes) and sit directly on the composer,
   so a soft overlay reads as "in progress" chrome rather than a permanent card. */
.feed details { border-radius: var(--r); background: rgba(133,133,133,0.06); overflow: hidden; }
.feed summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 12.5px; color: var(--muted); user-select: none; }
.feed summary::-webkit-details-marker { display: none; }
.feed summary::before { content: "▸"; font-size: 10px; transition: transform 0.15s; flex: none; }
.feed details[open] > summary::before { transform: rotate(90deg); }
.feed-thought > summary { color: var(--accent-2); }
.feed-thought-body { padding: 0 12px 10px 25px; white-space: pre-wrap; word-break: break-word; color: var(--muted); font-size: 12.5px; line-height: 1.55; max-height: 220px; overflow-y: auto; }
/* A plain status row, not a <details>, the actual query/output text is never
   shown to the user, so there's nothing to expand and no disclosure
   triangle/toggle to offer (unlike the "Thought" rows above, which do
   expand). Same card chrome as .feed details for visual consistency. */
.feed-tool { border-radius: var(--r); background: rgba(133,133,133,0.06); display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 12.5px; color: var(--muted); }
.feed-tool-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.feed-tool-status { flex: none; font-size: 11px; padding: 1px 8px; border-radius: var(--r-pill); }
.feed-tool-status.running { color: var(--accent); background: var(--tint); }
.feed-tool-status.completed { color: var(--muted); background: rgba(133,133,133,0.16); }
.feed-tool-status.error { color: #C05227; background: rgba(192,82,39,0.16); }
.feed-cmd code { color: var(--muted); }