:root {
  --bg: #140c02;
  --fg: #ffb534;
  --dim: #b8761a;
  --line: #3a2606;
  --glow: 0 0 6px rgba(255, 170, 40, 0.45);
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --vvh: 100dvh;
  --vvt: 0px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color-scheme: dark; }
body {
  font-family: var(--mono);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Mobile: pinned to the visual viewport so the keyboard never covers the prompt. */
.crt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: var(--vvh);
  transform: translateY(var(--vvt));
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--bg);
  box-shadow: inset 0 0 60px rgba(255, 150, 0, 0.12);
  overflow: hidden;
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.bar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.75rem;
  flex: none;
}
.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.6;
  text-shadow: var(--glow);
}
.line { overflow-wrap: anywhere; white-space: pre-wrap; margin-bottom: 6px; }
.line.reply, .line.thinking { color: var(--dim); text-align: start; }
.line.reply[dir="auto"] { unicode-bidi: plaintext; }
.row { position: relative; display: block; overflow-wrap: anywhere; }
.typed { white-space: pre-wrap; }
.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--fg);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* Real input sits invisibly over the row so taps focus it and the keyboard opens. */
#input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font: inherit;
  font-size: 16px;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
}
.crt:focus-within .cursor { opacity: 1; }
@media (min-width: 900px) {
  body { padding: 4vh 2rem; }
  .crt {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    padding: 0;
    width: 820px;
    max-width: 100%;
    height: min(640px, 92vh);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: inset 0 0 60px rgba(255, 150, 0, 0.12), 0 0 40px rgba(255, 150, 0, 0.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}