/* navi-assistant.css - the assistant's two signals, 22-09-2026 (Matt's go).
   Two jobs, nothing else.
   1. the ask row must LOOK like a text box (today it reads as another question)
   2. one mark people already know means AI: the four-point sparkle
   Plus the answer arriving with a shimmer, the way every chat product does it. */

/* ---- 1. the ask row becomes a field ---- */
.qa form.qa-ask{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--n-0);border:1px solid var(--n-300);border-radius:var(--r-300);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  margin-top:var(--flow);border-top-color:var(--n-300);
  transition:border-color .15s, box-shadow .15s;
}
.qa form.qa-ask:focus-within{border-color:var(--m-500);box-shadow:0 0 0 3px rgba(119,150,224,.18)}

/* The star is the LOGO's own star, not a generic sparkle: the mark file used as
   an alpha mask, so it draws in one colour at any size. Two reasons over a hand
   drawn four-point star - it is already Navi's, so it reads as "Navi's
   assistant" rather than as a stock AI glyph, and it can never drift from the
   logo. The file's own fills (navy and sky) are ignored; only its silhouette is. */
:root{--navi-star:url("/assets/logo/navi-star.svg")}   /* root-absolute on purpose:
  the dev server serves the repo root, and the build copies kit CSS to the page
  root while the logo lands at /assets/..., so a relative path would resolve
  above the web root live and 404 with no error anywhere. */
.qa form.qa-ask .spark{flex:none;width:21px;height:21px;display:block;
  background:var(--m-600);
  -webkit-mask:var(--navi-star) center/contain no-repeat;
          mask:var(--navi-star) center/contain no-repeat}

/* body-sized, normal weight: a heading-weight placeholder is what made this
   read as another question in the list */
.qa form.qa-ask .qa-ask-input{
  flex:1 1 auto;min-width:0;border:0;background:none;padding:0;margin:0;
  font-family:Geist,sans-serif;font-size:var(--fs-300);line-height:var(--lh-300);
  letter-spacing:var(--ls-300);font-weight:var(--wt-400);color:var(--text-1);
  caret-color:var(--c-500);
}
.qa form.qa-ask .qa-ask-input::placeholder{color:var(--text-4);font-weight:var(--wt-400);opacity:1}
.qa form.qa-ask .qa-ask-input:focus{outline:none}

/* a filled button, not a grey ghost arrow */
.qa form.qa-ask .qa-ask-send{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin:0;border:0;border-radius:var(--r-200);
  background:var(--c-500);color:var(--m-950);padding:0;cursor:pointer;
  transition:background .15s, transform .1s;
}
.qa form.qa-ask .qa-ask-send:hover{background:var(--c-400)}
.qa form.qa-ask .qa-ask-send:active{transform:scale(.96)}
.qa form.qa-ask .qa-ask-send:disabled{opacity:.4;cursor:default}
.qa form.qa-ask .qa-ask-send:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- 2. an answer from the assistant ----
   Selectors are scoped `.qa form.qa-ask` and `.qa .qa-item` on purpose: both
   pages carry their own `.qa-item + .qa-item` and `.track .qa-ask` rules at two
   classes of specificity, and a single-class rule here loses to them silently. */
.qa .qa-item.qa-ai .q{display:flex;align-items:baseline;gap:8px}
.qa .qa-item.qa-ai .q::before{
  content:"";flex:none;width:19px;height:19px;align-self:center;
  background:var(--m-600);
  -webkit-mask:var(--navi-star) center/contain no-repeat;
          mask:var(--navi-star) center/contain no-repeat;
}

/* The link that closes the home Parent/Student panel carried a top hairline, so
   it butted straight against the new field's rounded bottom and stuck out past
   the corner (his arrow, 22-09). The field already closes the list; the rule is
   dropped and the link gets its own air. */
.faq-panel a.faq-more{border-top:0;padding-top:0;margin-top:var(--flow)}

/* ---- 3. the Ask Navi card on questions.html, same two signals ----
   Its head carried a brand-filled circle with an "N" in it and a coloured
   status dot, which is the stock chat-widget look; the star and a plain label
   say the same thing in the site's own furniture. */
.ask-avatar{width:30px;height:30px;border-radius:0;background:var(--m-600);color:transparent;
  -webkit-mask:var(--navi-star) center/contain no-repeat;
          mask:var(--navi-star) center/contain no-repeat}
.ask-status-dot{display:none}
.ask-input{font-family:Geist,sans-serif;caret-color:var(--c-500)}
.ask-input-row:focus-within .ask-input{border-color:var(--m-500);
  box-shadow:0 0 0 3px rgba(119,150,224,.18);outline:none}
.ask-message--bot > .shim{
  background:linear-gradient(90deg,
    var(--text-2) 0%, var(--text-2) 38%, #6FA8F2 50%, var(--text-2) 62%, var(--text-2) 100%);
  background-size:280% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ai-shim 1s linear 1 forwards}

/* the shimmer: one pass over the text as it lands, then it is ordinary text */
.qa .qa-ai .a p.shim{
  background:linear-gradient(90deg,
    var(--text-2) 0%, var(--text-2) 38%, #6FA8F2 50%, var(--text-2) 62%, var(--text-2) 100%);
  background-size:280% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ai-shim 1s linear 1 forwards;
}
@keyframes ai-shim{ to{background-position:-40% 0} }
@media (prefers-reduced-motion: reduce){
  .qa .qa-ai .a p.shim{animation:none;background:none;color:var(--text-2)}
  .ask-message--bot > .shim{animation:none;background:none;color:var(--text-2)}
}