/* ============================================================
   index.css — Terminal Emulator Styles
   ============================================================ */

/* --- Terminal Wrapper -------------------------------------- */
.terminal-wrapper {
  max-width: 860px;
  margin: calc(var(--nav-height) + var(--space-7)) auto var(--space-6);
  padding: 0 var(--space-4);
}

/* --- Terminal Chrome (title bar) --------------------------- */
.terminal-chrome {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red {
  background: #ff5f57;
}

.dot-yellow {
  background: #febc2e;
}

.dot-green {
  background: #28c840;
}

.terminal-title {
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  margin-left: auto;
  margin-right: auto;
}

/* --- Terminal Body ----------------------------------------- */
.terminal-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  padding: var(--space-5);
  min-height: 480px;
  max-height: 70vh;
  overflow-y: auto;
  position: relative;
  cursor: text;
}

/* --- Terminal Output Lines --------------------------------- */
.terminal-line {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.4em;
  line-height: 1.5;
  font-size: var(--fs-sm);
}

.ascii-art {
  color: var(--accent);
  font-size: 0.6rem;
  line-height: 1.15;
  text-shadow: 0 0 6px var(--accent-glow);
}

.accent-text {
  color: var(--accent);
}

.dim-text {
  color: var(--dim);
}

.fg-text {
  color: var(--fg);
}

.error-text {
  color: var(--error);
}

.bio-text {
  color: var(--fg);
  padding-left: var(--space-3);
}

.help-text {
  color: var(--accent);
  font-size: var(--fs-xs);
}

/* --- Prompt ------------------------------------------------ */
.prompt-line {
  display: flex;
  align-items: center;
  margin-top: var(--space-2);
}

.prompt-prefix {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  font-size: var(--fs-sm);
}

.prompt-echo .prompt-prefix {
  color: var(--accent);
}

.prompt-echo .prompt-command {
  color: var(--fg);
}

/* --- Input Wrapper ----------------------------------------- */
.input-wrapper {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: calc(100% - 200px);
}

/* --- Terminal Input ---------------------------------------- */
.terminal-input {
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  width: 1ch;
  min-width: 1ch;
  caret-color: transparent;
  padding: 0;
  margin: 0;
}

.terminal-input::selection {
  background: var(--accent-dim);
}

/* --- Terminal Suggestion ----------------------------------- */
.terminal-suggestion-box {
  position: absolute;
  bottom: 100%;
  left: 20ch;
  /* Alignment with prompt-prefix length */
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  display: none;
  flex-direction: column;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  max-height: 180px;
  /* Limit to approx 5 items */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) var(--surface);
}

.terminal-suggestion-box::-webkit-scrollbar {
  width: 6px;
}

.terminal-suggestion-box::-webkit-scrollbar-track {
  background: var(--surface);
  border-radius: 6px;
}

.terminal-suggestion-box::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border-radius: 6px;
}

.suggestion-item {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--fg-dim);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  transition: all 0.2s ease;
  font-family: var(--font-mono);
}

.suggestion-item:hover,
.suggestion-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.suggestion-item .cmd-name {
  font-weight: 600;
}

/* --- Cursor ------------------------------------------------ */
.cursor-blink {
  color: var(--accent);
  font-size: var(--fs-sm);
  margin-left: 1px;
}

/* --- Terminal Hint ----------------------------------------- */
.terminal-hint {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  letter-spacing: 0.5px;
  animation: fadeIn 1s ease 3s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 768px) {
  .terminal-wrapper {
    margin-top: calc(var(--nav-height) + var(--space-5));
    padding: 0 var(--space-3);
  }

  .terminal-body {
    padding: var(--space-4);
    min-height: 400px;
    max-height: 65vh;
  }

  .ascii-art {
    font-size: 0.38rem;
  }
}

@media (max-width: 480px) {
  .ascii-art {
    font-size: 0.3rem;
  }

  .terminal-body {
    min-height: 350px;
  }
}