/* Ask Tina4 on the landing page: search box, register CTA, suggestion pills,
   plus a pass over the floating chat widget's own input and buttons.

   This lives in docs/public/ and is pulled in with a <link> rather than an
   inline <style> in index.md ON PURPOSE. tina4press runs the markdown processor
   over the contents of an inline <style> or <script>, which wraps the CSS and
   the JS in <p> tags and silently breaks both. A tag with no inner content
   (<link href>, <script src>) has nothing to wrap, so it survives. */

/* ---- hero row: search box + register, side by side ---------------------- */

.tp-ask-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 10px;
}

.tp-ask-hero-form {
  display: flex;
  flex: 1 1 320px;
  min-width: 0;
  gap: 8px;
  background: var(--tp-bg-soft);
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tp-ask-hero-form:focus-within {
  border-color: var(--tp-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-brand) 18%, transparent);
}

.tp-ask-hero-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tp-fg);
  font: inherit;
  font-size: 15px;
  padding: 9px 0;
}

.tp-ask-hero-input::placeholder { color: var(--tp-fg-3); }
/* The native clear affordance sits under our submit button and looks broken. */
.tp-ask-hero-input::-webkit-search-cancel-button { display: none; }

.tp-ask-hero-go {
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  padding: 10px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  background: var(--tp-brand);
  color: #fff;
  transition: filter .15s ease;
}

.tp-ask-hero-go:hover { filter: brightness(1.08); }
.tp-ask-hero-go:active { filter: brightness(.95); }

/* .tp-cta carries a margin-top for prose callouts. Cancel it so the register
   button shares a baseline with the search box instead of dropping below. */
.tp-ask-hero-cta {
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- suggestion pills --------------------------------------------------- */

.tp-ask-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 34px;
}

.tp-ask-pill {
  border: 1px solid var(--tp-border);
  background: var(--tp-bg-soft);
  color: var(--tp-fg-2);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.tp-ask-pill:hover {
  border-color: var(--tp-brand);
  color: var(--tp-brand);
  background: color-mix(in srgb, var(--tp-brand) 8%, var(--tp-bg-soft));
}

.tp-ask-pill:focus-visible {
  outline: 2px solid var(--tp-brand);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .tp-ask-hero-form { flex-basis: 100%; }
  .tp-ask-hero-cta { flex: 1 1 100%; text-align: center; }
}

/* ---- inline answer ------------------------------------------------------ */
/* The answer renders here, on the page, rather than in the floating panel.
   Asking from the hero should not throw the reader into a corner popup. */

.tp-ask-answer[hidden] { display: none; }

.tp-ask-answer {
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: var(--tp-bg-soft);
  padding: 16px 18px;
  margin: 0 0 34px;
}

.tp-ask-answer.is-loading { border-style: dashed; }
.tp-ask-answer.is-error { border-color: color-mix(in srgb, #d9534f 45%, var(--tp-border)); }

.tp-ask-q {
  font-weight: 600;
  color: var(--tp-fg);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tp-border);
}

.tp-ask-a {
  color: var(--tp-fg-2);
  font-size: 15px;
  line-height: 1.65;
}

.tp-ask-a code {
  background: var(--tp-code-bg);
  border-radius: 5px;
  padding: 2px 5px;
  font-family: var(--tp-mono);
  font-size: 13.5px;
}

/* Tight, explicit paragraph rhythm. The site's global prose margins are sized
   for a full article and looked cavernous inside a compact answer card. */
.tp-ask-a p { margin: 0 0 10px; }
.tp-ask-a p:last-child { margin-bottom: 0; }

/* The code shell: a positioning context for the copy button. */
.tp-ask-a .tp-code {
  position: relative;
  margin: 4px 0 12px;
}

.tp-ask-a .tp-code:last-child { margin-bottom: 0; }

.tp-ask-a pre {
  /* --tp-code-bg is #f4f5f7 in light mode, which all but vanishes against the
     answer card's own soft background: the sample had no edge and read as
     loose text. A visible border plus a slightly deeper fill gives it one.
     color-mix keeps it derived from the theme, so dark mode still follows. */
  background: color-mix(in srgb, var(--tp-code-bg) 88%, var(--tp-fg) 6%);
  border: 1px solid var(--tp-border-2, var(--tp-border));
  border-radius: 9px;
  padding: 12px 14px;
  padding-right: 48px;   /* room for the copy button, so code never runs under it */
  overflow-x: auto;      /* a wide sample scrolls itself, never the page */
  margin: 0;
}

/* Mirrors the theme's own copy button: hidden until the block is hovered or
   the button is focused, so it never sits on top of the code while reading. */
.tp-ask-a .tp-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  opacity: 0;
  border: 1px solid var(--tp-border);
  border-radius: 7px;
  background: var(--tp-bg);
  color: var(--tp-fg-3);
  /* Square icon button: the SVG is centred, not baseline-aligned like text. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.tp-ask-a .tp-code:hover .tp-copy,
.tp-ask-a .tp-copy:focus-visible { opacity: 1; }
.tp-ask-a .tp-copy:hover { color: var(--tp-fg); border-color: var(--tp-brand); }
.tp-ask-a .tp-copy.tp-copied { color: var(--tp-brand); border-color: var(--tp-brand); opacity: 1; }

/* Touch has no hover, so the button would be unreachable. Always show it. */
@media (hover: none) {
  .tp-ask-a .tp-copy { opacity: 1; }
}

.tp-ask-a pre:last-child { margin-bottom: 0; }

.tp-ask-a pre code {
  display: block;
  line-height: 1.5;
  white-space: pre;   /* never re-wrap a code sample */
}

.tp-ask-a pre code { background: none; padding: 0; }

.tp-ask-thinking {
  color: var(--tp-fg-3);
  font-size: 14px;
  /* No spinner: a pulse costs nothing and cannot desynchronise from state. */
  animation: tp-ask-pulse 1.2s ease-in-out infinite;
}

@keyframes tp-ask-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tp-ask-thinking { animation: none; opacity: .7; }
}

/* ---- the floating chat widget's own input and buttons ------------------- */
/* The widget ships functional but plain: a square input with a default-looking
   submit. These bring it in line with the hero box above so the two read as one
   feature rather than two. Selectors only, no markup changes, so a tina4press
   upgrade that restyles the widget simply wins. */

.tp-chat-form {
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--tp-border);
}

.tp-chat-input {
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: var(--tp-bg-soft);
  color: var(--tp-fg);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tp-chat-input:focus {
  border-color: var(--tp-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-brand) 18%, transparent);
}

.tp-chat-form button[type="submit"] {
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--tp-brand);
  color: #fff;
  transition: filter .15s ease;
}

.tp-chat-form button[type="submit"]:hover { filter: brightness(1.08); }

.tp-chat-btn {
  border-radius: 999px;
  font-weight: 600;
  transition: filter .15s ease, transform .15s ease;
}

.tp-chat-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }