/*
 * @file Stylesheet for the Web Terminal.
 */

/*
 * Basic reset and body styling.
 * Sets up a consistent font and basic background for the page.
 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #000;
  font-family: 'IBM Plex Mono', monospace;
  color: #fff;
}

/*
 * Styles for the main terminal container.
 * This is the visible window of your terminal.
 * Height is the primary driving dimension, fitting within the viewport.
 */
#terminal-container {
  display: flex;
  flex-direction: column;

  height: 80vh;
  min-height: 400px;
  max-height: 700px;
  width: auto;
  max-width: 95vw;
  aspect-ratio: 4 / 3;

  box-sizing: border-box; /* Include padding in width/height */
  padding: 10px;

  background-color: #000;
  border: 1px solid #fff;
  border-radius: 4px;
  box-shadow:
    0 0 25px rgba(255, 255, 255, .7),
    0 0 50px rgba(255, 255, 255, .3);
}

/*
 * Styles for the terminal output area.
 * This is where text messages and command results are displayed.
 */
#terminal-output {
  flex-grow: 1;
  overflow-y: auto;

  padding-bottom: 5px;

  color: #fff;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
}

/*
 * Scrollbar styling for Webkit browsers (Chrome, Safari) - now grayscale.
 */
#terminal-output::-webkit-scrollbar {
  width: 8px;
}

#terminal-output::-webkit-scrollbar-track {
  background: #333;
}

#terminal-output::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 4px;
}

#terminal-output::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/*
 * Styles for the input line.
 * Contains the command prompt and the text input field.
 */
#terminal-input-line {
  display: flex;
  align-items: baseline;
  position: relative;
  min-height: 1.2em;
}

/*
 * Styles for the command prompt text.
 */
#terminal-prompt {
  flex-shrink: 0;
  margin-right: 2px;

  color: #fff;
  white-space: nowrap;
}

/*
 * Styles for the actual text input field.
 */
#terminal-input {
  background-color: transparent;
  border: none;
  outline: none;

  flex-grow: 1; /* Allows the input field to take up remaining space in the flex container */
  padding: 0; /* IMPORTANT: Remove default input padding for precise cursor alignment */
  margin: 0; /* Remove default input margin */

  font-family: 'IBM Plex Mono', monospace;
  font-size: inherit;
  color: #fff;
  caret-color: transparent;

  white-space: pre;
  min-width: 1ch;
}

/*
 * Styles for the actual text input field.
 * Hides the native caret and makes its width dynamic based on content.
 */
#terminal-input {
    /* Keep your existing font, colour, background, outline styles */
    background: none;
    border: none !important; /* Force no border */
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    flex-grow: 1;
    padding: 0 !important; /* Force padding to zero */
    margin: 0 !important;  /* Force margin to zero */
    caret-color: transparent; /* Hide the native text cursor */
    min-width: 1ch;
    /* You may also want to explicitly set line-height to match your font-size, e.g., line-height: 1.2em; */
}

/*
 * Styles for the custom blinking underscore cursor.
 */
#custom-cursor {
  display: inline-block;
  position: absolute;
  top: 16px;
  width: 8px; /* Thickness of the underscore */
  height: 2px; /* Height of the underscore (making it thin) */
  background-color: #fff; /* Color of the underscore */
  /* vertical-align: middle; Align with text baseline */
  animation: blink-underscore 1s step-end infinite; /* Blinking animation */
  /* Optional: Adjust vertical alignment if the underscore isn't sitting quite right */
  /* For example, for an actual underscore effect, you might need a slight negative top margin or transform */
  /* transform: translateY(2px); */ /* Example: push down slightly if needed */
  pointer-events: none;
  z-index: 1;
}

/* 
 * Keyframe animation for the blinking effect.
 */
@keyframes blink-underscore {
  from, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}