@import url("design-system/styles.css");

body {
  margin: 0;
}

.prompt-block {
  background: var(--code-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.prompt-header {
  align-items: center;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  font: 500 var(--text-2xs)/1 var(--font-sans);
  height: 32px;
  letter-spacing: var(--tracking-caps);
  padding: 0 12px;
  text-transform: uppercase;
}

.onboarding-prompt {
  background: var(--code-bg);
  color: var(--code-text);
  font: 400 var(--text-sm)/var(--leading-relaxed) var(--font-mono);
  margin: 0;
  max-height: 176px;
  overflow-y: auto;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.onboarding-prompt code {
  font: inherit;
}

.copy-prompt {
  align-items: center;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--accent-fg);
  cursor: pointer;
  display: inline-flex;
  font: var(--weight-medium) var(--text-md)/1 var(--font-sans);
  height: var(--control-lg);
  justify-content: center;
  margin-top: 16px;
  padding: 0 16px;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  user-select: none;
  width: 100%;
}

.copy-prompt:hover {
  background: var(--accent-hover);
}

.copy-prompt:active {
  background: var(--accent-active);
  transform: translateY(0.5px);
}

.copy-prompt:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}