/* fonts */
@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/UbuntuMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/UbuntuMono-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

:root {
  --terminal-text-size:   16px;
  --terminal-titlebar:    #1b0000;
  --terminal-background:  #330015;
  --terminal-text:        #ffffff;
  --term-purple: #c694ff;
  --term-orange: #ff8a3d;
  --term-green: #8ae234;
  --term-cyan: #5bc8e0;
  --term-red: #ef4444;
  --term-dim: #b8a6c4;
  --term-cursor: #ffffff;
  --scrollbar-thumb: #5e3a52;
  --font-mono: "Ubuntu Mono", monospace;
}

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
  }

  .terminal-window {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--terminal-background);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
  }

  .titlebar {
    background: var(--terminal-titlebar);
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    -webkit-user-select: none;
    user-select: none;
    border-bottom: 1px solid rgba(0,0,0,0.3);
  }

  .titlebar-title {
    flex: 1;
    text-align: center;
    color: var(--terminal-text);
    font-size: var(--terminal-text-size);
    font-family: "Ubuntu", var(--font-mono);
    font-weight: bold;
  }

  .terminal-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 12px 12px;
    font-size: var(--terminal-text-size);
    line-height: 1.25;
    color: var(--terminal-text);
    cursor: text;
  }

  .terminal-body::-webkit-scrollbar { width: 10px; }
  .terminal-body::-webkit-scrollbar-track { background: transparent; }
  .terminal-body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
  }

  .line {
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.25em;
  }

  .prompt-line {
    display: flex;
    flex-wrap: wrap;
  }

.ps-user { color: var(--term-green); font-weight: 700; }
.ps-at { color: var(--term-green); font-weight: 700; }
.ps-host { color: var(--term-green); font-weight: 700; }
.ps-colon { color: var(--terminal-text); }
.ps-path { color: var(--term-purple); font-weight: 700; }
.ps-dollar { color: var(--terminal-text); margin-right: 7px; }

.input-row {
  display: flex;
  align-items: center;
  flex: 1;
}

#cmdInput {
  background: transparent;
  border: none;
  outline: none;
  color: var(--terminal-text);
  font-family: var(--font-mono);
  font-size: var(--terminal-text-size);
  line-height: 1.25;
  flex: 1;
  caret-color: transparent;
  min-width: 10px;
}

  .fake-caret {
    display: inline-block;
    width: 8px;
    height: 15px;
    background: var(--term-cursor);
    vertical-align: middle;
    margin-left: -1px;
    animation: blink 1s step-end infinite;
    position: relative;
  }

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

  .out-dir { color: var(--term-purple); font-weight: 700; }
  .out-exec { color: var(--term-green); font-weight: 700; }
  .out-file { color: var(--terminal-text); }
  .out-error { color: var(--term-red); }
  .out-success { color: var(--term-green); }
  .out-info { color: var(--term-cyan); }
  .out-dim { color: var(--term-dim); }
  .out-link { color: var(--term-cyan); text-decoration: underline; cursor: pointer; }

  a.out-link:hover { color: #8fe0f5; }

  /* ls grid */
  .ls-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
  }

  /* less / pager overlay */
  .pager-overlay {
    position: absolute;
    inset: 38px 0 0 0;
    background: var(--terminal-background);
    display: none;
    flex-direction: column;
    z-index: 10;
  }
  .pager-overlay.active { display: flex; }
  .pager-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    font-size: var(--terminal-text-size);
    color: var(--terminal-text);
    line-height: 1.25;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .pager-content::-webkit-scrollbar { width: 10px; }
  .pager-content::-webkit-scrollbar-track { background: transparent; }
  .pager-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
  }
  .pager-statusbar {
    background: #4a2540;
    color: var(--terminal-text);
    font-size: var(--terminal-text-size);
    padding: 2px 10px;
    flex-shrink: 0;
  }

  .boot-cursor-block {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--terminal-text);
  }

  /* mobile */
  @media (max-width: 640px) {
    .desktop { padding: 0; }
    .terminal-window {
      width: 100%;
      height: 100%;
      border-radius: 0;
    }
    .terminal-body { font-size: var(--terminal-text-size); }
    .titlebar-title { font-size: var(--terminal-text-size); }
  }

  .visually-hidden {
    position: absolute;
    left: -9999px;
  }