/* The sc terminal page. The scrollback, the prompt and the line being typed are one text
   box, so the caret sits after the prompt the way it does in a real terminal. */

/* The CLI's themes, from simple-ai-chat's utils/themeUtils.js — the page needs three colours
   out of each: the background, the text, and the muted tone for anything that isn't the
   session itself. `light` is the default, as it is there. */
:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #767676;
}

:root[data-theme="dark"] {
  --bg: #111111;
  --fg: #c7c7c7;
  --muted: #9a9a9a;
}

:root[data-theme="terminal"] {
  --bg: #000000;
  --fg: #00f700;
  --muted: #007000;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* The terminal is the window: it fills it on load and follows every resize. */
html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* Nothing to scroll past the box, so no rubber-banding either. */
  overscroll-behavior: none;
}

/* A mobile toolbar takes its bite out of the viewport, and `100%` measures the one without
   it — so the box would end short. dvh is the height actually on screen; browsers that
   don't know it keep the `100%` above. */
body {
  height: 100dvh;
}

#screen {
  position: relative;
  width: 100%;
  height: 100%;
}

/* The two layers are one apparent box, so every property that decides where a glyph lands
   has to hold for both of them — font, size, line height, padding, wrapping. Anything set
   on one alone is what would make the copies drift apart. */
#mirror,
#terminal {
  position: absolute;
  inset: 0;
  padding: 16px;
  /* The bottom strip belongs to the display's rounded corners and the home indicator,
     which were clipping the last line. Set on the shared rule, so both layers keep the
     same box and the two copies of the text stay aligned. 0 where there is no inset. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* What is actually read: the session, and the block cursor at the end of it. */
#mirror {
  margin: 0;
  color: var(--fg);
  overflow: hidden;
  /* The text here is a copy. Selecting and clicking belong to the box on top. */
  user-select: none;
  pointer-events: none;
}

/* Invisible, but the real thing: it holds the text, takes the typing, and scrolls. */
#terminal {
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* The cursor is drawn in #mirror, so the browser's own caret would be a second one. */
  caret-color: transparent;
  overflow-y: auto;
  /* Scrolls, but without a scrollbar drawing a second colour on the page */
  scrollbar-width: none;
}

#terminal::-webkit-scrollbar {
  display: none;
}

/* Monochrome per theme rather than the browser's blue — and see-through, because the glyphs
   a selection covers are in the layer below it. */
#terminal::selection {
  background: color-mix(in srgb, var(--fg) 30%, transparent);
}

/* Waiting on the server, or nothing there to wait on: said in the middle of the page, not
   written into the session. */
#notice {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--muted);
  background: var(--bg);
}

#notice[hidden] {
  display: none;
}