/* css/terminal.css — Terminal simulation panel styles */

.terminal-wrapper {
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  margin-block-end: 1.5rem;
}

/* Terminal title bar */
.terminal-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--terminal-bg-elevated);
  border-block-end: 1px solid var(--terminal-border-soft);
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.terminal-dot-red    { background: var(--terminal-dot-red); }
.terminal-dot-yellow { background: var(--terminal-dot-yellow); }
.terminal-dot-green  { background: var(--terminal-dot-green); }

.terminal-titlebar-label {
  font-size: 0.75rem;
  color: var(--terminal-muted);
  margin-inline-start: 0.5rem;
  font-family: var(--font-sans);
}

/* Terminal body */
.terminal-body {
  padding: 1rem;
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--terminal-scrollbar) transparent;
}

/* Output lines */
.terminal-output {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-block-end: 0.5rem;
}

.terminal-line {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--terminal-text);
  direction: ltr;
  unicode-bidi: embed;
}

.terminal-line.prompt-line {
  color: var(--terminal-line-prompt);
}

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

.terminal-line.error-line {
  color: var(--terminal-line-error);
}

.terminal-line.success-line {
  color: var(--terminal-line-success);
}

.terminal-line.dim-line {
  color: var(--terminal-muted-dim);
}

/* Prompt row (input area) */
.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-block-start: 0.25rem;
}

.terminal-prompt-str {
  color: var(--terminal-line-success);
  font-size: 0.875rem;
  flex-shrink: 0;
  user-select: none;
  direction: ltr;
}

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--terminal-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  caret-color: var(--terminal-line-prompt);
  direction: ltr;
  unicode-bidi: embed;
}

.terminal-input:focus-visible {
  outline: 2px solid var(--terminal-outline-soft);
  outline-offset: 2px;
}

/* Cursor blink (visible when input is focused, CSS only) */
@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Terminal exercise status line */
.terminal-exercise-hint {
  padding: 0.6rem 1rem;
  background: var(--color-info-soft);
  border-block-start: 1px solid var(--terminal-info-border);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-info-text);
  direction: ltr;
}

.terminal-exercise-success {
  padding: 0.6rem 1rem;
  background: var(--color-success-soft);
  border-block-start: 1px solid var(--terminal-success-border);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--terminal-line-success);
}

.practice-support-card--expected {
  background: color-mix(in srgb, var(--terminal-bg-elevated) 64%, var(--color-info-soft) 36%);
  border-color: var(--terminal-info-border);
}

.practice-support-card--troubleshooting {
  background: color-mix(in srgb, var(--terminal-bg-elevated) 68%, var(--color-warning-soft) 32%);
  border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
}

/* Click to focus overlay message */
.terminal-wrapper:not(:focus-within) .terminal-input-row::after {
  content: '';
}

/* Focus ring on wrapper when inner input is focused */
.terminal-wrapper:focus-within {
  outline: 2px solid var(--terminal-outline-soft);
  outline-offset: 0;
}