/* "Ask anything else": the AI row at the end of the Common Questions list (js/ask.js).
   Resting, it looks like one more question row: the same thin divider, gray placeholder text, and a
   thin arrow where the other rows have their plus. Clicked, the row becomes a text box with a thin
   rounded outline and a round dark button; the outline grows outward so the words don't move.
   Answers appear as plain text under the box. No accent colour: black, greys and hairlines only. */

.faq-ask {
  display: none;            /* shown by js/ask.js, so nobody without JavaScript sees a box that can't work */
  border-top: 1px solid #ddd;

  /* Sizes on phones. The outline sits --bleed outside the list's edges. */
  --bleed: 10px;
  --pad-y: 11px;            /* gap between the outline and the words */
  --gap-y: 8px;             /* gap between the dividers and the outline */
  --line: 25px;             /* one line of the question text */
}
@media (min-width: 560px) {
  .faq-ask { --bleed: 16px; --pad-y: 9px; --gap-y: 10px; --line: 30px; }
}
.js .faq-ask.is-ready { display: block; }

.faq-ask-box {
  display: flex;
  align-items: flex-end;    /* the button stays on the last line if a question wraps */
  margin: var(--gap-y) calc(-1 * var(--bleed));
  padding: var(--pad-y) calc(var(--bleed) - 1px);
  border: 1px solid transparent;
  border-radius: 24px;
  cursor: text;
  transition: border-color 0.25s ease-in-out;
}

/* The question itself, in the same type as the question rows above it */
.faq-ask-input {
  flex: 1;
  min-width: 0;
  height: var(--line);
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: var(--line);
  letter-spacing: -0.01em;
  resize: none;
  overflow: hidden;
}
@media (min-width: 560px) { .faq-ask-input { font-size: 24px; } }

.faq-ask-input::placeholder {
  color: #9a9a9a;
  opacity: 1;
  transition: color 0.25s ease-in-out;
}

/* The arrow button. Resting: a thin arrow in line with the plus signs above. Active: a dark circle. */
.faq-ask-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: calc((var(--line) - 36px) / 2) -10px calc((var(--line) - 36px) / 2) 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1e1f2b;
  cursor: pointer;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, margin 0.25s ease-in-out;
}
.faq-ask-arrow { display: block; transition: transform 0.25s ease-in-out; }
.faq-ask-button:focus-visible { outline: 1px solid #1e1f2b; outline-offset: 2px; }

/* Stop: a small square inside the circle, shown while an answer is on its way */
.faq-ask-stop { display: none; width: 10px; height: 10px; border-radius: 1px; background: currentColor; }
.faq-ask.is-busy .faq-ask-arrow { display: none; }
.faq-ask.is-busy .faq-ask-stop { display: block; }

/* Resting hover: the placeholder darkens and the arrow nudges right, like the site's other links */
@media (hover: hover) and (pointer: fine) {
  .faq-ask:not(.is-active) .faq-ask-box:hover .faq-ask-input::placeholder { color: #1e1f2b; }
  .faq-ask:not(.is-active) .faq-ask-box:hover .faq-ask-arrow { transform: translateX(4px); }
  .faq-ask.is-active .faq-ask-button:hover { background: #000; }
}

/* ---------- Active: clicked into, or holding a question or an answer ---------- */
.faq-ask.is-active .faq-ask-box { border-color: #c8c8c8; }
.faq-ask.is-active .faq-ask-box:focus-within { border-color: #1e1f2b; }
.faq-ask.is-active .faq-ask-button {
  margin-right: calc(7px - var(--bleed));   /* 6px in from the outline, so the circle sits evenly inside the corner */
  background: #1e1f2b;
  color: #fff;
}
.faq-ask.is-active .faq-ask-arrow path { stroke-width: 1.5; }

/* ---------- Status line while Claude thinks, with a soft shimmer sweeping across ---------- */
.faq-ask-status {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  color: #8a8a8a;
}
.faq-ask-status[hidden] { display: none; }
.faq-ask-status.is-thinking {
  background: linear-gradient(90deg, #8a8a8a 0%, #8a8a8a 38%, #dcdcdc 50%, #8a8a8a 62%, #8a8a8a 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: faq-ask-shimmer 1.8s linear infinite;
}
@keyframes faq-ask-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* ---------- The answer: plain text on the page, new words fading in ---------- */
.faq-ask-answer {
  max-width: 640px;
  padding-right: 40px;
  font-size: 18px;
  line-height: 25px;
}
.faq-ask-answer:empty { display: none; }
.faq-ask-answer p,
.faq-ask-answer ul { margin: 0 0 12px; }
.faq-ask-answer ul { padding-left: 20px; }
.faq-ask-answer li { margin: 0 0 4px; }
.faq-ask-answer li::marker { color: #9a9a9a; }
.faq-ask-answer a { color: inherit; }
.faq-ask-answer .is-message { color: #666; }
.faq-ask-word { animation: faq-ask-fade 0.5s ease-out both; }
@keyframes faq-ask-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- The small note, shown only once someone clicks into the box ---------- */
.faq-ask-note {
  display: none;
  max-width: 640px;
  margin: 2px 0 0;
  padding-bottom: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: #8a8a8a;
}
.faq-ask.is-active .faq-ask-note { display: block; animation: faq-ask-fade 0.3s ease-out both; }

/* The bot check (Cloudflare Turnstile) is invisible; this only takes space if it ever needs a click */
.faq-ask-check:empty { display: none; }
.faq-ask-check { margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .faq-ask-status.is-thinking { animation: none; background: none; color: #8a8a8a; }
  .faq-ask-word,
  .faq-ask.is-active .faq-ask-note { animation: none; }
  .faq-ask-box,
  .faq-ask-button,
  .faq-ask-arrow,
  .faq-ask-input::placeholder { transition: none; }
}