/* prompt card: what you type to the agent. one row. copy tucked in the corner.
   flat grey like the code figures on benji.org/drawesome */
.prompt {
  position: relative;
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  padding-inline-end: 52px; /* room for the copy control */
  border-radius: 12px;
  background: var(--gray-200);
}
@media (min-width: 1024px) { .prompt { margin-inline: -32px; padding-inline-start: 32px; } }
.prompt-body {
  display: flex;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-sm);
  line-height: 24px;
  color: var(--gray-1100);
}
.prompt-text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 72px; /* 3 lines at 24px line-height */
  overflow-y: auto;
  scrollbar-width: thin;
}
.prompt-text::-webkit-scrollbar { width: 6px; }
.prompt-text::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

/* long prompt cards: a 3-line preview with a fade, and an expand control in
   the bottom right corner. build.py adds .is-long and the button. */
.expand {
  position: absolute;
  bottom: var(--s-2);
  inset-inline-end: var(--s-2);
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-1000);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.expand::before { content: ""; position: absolute; inset: -6px; } /* 44px hit area */
@media (hover: hover) and (pointer: fine) {
  .expand:hover { background: var(--gray-300); color: var(--gray-1200); }
}
.expand:active { transform: scale(0.96); }
.expand svg { display: block; transition: transform 180ms ease-out; }
.prompt.is-long .expand { display: grid; }
.prompt.is-open .expand svg { transform: rotate(180deg); }
/* overflowing prompt cards: a fade over the third line. any card whose text
   runs past the 3-line window gets it (JS toggles .is-clipped by real
   overflow, not a character estimate); scrolling to the end lifts the fade
   so the last line reads. cards stay scrollable; expand (.is-open) shows all. */
.prompt.is-clipped:not(.is-open) .prompt-text {
  mask-image: linear-gradient(#000 55%, transparent);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
}
.prompt.is-clipped.is-at-end:not(.is-open) .prompt-text {
  mask-image: none;
  -webkit-mask-image: none;
}
.prompt.is-open .prompt-text {
  max-height: none;
}
.prompt-actions {
  position: absolute;
  top: var(--s-2);
  inset-inline-end: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.copy {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-1000);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.copy::before { content: ""; position: absolute; inset: -6px; } /* 44px hit area */
@media (hover: hover) and (pointer: fine) {
  .copy:hover { background: var(--gray-300); color: var(--gray-1200); }
}
.copy:active { transform: scale(0.96); }
.copy.is-done { color: var(--gray-1200); }
/* icon morph (from benji.org/drawesome): the two sheets of the copy glyph merge
   into one rounded square, then the check draws itself in. reverting waits for
   the check to undraw (.13s delay) before the sheets split apart. */
.copy-morph { display: block; overflow: visible; }
.copy-sheet {
  width: 10.5px;
  height: 10.5px;
  rx: 2px;
  transition:
    transform 0.12s ease-out,
    width 0.12s ease-out,
    height 0.12s ease-out,
    rx 0.12s ease-out;
}
.copy:not(.is-done) .copy-sheet { transition-delay: 0.13s; }
.copy.is-done .copy-sheet { width: 14.5px; height: 14.5px; rx: 7.25px; }
.copy.is-done .copy-sheet-back,
.copy.is-done .copy-sheet-mask { transform: translateY(-4px); }
.copy.is-done .copy-sheet-front { transform: translateX(-4px); }
.copy-check {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  opacity: 0;
  transition: stroke-dashoffset 0.1s ease-out, opacity 0s 0.1s;
}
.copy.is-done .copy-check {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 0.1s ease-out 0.09s, opacity 0s;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* prompt directly after a short lead-in paragraph sits closer to it */
p:has(+ .prompt) { margin-bottom: var(--s-2); }

/* prompts show in full, no 3-line preview (Ben, 22 Sep 2026).
   delete this block to bring back the preview, fade and expand control. */
.prompt-text { max-height: none; overflow-y: visible; }
.prompt.is-clipped .prompt-text { mask-image: none; -webkit-mask-image: none; }
.prompt.is-long .expand { display: none; }