*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='0' width='2' height='6' fill='%23fff'/%3E%3Crect x='7' y='10' width='2' height='6' fill='%23fff'/%3E%3Crect x='0' y='7' width='6' height='2' fill='%23fff'/%3E%3Crect x='10' y='7' width='6' height='2' fill='%23fff'/%3E%3C/svg%3E") 8 8, crosshair; }
canvas { position: fixed; inset: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; transition: filter 0.32s steps(8, end); }

#primer { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 9; cursor: pointer; }
#primer::after { content: ""; width: 4px; height: 4px; background: #fff; animation: pulse 1.6s step-end infinite; }
#primer.gone { opacity: 0; pointer-events: none; transition: opacity 0.6s steps(6, end); }
@keyframes pulse { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

#chat-log {
  position: fixed; left: 0; right: 0; bottom: 32px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 8px 16px;
  font: 8px/2 'Silkscreen',ui-monospace,monospace;
  color: #fff;
  pointer-events: none;
  z-index: 10;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
#chat-log:not(:empty) { pointer-events: auto; }
.message { margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; scroll-snap-align: start; }
.msg-prompt { font-weight: 700; }
.message.user .msg-prompt { color: #fff; }
.message.assistant .msg-prompt { color: rgba(255,255,255,0.35); }
.msg-body { color: rgba(255,255,255,0.80); }
.cursor { display: inline-block; width: 8px; height: 8px; background: #fff; vertical-align: text-bottom; animation: blink 1s step-end infinite; }
.enhance-confirm { margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; }
.enhance-arrow { color: rgba(255,255,255,0.22); animation: blink 0.5s step-end 4; }
.enhance-text { color: rgba(255,255,255,0.32); font-style: italic; }
.enhance-yn { color: rgba(255,255,255,0.18); }
.dmesg-line { font: 7px/1.6 'Silkscreen',ui-monospace,monospace; color: rgba(255,255,255,0.18); margin-bottom: 1px; white-space: pre-wrap; word-break: break-all; transition: opacity 0.8s steps(4, end); }
.dmesg-fade { opacity: 0; }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

#zsh {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center;
  height: 32px;
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  font: 8px 'Silkscreen',ui-monospace,monospace;
  color: #fff;
  border-top: 1px solid #fff;
  background: #000;
  z-index: 11;
  opacity: 0; pointer-events: none; transition: opacity 0.2s steps(4, end);
}
#zsh.live { opacity: 1; pointer-events: auto; }
#zsh .pp { color: #fff; font-weight: 700; }
#zsh .sep { color: rgba(255,255,255,0.35); }
#zsh .sep2 { color: rgba(255,255,255,0.35); }
#zsh input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; caret-color: #fff; padding: 2px 0; }
#zsh input::placeholder { color: rgba(255,255,255,0.25); }