/* ============================================================
   TERMINAL.CSS — Code blocks, Terminal aesthetic, API demo
   ============================================================ */

/* ---------- Terminal Window ---------- */
.terminal {
  background: #020204;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 0 40px rgba(0,0,0,0.4);
  font-family: var(--font-mono);
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #0a0a0f;
  border-bottom: 1px solid var(--color-border);
}

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

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

.terminal-dot-red    { background: #ff5f57; }
.terminal-dot-yellow { background: #ffbd2e; }
.terminal-dot-green  { background: #28c940; }

.terminal-title {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin-left: var(--space-3);
  letter-spacing: 0.05em;
}

.terminal-body {
  padding: var(--space-6);
  min-height: 200px;
  position: relative;
  overflow: auto;
}

/* ---------- Terminal Output Text ---------- */
.terminal-line {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: 2px;
}

.terminal-prompt {
  color: var(--color-green);
  flex-shrink: 0;
  user-select: none;
}

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

.terminal-comment {
  color: var(--color-text-dim);
  font-style: italic;
}

/* ---------- JSON Syntax Highlighting ---------- */
.json-output {
  font-size: var(--text-sm);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.json-key     { color: var(--color-cyan); }
.json-string  { color: var(--color-green); }
.json-number  { color: #ff8c66; }
.json-boolean { color: var(--color-purple); }
.json-null    { color: var(--color-text-dim); }
.json-bracket { color: var(--color-text-muted); }

/* ---------- Status outputs ---------- */
.terminal-success { color: var(--color-green); }
.terminal-error   { color: var(--color-red); }
.terminal-warning { color: var(--color-orange); }
.terminal-info    { color: var(--color-cyan); }

/* ---------- Loading animation in terminal ---------- */
.terminal-loading {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.terminal-loading::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ---------- Inline Code ---------- */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-cyan);
  background: var(--color-cyan-ghost);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,245,255,0.15);
}

/* ---------- Code Block ---------- */
pre {
  background: #020204;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow-x: auto;
  position: relative;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Language tag */
pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Solidity Syntax in Code Block ---------- */
.hljs-keyword    { color: var(--color-purple); }
.hljs-function   { color: var(--color-cyan); }
.hljs-string     { color: var(--color-green); }
.hljs-number     { color: #ff8c66; }
.hljs-comment    { color: var(--color-text-dim); font-style: italic; }
.hljs-type       { color: #7ee7b2; }
.hljs-built-in   { color: var(--color-cyan-dim); }

/* ---------- API Demo specific ---------- */
.api-demo-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-6);
  align-items: start;
}

.api-form-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.api-result-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

/* Response time indicator */
.response-time {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  text-align: right;
  margin-top: var(--space-2);
}

.response-time span {
  color: var(--color-green);
}

/* ---------- API Key display ---------- */
.api-key-display {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #020204;
  border: 1px solid var(--color-border-glow);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.api-key-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-green);
  letter-spacing: 0.05em;
  word-break: break-all;
}

.api-key-value.masked {
  color: var(--color-text-dim);
  letter-spacing: 0.2em;
}