/* ============================================================================
   Executable Prompt shortcode styles
   Loaded conditionally on blog pages (see baseof.html).
   ============================================================================ */

/* Markdown surface inside executable-prompt shortcode responses. */
.prompt-md { line-height: 1.6; word-break: break-word; }
.prompt-md > *:first-child { margin-top: 0; }
.prompt-md > *:last-child { margin-bottom: 0; }
.prompt-md p { margin: 0.5em 0; }
.prompt-md h1,
.prompt-md h2,
.prompt-md h3,
.prompt-md h4,
.prompt-md h5,
.prompt-md h6 {
  font-weight: 600;
  line-height: 1.25;
  margin: 1em 0 0.4em;
  color: #e6f0ff;
}
.prompt-md h1 { font-size: 1.25rem; }
.prompt-md h2 { font-size: 1.15rem; }
.prompt-md h3 { font-size: 1.05rem; }
.prompt-md h4,
.prompt-md h5,
.prompt-md h6 { font-size: 1rem; }
.prompt-md strong { font-weight: 700; color: #ffffff; }
.prompt-md em { font-style: italic; }
.prompt-md a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prompt-md a:hover { color: #93c5fd; }
.prompt-md ul,
.prompt-md ol {
  padding-left: 1.4em;
  margin: 0.5em 0;
}
.prompt-md ul { list-style: disc; }
.prompt-md ol { list-style: decimal; }
.prompt-md li { margin: 0.2em 0; }
.prompt-md li > ul,
.prompt-md li > ol { margin: 0.2em 0; }
.prompt-md code {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #bfdbfe;
}
.prompt-md pre {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  padding: 0.75em 1em;
  margin: 0.6em 0;
  overflow-x: auto;
}
.prompt-md pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: #dbeafe;
  font-size: 0.85em;
}
.prompt-md blockquote {
  border-left: 3px solid rgba(96, 165, 250, 0.5);
  padding: 0.2em 0.9em;
  margin: 0.6em 0;
  color: #cbd5e1;
  font-style: italic;
}
.prompt-md hr {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  margin: 1em 0;
}
.prompt-md table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 0.9em;
}
.prompt-md th,
.prompt-md td {
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 0.4em 0.7em;
  text-align: left;
}
.prompt-md th {
  background: rgba(15, 23, 42, 0.6);
  font-weight: 600;
}

/* Subtle scrollbar for the fixed-height response area. */
.response-scroll::-webkit-scrollbar { width: 8px; }
.response-scroll::-webkit-scrollbar-track { background: transparent; }
.response-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 4px;
}
.response-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}
.response-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.4) transparent;
}

/* Fade + slide-up animation when the response stage transitions from
   "waiting" to "answered", and on every tab switch. 12px lift, 280ms ease-out. */
@keyframes prompt-response-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.executable-prompt .response-content.response-enter {
  animation: prompt-response-enter 280ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .executable-prompt .response-content.response-enter {
    animation: none;
  }
}

/* Reveal the copy button in the post-execution chat frame only on hover/focus. */
.executable-prompt.executed .chat-frame:hover .copy-prompt-btn,
.executable-prompt.executed .chat-frame:focus-within .copy-prompt-btn {
  opacity: 1;
}