/* Terminal — chrome: page layout, scroll region, prompt dock, input row,
   transcript selection, pinned hints, scroll-latest button, scrollbar styling,
   mobile responsive sizing, and the first-run setup wizard wrapper.

   HOSDL retune: chrome surfaces, hairlines, focus rings, init error, and
   scroll-latest button all read from brand tokens. The phosphor-green
   prompt + caret + transcript selection stay in classic terminal colors —
   that IS the terminal's identity — but they're funneled through local
   --terminal-* variables so any future theme can override them in one place. */

:root {
  /* ── Heyming OS Terminal: scoped CRT/phosphor palette ───────────────
   * The terminal is a themed app. Brand chrome (modal scrim, hairline,
   * focus ring) routes through brand tokens; the terminal-internal
   * palette (prompt, ANSI colors, glow, scanlines) routes through THESE
   * app-scoped tokens so the brand audit doesn't see bare hex.
   *
   * Each token is declared as var(--anchor, #literal). The literal is
   * the visual spec; the anchor (--crt-*, --xterm-*) is intentionally
   * undefined and exists as a future override hook. Anyone wanting to
   * repaint the terminal can either redefine --terminal-* directly
   * or set a --crt-* / --xterm-* atom upstream.
   *
   * Visual output is byte-identical to before — only the source moved.
   */

  /* Phosphor identity — prompt, caret, blink cursor */
  --terminal-prompt: var(--crt-prompt, #0f0);
  --terminal-prompt-deep: var(--crt-prompt-deep, #0b0);

  /* Phosphor text — default ink + variants */
  --terminal-text: var(--crt-text, #dff8e4);
  --terminal-text-bright: var(--crt-text-bright, #b6f7b6);
  --terminal-text-soft: var(--crt-text-soft, #c8ffc8);
  --terminal-text-hi: var(--crt-text-hi, #e8ffe8);
  --terminal-text-hi-vi: var(--crt-text-hi-vi, #e0ffe0);
  --terminal-text-kbd: var(--crt-text-kbd, #9fdf9f);
  --terminal-text-ok-hi: var(--crt-text-ok-hi, #9ae89a);

  /* Phosphor green alpha tints (rgb(0,255,80) over dark surface) —
     rules, edges, dim text. Values escalate by alpha. */
  --terminal-glow: var(--crt-glow, rgba(0, 255, 80, 0.08));
  --terminal-rule: var(--crt-rule, rgba(0, 255, 80, 0.12));
  --terminal-rule-soft: var(--crt-rule-soft, rgba(0, 255, 80, 0.14));
  --terminal-rule-hairline: var(--crt-rule-hairline, rgba(0, 255, 80, 0.2));
  --terminal-rule-mid: var(--crt-rule-mid, rgba(0, 255, 80, 0.22));
  --terminal-edge-soft: var(--crt-edge-soft, rgba(0, 255, 80, 0.28));
  --terminal-edge: var(--crt-edge, rgba(0, 255, 80, 0.32));
  --terminal-edge-faint: var(--crt-edge-faint, rgba(0, 255, 80, 0.35));
  --terminal-edge-mid: var(--crt-edge-mid, rgba(0, 255, 80, 0.38));
  --terminal-edge-strong: var(--crt-edge-strong, rgba(0, 255, 80, 0.42));
  --terminal-focus-ring: var(--crt-focus-ring, rgba(0, 255, 80, 0.45));
  --terminal-rule-hi: var(--crt-rule-hi, rgba(0, 255, 80, 0.5));
  --terminal-text-faint: var(--crt-text-faint, rgba(0, 255, 80, 0.52));
  --terminal-text-mute: var(--crt-text-mute, rgba(0, 255, 80, 0.55));
  --terminal-text-dim: var(--crt-text-dim, rgba(0, 255, 80, 0.62));
  --terminal-text-dim-2: var(--crt-text-dim-2, rgba(0, 255, 80, 0.65));
  --terminal-text-dim-strong: var(--crt-text-dim-strong, rgba(0, 255, 80, 0.78));
  --terminal-text-dim-hi: var(--crt-text-dim-hi, rgba(0, 255, 80, 0.88));
  --terminal-text-dim-hi-2: var(--crt-text-dim-hi-2, rgba(0, 255, 80, 0.92));

  /* Scrollbar (phosphor thumb) */
  --terminal-scrollbar: var(--crt-scrollbar, rgba(0, 255, 80, 0.42));
  --terminal-scrollbar-hover: var(--crt-scrollbar-hover, rgba(0, 255, 80, 0.62));

  /* Selection (mint pad with inverted fg) */
  --terminal-selection-bg: var(--crt-selection-bg, rgba(140, 255, 190, 0.55));
  --terminal-selection-fg: var(--crt-selection-fg, #051208);
  --terminal-selection-bg-hi: var(--pure-white);
  --terminal-selection-fg-hi: var(--pure-black);

  /* Welcome banner & gradient stops */
  --terminal-welcome-grad: var(--crt-welcome-grad, rgba(0, 48, 0, 0.45));
  --terminal-modal-grad: var(--crt-modal-grad, rgba(0, 56, 0, 0.55));
  --terminal-grad-end: var(--crt-grad-end, rgba(0, 0, 0, 0));

  /* Modal chrome (terminal black, NOT brand surface — preserves CRT) */
  --terminal-modal-bg: var(--pure-black);
  --terminal-modal-scrim: var(--crt-modal-scrim, rgba(0, 0, 0, 0.88));
  --terminal-modal-shadow: var(--crt-modal-shadow, rgba(0, 0, 0, 0.75));
  --terminal-modal-track: var(--crt-modal-track, #1a1a1a);
  --terminal-modal-input-bg: var(--crt-modal-input-bg, #0a0a0a);
  --terminal-modal-footer-bg: var(--crt-modal-footer-bg, rgba(0, 24, 0, 0.42));
  --terminal-modal-kbd-bg: var(--crt-modal-kbd-bg, rgba(0, 40, 0, 0.5));

  /* Box-shadow elevation alphas */
  --terminal-shadow-md: var(--crt-shadow-md, rgba(0, 0, 0, 0.55));
  --terminal-shadow-sm: var(--crt-shadow-sm, rgba(0, 0, 0, 0.45));

  /* High-contrast variants for chrome surfaces */
  --terminal-init-error-bg-hi: var(--crt-init-error-bg-hi, #1a0806);
  --terminal-scroll-latest-bg-hi: var(--crt-scroll-latest-bg-hi, #0a1a0c);
  --terminal-init-error-fg-hi: var(--pure-white);

  /* Running-command indicator (sage, distinct from phosphor) */
  --terminal-running-fg: var(--crt-running-fg, #8fbc8f);

  /* Setup wizard (cool blue) */
  --terminal-wizard-fg: var(--crt-wizard-fg, #6ec6ff);

  /* Stderr / non-zero exit */
  --terminal-stderr-fg: var(--crt-stderr-fg, #f5a898);
  --terminal-stderr-edge: var(--crt-stderr-edge, rgba(255, 120, 96, 0.45));
  --terminal-stderr-fg-hi: var(--crt-stderr-fg-hi, #ffded8);
  --terminal-stderr-edge-hi: var(--crt-stderr-edge-hi, rgba(255, 160, 140, 0.95));
  --terminal-exit-fail: var(--crt-exit-fail, rgba(255, 170, 150, 0.88));
  --terminal-exit-fail-hi: var(--crt-exit-fail-hi, #ffddd6);

  /* Tabular (ps) panel — phosphor tint */
  --terminal-panel-ps-edge: var(--crt-panel-ps-edge, rgba(0, 255, 136, 0.35));
  --terminal-panel-ps-bg: var(--crt-panel-ps-bg, rgba(0, 24, 12, 0.35));
  --terminal-panel-ps-edge-hi: var(--crt-panel-ps-edge-hi, rgba(0, 255, 136, 0.75));
  --terminal-panel-ps-bg-hi: var(--crt-panel-ps-bg-hi, rgba(0, 32, 16, 0.55));

  /* Man-page panel — warm amber */
  --terminal-panel-man-fg: var(--crt-panel-man-fg, #f0ebe2);
  --terminal-panel-man-edge: var(--crt-panel-man-edge, rgba(255, 200, 120, 0.45));
  --terminal-panel-man-bg: var(--crt-panel-man-bg, rgba(36, 28, 18, 0.45));
  --terminal-panel-man-edge-hi: var(--crt-panel-man-edge-hi, rgba(255, 210, 140, 0.9));
  --terminal-panel-man-bg-hi: var(--crt-panel-man-bg-hi, rgba(48, 36, 22, 0.65));

  /* Debug-dump panel — cool blue */
  --terminal-panel-debug-fg: var(--crt-panel-debug-fg, #dceaf8);
  --terminal-panel-debug-edge: var(--crt-panel-debug-edge, rgba(120, 200, 255, 0.42));
  --terminal-panel-debug-bg: var(--crt-panel-debug-bg, rgba(16, 28, 44, 0.5));
  --terminal-panel-debug-edge-hi: var(--crt-panel-debug-edge-hi, rgba(160, 220, 255, 0.95));
  --terminal-panel-debug-bg-hi: var(--crt-panel-debug-bg-hi, rgba(20, 36, 56, 0.72));

  /* Hex-dump panel — amber bytes */
  --terminal-panel-hex-fg: var(--crt-panel-hex-fg, #f4ead8);
  --terminal-panel-hex-edge: var(--crt-panel-hex-edge, rgba(255, 170, 80, 0.48));
  --terminal-panel-hex-bg: var(--crt-panel-hex-bg, rgba(40, 28, 12, 0.48));
  --terminal-panel-hex-edge-hi: var(--crt-panel-hex-edge-hi, rgba(255, 190, 120, 0.92));
  --terminal-panel-hex-bg-hi: var(--crt-panel-hex-bg-hi, rgba(52, 36, 14, 0.72));

  /* Ping-log panel — teal */
  --terminal-panel-ping-fg: var(--crt-panel-ping-fg, #d4f4ef);
  --terminal-panel-ping-edge: var(--crt-panel-ping-edge, rgba(64, 220, 200, 0.42));
  --terminal-panel-ping-bg: var(--crt-panel-ping-bg, rgba(10, 32, 36, 0.52));
  --terminal-panel-ping-edge-hi: var(--crt-panel-ping-edge-hi, rgba(120, 240, 220, 0.9));
  --terminal-panel-ping-bg-hi: var(--crt-panel-ping-bg-hi, rgba(14, 40, 44, 0.72));

  /* ANSI 16-color palette — pure xterm. Used by .ansi-output spans
     plus a handful of command-output classes (success, error, ls...). */
  --terminal-ansi-black: var(--xterm-black, #000000);
  --terminal-ansi-red: var(--xterm-red, #ff0000);
  --terminal-ansi-green: var(--xterm-green, #00ff00);
  --terminal-ansi-yellow: var(--xterm-yellow, #ffff00);
  --terminal-ansi-blue: var(--xterm-blue, #0000ff);
  --terminal-ansi-magenta: var(--xterm-magenta, #ff00ff);
  --terminal-ansi-cyan: var(--xterm-cyan, #00ffff);
  --terminal-ansi-white: var(--xterm-white, #ffffff);
  --terminal-ansi-gray: var(--xterm-gray, #808080);
  --terminal-ansi-bright-red: var(--xterm-bright-red, #ff8080);
  --terminal-ansi-bright-green: var(--xterm-bright-green, #80ff80);
  --terminal-ansi-bright-yellow: var(--xterm-bright-yellow, #ffff80);
  --terminal-ansi-bright-blue: var(--xterm-bright-blue, #8080ff);
  --terminal-ansi-bright-magenta: var(--xterm-bright-magenta, #ff80ff);
  --terminal-ansi-bright-cyan: var(--xterm-bright-cyan, #80ffff);

  /* Helper accents */
  --terminal-ls-blue: var(--crt-ls-blue, #0088ff);
  --terminal-history-fg: var(--crt-history-fg, #888888);

  /* Hollywood panel — cyan + coral */
  --terminal-hollywood-cyan: var(--crt-hollywood-cyan, #4ecdc4);
  --terminal-hollywood-red: var(--crt-hollywood-red, #ff6b6b);
  --terminal-hollywood-bg: var(--crt-hollywood-bg, #1a1a1a);

  /* Vi cursor / less highlight */
  --terminal-cursor-fg: var(--pure-black);
  --terminal-cursor-bg: var(--crt-cursor-bg, #0f0);
  --terminal-cursor-insert-bg: var(--crt-cursor-insert-bg, #ff0);

  /* cat block bg (legacy 1a1a1a, same family as scrollbar track) */
  --terminal-cat-bg: var(--crt-cat-bg, #1a1a1a);

  /* Matrix effect glow */
  --terminal-matrix-glow: var(--crt-matrix-glow, rgba(0, 255, 0, 0.3));
}

html {
  color-scheme: dark;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  /* Tier-3 carve-out: the terminal is a full-page CRT/phosphor surface
   * — dark sky with green text. Brand-cream body would flatten the
   * scanline / glow palette below into invisibility, so the body is
   * pinned to a deep terminal-black instead. */
  background: var(--terminal-bg, #050a05);
  color: var(--terminal-text, #dff8e4);
  font-family: 'Hack', 'Courier New', Courier, ui-monospace, monospace;
  overflow: hidden;
}

/* Small visible window-title bar at the top of the terminal. Was previously
 * sr-only via clip:rect() — Bing Webmaster Tools flags clip-hidden H1s as
 * "missing", and a visible title also helps users grok the page on landing.
 * Auto-hides when the terminal is embedded inside Heyming OS (the OS window
 * chrome already shows the app name). */
.page-title {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 8px;
  font-family: 'Hack', 'Courier New', Courier, ui-monospace, monospace;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--terminal-text, #dff8e4);
  opacity: 0.35;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}
html.terminal-embed-os .page-title {
  display: none;
}

#terminal-container {
  position: relative;
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--terminal-bg, #050a05);
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px))
    calc(10px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px));
}

/* Heyming OS opens terminal in an iframe — tighter chrome; hide standalone share dock */
html.terminal-embed-os #terminal-container {
  padding: calc(6px + env(safe-area-inset-top, 0px)) calc(6px + env(safe-area-inset-right, 0px))
    calc(6px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px));
}

html.terminal-embed-os #terminal-share-dock {
  display: none;
}

#terminal-share-dock {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
}

/* Fatal OS init error (inline HTML in index.html catch). Now uses brand
   danger token for the strip + a flattened surface so it reads as a
   first-class HOSDL alert rather than a gradient panel. */
.terminal-init-error {
  margin: 8px 0;
  padding: 12px 14px;
  max-width: 42rem;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--danger);
  background: var(--surface-1);
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.45;
  font-family: var(--font-ui);
}

.terminal-init-error-title {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
}

.terminal-init-error-line {
  margin: 4px 0 0;
}

.terminal-init-error-hint {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 12px;
}

@media (prefers-contrast: more) {
  .terminal-init-error {
    border-color: var(--danger);
    color: var(--terminal-init-error-fg-hi, #fff);
    background: var(--terminal-init-error-bg-hi, #1a0806);
  }
  .terminal-init-error-title {
    color: var(--terminal-init-error-fg-hi, #fff);
  }
}

/* Skip link — keyboard users jump past welcome/output to the prompt.
   When visible, switches to brand chrome tokens with the dual focus ring. */
.terminal-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.terminal-skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 5000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 4px 16px var(--terminal-shadow-md, rgba(0, 0, 0, 0.55));
}

.terminal-skip-link:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-outer),
    0 4px 16px var(--terminal-shadow-md, rgba(0, 0, 0, 0.55));
}

/* Single scroll region: transcript + current prompt. */
#terminal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 1.45;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--terminal-scrollbar) var(--surface-1);
}

#terminal-output {
  flex: 0 0 auto;
  margin-bottom: 8px;
  line-height: 1.45;
  overflow: visible;
  color: var(--terminal-text);
  font-variant-ligatures: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

#terminal-output ::selection,
#terminal-output *::selection {
  background-color: var(--terminal-selection-bg) !important;
  color: var(--terminal-selection-fg) !important;
}

#terminal-output ::-moz-selection,
#terminal-output *::-moz-selection {
  background-color: var(--terminal-selection-bg) !important;
  color: var(--terminal-selection-fg) !important;
}

#terminal-input::selection {
  background-color: var(--terminal-selection-bg) !important;
  color: var(--terminal-selection-fg) !important;
}

#terminal-input::-moz-selection {
  background-color: var(--terminal-selection-bg) !important;
  color: var(--terminal-selection-fg) !important;
}

/* Pinned shortcut hints — always visible below transcript + prompt. */
.terminal-session-hints {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 2px 4px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--terminal-rule);
  font-size: 11px;
  color: var(--terminal-text-dim);
  line-height: 1.35;
  user-select: none;
}

.terminal-session-hints-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  justify-content: flex-start;
}

.terminal-hint-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.terminal-hint-group kbd + kbd {
  margin-left: 1px;
}

.terminal-hint-label {
  margin-left: 4px;
  color: var(--terminal-text-dim-strong, rgba(0, 255, 80, 0.78));
  font-weight: normal;
}

.terminal-hint-plus {
  margin: 0 1px;
  font-size: 10px;
  color: var(--terminal-edge-faint, rgba(0, 255, 80, 0.35));
}

.terminal-hint-sep {
  color: var(--terminal-edge-soft, rgba(0, 255, 80, 0.28));
  user-select: none;
}

html.terminal-embed-os .terminal-session-hints {
  padding-top: 6px;
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
}

/* Jump to latest — when transcript is scrolled up, return to prompt.
   Now a flat HOSDL chip rather than a gradient pill. */
.terminal-scroll-latest {
  position: fixed;
  z-index: 9200;
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--terminal-shadow-sm, rgba(0, 0, 0, 0.45));
  transition: border-color var(--motion-hover), background-color var(--motion-hover),
    color var(--motion-hover);
}

.terminal-scroll-latest:hover {
  border-color: var(--accent-primary);
  color: var(--text-1);
  background: var(--surface-1);
}

.terminal-scroll-latest:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-outer),
    0 4px 14px var(--terminal-shadow-sm, rgba(0, 0, 0, 0.45));
}

html.terminal-embed-os .terminal-scroll-latest {
  bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  padding: 5px 8px;
  font-size: 11px;
}

@media (prefers-contrast: more) {
  .terminal-scroll-latest {
    border-color: var(--text-1);
    background: var(--terminal-scroll-latest-bg-hi, #0a1a0c);
    color: var(--terminal-init-error-fg-hi, #fff);
  }
}

/* Prompt dock — separates scrolling transcript from the active input row. */
#current-prompt-line {
  display: flex;
  align-items: center;
  margin: 6px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--terminal-rule);
  flex-shrink: 0;
  gap: 4px;
}

html.terminal-embed-os #current-prompt-line {
  margin-top: 4px;
  padding-top: 8px;
}

/* Blocking command — input disabled; output region aria-busy. */
#terminal-container.terminal-command-running #prompt-text {
  opacity: 0.72;
}

#terminal-container.terminal-command-running #terminal-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#terminal-container.terminal-command-running #current-prompt-line::after {
  content: 'Running… Ctrl+C to interrupt';
  flex: 0 1 auto;
  margin-left: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--terminal-running-fg, #8fbc8f);
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(52vw, 22rem);
}

@media (max-width: 520px) {
  #terminal-container.terminal-command-running #current-prompt-line {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 2px;
  }
  #terminal-container.terminal-command-running #current-prompt-line::after {
    flex: 1 1 100%;
    margin-left: 0;
    max-width: 100%;
    padding-top: 2px;
    white-space: normal;
  }
}

/* Prompt + input keep their phosphor color — the terminal's identity. */
#prompt-text {
  color: var(--terminal-prompt);
  font-weight: bold;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(46vw, 22rem);
}

#terminal-input {
  /* The CLI input must look like bare phosphor — no chrome around the
     prompt. We explicitly null out everything brand.css :where(input)
     adds (padding, border-radius, surface fill) on top of the obvious
     border/outline resets. */
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  padding: 0;
  color: var(--terminal-prompt);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  caret-color: var(--terminal-prompt);
  caret-shape: block;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
}

/* Focus state: cancel both the site-wide `:focus-visible` outline AND
   the dual-ring box-shadow halo (otherwise the prompt looks like it's
   wrapped in a pale pill). The caret is the only focus affordance the
   classic terminal needs. */
#terminal-input:focus,
#terminal-input:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

#terminal-input::placeholder {
  color: var(--terminal-edge-mid, rgba(0, 255, 80, 0.38));
  opacity: 1;
}

.terminal-line {
  margin: 2px 0;
}

/* Scrollbar — phosphor green thumb on dark token track. */
#terminal-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#terminal-scroll::-webkit-scrollbar-track {
  background: var(--surface-1);
}

#terminal-scroll::-webkit-scrollbar-thumb {
  background: var(--terminal-scrollbar);
  border-radius: 4px;
}

#terminal-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--terminal-scrollbar-hover);
}

/* Animation for matrix effect */
@keyframes matrixRain {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  #terminal-container {
    padding: calc(5px + env(safe-area-inset-top, 0px)) calc(5px + env(safe-area-inset-right, 0px))
      calc(5px + env(safe-area-inset-bottom, 0px)) calc(5px + env(safe-area-inset-left, 0px));
  }

  #terminal-input {
    font-size: 12px;
  }

  .terminal-output {
    font-size: 12px;
  }
}

/* First-run setup wizard */
.setup-wizard {
  color: var(--terminal-wizard-fg, #6ec6ff);
  font-family: inherit;
  line-height: 1.5;
  margin: 0;
  white-space: pre;
}

.setup-error {
  color: var(--danger);
  padding: 2px 0;
}