/* The terminal is a scrollback div plus a real <input>. Not contenteditable,
   not a canvas — that is what buys us mobile keyboards, IME, paste, selection
   and native cursor movement for free. */

/* ── the window ─────────────────────────────────────────────────────────
   On desktop the terminal floats over the pane like an OS window: dragged by
   its title bar, resized from the corner. window.js owns the geometry; below
   860px it goes static and fills the pane like before. */
.term-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border-bright);
  background: var(--bg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.term-titlebar {
  cursor: move;
  user-select: none;
  background: var(--bg-panel);
  touch-action: none;
}

.term-dots { display: flex; gap: 6px; margin-right: var(--u); }
.term-dots i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--border-bright);
}
.term-dots i:nth-child(1) { background: var(--accent-warn); }
.term-dots i:nth-child(2) { background: var(--accent-1); }
.term-dots i:nth-child(3) { background: var(--accent-4); }

.term-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--border-bright) 50% calc(50% + 1px), transparent calc(50% + 1px) 75%, var(--border-bright) 75% calc(75% + 1px), transparent calc(75% + 1px));
}

@media (max-width: 859px) {
  .term-window {
    position: static;
    flex: 1;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    border: 0;
    box-shadow: none;
  }
  .term-titlebar { cursor: default; }
  .term-resize { display: none; }
}

.scrollback {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--u) * 2);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  scroll-margin-bottom: 60px;
}

.line { min-height: 1.6em; }
.line-echo { margin-top: 4px; }
.line-echo .echo-prompt { color: var(--text-muted); }
.line-echo .echo-command { color: var(--text); }

.line-banner {
  margin-bottom: var(--u);
  padding-bottom: var(--u);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.input-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2) calc(var(--u) * 1.75);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  font-family: var(--mono);
  font-size: var(--fs-mono);
}

.prompt { white-space: nowrap; color: var(--text-muted); }
.prompt .prompt-user { color: var(--accent-4); }
.prompt .prompt-path { color: var(--accent-2); }
.prompt .prompt-sigil { color: var(--text); }

#terminal-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  color: var(--text);
  caret-color: var(--accent-1);
  outline: none;
}
#terminal-input:disabled { color: var(--text-muted); }

.session-ended {
  display: flex;
  align-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Touch devices have no Tab key, and no arrow keys for history. */
.key-bar {
  display: flex;
  gap: 6px;
  padding: 0 var(--u) var(--u);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  overflow-x: auto;
}
.key-bar button {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 10px 12px;
  margin-top: var(--u);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--fs-small);
  cursor: pointer;
}
.key-bar button:active { border-color: var(--accent-1); color: var(--accent-1); }