/* <AgentTermPreview> — a *preview*, not the full terminal: a much
   shorter cap than @hive/shared/terminal.css's own 32em default so it
   reads as "peek at what's happening" inside the detail panel rather
   than competing with the panel's own fields for vertical space. */
@import "@hive/shared/terminal.css";

.ui-agent-term-preview {
  margin-block-start: 1rem;
}

/* Holds the connection-status badge + (unless `fullHeight`) the
   expand-to-fullscreen trigger — `margin-left: auto` targets the expand
   trigger by its OWN class, not `:last-child` (tried that first; it
   silently broke when `fullHeight` hides the expand trigger, since the
   status badge then becomes the `:last-child` too and gets pushed to
   the right edge instead of staying flush left — caught by actually
   rendering the `fullHeight` case, not just reasoning about the CSS).
   Same split-row intent `Shell.css`'s `.shell-header-actions` already
   uses for its own pair of triggers, just addressed directly instead of
   positionally. */
.ui-agent-term-preview-toolbar {
  display: flex;
  align-items: center;
  margin-block-end: 0.5rem;
}
.ui-agent-term-preview-expand {
  margin-left: auto;
}

.ui-agent-term-preview-wrap.terminal-wrap {
  max-height: 12em;
}

/* `AgentTerminalPage`'s full-tab mount (`fullHeight` prop → the
   `-full` modifier on the OUTER `.ui-agent-term-preview` root, not the
   wrap) — self-contained flex chain, not dependent on the page around
   it doing anything beyond giving this root a real height to fill (see
   AgentTerminalPage.css). Column flex so the toolbar keeps its natural
   height and the terminal-wrap below it takes the rest; `flex: 1` +
   `min-height: 0` on the wrap (not `height: 100%`) is deliberate — a
   flex item's `height` percentage doesn't account for a sibling
   (the toolbar) already consuming space the way `flex: 1` does, and
   `min-height: 0` is what actually lets the item shrink below its
   content's natural height so `.live.terminal`'s own `overflow-y: auto`
   (terminal.css) scrolls instead of the whole column growing past its
   container. `!important`-free, but the `max-height: none` overrides
   below rely on source order (equal specificity to the un-modified
   rules above — same class count on both sides), not on being "more
   specific" — keep this block after the un-modified one if this file
   is ever reordered. */
.ui-agent-term-preview-full {
  display: flex;
  flex-direction: column;
}
.ui-agent-term-preview-full .ui-agent-term-preview-wrap.terminal-wrap {
  max-height: none;
  flex: 1;
  min-height: 0;
}
.ui-agent-term-preview-full .ui-agent-term-preview-wrap .live.terminal {
  max-height: none;
  height: 100%;
}

/* `box-sizing: border-box`, not the browser's default `content-box` —
   `.live.terminal`'s own `padding: 0.8em 1em 0.4em` (terminal.css) is
   otherwise added ON TOP of this `max-height`, so the box renders
   ~1.2em taller than intended and spills past `.terminal-wrap`'s own
   `max-height` above (which has no padding of its own to inflate it)
   since `.terminal-wrap` has no `overflow: hidden` to catch the excess
   — mara: "the terminal text bleeds out at the bottom of the terminal".
   Confirmed via measured `clientHeight` (194px vs the wrap's 177px, a
   ~17px gap matching 1.2em at this font size) before this fix, not
   just reasoning about the CSS. */
.ui-agent-term-preview-wrap .live.terminal {
  max-height: 12em;
  box-sizing: border-box;
  /* Extra top padding (base `.live.terminal` rule: `0.8em 1em 0.4em`) so
     the floating badge cluster below has room to sit above the first
     row's text instead of overlapping it — found by actually rendering
     this: with the base padding, "thinking"/"model sonnet" sat directly
     on top of the terminal's first line whenever content started right
     at the top (a running preview scrolled to the newest rows almost
     always does). */
  padding-block-start: 2.4em;
}

/* Floating turn_state/agent_state/model/ctx/cost badge cluster —
   positioned by `.terminal-wrap`'s own `position: relative`, same
   anchor `@hive/shared/terminal.css`'s `.tail-pill` already uses, rather
   than a second positioned ancestor of our own. Top-right corner: the
   scroll-to-bottom `.tail-pill` (that same stylesheet) anchors
   bottom-right, so the two overlays never compete for the same corner.
   `flex-wrap` rather than a fixed width — a badge cluster this narrow
   can still overflow the box at small viewport widths, and wrapping
   beats clipping or shrinking the terminal underneath. */
.ui-agent-term-preview-header-badges {
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25em;
  max-width: calc(100% - 0.8em);
}