/* ── Self-hosted JetBrains Mono (complete font — includes box-drawing) ── */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #0d0a14;
  --bg-terminal:  #090611;
  --bg-titlebar:  #130e1f;
  --green:        #c084fc;   /* primary accent — bright violet  */
  --green-dim:    #7c3aed;   /* dimmer purple                   */
  --yellow:       #f0abfc;   /* soft fuchsia — highlights/path  */
  --blue:         #818cf8;   /* indigo — host, dirs, links      */
  --red:          #f87171;
  --cyan:         #e879f9;   /* fuchsia — headers, labels       */
  --magenta:      #d946ef;
  --white:        #e2d9f3;   /* lavender-tinted white           */
  --muted:        #6b6882;   /* purple-grey                     */
  --border:       #2e1f4a;   /* dark purple border              */
  --font:         'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-size:    14px;
  --line-height:  1.6;
}

html, body {
  height: 100%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--white);
  overflow: hidden;
}

/* ── Terminal Window ─────────────────────────────────────────────── */
#terminal-window {
  width: min(900px, 96vw);
  height: min(620px, 92vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Titlebar ────────────────────────────────────────────────────── */
#titlebar {
  background: var(--bg-titlebar);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  user-select: none;
  position: relative;
}

.titlebar-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.titlebar-btn.close    { background: #ff5f56; }
.titlebar-btn.minimize { background: #ffbd2e; }
.titlebar-btn.maximize { background: #27c93f; }

#titlebar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
  pointer-events: none;
  white-space: nowrap;
}

#titlebar-clock {
  margin-left: auto;
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0.75;
}

/* ── Terminal Body ───────────────────────────────────────────────── */
#terminal-body {
  flex: 1;
  background: var(--bg-terminal);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#terminal-body::-webkit-scrollbar { width: 6px; }
#terminal-body::-webkit-scrollbar-track { background: transparent; }
#terminal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Output ──────────────────────────────────────────────────────── */
#output {
  flex: 1;
  word-break: break-word;
  white-space: pre-wrap;
}

.output-block {
  margin-bottom: 2px;
}

.output-block.spacer { margin-bottom: 10px; }

/* ── Prompt Echo (previous commands) ────────────────────────────── */
.cmd-echo {
  color: var(--white);
}
.cmd-echo .prompt-user  { color: var(--green);  }   /* bright violet  */
.cmd-echo .prompt-at    { color: var(--muted);  }
.cmd-echo .prompt-host  { color: var(--blue);   }   /* indigo         */
.cmd-echo .prompt-sep   { color: var(--muted);  }
.cmd-echo .prompt-path  { color: var(--yellow); }   /* soft fuchsia   */
.cmd-echo .prompt-dollar{ color: var(--muted);  }

/* ── Text colour helpers ─────────────────────────────────────────── */
.c-green   { color: var(--green); }
.c-yellow  { color: var(--yellow); }
.c-blue    { color: var(--blue); }
.c-red     { color: var(--red); }
.c-cyan    { color: var(--cyan); }
.c-magenta { color: var(--magenta); }
.c-muted   { color: var(--muted); }
.c-white   { color: var(--white); }
.bold      { font-weight: 700; }

/* ASCII art / pre-formatted blocks */
.ascii-art {
  color: var(--green);
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 6px;
}

/* Section headers */
.section-header {
  color: var(--cyan);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  margin-bottom: 6px;
}

/* File/dir listings */
.ls-dir  { color: var(--blue); font-weight: 700; }
.ls-file { color: var(--white); }
.ls-link { color: var(--cyan); }

/* Hyperlinks inside terminal */
.term-link {
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}
.term-link:hover { color: var(--cyan); }

/* Error output */
.error-line { color: var(--red); }

/* ── Input Line ──────────────────────────────────────────────────── */
#input-line {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
}

#prompt {
  white-space: nowrap;
  flex-shrink: 0;
}
#prompt .prompt-user   { color: var(--green);  }   /* bright violet  */
#prompt .prompt-at     { color: var(--muted);  }
#prompt .prompt-host   { color: var(--blue);   }   /* indigo         */
#prompt .prompt-sep    { color: var(--muted);  }
#prompt .prompt-path   { color: var(--yellow); }   /* soft fuchsia   */
#prompt .prompt-dollar { color: var(--muted);  }

#input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 1ch;
  overflow: hidden;
}

/* Hidden real input sits on top */
#terminal-input {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  letter-spacing: inherit;
}

/* Mirror spans the text so cursor can overlay correctly */
#input-mirror {
  color: var(--white);
  white-space: pre;
  pointer-events: none;
}

/* Blinking block cursor */
#cursor {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  background: var(--green);
  vertical-align: text-bottom;
  pointer-events: none;
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

#cursor.hidden { display: none; }

/* ── Boot / Welcome animation ────────────────────────────────────── */
.boot-line {
  overflow: hidden;
  white-space: nowrap;
}

/* ── File Viewer Window ──────────────────────────────────────────── */
.file-window-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10;
  backdrop-filter: blur(2px);
}

.file-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(780px, 90vw);
  height: min(560px, 85vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-terminal);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,255,255,0.06);
  z-index: 11;
  overflow: hidden;
}

.file-window.hidden,
.file-window-backdrop.hidden {
  display: none;
}

/* Entrance animation */
.file-window.opening {
  animation: fw-open 0.18s ease-out forwards;
}
@keyframes fw-open {
  from { opacity: 0; transform: translate(-50%, -52%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.file-window-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-titlebar);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}

/* Close button is interactive */
#file-window-close { cursor: pointer; }
#file-window-close:hover { filter: brightness(1.3); }

.file-window-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.file-window-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  line-height: var(--line-height);
}

.file-window-content::-webkit-scrollbar { width: 6px; }
.file-window-content::-webkit-scrollbar-track { background: transparent; }
.file-window-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* PDF iframe mode — let the iframe fill the content pane */
.file-window-content.pdf-mode {
  padding: 0;
  overflow: hidden;
}
.file-window-content.pdf-mode iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.file-window-statusbar {
  flex-shrink: 0;
  padding: 6px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  background: var(--bg-titlebar);
}

/* ── Markdown code blocks ────────────────────────────────────────── */
.md-code-block {
  display: block;
  border-left: 2px solid var(--border);
  padding-left: 1ch;
  color: var(--yellow);
  margin: 4px 0;
  white-space: pre;
}

/* ── Mobile bar ──────────────────────────────────────────────────── */
#mobile-bar {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  background: var(--bg-titlebar);
  border-top: 1px solid var(--border);
  scrollbar-width: none;
}
#mobile-bar::-webkit-scrollbar { display: none; }

.mb-btn {
  flex-shrink: 0;
  padding: 0 12px;
  height: 34px;
  background: #1e1530;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mb-btn.mb-nav { color: var(--yellow); }
.mb-btn.mb-cmd { color: var(--green); }
.mb-btn:active { background: var(--border); }

.mb-sep {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 2px;
}

/* File window mobile close button */
.file-window-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fw-close-mobile {
  display: none;
  background: #1e1530;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  padding: 4px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fw-close-mobile:active { background: var(--border); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #mobile-bar { display: flex; }
  .fw-close-mobile { display: block; }
  .fw-hint { display: none; }
}

@media (max-width: 600px) {
  :root { --font-size: 12px; }
  #terminal-window { height: 100vh; height: 100dvh; width: 100vw; border-radius: 0; border: none; }
  .file-window { width: 100vw; height: 100dvh; border-radius: 0; top: 0; left: 0; transform: none; }
  #titlebar { padding-top: max(10px, env(safe-area-inset-top)); }
  #mobile-bar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}