/* ═══════════════════════════════════════════════════════════════════════════
   THE TERMINAL
   ───────────────────────────────────────────────────────────────────────────
   This is not a mockup of "a terminal". It reproduces what yazi's TUI actually
   paints, taken from the render code and the frame goldens:

     internal/tui2/app/header_splash.go   the brand mark + metadata block
     internal/tui2/app/logo.go            the mark: the artwork in a 20x7 cell box
     internal/tui2/app/header.go          shortPath
     internal/tui2/app/root.go            paintHint: state left, mode right
     internal/tui2/parity/testdata/       exact glyphs, indents and spacing
     internal/tui2/theme/data/dark.json   the colours

   The geometry that matters, and that a generic terminal mock gets wrong:

     - there is no window chrome. No traffic lights, no title bar, no rounded
       card. It is a terminal, and the terminal is the whole surface.
     - the user's message is indented two columns and sits on its own
       background; the assistant's reply is indented one.
     - a tool call is a block indented two columns: "shell · ◇ running", the
       command, its output, then "Elapsed 0.0s".
     - the hint row above the prompt is split: spinner and state on the left,
       the replay label right-aligned.
     - the prompt is " >" with one leading space.
     - the palette is the TUI's own dark theme, not the website's.
   ─────────────────────────────────────────────────────────────────────────── */

.tui {
  /* The TUI's own theme tokens, from internal/tui2/theme/data/dark.json.
     Deliberately scoped here: the website's palette and the terminal's palette
     are different systems. Muted text is lifted for contrast on the web. */
  --tui-page: #18181e;
  --tui-text: #e4e4e4;
  --tui-body: #c4c4c4;
  --tui-muted: #a1a1a9;
  --tui-dim: #9898a0;
  --tui-dark: #505050;
  --tui-accent: #8abeb7;
  --tui-border: #5f87ff;
  --tui-success: #b5bd68;
  --tui-user-bg: #343541;
  --tui-tool-pending: #282832;
  --tui-tool-success: #283228;
  --tui-cursor: #e4e4e4;

  position: relative;
  background: var(--tui-page);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tui-body);
  overflow: hidden;
  /* A terminal is a character grid. Preserve it exactly. */
  font-variant-ligatures: none;
  tab-size: 4;
}

/* The whole surface is the screen: no chrome, no title, no dots. A faint inner
   edge is the only thing separating it from the page. */
.tui__screen {
  padding: 20px 22px 18px;
  min-height: 32rem;
  display: flex;
  flex-direction: column;
}

/* ── The splash header ──────────────────────────────────────────────────── */

.tui__header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

/* The brand mark, the way the TUI draws it in a capable terminal: the artwork
   itself, in the cell box logo.go reserves for it — brandCols x brandRows, 20
   columns by 7 rows, the butterfly's own footprint, so the metadata column sits
   where it always did.

   The box is measured in the mock's own grid: one column is 1ch of the mock's
   mono font and one row is 1.5em (the line-height above), which is what makes
   the picture land in the same cells the TUI reserves.

   logo-dark.svg is a 1024x1024 canvas with the drawing inside it at
   (93, 322), 930x701 — the drones, their dotted trails and the carrier. Those
   fractions are the four --logo-art-* values below. The canvas is scaled until
   the *drawing* is 20 columns wide, then offset so the drawing, not its
   transparent margin, is centred in the box. At this grid the drawing is
   width-limited: 20 columns wide by 15.08ch (6.2 of the 7 rows) tall, so the
   box keeps a little air above and below, as the product's does.

   It is vector art, so it must be scaled by the browser, never resampled with
   nearest-neighbour: image-rendering stays auto. */
.tui__logo {
  --logo-art-w: 0.9084; /* 930 / 1024 */
  --logo-art-h: 0.6851; /* 701 / 1024 */
  --logo-art-x: 0.0906; /*  93 / 1024 */
  --logo-art-y: 0.3147; /* 322 / 1024 */
  /* The canvas width that makes the drawing 20 columns wide. */
  --logo-canvas: calc(20ch / var(--logo-art-w));
  position: relative;
  display: block;
  width: 20ch;
  height: 10.5em; /* 7 rows of the 1.5 line-height */
  flex-shrink: 0;
}

.tui__logo-img {
  position: absolute;
  width: var(--logo-canvas);
  /* site.css clamps every image to its container's width; this one is
     deliberately wider than the box (the box is the *drawing's* 20 columns,
     the canvas adds the transparent margin), so the clamp must not apply. */
  max-width: none;
  height: auto;
  /* Centre the drawing in the box: half a box less half the drawing's width,
     then back off its own left margin; the same vertically, on the middle of
     the box (5.25em) and the drawing's height and top margin. Percentages are
     of the canvas, so the picture stays centred at any font size. */
  left: calc(50% - (var(--logo-canvas) * var(--logo-art-w)) / 2 - var(--logo-canvas) * var(--logo-art-x));
  top: calc(5.25em - (var(--logo-canvas) * var(--logo-art-h)) / 2 - var(--logo-canvas) * var(--logo-art-y));
  /* Vector art: let the browser scale it, never nearest-neighbour. */
  image-rendering: auto;
}

.tui__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 12.5px;
  line-height: 1.5;
  /* splashHeaderLines centres the metadata block in the header's rows:
     start = (rows - len(meta)) / 2, which is one row for 7 rows and 4 lines. */
  padding-top: 1.5em;
}

.tui__meta-row { white-space: pre; }
.tui__meta-key { color: var(--tui-dim); }
.tui__meta-val { color: var(--tui-muted); }
.tui__meta-name { color: var(--tui-text); }

/* ── Transcript ─────────────────────────────────────────────────────────── */

.tui__log {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tui__event {
  margin: 6px 0 0;
  padding-inline-start: 1ch;
  color: var(--tui-muted);
}

.tui__event.is-disconnected { color: var(--warning); }
.tui__event.is-resumed { color: var(--tui-success); }

/* User: two columns of indent, on its own background, exactly as the TUI
   paints userMessageBg. */
.tui__user {
  margin: 0;
  /* The TUI indents the user's message two columns. It is padding, not a
     leading space in the text, so selection and copy stay clean. */
  padding: 1px 10px 1px 2ch;
  background: var(--tui-user-bg);
  color: var(--tui-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  align-self: flex-start;
  max-width: 100%;
}

/* Assistant: one column of indent, no background. */
.tui__assistant {
  margin: 10px 0 0;
  padding-left: 1ch;
  color: var(--tui-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A tool call is a block, two columns in, on toolPendingBg → toolSuccessBg. */
.tui__tool {
  margin: 14px 0 0;
  padding: 6px 10px 6px 2ch;
  background: var(--tui-tool-pending);
  border-left: 2px solid var(--tui-dark);
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease);
}

.tui__tool.is-done {
  background: var(--tui-tool-success);
  border-left-color: var(--tui-success);
}

.tui__tool-head {
  color: var(--tui-muted);
  white-space: pre;
}

.tui__tool-state { color: var(--tui-muted); }
.tui__tool.is-done .tui__tool-state { color: var(--tui-success); }

.tui__tool-cmd {
  color: var(--tui-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tui__tool-out {
  color: var(--tui-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tui__tool-time {
  color: var(--tui-dim);
  white-space: pre;
}

/* ── The hint row and prompt ────────────────────────────────────────────── */

/* paintHint: activity on the left, expansion mode hard right. The spinner is
   the accent colour; the state text is muted. */
.tui__hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2ch;
  margin-top: 16px;
  min-height: 1.5em;
}

.tui__state {
  display: inline-flex;
  align-items: baseline;
  gap: 1ch;
  color: var(--tui-muted);
  white-space: pre;
  min-width: 0;
}

.tui__spinner {
  color: var(--tui-accent);
  font-family: var(--font-mono);
  /* The real TUI cycles ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏ at the frame rate. */
  display: inline-block;
  width: 1ch;
}

.tui__mode {
  color: var(--tui-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.tui__prompt {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin-top: 2px;
  /* The golden's prompt row is " >": one leading space, then the glyph. A
     space inside a flex item collapses, so the column is padding. */
  padding-left: 1ch;
}

.tui__prompt-glyph { color: var(--tui-muted); white-space: pre; }

/* A block cursor, like the terminal's. */
.tui__cursor {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--tui-cursor);
  animation: tui-blink 1.06s steps(1, end) infinite;
}

@keyframes tui-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── Typing ─────────────────────────────────────────────────────────────── */

.tui__line.is-typing::after {
  content: '';
  display: inline-block;
  width: 1ch;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--tui-cursor);
  animation: tui-blink 1.06s steps(1, end) infinite;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tui__cursor,
  .tui__line.is-typing::after { animation: none; }
}

@media (max-width: 640px) {
  .tui__screen { padding: 14px 14px 12px; min-height: 29rem; }
  /* The mark keeps the grid's own 20x7 cells: it is the same box the TUI
     reserves, so it scales with the mock's font rather than being shrunk. */
  .tui__header { gap: 12px; margin-bottom: 16px; }
  .tui__meta { min-width: 0; }
  .tui__meta-row { white-space: normal; overflow-wrap: anywhere; }
}