/* 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, drawn from the Claude Code desktop app with
   its logo left out: the warm backdrop, a
   white input with the commands pasted in, return and mic at the bottom
   right, quiet so they never compete with the text, and the status row under it (folder,
   permission mode, model, context ring). 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: 2.25rem 1.25rem 0;
  background: #faf9f7;
}
.lesson-prompt-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem 1.25rem;
  background: #ffffff;
  border: 1px solid #d6d4cd;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(31, 30, 27, 0.06);
}
.lesson-prompt-icon-btn {
  flex: none;
  width: 17px;
  height: 17px;
  margin-bottom: 0.3rem;
  color: #b3b1aa;
}
.post-body .lesson-prompt-chat .lesson-prompt-text,
.lesson-prompt-chat .lesson-prompt-text {
  flex: 1;
  min-width: 0;
  padding: 0 56px 0.25rem 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; }
.lesson-prompt-chat-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem 0.7rem;
  font-size: 0.8125rem;
  color: #8a8880;
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
}
.lesson-prompt-chat-foot .is-dim { color: #b3b1aa; margin-left: -0.5rem; }
.lesson-prompt-folder {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lesson-prompt-folder svg { width: 15px; height: 15px; }
.lesson-prompt-model { margin-left: auto; }
.lesson-prompt-context { flex: none; width: 15px; height: 15px; }

@media (max-width: 30rem) {
  .lesson-prompt-chat-foot > span:not(.lesson-prompt-folder):not(.lesson-prompt-model) { display: none; }
}

@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:not([data-theme="light"]) .lesson-prompt-icon-btn,
  :root:not([data-theme="light"]) .lesson-prompt-chat-foot .is-dim { color: #6f6d67; }
  :root:not([data-theme="light"]) .lesson-prompt-chat-foot { color: #9a988f; }
}
: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; }
:root[data-theme="dark"] .lesson-prompt-icon-btn,
:root[data-theme="dark"] .lesson-prompt-chat-foot .is-dim { color: #6f6d67; }
:root[data-theme="dark"] .lesson-prompt-chat-foot { color: #9a988f; }

/* 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.25rem 0;
}
/* A pre sets a mono font; the title and status row are app chrome. */
pre.is-agent-prompt > .code-file,
pre.is-agent-prompt .lesson-prompt-chat-foot {
  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;
}