/* ══════════════════════════════════════════════
   TERMINAL
   ══════════════════════════════════════════════ */
#terminal {
  display: none;
  position: fixed;
  left: 24px; top: 24px;
  width: 680px;
  max-width: calc(100vw - 24px);
  height: 330px;
  max-height: calc(100vh - 24px);
  min-width: 320px;
  min-height: 200px;
  border: none;
  outline: 1px solid var(--term-outline);
  box-shadow:
    0 0 0 1px rgba(10,20,60,0.7),
    0 0 6px rgba(5,10,40,0.95),
    0 20px 60px rgba(0,0,0,0.99),
    inset 0 0 120px rgba(10,20,80,0.15);
  z-index: 100;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 10px;
  overflow: hidden;
}

#terminal::before,
#terminal::after {
  content: '';
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  pointer-events: none;
  z-index: 10;
}

#terminal::before {
  top: 0;
  left: 0;
  background:
    linear-gradient(to right, rgba(218, 154, 188, 0.48) 0%, rgba(218, 154, 188, 0.14) 60%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(to bottom, rgba(156, 138, 222, 0.48) 0%, rgba(156, 138, 222, 0.14) 60%, transparent 100%) left / 1px 100% no-repeat;
}

#terminal::after {
  right: 0;
  bottom: 0;
  background:
    linear-gradient(to left, rgba(218, 154, 188, 0.48) 0%, rgba(218, 154, 188, 0.14) 60%, transparent 100%) bottom / 100% 1px no-repeat,
    linear-gradient(to top, rgba(156, 138, 222, 0.48) 0%, rgba(156, 138, 222, 0.14) 60%, transparent 100%) right / 1px 100% no-repeat;
}

@media (max-width: 704px) {
  #terminal {
    width: calc(100vw - 24px);
  }
}

@media (max-width: 768px) {
  #terminal {
    left: 12px;
    top: 12px;
    max-width: calc(100vw - 24px);
    height: auto;
    max-height: calc(100vh - 24px);
    min-width: 320px;
    min-height: min(200px, calc(100vh - 24px));
    font-size: 9px;
  }

  #terminal-output {
    padding: 12px 12px 4px;
  }

  #terminal-inputline {
    padding: 8px 12px 10px;
  }

  #terminal-titlebar-actions {
    gap: 8px;
  }

  #terminal-skip {
    font-size: 7px;
  }
}

#terminal.open { display: flex; }

#terminal ::selection {
  background: rgba(120, 175, 220, 0.3);
  color: rgba(236, 246, 255, 0.98);
  text-shadow: none;
}

#terminal-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px 4px;
  border-bottom: 1px solid var(--term-border);
  color: var(--term-title);
  font-size: 7px; letter-spacing: 0.22em;
  flex-shrink: 0; line-height: 1;
  text-transform: uppercase;
  text-shadow: var(--glow-blue-low);
}

#terminal-titlebar span {
  color: rgba(190,220,255,0.75);
  text-shadow: var(--glow-blue-high);
}

#terminal-titlebar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#terminal-skip {
  cursor: var(--cursor-pointer);
  color: rgba(132, 184, 228, 0.7);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s, text-shadow 0.2s;
  background: none;
  border: none;
  font-family: var(--font-mono);
  padding: 0;
  text-shadow: var(--glow-blue-low);
}

#terminal-skip:hover,
#terminal-skip:focus,
#terminal-skip:focus-visible {
  outline: none;
  color: rgba(170, 214, 242, 0.94);
  text-shadow: var(--glow-blue-high);
}

#terminal-close {
  cursor: var(--cursor-pointer);
  color: rgba(190, 154, 224, 0.4);
  font-size: 9px;
  transition: color 0.2s, text-shadow 0.2s;
  background: none; border: none;
  font-family: var(--font-mono); padding: 0;
}

#terminal-close:hover {
  color: rgba(226, 198, 246, 0.94);
  text-shadow:
    0 0 5px rgba(212, 178, 236, 0.96),
    0 0 14px rgba(182, 140, 214, 0.58);
}

#terminal-close:focus,
#terminal-close:focus-visible {
  outline: none;
  box-shadow: none;
  color: rgba(226, 198, 246, 0.94);
  text-shadow:
    0 0 4px rgba(212, 178, 236, 0.58),
    0 0 12px rgba(182, 140, 214, 0.26);
}

#terminal-output {
  flex: 1; overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 4px;
  color: var(--term-text);
  line-height: 1.25;
  scrollbar-width: thin;
  scrollbar-color: rgba(80,120,190,0.12) transparent;
  text-shadow: var(--glow-blue-medium);
}

#terminal-output div  {
  position: relative;
  min-height: 1.25em;
}

#terminal-output .cmd {
  color: var(--term-cmd);
  text-shadow: var(--glow-blue-high);
}

#terminal-output .dim {
  color: var(--term-dim);
  text-shadow: var(--glow-blue-low);
}

#terminal-output .highlight {
  color: var(--term-hi);
  text-shadow: var(--glow-blue-high);
}

#terminal-output .signal {
  color: var(--term-signal);
  text-shadow:
    0 0 5px rgba(120,195,190,1.0),
    0 0 18px rgba(100,175,170,0.75),
    0 0 38px rgba(80,155,150,0.34);
}

#terminal-output .err {
  color: var(--term-err);
  text-shadow:
    0 0 5px rgba(210,140,130,1.0),
    0 0 18px rgba(190,120,110,0.68),
    0 0 36px rgba(170,100,90,0.32);
}

#terminal-output .tag {
  display: inline-block;
  border: 1px solid rgba(140,200,225,0.22);
  padding: 0 5px; margin-right: 4px;
  font-size: 9px; color: rgba(160,210,230,0.5);
  text-shadow:
    0 0 4px rgba(160,210,230,0.5),
    0 0 10px rgba(140,190,220,0.2);
}

#terminal-inputline {
  display: flex; align-items: center;
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(140,200,225,0.07);
  flex-shrink: 0; gap: 8px;
  position: relative;
}

#terminal-prompt {
  color: rgba(100,150,200,0.5);
  white-space: nowrap; font-size: 10px;
  flex-shrink: 0;
  text-shadow:
    0 0 4px rgba(100,150,200,0.9),
    0 0 14px rgba(80,130,190,0.38);
}

#terminal-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

#terminal-input {
  background: none; border: none; outline: none;
  color: rgba(130,180,225,0.75);
  font-family: var(--font-mono); font-size: 10px;
  width: 100%;
  caret-color: transparent;
  text-shadow:
    0 0 5px rgba(130,180,225,1.0),
    0 0 18px rgba(110,160,215,0.6),
    0 0 36px rgba(90,140,200,0.3);
}

/* hidden mirror span — same font as input, used to measure text width */
#terminal-input-mirror {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  font-family: var(--font-mono); font-size: 10px;
  pointer-events: none;
  top: 0; left: 0;
}

#terminal-cursor {
  position: absolute;
  width: 6px; height: 11px;
  background: rgba(130,180,230,0.85);
  box-shadow:
    0 0 4px rgba(130,180,230,1.0),
    0 0 12px rgba(110,160,220,0.7),
    0 0 24px rgba(90,140,210,0.4),
    0 0 40px rgba(70,120,200,0.2);
  animation: cursor-glow-blink 1.1s ease-in-out infinite;
  pointer-events: none;
  top: 50%; transform: translateY(-50%);
}