/* ---- Run code (js/code-runner.js) ----
   A Run button in a code block's header, next to Copy, and the run's output under the code:
   a status line while it runs, stdout with stderr in the error colour, the value of the code,
   matplotlib figures, and a footnote that it ran in the browser. Colours come from chat.css. */
.code-head:has(.code-run) { gap: 4px; }
.code-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto; /* label on the left, Run and Copy together on the right */
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  cursor: pointer;
}
.code-run:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.code-run:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-run[data-running] { color: var(--text); }
.code-run svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.code-run[data-running] svg { fill: currentColor; }

.code-output {
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}
.code-output [hidden] { display: none !important; }
.code-output-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
}
.code-output-status:empty { display: none; }
/* A pulsing dot while loading or running; the final states have none. */
.code-output-status:not([data-state])::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: code-run-pulse 1.1s ease-in-out infinite;
}
.code-output-status[data-state="error"] { color: var(--error); }
@keyframes code-run-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
:root[data-motion="reduced"] .code-output-status::before { animation: none; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .code-output-status::before { animation: none; opacity: 0.7; }
}

.code-block .code-output .code-output-text {
  max-height: 360px;
  margin: 0;
  padding: 12px 16px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code-output-err { color: var(--error); }
.code-output-cut,
.code-output-value { color: var(--muted); }

.code-output-figures {
  display: grid;
  gap: 10px;
  padding: 4px 16px 12px;
}
.code-output-figures img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff; /* matplotlib draws on white; keeps transparent figures readable in dark mode */
}

.code-output-note {
  padding: 0 16px 10px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.72rem;
}

@media (max-width: 640px) {
  .code-run { padding: 6px 8px; } /* a larger touch target */
  .code-block .code-output .code-output-text,
  .code-output-status,
  .code-output-figures,
  .code-output-note { padding-left: 12px; padding-right: 12px; }
  .code-block .code-output .code-output-text { max-height: 300px; }
}