/* Copied from docs/ref/home-console-reference.html.
   Scoped to the home preview so the rest of home.jsp remains unchanged. */
.fa-preview-placeholder {
  position: relative;
  height: 43.75rem;
  aspect-ratio: auto;
  display: block;
  padding: 0;
  background:
    radial-gradient(circle at 82% 4%, rgba(104,116,255,.10), transparent 34%),
    #0b0e15;
  overflow: hidden;
  text-align: left;
}

.fa-preview-placeholder::before {
  content: none;
}

.fa-preview-placeholder .fa-terminal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fa-preview-placeholder .fa-terminal-scroll {
  position: absolute;
  inset: 0 0 38px 0;
  padding: 2rem;
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.63;
  color: #d7deea;
}

.fa-preview-placeholder .fa-line {
  min-height: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fa-preview-placeholder .fa-prompt {
  color: #7f8cff;
  font-weight: 800;
}

.fa-preview-placeholder .fa-command { color: #e4e9f2; }
.fa-preview-placeholder .fa-muted { color: #7f899b; }
.fa-preview-placeholder .fa-key { color: #94a5ff; }
.fa-preview-placeholder .fa-string { color: #b8d8c2; }

.fa-preview-placeholder .fa-api-url {
  color: #7dd3fc;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(125,211,252,.28);
}

.fa-preview-placeholder .fa-answer {
  color: #f8fafc;
  margin: 2px 0;
}

.fa-preview-placeholder .fa-question {
  color: #f0abfc;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(240,171,252,.18);
}

.fa-preview-placeholder .fa-json-key { color: #a5b4fc; }
.fa-preview-placeholder .fa-json-string { color: #fcd34d; }
.fa-preview-placeholder .fa-json-number { color: #f9a8d4; }
.fa-preview-placeholder .fa-json-bool { color: #86efac; }
.fa-preview-placeholder .fa-success { color: #9ab4ff; }

.fa-preview-placeholder .fa-thinking {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8791a5;
}

.fa-preview-placeholder .fa-spinner {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(138,151,181,.28);
  border-top-color: #8998ff;
  border-radius: 50%;
  animation: fa-console-spin .8s linear infinite;
}

@keyframes fa-console-spin {
  to { transform: rotate(360deg); }
}

.fa-preview-placeholder .fa-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #8a97ff;
  animation: fa-console-blink .78s steps(1) infinite;
}

@keyframes fa-console-blink {
  0%, 47% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

.fa-preview-placeholder .fa-statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(8,11,17,.94);
  color: #707b90;
  font: 10px/1 "SFMono-Regular", Consolas, monospace;
}

.fa-preview-placeholder .fa-status-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fa-preview-placeholder .fa-online {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7687ff;
  box-shadow: 0 0 8px rgba(118,135,255,.65);
}

.fa-preview-placeholder .fa-stepdots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.fa-preview-placeholder .fa-stepdots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #303849;
  transition: .25s;
}

.fa-preview-placeholder .fa-stepdots span.active {
  background: #8795ff;
  transform: scale(1.3);
}

.fa-preview-placeholder .fa-scene-title {
  position: absolute;
  z-index: 1;
  right: 15px;
  top: 14px;
  color: #697386;
  font: 10px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .04em;
}

@media (max-width: 47.5rem) {
  .fa-preview-placeholder {
    height: clamp(30rem, 130vw, 43.75rem);
  }
}