/* ============================================================
   IPyodide — a single-pane terminal
   The scrollback and the prompt share one scrolling box, so there is exactly
   one thing to focus and one thing to scroll. Mobile-first.
   Colours come from /css/lib_color_dark_gruvbox.css
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--gb-dark0_hard);
  color: var(--gb-light1);
  font-family: 'Consolas', 'Fira Code', 'DejaVu Sans Mono', monospace;
  font-size: 15px;
  /* Stop iOS growing the text without locking pinch-zoom */
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /* dvh follows the visible viewport as mobile browser chrome comes and goes */
  height: 100dvh;
}

/* --- The terminal: one pane --- */
#terminal {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: text;                /* clicking anywhere means "type here" */
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#terminal:focus { outline: none; }

#output > span { display: block; }

/* --- The prompt: last line of the same flow --- */
#prompt-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6ch;
}
#prompt {
  color: var(--gb-bright_green);
  line-height: 1.5;
  user-select: none;
  white-space: pre;
  flex: 0 0 auto;
  cursor: text;
}
#input {
  flex: 1;
  min-width: 0;
  /* Invisible by design: no border, no background, no resize handle. The only
     thing the user should see is their own text and the caret. */
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;            /* it grows instead of scrolling on its own */
  color: var(--gb-light0);
  caret-color: var(--gb-bright_aqua);
  font: inherit;
  /* 16px keeps iOS Safari from zooming the page when the field takes focus */
  font-size: 16px;
  line-height: 1.5;
  tab-size: 4;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
#input::selection { background: rgba(131, 165, 152, 0.40); }
#input::placeholder { color: var(--gb-gray_245); }

/* --- Line kinds, painted by pyutil.js and shell.js --- */
.tb-prompt    { color: var(--gb-bright_green); user-select: none; }
.repr         { color: var(--gb-bright_purple); }
.error        { color: var(--gb-bright_red); }
.help         { color: var(--gb-neutral_aqua); }
.completions  { color: var(--gb-neutral_yellow); }
.notice       { color: var(--gb-gray_245); }

.tb-banner { font-weight: bold; }
.tb-ok     { color: var(--gb-bright_green); }
.tb-bad    { color: var(--gb-bright_red); }
.tb-head   { color: var(--gb-gray_245); }
.tb-kw     { color: var(--gb-gray_245); }
.tb-file   { color: var(--gb-neutral_blue); }
.tb-line   { color: var(--gb-bright_yellow); }
.tb-func   { color: var(--gb-bright_aqua); }
.tb-caret  { color: var(--gb-bright_red); font-weight: bold; }
.tb-exc    { color: var(--gb-bright_red); font-weight: bold; }
.tb-msg    { color: var(--gb-bright_orange); }

/* --- Touch-only key row --- */
#keyrow {
  flex: 0 0 auto;
  display: none;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  background: var(--gb-dark1);
  border-top: 1px solid var(--gb-dark2);
  scrollbar-width: none;
}
#keyrow::-webkit-scrollbar { display: none; }
#keyrow button {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 38px;
  background: var(--gb-dark2);
  color: var(--gb-light1);
  border: 1px solid var(--gb-dark3);
  border-radius: 5px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
#keyrow button:active { background: var(--gb-bright_aqua); color: var(--gb-dark0); }

/* A coarse pointer means a touch screen: that is when the key row earns space */
@media (pointer: coarse), (max-width: 700px) {
  #keyrow { display: flex; }
  #terminal { font-size: 14px; }
}