/* terminal.css — the right panel's Terminal tab (js/terminal/terminal.js).

   The terminal keeps its own ground in both themes: the console's navy
   (#050605 — --bg in the dark theme, --accent-strong in the light one),
   pearl text (#f2f5f3, the dark theme's --text), a claret cursor (#8e1b2e,
   --accent-2 in both), and a restrained sixteen-colour palette drawn from
   the same tokens (--danger, --amber, --accent, --text-faint, the glow
   blue) with a muted green and cyan beside them. terminal.js reads these
   variables into xterm's theme, so this sheet is the one place they live.

   Phone first (375×812): the terminal fills the right sheet, and a key row
   (Tab, Ctrl, Esc, the arrows, Paste) sits directly above the on-screen
   keyboard (--asg-term-kb, the keyboard's height, is set from
   visualViewport). Desk and tablet inherit, with the key row folded into
   a slim footer. Every hand is 44 px. */

@import url("../vendor/xterm/xterm.css");

.asg-term {
  --term-bg: #050605;
  --term-bg-raised: #0c0f0d;
  --term-fg: #f2f5f3;
  --term-muted: #8b96b4;
  --term-line: #1b2d58;
  --term-line-strong: #2b4179;
  --term-cursor: #8e1b2e;
  --term-cursor-text: #f2f5f3;
  --term-selection: rgba(43, 212, 107, 0.30);
  --term-accent: #2bd46b;
  --term-danger: #e8586b;
  --term-amber: #d8b46e;
  /* the sixteen: 0–7 normal, 8–15 bright */
  --term-c0: #0c0f0d;
  --term-c1: #e8586b;
  --term-c2: #8fbf9f;
  --term-c3: #d8b46e;
  --term-c4: #7f9cd6;
  --term-c5: #c77d90;
  --term-c6: #8ab8c4;
  --term-c7: #2bd46b;
  --term-c8: #8b96b4;
  --term-c9: #f27d8c;
  --term-c10: #a9d6b5;
  --term-c11: #ecc98a;
  --term-c12: #a3bcf0;
  --term-c13: #dca0b0;
  --term-c14: #b0d8e0;
  --term-c15: #f2f5f3;

  --asg-term-kb: 0px;

  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  background: var(--term-bg);
  color: var(--term-fg);
  font: 12px/1.35 var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  overflow: hidden;
}
.asg-term[hidden] { display: none; }
.asg-term *, .asg-term *::before, .asg-term *::after { box-sizing: border-box; }

/* ---------- the bar: sessions, new, mode ---------- */
.asg-term-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 2px 4px;
  border-bottom: 1px solid var(--term-line);
  background: var(--term-bg-raised);
  flex: none;
}
.asg-term-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.asg-term-tabs::-webkit-scrollbar { display: none; }
.asg-term-tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 150px;
  border-radius: 8px;
  color: var(--term-muted);
}
.asg-term-tab.is-active { background: var(--term-bg); color: var(--term-fg); box-shadow: inset 0 -2px 0 var(--term-cursor); }
.asg-term-tab-pick,
.asg-term-tab-close,
.asg-term-btn,
.asg-term-key {
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.asg-term-tab-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px 0 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asg-term-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--term-muted);
}
.asg-term-tab[data-state="live"] .asg-term-tab-dot { background: var(--term-c2); }
.asg-term-tab[data-running="true"] .asg-term-tab-dot { background: var(--term-amber); }
.asg-term-tab[data-mode="shell"] .asg-term-tab-dot { background: var(--term-danger); }
.asg-term-tab[data-state="ended"] .asg-term-tab-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--term-muted); }
.asg-term-tab[data-locked="true"] { opacity: 0.6; }
.asg-term-tab-close {
  width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--term-muted);
  border-radius: 8px;
  flex: none;
  margin-left: -8px;
}
.asg-term-tab-close:hover, .asg-term-tab-close:focus-visible { color: var(--term-fg); }
.asg-term-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  color: var(--term-fg);
  flex: none;
}
.asg-term-btn:hover { background: rgba(43, 212, 107, 0.08); }
.asg-term-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.asg-term-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 10px/1 var(--font-mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--term-line-strong);
  border-radius: 999px;
  padding: 0 10px;
  min-height: 30px;
  color: var(--term-accent);
  margin: 7px 2px;
}
.asg-term-mode[data-mode="shell"] { color: var(--term-fg); border-color: var(--term-cursor); background: rgba(142, 27, 46, 0.35); }
.asg-term-mode[data-shell="locked"] svg { opacity: 0.8; }
.asg-term-icon, .asg-term-mode-icon { display: inline-flex; align-items: center; line-height: 0; }
.asg-term-mode-hand {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  flex: none;
}
.asg-term-btn:focus-visible,
.asg-term-tab-pick:focus-visible,
.asg-term-tab-close:focus-visible,
.asg-term-mode-hand:focus-visible,
.asg-term-key:focus-visible { outline: 2px solid var(--term-accent); outline-offset: -3px; }

/* ---------- notes (restart, locked shell, reconnecting) ---------- */
.asg-term-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--term-line);
  background: rgba(216, 180, 110, 0.10);
  color: var(--term-fg);
  font-size: 12px;
  line-height: 1.45;
  flex: none;
}
.asg-term-note[hidden] { display: none; }
.asg-term-note[data-tone="error"] { background: rgba(232, 88, 107, 0.14); }
.asg-term-note[data-tone="info"] { background: rgba(127, 156, 214, 0.12); }
.asg-term-note-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.asg-term-note .asg-term-btn { min-height: 44px; margin: -12px -6px -12px 0; color: var(--term-muted); }

/* ---------- the unlock step ---------- */
.asg-term-unlock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 10px;
  border-bottom: 1px solid var(--term-line);
  background: var(--term-bg-raised);
  flex: none;
}
.asg-term-unlock[hidden] { display: none; }
.asg-term-unlock-why { flex: 1 1 100%; margin: 0; color: var(--term-muted); font-size: 12px; line-height: 1.45; }
.asg-term-unlock label { flex: 1 1 100%; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--term-muted); }
.asg-term-unlock input {
  flex: 1 1 120px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--term-line-strong);
  background: var(--term-bg);
  color: var(--term-fg);
  font: 600 18px/1 var(--font-mono, monospace);
  letter-spacing: 0.3em;
}
.asg-term-unlock input:focus { outline: 2px solid var(--term-accent); outline-offset: 1px; }
.asg-term-unlock .asg-term-go { background: var(--term-cursor); color: var(--term-cursor-text); font-weight: 700; padding: 0 14px; }
.asg-term-unlock .asg-term-go:hover { filter: brightness(1.12); background: var(--term-cursor); }
.asg-term-unlock-error { flex: 1 1 100%; margin: 0; color: var(--term-danger); font-size: 12px; }
.asg-term-unlock-error:empty { display: none; }

/* ---------- the screen ---------- */
.asg-term-screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 4px 4px 8px;
  background: var(--term-bg);
}
.asg-term-view { position: absolute; inset: 6px 4px 4px 8px; }
.asg-term-view .xterm { height: 100%; }
.asg-term-view .xterm-viewport { background-color: var(--term-bg) !important; }
.asg-term-boot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--term-muted);
  font-size: 12px;
  pointer-events: none;
}
.asg-term-boot[hidden] { display: none; }

/* ---------- the foot: status, copy, paste (desk); the key row (phone) ---------- */
.asg-term-foot {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 4px 0 10px;
  border-top: 1px solid var(--term-line);
  background: var(--term-bg-raised);
  color: var(--term-muted);
  font-size: 11px;
  flex: none;
}
.asg-term-status { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asg-term-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--term-muted);
}
.asg-term[data-link="open"] .asg-term-status::before { background: var(--term-c2); }
.asg-term[data-link="connecting"] .asg-term-status::before { background: var(--term-amber); }
.asg-term[data-link="closed"] .asg-term-status::before { background: var(--term-danger); }
.asg-term-foot .asg-term-btn { min-height: 32px; min-width: 36px; font-size: 11px; color: var(--term-muted); }
.asg-term-foot .asg-term-btn:hover { color: var(--term-fg); }

.asg-term-keys {
  display: none;
  gap: 2px;
  padding: 2px 2px calc(2px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--term-line);
  background: var(--term-bg-raised);
  flex: none;
}
.asg-term-key {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  border-radius: 8px;
  color: var(--term-fg);
  font: 600 12px/1 var(--font-mono, monospace);
  background: rgba(43, 212, 107, 0.06);
  touch-action: manipulation;
}
.asg-term-key:active { background: rgba(43, 212, 107, 0.18); }
.asg-term-key[aria-pressed="true"] { background: var(--term-cursor); color: var(--term-cursor-text); }

/* Phones and touch-first screens: the key row shows, the desk's copy
   button folds away (Paste stays in the key row), and the whole terminal
   stands above the on-screen keyboard. */
@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  .asg-term { padding-bottom: var(--asg-term-kb); }
  .asg-term-keys { display: flex; }
  .asg-term-foot .asg-term-copy,
  .asg-term-foot .asg-term-paste { display: none; }
  .asg-term-foot { min-height: 28px; }
}

/* On a phone the terminal takes the whole sheet's width: every column
   counts at 375 px. Scoped to the right panel while it shows the terminal. */
@media (max-width: 480px) {
  #side-panel[data-view="terminal"] {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .asg-term-tab { max-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .asg-term * { transition: none !important; }
}