/* <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 and the expand-to-fullscreen
   trigger (absent from the `fullHeight` mount, which floats the status
   badge inside the terminal instead). `margin-left: auto` targets the
   expand trigger by its own class rather than `:last-child`, same
   split-row intent `Shell.css`'s `.shell-header-actions` uses. */
.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 — the `max-height: none` overrides
   below already carry one more class in the selector than the
   un-modified rules above (`.ui-agent-term-preview-full` prefixing
   each), so they're strictly more specific and win regardless of
   source order. */
.ui-agent-term-preview-full {
  display: flex;
  flex-direction: column;
  margin-block-start: 0;
}
.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%;
}
/* Flush to the header bar and the viewport sides; the input row below
   gets its own padding so it doesn't touch the screen edge. */
.ui-agent-term-preview-full .ui-agent-term-preview-wrap.terminal-wrap {
  margin: 0;
}
.ui-agent-term-preview-full .ui-agent-input {
  padding: 0.4em 0.75em 0.6em;
}

/* `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);
}

/* Full-tab mount's connection badge — top-left floating twin of
   `.ui-agent-term-preview-header-badges` (top-right), same anchor. */
.ui-agent-term-preview-live {
  position: absolute;
  top: 0.4em;
  left: 0.4em;
  z-index: 1;
}