/* ── Hermes Terminal — phosphor CRT theme ───────────────────────────── */

:root {
  --bg:        #080b09;   /* near-black, faint green tint            */
  --bg-panel:  #0c110e;
  --frame:     #1d3b2a;   /* dim box-drawing rule                    */
  --frame-lit: #2f6b49;
  --green:     #7ee89b;   /* phosphor — agent output                 */
  --green-dim: #3f6b52;   /* secondary / meta text                   */
  --amber:     #ffbf5c;   /* the operator (you)                      */
  --red:       #ff6b6b;   /* errors                                  */
  --glow:      0 0 6px rgba(126, 232, 155, 0.35);
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular,
          Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--green);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-shadow: var(--glow);
  overflow: hidden;
}

/* faint scanlines + vignette, purely atmospheric, never blocks input */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.14) 3px
    ),
    radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(0,0,0,0.45) 100%);
  z-index: 50;
}

/* ── Layout shell ───────────────────────────────────────────────────── */

.screen {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px 12px;
}

/* ── Banner (the signature: mimics Hermes' TUI startup box) ─────────── */

.banner {
  border: 1px solid var(--frame);
  border-radius: 2px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  background: var(--bg-panel);
}

.banner .sigil {
  font-size: 26px;
  color: var(--green);
  line-height: 1;
}

.banner .title {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.banner .meta {
  margin-left: auto;
  color: var(--green-dim);
  text-shadow: none;
  font-size: 12px;
  text-align: right;
}

.banner .meta .dot { color: var(--green); }

/* ── Conversation log ───────────────────────────────────────────────── */

.log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--frame-lit) transparent;
}

.log::-webkit-scrollbar { width: 8px; }
.log::-webkit-scrollbar-thumb {
  background: var(--frame-lit);
  border-radius: 4px;
}

.entry { margin-bottom: 14px; white-space: pre-wrap; word-break: break-word; }

.entry .who {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  text-shadow: none;
}

.entry.user .who   { color: var(--amber); }
.entry.user .body  { color: var(--amber); }
.entry.agent .who  { color: var(--green-dim); }
.entry.agent .body { color: var(--green); }
.entry.error .body { color: var(--red); text-shadow: 0 0 6px rgba(255,107,107,0.3); }

.entry .prompt { color: var(--amber); }

.boot { color: var(--green-dim); text-shadow: none; margin-bottom: 12px; }

/* ── Input row ──────────────────────────────────────────────────────── */

.inputbar {
  flex-shrink: 0;
  border-top: 1px solid var(--frame);
  padding-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.inputbar .ps1 {
  color: var(--amber);
  padding-top: 2px;
  white-space: nowrap;
  user-select: none;
}

.inputbar textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--amber);
  font: inherit;
  text-shadow: var(--glow);
  line-height: 1.55;
  max-height: 40vh;
  overflow-y: auto;
}

.inputbar textarea::placeholder { color: var(--green-dim); text-shadow: none; }

.hint {
  flex-shrink: 0;
  color: var(--green-dim);
  font-size: 11px;
  text-align: right;
  padding: 4px 4px 0;
  text-shadow: none;
}

.hint a { color: var(--green-dim); }

/* blinking block cursor appended to the streaming answer */
.cursor::after {
  content: "\2588";
  color: var(--green);
  animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ── Login ──────────────────────────────────────────────────────────── */

.login-wrap {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-box {
  border: 1px solid var(--frame);
  background: var(--bg-panel);
  border-radius: 2px;
  padding: 26px 28px;
  width: 100%;
  max-width: 420px;
}

.login-box .sigil { font-size: 30px; }

.login-box h1 {
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 8px 0 2px;
}

.login-box p { color: var(--green-dim); text-shadow: none; margin: 0 0 20px; font-size: 12px; }

.login-box label {
  display: block;
  color: var(--green-dim);
  font-size: 12px;
  margin-bottom: 6px;
  text-shadow: none;
}

.login-box input[type="password"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--frame);
  border-radius: 2px;
  color: var(--amber);
  font: inherit;
  padding: 10px 12px;
  text-shadow: var(--glow);
  outline: none;
}

.login-box input[type="password"]:focus { border-color: var(--frame-lit); }

.login-box button {
  margin-top: 16px;
  width: 100%;
  background: var(--frame);
  border: 1px solid var(--frame-lit);
  border-radius: 2px;
  color: var(--green);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px;
  cursor: pointer;
  text-transform: uppercase;
}

.login-box button:hover { background: var(--frame-lit); color: #eafff0; }

.login-error {
  color: var(--red);
  text-shadow: none;
  font-size: 12px;
  margin-top: 14px;
}

/* keyboard focus visibility */
:focus-visible { outline: 1px solid var(--frame-lit); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cursor::after { animation: none; }
}