/* 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;
}
.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;
}
pre.is-agent-prompt > .code-file {
  margin: 0;
  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;
}