/* A prompt to paste into an AI agent: a light input box under the agent's
   window bar. It matches the ```text Agent
   blocks lessons draw with pre.is-prompt. */
.lesson-prompt {
  position: relative;
  margin: 1.25rem 0;
  background: var(--bg, #ffffff);
  color: var(--ink, #10283d);
  border: 1px solid var(--rule, rgba(16, 40, 61, 0.12));
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 40, 61, 0.04), 0 12px 32px rgba(16, 40, 61, 0.10);
  overflow: hidden;
}

.lesson-prompt-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  /* The warm off-white agent apps use, shared with the prompt blocks. */
  background: #f3f1ec;
  border-bottom: 1px solid rgba(31, 30, 27, 0.10);
  font-size: 0.75rem;
  color: var(--ink-soft, #4b5d6e);
}
/* The warm off-white is a light-mode colour; under the dark body it read as
   a cream strip with grey text washed out on it. In dark mode the bar takes
   the raised navy the install panel's chrome uses. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lesson-prompt-bar {
    background: #161f2a;
    border-bottom-color: rgba(255, 255, 255, 0.09);
  }
}
:root[data-theme="dark"] .lesson-prompt-bar {
  background: #161f2a;
  border-bottom-color: rgba(255, 255, 255, 0.09);
}


.lesson-prompt-title { flex: 1; min-width: 0; white-space: nowrap; }

.lesson-prompt-os { display: inline-flex; gap: 2px; }

.lesson-prompt-pill,
.lesson-prompt-pill:hover,
.lesson-prompt-pill:focus {
  height: 24px;
  min-height: 0;
  padding: 0 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--ink-soft, #4b5d6e);
  box-shadow: none;
}
.lesson-prompt-pill:hover { color: var(--ink, #10283d); }
.lesson-prompt-pill.is-on,
.lesson-prompt-pill.is-on:hover {
  background: var(--bg, #ffffff);
  border-color: var(--rule, rgba(16, 40, 61, 0.15));
  color: var(--ink, #10283d);
}

.lesson-prompt-copy,
.lesson-prompt-copy:hover,
.lesson-prompt-copy:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule, rgba(16, 40, 61, 0.18));
  border-radius: var(--radius-sm);
  color: var(--ink-soft, #4b5d6e);
  box-shadow: none;
}
/* View script: the script this box pipes into a shell, for the reader who
   reads before running. Quiet, in the bar's own colour, beside copy. */
.lesson-prompt-view {
  font-size: 0.75rem;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.lesson-prompt-view:hover { color: var(--ink, #10283d); text-decoration: underline; }

.lesson-prompt-copy:hover { color: var(--ink, #10283d); border-color: var(--ink-soft, #4b5d6e); }
.lesson-prompt-copy.is-copied { color: var(--success); }
.lesson-prompt-copy svg { width: 14px; height: 14px; }

.post-body .lesson-prompt-text,
.lesson-prompt-text {
  margin: 0;
  /* The bottom padding is where an overlay scrollbar lands, under the last
     line rather than over it. */
  padding: 1rem 1.25rem 1.75rem;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}

/* One line stays one line and scrolls; a wrapped command reads as two. The
   fade on the right says there is more, the same as the install panel's. */
.lesson-prompt-text {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

/* The step comments in a terminal box: shown, never copied. */
.lesson-prompt-comment {
  color: #8a9199;
}

/* Click anywhere to copy. The box lifts off the page on hover to say so,
   like the install panel, without recolouring what you are reading. */
.lesson-prompt {
  cursor: pointer;
}
.lesson-prompt:hover {
  box-shadow: 0 1px 2px rgba(16, 40, 61, 0.04), 0 18px 40px -8px rgba(16, 40, 61, 0.22);
}
/* Selected text keeps an explicit colour; see the ::selection note in
   app/lib/copy-code-buttons.css. */
.lesson-prompt ::selection {
  background: var(--accent-soft, #ebf6fc);
  color: #10283d;
}
@media (prefers-reduced-motion: no-preference) {
  .lesson-prompt { transition: box-shadow 140ms ease-out; }
}


/* Terminal mode is the same box as the agent's, light or dark with the
   page, the way VS Code draws its terminal in either theme. Only the icon
   and the mono text say it is a shell. */

/* The bar holds what the box is and copy. The platform and View script sit
   in a row under the text, where three pills and a link never crowd the
   title. */
.lesson-prompt-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--rule, rgba(16, 40, 61, 0.12));
  font-size: 0.75rem;
  color: var(--ink-soft, #4b5d6e);
  cursor: default;
}

/* On a phone the pills give way to a native select, which also gives a
   phone its own picker. */
.lesson-prompt-select { display: none; }

@media (max-width: 30rem) {
  .lesson-prompt-os { display: none; }

  .lesson-prompt-select {
    display: block;
    height: 26px;
    min-height: 0;
    padding: 0 1.5rem 0 0.6rem;
    font-size: 0.75rem;
    color: var(--ink, #10283d);
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--rule, rgba(16, 40, 61, 0.15));
    border-radius: 999px;
    box-shadow: none;
    width: auto;
  }
}

/* Each box carries the icon of what it is, a speech bubble for the agent
   chat and a prompt for a terminal, rather than window dots. */
.lesson-prompt-icon {
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lesson-prompt-icon.is-terminal-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6.5 8 3 11.5M8.5 11.5h4.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6.5 8 3 11.5M8.5 11.5h4.5'/%3E%3C/svg%3E");
}

.lesson-prompt.is-signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: default;
}
.lesson-prompt.is-signup:hover {
  box-shadow: 0 1px 2px rgba(16, 40, 61, 0.04), 0 12px 32px rgba(16, 40, 61, 0.10);
}
.lesson-prompt-signup-text {
  margin: 0;
  font-size: 1rem;
}
@media (max-width: 600px) {
  .lesson-prompt.is-signup {
    flex-direction: column;
    align-items: stretch;
  }
}