/*
 * dwmd-promptbox.css — the prompt box a ```promptbox fence renders into.
 *
 * WHY HERE AND NOT IN dwtheme: the box is a dwmarkdown feature — its markup is
 * built by this plugin's JS and exists wherever dwmarkdown renders Markdown, on
 * any of the three sites, loaded only on a page that has a box. Keeping the CSS
 * next to the markup that needs it means the two can never ship apart. It holds
 * NO colours or sizes of its own: every value is a dwtheme token (tokens.css),
 * so light, dark ("night") and warm-sand follow the theme with no rule here. The
 * fallbacks after each var() are the wgnrstyle light values, for a theme without
 * the tokens.
 *
 * THE SAME CARD AS THE SUPPORT BOX (factory 4313, DW: "Could you adapt or remove
 * the CSS so the box fits with the other boxes?"). dwtheme's own CTA-card
 * primitive — site-custom.scss, ".widget_dw_theme_shoplinks_widget.dw-in-post,
 * .widget_dw_mailerlite_subscribe_widget.dw-in-post, .widget_dw_html_widget.dw-in-post"
 * — is the "Weiterschreiben, Wegner!" box's own look: border 1px solid --rule,
 * background --bg-2, padding 22px 24px, margin 36px 0, and a title at --fs-body
 * / --fw-semibold / -0.01em. That selector can't literally be shared (a
 * promptbox is not one of those three widgets), so .dw-promptbox is built on the
 * IDENTICAL values instead — same ground, same border, same padding, same
 * spacing, same title family one step quieter (the label names a form field,
 * not the card itself; --fs-small / --ink-soft rather than --fs-body / --ink).
 * Body text follows the support box's own choice, not the essay's: dwtheme's
 * prose rule (_typography.scss) puts long-form ESSAY prose in the serif at
 * --fs-prose, and everything else — headings, chrome, the shoplinks/subscribe
 * boxes — stays sans at --fs-body/1.7. A promptbox sits INSIDE the essay's
 * .widget_dw_content_widget, so without the explicit family/size/leading below
 * it would inherit the serif prose face instead of matching its neighbour.
 *
 * THE AI BUTTONS RIDE dwtheme's OWN BUTTON PRIMITIVE (.lp-btn, primitives.css —
 * loaded globally, every dw* surface). `dwmd-promptbox.js` puts `lp-btn` on
 * every button; this file adds only what that primitive does not already cover:
 * an opaque --bg fill so the button still reads against the card's own --bg-2
 * ground (dwtheme's own convention for a control nested in a sunken card — see
 * ".dw-ml input[type=email]" in site-custom.scss, same fix for the same
 * problem), a stretch-to-fill layout for the row, the disabled state (.lp-btn
 * has none — it is not normally a toggle a script disables), the dashed "copy"
 * variant, and a focus-visible ring (the pattern dwtheme's other buttons use —
 * dialog.css, shell.css — since .lp-btn itself does not add one).
 *
 * Square everywhere except the buttons and sample chips: rounding is for
 * buttons only (--r-control), never the card itself (--r-card is 0 by design).
 */

.dw-promptbox {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 36px 0;
  padding: 22px 24px;
  border: 1px solid var(--rule, #e5e5e8);
  border-radius: var(--r-card, 0);
  background: var(--bg-2, #f6f6f7);
  /* Opts the box OUT of the essay's serif prose face (see the class comment
     above) and onto the support box's own sans/body-size/1.7 leading. */
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-body, 1.125rem);
  line-height: 1.7;
}

/* Before the JS runs (and without it) the fallback is the theme's own quotation. */
.dw-promptbox .dw-promptbox-fallback blockquote {
  margin: 0;
}

.dw-promptbox .dw-promptbox-label {
  display: block;
  margin: 0;
}

/* The card's title, one step quieter than the support box's own (--fs-body /
   --ink): this label names the field below it, not the card itself. Same
   family otherwise — same weight, same tracking — so it reads as this card's
   quieter cousin, not a style of its own. */
.dw-promptbox .dw-promptbox-label-text {
  display: block;
  margin: 0 0 0.5rem;
  font-size: var(--fs-small, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: -0.01em;
  color: var(--ink-soft, #52525b);
}

.dw-promptbox .dw-promptbox-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 4.25rem;
  margin: 0;
  /* Same padding as the support box's own e-mail field (.dw-ml input[type=email]). */
  padding: 11px 13px;
  border: 1px solid var(--rule, #e5e5e8);
  border-radius: var(--r-card, 0);
  background: var(--bg, #fff);
  color: var(--ink, #18181b);
  /* Rides the container's --fs-body (18px): at 16px or more iOS does not zoom
     the page on focus. */
  font: inherit;
  resize: vertical;
}

.dw-promptbox .dw-promptbox-input::placeholder {
  color: var(--ink-mute, #9a9aa3);
  opacity: 1;
}

.dw-promptbox .dw-promptbox-input:focus {
  outline: 2px solid var(--rubric, rgb(113, 5, 0));
  outline-offset: -1px;
  border-color: var(--rubric, rgb(113, 5, 0));
}

/* Beispiele: one-click sample-input chips (factory 4313b). Rounded like the
   buttons, but lighter — no fill, thinner weight — so a chip reads as a
   suggestion to try, not as the primary action the AI buttons are. The
   support box has no equivalent, so there is no primitive to share here. */
.dw-promptbox .dw-promptbox-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.dw-promptbox .dw-promptbox-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--rule, #e5e5e8);
  border-radius: var(--r-control, 8px);
  background: transparent;
  color: var(--ink-soft, #52525b);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-small, 0.875rem);
  font-weight: var(--fw-regular, 400);
  line-height: var(--lh-snug, 1.3);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color var(--dur-fast, 0.15s), border-color var(--dur-fast, 0.15s);
}

.dw-promptbox .dw-promptbox-chip:hover,
.dw-promptbox .dw-promptbox-chip:focus-visible {
  border-color: var(--rubric, rgb(113, 5, 0));
  color: var(--rubric, rgb(113, 5, 0));
}

.dw-promptbox .dw-promptbox-chip:focus-visible {
  outline: 2px solid var(--rubric, rgb(113, 5, 0));
  outline-offset: 2px;
}

.dw-promptbox .dw-promptbox-samples-static {
  margin: 0.5rem 0 0;
  font-size: var(--fs-small, 0.875rem);
  color: var(--ink-soft, #52525b);
}

.dw-promptbox .dw-promptbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

/* The AI buttons: dwtheme's .lp-btn (assets/js gives every button that class)
   supplies shape, type, border, colour and hover/focus-visible already — see
   the file comment for what is added here and why. */
.dw-promptbox .dw-promptbox-btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  background: var(--bg, #fff);
}

.dw-promptbox .dw-promptbox-btn:focus-visible {
  outline: 2px solid var(--rubric, rgb(113, 5, 0));
  outline-offset: 2px;
}

.dw-promptbox .dw-promptbox-btn:disabled {
  cursor: not-allowed;
  background: transparent;
  --lp-btn-fg: var(--ink-mute, #9a9aa3);
}

.dw-promptbox .dw-promptbox-btn--copy {
  border-style: dashed;
  border-color: var(--ink-mute, #9a9aa3);
}

.dw-promptbox .dw-promptbox-status {
  margin: 0.75rem 0 0;
  font-size: var(--fs-small, 0.875rem);
  line-height: 1.7;
  color: var(--positive-fg, #1c7a3e);
}

.dw-promptbox .dw-promptbox-status:empty {
  display: none;
}

.dw-promptbox .dw-promptbox-status.is-error {
  color: var(--rubric, rgb(113, 5, 0));
}

.dw-promptbox .dw-promptbox-prompt {
  margin-top: 0.875rem;
  font-size: var(--fs-small, 0.875rem);
  color: var(--ink-soft, #52525b);
}

.dw-promptbox .dw-promptbox-prompt summary {
  cursor: pointer;
  width: max-content;
  max-width: 100%;
}

.dw-promptbox .dw-promptbox-prompt-text {
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--rule, #e5e5e8);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  user-select: all;
}

.dw-promptbox .dw-promptbox-slot {
  padding: 0 0.15em;
  background: var(--mark, #f3e7e6);
  color: var(--ink, #18181b);
}