/* ════════════════════════════════════════════════════════════════
   TERMINAL — Cinematic vintage-terminal overlay
   Phosphor amber aesthetic / CRT monitor bezel
   ════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (scoped to terminal) ───────────────── */
#terminal-overlay {
  --tp-bg:          var(--bg-deep);
  --tp-screen-bg:   var(--bg-heavytintedglass);
  --tp-base:        var(--accent);
  --tp-base-bright: #00d006;
  --tp-label-dim:   #033f4a;
  --tp-highlight:   var(--accent-bright);
  --tp-base-muted:  #677479;
  --tp-bright:      var(--accent-bright);
  --tp-gold:        #e6c240;
  --tp-green:       #7ab84a;
  --tp-green-dim:   #4a7830;
  --tp-red:         #e84060;
  --tp-blue:        var(--accent);
  --tp-sep:         #42607f;
  --tp-prompt:      var(--accent);
  --tp-echo:        #c5f3ffd1;
  --tp-bezel:       var(--bg);
  --tp-bezel-mid:   var(--bg);
  --tp-bezel-light: var(--bg-deep);
  --tp-glow:        var(--accent-glow);
  --tp-glow-soft:   var(--accent-glow);
  --tp-font:        'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
}

/* ── Overlay backdrop ─────────────────────────────────────────── */
#terminal-overlay {
  position:   fixed;
  inset:      0;
  z-index:    8000;
  display:    none;
  align-items:     center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px) brightness(0.7);
  -webkit-backdrop-filter: blur(6px) brightness(0.7);
}

#terminal-overlay.term-active {
  display: flex;
}

/* ── Outer click-off region ───────────────────────────────────── */
.term-outer {
  width:   100%;
  height:  100%;
  display: flex;
  align-items:     center;
  justify-content: center;
  padding: 2.5rem;
}

/* ── Enter / Exit animations ──────────────────────────────────── */
#terminal-overlay .term-bezel {
  transform: scale(0.96) translateY(10px);
  opacity: 0;
}

#terminal-overlay.term-enter .term-bezel {
  animation: termOpen 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#terminal-overlay.term-exit .term-bezel {
  animation: termClose 0.22s ease-in forwards;
}

@keyframes termOpen {
  0%   { opacity: 0; transform: scale(0.96) translateY(10px); filter: brightness(0) saturate(0); }
  25%  { filter: brightness(3) saturate(0); }
  60%  { filter: brightness(1.15); }
  100% { opacity: 1; transform: scale(1)  translateY(0);      filter: brightness(1); }
}

@keyframes termClose {
  0%   { opacity: 1; transform: scale(1);    filter: brightness(1); }
  35%  { filter: brightness(2.5) saturate(0); }
  100% { opacity: 0; transform: scale(0.97); filter: brightness(0); }
}

/* ── Monitor bezel ────────────────────────────────────────────── */
.term-bezel {
  width:      min(920px, 96vw);
  max-height: min(700px, 94vh);
  height:     min(700px, 94vh);
  display:    flex;
  flex-direction: column;
  background:   var(--tp-bezel);
  border-radius: 14px 14px 10px 10px;
  box-shadow:
    /* inner edge highlight */
    inset 0 1px 0 var(--accent-glow),
    /* outer rim */
    0 0 0 1px var(--border-dim),
    0 0 0 3px var(--border-dim),
    /* depth shadow */
    0 12px 60px var(--accent-glow),
    /* phosphor ambient */
    0 0 120px var(--accent-fade);
  overflow: hidden;
  position: relative;
}

/* ── Top vents ────────────────────────────────────────────────── */
.term-bezel-vents {
  height:     20px;
  background: var(--tp-bezel-mid);
  border-bottom: 1px solid #0a0805;
  display:    flex;
  align-items:     center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
}

.term-bezel-vents span {
  display:       block;
  width:         32px;
  height:        3px;
  background:    var(--accent-glow);
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--bg-deep);
}

/* ── Screen wrapper ───────────────────────────────────────────── */
.term-screen-wrap {
  position:   relative;
  flex:       1;
  overflow:   hidden;
  background: var(--tp-screen-bg);
  /* Simulate slight screen inset shadow */
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.7),
    inset 0 0  2px #0a0800;
  /* Subtle barrel distortion feel via border radius */
  border-radius: 4px;
  margin: 2px 6px;
}

/* ── Screen inner — actual content ────────────────────────────── */
.term-screen-inner {
  position:    relative;
  z-index:     2;
  height:      100%;
  display:     flex;
  flex-direction: column;
  padding:     14px 22px 12px;
  font-family: var(--tp-font);
  font-size:   0.77rem;
  line-height: 1.6;
  color:       var(--tp-base);
  text-shadow: 0 0 7px var(--tp-glow);
  overflow:    hidden;
  /* Very subtle whole-screen flicker */
  animation:   termFlicker 9s ease-in-out infinite;
}

@keyframes termFlicker {
  0%, 94%, 96%, 98%, 100% { opacity: 1; }
  95%  { opacity: 0.97; }
  97%  { opacity: 0.985; }
  99%  { opacity: 0.975; }
}

/* ── Terminal header bar ──────────────────────────────────────── */
.term-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-bottom:  9px;
  margin-bottom:   9px;
  border-bottom:   1px solid var(--tp-sep);
  flex-shrink:     0;
}

.term-header-brand {
  font-size:      0.6rem;
  letter-spacing: 0.12em;
  color:          var(--tp-highlight);
  text-shadow:    none;
}

.term-header-right {
  display:     flex;
  align-items: center;
  gap:         5px;
}

.term-header-pip {
  width:         6px;
  height:        6px;
  rotate:        45deg;
  background:    var(--tp-highlight);
  box-shadow:    0 0 5px var(--tp-green-dim);
  animation:     termPipBlink 2.8s ease-in-out infinite;
}

@keyframes termPipBlink {
  0%, 85%, 100% { opacity: 1; }
  90%           { opacity: 0.2; }
}

.term-header-status {
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  color:          var(--tp-highlight);
  text-shadow:    none;
}

/* ── Scrollable output ────────────────────────────────────────── */
.term-output {
  flex:      1;
  overflow-y:   auto;
  overflow-x:   hidden;
  scroll-behavior: smooth;
  /* Thin amber scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--tp-sep) transparent;
}

.term-output::-webkit-scrollbar       { width: 4px; }
.term-output::-webkit-scrollbar-track { background: transparent; }
.term-output::-webkit-scrollbar-thumb { background: var(--tp-sep); border-radius: 2px; }

/* ── Input row ────────────────────────────────────────────────── */
.term-input-row {
  display:     flex;
  align-items: center;
  padding-top: 9px;
  margin-top:  7px;
  border-top:  1px solid var(--tp-sep);
  flex-shrink: 0;
}

.term-prompt {
  color:       var(--tp-prompt);
  text-shadow: 0 0 9px var(--tp-glow);
  white-space: nowrap;
  font-size:   0.77rem;
  flex-shrink: 0;
  user-select: none;
}

.term-input {
  flex:       1;
  background: transparent;
  border:     none;
  outline:    none;
  color:      var(--tp-base-bright);
  text-shadow:0 0 5px var(--tp-glow-soft);
  font-family:var(--tp-font);
  font-size:  0.77rem;
  padding:    0;
  caret-color:var(--tp-bright);
}

/* ── Output line base ─────────────────────────────────────────── */
.tl-line {
  display:       block;
  padding:       0.5px 0;
  white-space:   pre-wrap;
  word-break:    break-word;
}

.tl-blank { height: 0.65em; display: block; }

/* ── Line variants ────────────────────────────────────────────── */
.tl-brand {
  color:       var(--tp-bright);
  text-shadow: 0 0 12px var(--accent);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.tl-heading {
  color:          var(--tp-base-bright);
  text-shadow:    0 0 8px var(--accent-glow);
  letter-spacing: 0.06em;
}

.tl-sys {
  color:       var(--tp-blue);
  text-shadow: 0 0 5px var(--accent-glow);
}

.tl-ok {
  color:       var(--tp-highlight);
  text-shadow: 0 0 5px var(--accent-glow);
}

.tl-err {
  color:       var(--tp-red);
  text-shadow: 0 0 6px rgba(232, 64, 96, 0.5);
}

.tl-sep {
  color:       var(--tp-sep);
  text-shadow: none;
}

.tl-echo {
  color:       var(--tp-echo);
  text-shadow: 0 0 4px var(--tp-glow-soft);
  opacity:     0.9;
}

.tl-muted {
  color:       var(--tp-base-muted);
  text-shadow: none;
}

.tl-hint {
  color:       var(--tp-base-muted);
  font-style:  italic;
  text-shadow: none;
}

.tl-key {
  color:       var(--tp-highlight);
  text-shadow: none;
}

.tl-body {
  color:       var(--tp-base);
  padding-left:1.5em;
  line-height: 1.7;
}

/* Key/value lines */
.tl-kv-key   { color: var(--tp-base-bright); }
.tl-kv-val   { color: var(--tp-bright); }

/* Command help table */
.tl-cmd { padding: 1.5px 0; }

.tl-cmd-name {
  color:          var(--tp-base-bright);
  text-shadow:    0 0 4px var(--tp-glow-soft);
  display:        inline-block;
  min-width:      22ch;
}

.tl-cmd-sep  { color: var(--tp-sep); }
.tl-cmd-desc { color: var(--tp-highlight); }

.tl-cmd--hint .tl-cmd-hint-name { color: var(--tp-base-muted); }
.tl-cmd--hint .tl-cmd-hint-desc { color: var(--tp-base-muted); }

/* Feed rows */
.tl-feed-wk  { color: var(--tp-green); }
.tl-feed-cat { color: var(--tp-base);     }
.tl-feed-ttl { color: var(--tp-base-bright); }
.tl-feed-body {
  color:       var(--tp-highlight);
  padding-left:2em;
  font-style:  italic;
  line-height: 1.65;
}

/* Intel rows */
.tl-intel-n    { color: var(--tp-green); }
.tl-intel-flag { color: var(--tp-prompt); }
.tl-intel-action {
  color:          var(--tp-red);
  font-weight:    bold;
  letter-spacing: 0.05em;
}
.tl-intel-actioned {
  color:          var(--tp-gold);
  font-weight:    bold;
  letter-spacing: 0.05em;
}
.tl-intel-wk   { color: var(--tp-highlight); }
.tl-intel-subj { color: var(--tp-base); }
.tl-intel-unread {
  color:       var(--tp-base-bright);
  text-shadow: 0 0 5px var(--tp-glow-soft);
}
.tl-intel-body {
  color:       var(--tp-base);
  padding-left:1.5em;
  line-height: 1.75;
}
.tl-intel-body--intervention {
  color:       var(--tp-green);
  padding-left:1.5em;
  line-height: 1.75;
}
.tl-prompt {
  color:       var(--tp-gold);
  text-shadow: 0 0 5px var(--accent-glow);
}

/* Entity rows */
.tl-ent-type { color: var(--tp-highlight); }
.tl-ent-name { color: var(--tp-base-bright); }
.tl-ent-code { color: var(--tp-base-muted); font-style: italic; }

/* Directive rows */
.tl-dir-wk   { color: var(--tp-highlight); }
.tl-dir-body { color: var(--tp-base); }

/* ── @mention entity picker ──────────────────────────────────── */
.term-mention-drop {
  position:    absolute;
  bottom:      44px;   /* sits above the input row */
  left:        22px;   /* match term-screen-inner padding */
  right:       22px;
  max-height:  152px;
  overflow-y:  auto;
  background:  var(--tp-bg);
  border:      1px solid var(--tp-sep);
  scrollbar-width: thin;
  scrollbar-color: var(--tp-sep) transparent;
  z-index:     20;
  font-family: var(--tp-font);
}
.tm-drop-item {
  display:     flex;
  gap:         0.75em;
  align-items: center;
  padding:     0.28em 0.75em;
  cursor:      pointer;
  color:       var(--tp-base-muted);
}
.tm-drop-item--active,
.tm-drop-item:hover {
  background:  rgba(0, 170, 200, 0.1);
  color:       var(--tp-base-bright);
}
.tm-drop-type {
  font-size:      0.63rem;
  color:          var(--tp-highlight);
  min-width:      4.5ch;
  letter-spacing: 0.06em;
  text-shadow:    none;
}
.tm-drop-name {
  font-size:   0.74rem;
  color:       inherit;
}
.tm-drop-desc {
  font-size:      0.63rem;
  color:          var(--tp-base-muted);
  flex:           1;
  text-align:     right;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  padding-left:   1em;
  text-shadow:    none;
}

/* ── CRT overlay effects ──────────────────────────────────────── */
.term-crt-overlay {
  position:       absolute;
  inset:          0;
  z-index:        3;
  pointer-events: none;
  border-radius:  4px;
  overflow:       hidden;
}

/* Scanlines */
.term-scanlines {
  position:   absolute;
  inset:      0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.13) 2px,
    rgba(0, 0, 0, 0.13) 4px
  );
}

/* Edge vignette — makes it feel like a CRT tube */
.term-vignette {
  position:   absolute;
  inset:      0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* Subtle specular glare — top-left corner */
.term-crt-glare {
  position:   absolute;
  inset:      0;
  background: radial-gradient(
    ellipse 35% 20% at 18% 12%,
    rgba(255, 220, 120, 0.035) 0%,
    transparent 100%
  );
}

/* ── Bottom bezel chrome ──────────────────────────────────────── */
.term-bezel-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 18px;
  background:      var(--tp-bezel-mid);
  border-top:      1px solid #0a0805;
  flex-shrink:     0;
}

.term-bezel-label {
  font-family:    var(--font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  color:          var(--tp-label-dim);
}

.term-bezel-hint {
  font-family:    var(--font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.08em;
  color:          var(--tp-label-dim);
}

/* ── Mobile: full-screen, no bezel chrome ─────────────────────── */
@media (max-width: 600px) {
  .term-outer {
    padding:    0;
    align-items: stretch;
  }

  .term-bezel {
    width:         100%;
    max-height:    100%;
    height:        100%;
    border-radius: 0;
    box-shadow:    none;
  }

  .term-bezel-vents  { display: none; }
  .term-bezel-bottom { display: none; }

  .term-screen-wrap {
    margin:        0;
    border-radius: 0;
  }

  .term-screen-inner {
    font-size: 0.72rem;
    padding:   12px 14px 10px;
  }

  .tl-cmd-name { min-width: 16ch; }
}

/* ── Reduced-motion: disable flicker ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .term-screen-inner { animation: none; }
  .term-header-pip   { animation: none; }
  #terminal-overlay.term-enter .term-bezel,
  #terminal-overlay.term-exit  .term-bezel { animation: none; }
  #terminal-overlay.term-enter .term-bezel { opacity: 1; transform: scale(1) translateY(0); }
}