.terminal-profile-main {
  flex: 1;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 22px);
  display: flex;
}

.terminal-window {
  width: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  color: var(--color-profile-terminal-text);
  font-family: var(--site-font);
}

.terminal-session {
  height: 100%;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--color-accent);
  background:
    linear-gradient(color-mix(in srgb, var(--color-accent) 3%, transparent), color-mix(in srgb, var(--color-accent) 3%, transparent)),
    var(--color-profile-terminal-surface);
  color: var(--color-profile-terminal-text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 16%, transparent),
    0 0 42px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.terminal-session-bar,
.terminal-session-footer {
  min-height: 38px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--color-profile-terminal-muted);
  background: color-mix(in srgb, var(--color-profile-terminal-bg) 86%, transparent);
  font-size: 10px;
  line-height: 18px;
  letter-spacing: 0.08em;
}

.terminal-session-bar {
  border-bottom: 1px solid var(--color-profile-terminal-border);
  text-transform: uppercase;
}

#terminal-connection-status {
  color: var(--color-profile-terminal-muted);
}

#terminal-connection-status[data-state="ready"] {
  color: var(--color-profile-terminal-accent);
}

#terminal-connection-status[data-state="running"] {
  color: var(--color-warning);
}

#terminal-connection-status[data-state="error"] {
  color: var(--color-danger-action);
}

.terminal-session-footer {
  min-height: 34px;
  border-top: 1px solid var(--color-profile-terminal-border);
}

.terminal-session-footer > span {
  color: var(--color-profile-terminal-text);
  overflow-wrap: anywhere;
  text-transform: none;
}

.terminal-output {
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 3vw, 38px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--color-accent) 6%, transparent) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--color-accent) 6%, transparent) 31px 32px);
  color: var(--color-profile-terminal-output);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: normal;
  scrollbar-color: color-mix(in srgb, var(--color-danger-action) 50%, transparent) transparent;
}

.terminal-line {
  min-height: 1.65em;
  white-space: pre-wrap;
}

.terminal-line.is-static {
  white-space: normal;
}

.terminal-line.command {
  margin-top: 14px;
}

.terminal-line.normal,
.terminal-segment.normal {
  color: var(--color-profile-terminal-text);
}

.terminal-line.muted,
.terminal-segment.muted {
  color: var(--color-profile-terminal-muted);
}

.terminal-line.accent,
.terminal-segment.accent,
.terminal-line a {
  color: var(--color-profile-terminal-accent);
}

.terminal-line.error,
.terminal-segment.error {
  color: var(--color-profile-terminal-error-strong);
}

.terminal-segment.swift { color: var(--color-stack-swift); }
.terminal-segment.go { color: var(--color-stack-go); }
.terminal-segment.objective-c { color: var(--color-stack-objective-c); }
.terminal-segment.python { color: var(--color-stack-python); }
.terminal-segment.aws { color: var(--color-stack-aws); }
.terminal-segment.terraform { color: var(--color-stack-terraform); }
.terminal-segment.vault { color: var(--color-stack-vault); }
.terminal-segment.node { color: var(--color-stack-node); }

.terminal-input-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  border-top: 1px solid var(--color-profile-terminal-border);
  background: color-mix(in srgb, var(--color-profile-terminal-bg) 90%, transparent);
}

.terminal-input-row:focus-within {
  box-shadow: inset 0 0 0 1px var(--color-profile-terminal-accent);
}

.terminal-prompt {
  padding-left: 16px;
  display: flex;
  align-items: center;
  color: var(--color-profile-terminal-accent);
  font-size: clamp(11px, 0.9vw, 13px);
  white-space: nowrap;
}

.terminal-input-row input {
  width: 100%;
  min-width: 0;
  padding: 16px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-profile-terminal-text);
  caret-color: var(--color-profile-terminal-accent);
}

.terminal-input-row input::placeholder {
  color: var(--color-profile-terminal-dim);
}

.terminal-input-row button {
  min-width: 90px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--color-profile-terminal-border);
  background: transparent;
  color: var(--color-profile-terminal-accent);
  cursor: pointer;
  text-transform: uppercase;
}

.terminal-input-row button:hover:not(:disabled) {
  background: var(--color-profile-terminal-accent);
  color: var(--color-accent-ink);
}

.terminal-input-row :is(input, button):disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 680px) {
  .terminal-profile-main {
    padding: 7px;
  }

  .terminal-window {
    min-height: 0;
  }

  .terminal-output {
    padding: 20px 16px;
  }

  .terminal-input-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .terminal-prompt {
    padding-left: 12px;
    font-size: 0;
  }

  .terminal-prompt::after {
    content: "$";
    font-size: 14px;
  }

  .terminal-input-row button {
    display: none;
  }
}