/* INKED belief terminal — spec §4.2 (revised).
   Win98 app chrome with a phosphor status panel + native form controls.
   Phosphor (Printr cyan) ONLY in .terminal-status and .terminal-voice.
   Form fields are flat 98.css-style — CLAUDE.md rule 3. */

.terminal {
  background: #c0c0c0; /* Win98 button-face */
  padding: 8px;
  font-family: 'Pixelated MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  color: #000;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}

/* Chat absorbs vertical slack on both desktop and mobile. Prior to
   2026-04-19 reshape this was mobile-only; desktop kept the scoped
   default max-height:320px in InkChat.svelte, which cramped chat when
   terminal was 480px tall. Now chat grows to fill whatever the window
   allows, with the rest of the form pinned above/below. */
.terminal-chat {
  flex: 1 1 auto;
  max-height: none;
}

/* ========== Phosphor status panel (sunken) ========== */
.terminal-status {
  background: #020508;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080; /* sunken */
  padding: 10px 12px;
  font-family: 'VT323', monospace;
  font-size: 17px;
  line-height: 1.35;
  color: #01aef0;
  text-shadow:
    0 0 2px rgba(1, 174, 240, 0.9),
    0 0 6px rgba(1, 174, 240, 0.5),
    0 0 14px rgba(1, 174, 240, 0.3);
  position: relative;
  overflow: hidden;
}

/* Scanlines over the phosphor panel only */
.terminal-status::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 5px);
  animation: scan-flicker 2s infinite;
}

@keyframes scan-flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.82; }
  98% { opacity: 0.96; }
  99% { opacity: 0.88; }
}

.status-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  position: relative;
  z-index: 1;
}

.status-label {
  opacity: 0.78;
  width: 92px;
}

.status-value {
  font-weight: 400;
}

.status-unit {
  opacity: 0.6;
  font-size: 14px;
}

/* Single-row compact status — reshape 2026-04-19. Preserves phosphor
   color/glow/scanlines from .terminal-status, but wraps three
   label/value pairs inline with mid-dot separators so the status panel
   occupies one row instead of three. The mid-dot inherits the phosphor
   cyan with softer opacity to read as a separator, not a glyph. */
.status-row-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  position: relative; /* above scanline ::before overlay */
  z-index: 1;
}
.status-row-inline .status-pair {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.status-row-inline .status-label {
  /* Override the vertical-layout width:92px; inline rows don't need a
     fixed label column. */
  width: auto;
}
.status-row-inline .status-sep {
  color: #01aef0;
  opacity: 0.6;
}

/* ========== Groupboxes (raised, Win98 fieldset look) ========== */
.terminal-group {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff; /* raised */
  padding: 8px 10px 10px;
  margin: 0;
  background: #c0c0c0;
  /* Fieldsets default to `min-inline-size: min-content` per the spec. On
     narrow viewports that forces the element wider than its parent when
     its flex children (buttons, input boxes) refuse to shrink below their
     intrinsic widths. Zero this out so the flex machinery can actually
     shrink — the row-level gap + min-width:0 on children still prevents
     overflow within the box. */
  min-width: 0;
  min-inline-size: 0;
}

.terminal-group > legend {
  padding: 0 4px;
  font-size: 11px;
  color: #000;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

/* ========== Token section — $INKED identification (top of terminal) ========== */
/* Pre-launch: CA reads "— not live yet —", copy + chart buttons disabled.
   Post-launch: real mint + enabled buttons. Rule 1 — no fake values, no fake
   enabled state. X handle link is always live (the account is locked). */
.terminal-token .token-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.terminal-token .token-sep {
  color: #808080;
  margin: 0 2px;
}

.token-ca {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Lucida Console', Consolas, monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080; /* sunken input */
  color: #202020;
}

.token-btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  padding: 2px 10px;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff; /* raised button */
  background: #c0c0c0;
  cursor: pointer;
  color: #000;
}
.token-btn:active { border-color: #808080 #ffffff #ffffff #808080; }
.token-btn:disabled {
  color: #808080;
  cursor: default;
  text-shadow: 1px 1px 0 #ffffff;
}
.token-btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.token-x,
.token-x:visited {
  color: #000080;
  text-decoration: none;
  font-family: inherit;
}
.token-x:hover,
.token-x:focus-visible {
  text-decoration: underline;
}

.form-row > label,
.form-label-static {
  width: 82px;
  text-align: left;
}

.form-row input[type="text"] {
  flex: 1;
  font-family: 'Lucida Console', 'Consolas', monospace;
  font-size: 12px;
  padding: 2px 4px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080; /* sunken input */
  background: #ffffff;
  box-sizing: border-box;
  min-width: 0;
}

.form-unit {
  opacity: 0.7;
}

.form-radios {
  display: flex;
  gap: 14px;
}

.form-radios label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.form-meta {
  justify-content: space-between;
  padding-top: 2px;
  border-top: 1px solid #a0a0a0;
  margin-top: 6px;
}

.form-meta b {
  font-weight: 700;
}

.form-actions {
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.form-actions button {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 12px;
  min-width: 92px;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff; /* raised button */
  background: #c0c0c0;
  color: #000;
  cursor: pointer;
}

.form-actions button:active:not(:disabled) {
  border-color: #808080 #ffffff #ffffff #808080; /* pressed */
}

.form-actions button:disabled {
  color: #808080;
  cursor: not-allowed;
}

.form-actions button:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.marks-list {
  font-family: 'Lucida Console', 'Consolas', monospace;
  font-size: 12px;
  color: #404040;
  padding: 4px 0;
}

/* ========== Voice line (bottom, magenta phosphor) ========== */
.terminal-voice {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #d1157a;
  text-shadow:
    0 0 3px rgba(209, 21, 122, 0.8),
    0 0 10px rgba(209, 21, 122, 0.4);
  padding: 4px 2px 0;
  min-height: 1.2em;
}

#terminal-reaction {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #d1157a;
  text-shadow:
    0 0 3px rgba(209, 21, 122, 0.8),
    0 0 10px rgba(209, 21, 122, 0.4);
  min-height: 1.2em;
  padding: 0 2px;
}

/* ========== MOBILE OVERRIDE — spec §4.4 ========== */
@media (max-width: 768px) {
  .winbox.inked-window {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  .winbox.inked-window .wb-header,
  .winbox.inked-window .wb-control {
    display: none !important;
  }
  .winbox.inked-window .wb-body {
    top: 0 !important;
  }
  /* WinBox mounts our Svelte-rendered wrapper <div> directly into .wb-body.
     That wrapper has no class and default height:auto — which breaks the
     height:100% cascade to .terminal inside it, leaving a white void
     below the terminal content on mobile. Stretch the wrapper explicitly. */
  .winbox.inked-window .wb-body > div {
    height: 100%;
  }
  .terminal {
    padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px);
    /* 100dvh tracks the dynamic viewport (iOS Safari URL bar collapse)
       so the terminal matches the visible area, not the larger 100vh
       that includes the transiently-hidden browser chrome. 100vh is the
       fallback for browsers without dvh support. */
    min-height: 100vh;
    min-height: 100dvh;
  }
  /* .terminal-chat { flex: 1 1 auto; max-height: none } lifted into
     the base rule (near top of this file) 2026-04-19 — desktop also
     benefits from chat absorbing vertical slack. */
  .terminal-status { font-size: 16px; }
}