/* Every agent prompt on the site, the LessonPrompt widget and a ```text
   Agent block in a post (app/lib/render-post.ts), holds an agent app's
   composer under its title bar: a warm backdrop and a white input with the
   commands pasted in, and nothing else, so the command is the box. The
   widget's platform and View script stay in its own footer bar. Lines never
   wrap: one command is one line, and the fade on the right says there is
   more, as in the terminal boxes. The text carries right padding as wide as
   the fade, so scrolled to the end, the last characters clear it. */
.lesson-prompt-chat {
  padding: 0.75rem;
  background: #faf9f7;
}
.lesson-prompt-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid #d6d4cd;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(31, 30, 27, 0.06);
}
.post-body .lesson-prompt-chat .lesson-prompt-composer > pre,
.lesson-prompt-chat .lesson-prompt-composer > pre,
.lesson-prompt-chat .lesson-prompt-composer > textarea,
.lesson-prompt-chat .lesson-prompt-composer > input {
  flex: 1;
  min-width: 0;
}
.post-body .lesson-prompt-chat .lesson-prompt-text,
.lesson-prompt-chat .lesson-prompt-text {
  flex: 1;
  min-width: 0;
  padding: 0 56px 0 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: #1f1e1b;
  white-space: pre;
  overflow-x: auto;
}
/* In a post the text is a code, not a pre, inside the composer's div, so
   site.css's inline-code rule (:not(pre) > code) matches it and pulls its
   spaces in by 0.3em, slamming the words together. Prompt text is prose:
   normal spacing, wherever it is drawn. */
.lesson-prompt-text {
  word-spacing: normal;
}
.lesson-prompt-url { color: #2b62b8; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lesson-prompt-chat { background: #1f1e1d; }
  :root:not([data-theme="light"]) .lesson-prompt-composer { background: #30302e; border-color: rgba(255, 255, 255, 0.12); }
  :root:not([data-theme="light"]) .lesson-prompt-chat .lesson-prompt-text { color: #f5f4ef; }
  :root:not([data-theme="light"]) .lesson-prompt-url { color: #7fb2f0; }
}
:root[data-theme="dark"] .lesson-prompt-chat { background: #1f1e1d; }
:root[data-theme="dark"] .lesson-prompt-composer { background: #30302e; border-color: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .lesson-prompt-chat .lesson-prompt-text { color: #f5f4ef; }
:root[data-theme="dark"] .lesson-prompt-url { color: #7fb2f0; }

/* A ```text Agent block: the pre is only the frame, so the chat reaches its
   edges under the title bar. */
pre.is-prompt.is-agent-prompt,
pre.is-prompt.is-agent-prompt.code-fence,
.post-body pre.is-prompt.is-agent-prompt,
.post-body pre.is-prompt.is-agent-prompt.code-fence {
  --pre-pad-y: 0px;
  --pre-pad-x: 1.25rem;
  padding: 0;
  overflow: hidden;
}
/* The pre has no padding, so the bar's usual pull past it
   (pre.has-file > .code-file in copy-code-buttons.css, which imports this
   file and so comes later) would push the icon and the copy button out past
   the edges. Qualified to outrank it; the bar's padding is the widget's
   (.lesson-prompt-bar), so both boxes inset their ends the same. */
pre.has-file.is-prompt.is-agent-prompt > .code-file {
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  border-radius: 0;
}
.post-body pre.is-agent-prompt .lesson-prompt-chat .lesson-prompt-text,
pre.is-agent-prompt .lesson-prompt-chat .lesson-prompt-text {
  display: block;
  padding: 0 56px 0 0;
}
/* A pre sets a mono font; the title is app chrome. */
pre.is-agent-prompt > .code-file {
  font-family: var(--font-sans, system-ui, sans-serif);
  letter-spacing: 0;
}

/* The commands are text you can select: a text cursor over them, and a
   drag selects instead of copying. A plain click still copies the box. */
.lesson-prompt-chat .lesson-prompt-text {
  cursor: text;
  -webkit-user-select: text;
          user-select: text;
}

/* Phones: a tighter frame, so the composer and its text get the width. */
@media (max-width: 700px) {
  .lesson-prompt-chat {
    padding: 0.5rem;
  }
  .lesson-prompt-composer {
    padding: 0.6rem 0.75rem;
  }
}

/* The pasted text a shade softer and smaller, so the box reads as a quiet
   preview rather than a block of heavy type. */
.post-body .lesson-prompt-chat .lesson-prompt-text,
.lesson-prompt-chat .lesson-prompt-text {
  font-size: 0.9375rem;
  color: #4a4944;
}

/* A prompt to copy is one box: no input field nested inside it, just the
   text on the page's own background, with the terminal box's 1rem above
   and below (this plus the text's own padding). The ask box keeps
   its field, since there the reader types. The pre's selectors carry four
   classes so they outrank the dark-mode chat and composer rules above. */
.lesson-prompt.is-copyable.is-agent .lesson-prompt-chat,
pre.has-file.is-prompt.is-agent-prompt .lesson-prompt-chat {
  padding: 0.375rem 1.25rem;
  background: var(--bg);
}
.lesson-prompt.is-copyable.is-agent .lesson-prompt-composer,
pre.has-file.is-prompt.is-agent-prompt .lesson-prompt-composer {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}