/* ========== Base Body Styling ========== */
body {
  background-color: #0f0f0f;
  color: #00ff88;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.9rem, 2.5vw, 1rem); /* Responsive font size */
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent page scroll */
}

/* ========== Terminal Container ========== */
#terminal {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Stick prompt to bottom */
  padding: 2rem;
  height: 100vh;
  overflow-y: auto; /* Allow scrolling within terminal */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  max-width: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* ========== Scrollable History Output ========== */
#history {
  flex-grow: 1; /* Fill remaining space above prompt */
}

/* ========== Prompt Line Layout ========== */
.prompt-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* Keeps prompt text on one line */
.prompt {
  white-space: nowrap;
}

/* ========== Input Area ========== */
#input-line {
  display: inline-block;
  white-space: pre-wrap; /* Preserve formatting */
  word-break: break-word; /* Break long words if needed */
}

/* ========== Blinking Cursor ========== */
#cursor {
  display: inline-block;
  width: 1ch;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* ========== Command Output Styling ========== */
.output {
  white-space: pre-wrap;
  margin-bottom: 0.5em;
}

/* ========== Mobile Responsiveness ========== */
@media (max-width: 600px) {
  #terminal {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .prompt-line {
    flex-wrap: wrap; /* Allow prompt line to break */
  }

  #input-line {
    word-break: break-word;
  }
}

/* ========== Enable Text Selection on Inputs (Mobile/iOS) ========== */
input[type="text"] {
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}