/* Nova's conversation: the hero of intellnova.ai (assets/nova.js). Built on site.css's tokens, AA in both themes.
   Motion is transform and opacity only, and none at all with prefers-reduced-motion (site.css). */

/* The edge of a text field: 3:1 against the field and the card around it, in both themes (measured). */
:root { --nova-field-line: #6f6d66; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --nova-field-line: #7f7d76; }
}
:root[data-theme="light"] { --nova-field-line: #7f7d76; }

/* nova.js keeps the composer in view itself as the conversation grows; the browser's own anchoring would scroll
   a second time. */
html { overflow-anchor: none; }

.nova [hidden] { display: none !important; }

/* site.css styles .btn for links; here it is also a <button>, which brings the browser's own border. */
button.btn { border: 0; cursor: pointer; }

/* ---- the panel ---- */
.nova {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.nova::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 0% 0%, var(--bg-glow), transparent 62%);
  pointer-events: none;
}

.nova-head { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.nova-avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.nova-avatar .star { position: relative; width: 24px; height: 24px; filter: drop-shadow(0 0 10px #5aa6e955); }
/* While Nova types her star glows a little brighter: a glow behind it that fades in, opacity only. */
.nova-avatar::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #5aa6e966, transparent);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.nova.is-typing .nova-avatar::before { opacity: 1; }
/* Joined: one ring of star light leaves the avatar. */
.nova-avatar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.nova.is-joined .nova-avatar::after { animation: nova-ring 1s var(--ease) both; }
.nova-head h2 { font: 500 13px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.nova-head .pill { margin-left: auto; gap: 8px; padding: 8px 11px; font-size: 11px; letter-spacing: .14em; background: var(--surface-2); }
.nova-head .pill .dot { width: 7px; height: 7px; }

/* ---- the conversation ---- */
.nova-feed { display: grid; gap: 14px; }
.nova-log { display: grid; gap: 14px; }
.nova-msg { position: relative; min-width: 0; }
.nova-text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); overflow-wrap: break-word; }
.nova-msg.from-you {
  justify-self: end;
  max-width: min(86%, 30em);
  padding: 10px 15px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 20px 20px 6px 20px;
  animation: nova-in .3s var(--ease) both;
}
.nova-msg.from-you .nova-text { font-size: 16px; }
.nova-noscript { font-size: 15px; color: var(--muted); }

/* Word by word: the real text waits invisible underneath, an aria-hidden copy fades in on top of it. */
@media (prefers-reduced-motion: no-preference) {
  /* The greeting is in the HTML; it waits for its reveal, or shows by itself if nova.js never runs. */
  html.js .nova-greet:not(.is-shown) { opacity: 0; animation: nova-show .4s var(--ease) 1.8s forwards; }
}
html.js .nova-text.is-revealing { opacity: 0; animation: none; }
.nova-ghost { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.nova-ghost span { opacity: 0; animation: nova-show .24s var(--ease) forwards; }
.nova-ghost .nova-ghost-link {
  opacity: 1;
  animation: none;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Nova is typing: only while a question is with the brain. */
.nova-typing { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.nova-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .7; animation: nova-dot 1.2s var(--ease) infinite; }
.nova-typing i:nth-child(2) { animation-delay: .16s; }
.nova-typing i:nth-child(3) { animation-delay: .32s; }

.nova-offer { margin-top: 12px; animation: nova-in .35s var(--ease) .45s both; }

/* Joined: a short glow of star light behind Nova's line, where the card was. Opacity only. */
.nova-msg.is-done::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(70% 90% at 12% 50%, #5aa6e940, transparent 72%);
  opacity: 0;
  animation: nova-glow 1.6s var(--ease) both;
  pointer-events: none;
}

/* ---- the tap questions, the composer, the invite button and the counter ---- */
.nova-controls { display: grid; gap: 16px; }
.nova-controls.is-in { animation: nova-in .5s var(--ease) .3s both; }

.nova-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 719.98px) {
  /* The rows reach the panel's edge, so a chip cut there says there is more this way. The 4 px keep focus rings
     unclipped. */
  .nova-chips {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    grid-auto-columns: max-content;
    justify-items: start;
    margin: -4px -16px;
    padding: 4px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .nova-chips::-webkit-scrollbar { display: none; }
  .nova-chip { white-space: nowrap; scroll-snap-align: start; }
}
.nova-chip {
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: 500 15px/1.25 var(--sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease);
}
@media (hover: hover) { .nova-chip:hover { background: var(--surface-3); } } /* no hover left behind by a tap */
.nova-chip:active { transform: scale(.97); }
.nova.is-busy .nova-chip { cursor: progress; }
.nova-chip.is-queued { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }

.nova-askbox { display: grid; }
.nova-ask {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 18px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--nova-field-line);
}
.nova-ask:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.nova-ask input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 17px/1.3 var(--sans); /* 16 px or more: Safari on the iPhone does not zoom the page on focus */
}
.nova-ask input:focus { outline: none; } /* the ring is on the whole composer */
.nova-ask input::placeholder { color: var(--muted); opacity: 1; }
.nova-left { flex: none; font: 500 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.nova-send {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nova-send svg { width: 20px; height: 20px; }
.nova-send:active { transform: scale(.94); }
.nova-send[aria-disabled="true"] { opacity: .5; cursor: progress; }

.nova-note { margin-top: 10px; padding: 0 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }

.nova-actions { display: grid; gap: 12px; }
.nova-actions .btn { width: 100%; min-height: 52px; font-size: 17px; }
.btn.is-done, .btn.is-done:hover {
  background: var(--surface-3);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  transform: none;
  cursor: default;
}

.nova-count { display: grid; gap: 10px; justify-items: center; text-align: center; }
.nova-count-line { font-size: 15px; color: var(--muted); }
.nova-bar { width: min(100%, 280px); height: 4px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.nova-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s var(--ease);
}
.nova-timer { font: 500 22px/1.2 var(--mono); letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* A Turnstile box stays out of the layout until Turnstile puts something in it. */
.nova-check:empty { display: none; }

/* ---- the invite card, inside the conversation ---- */
.nova-invite {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  animation: nova-in .4s var(--ease) both;
}
.nova-invite.is-leaving { opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.nova-field { display: grid; gap: 6px; }
.nova-field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.nova-field .opt { font-weight: 400; color: var(--muted); }
.nova-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--nova-field-line);
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/1.3 var(--sans);
}
.nova-field input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.nova-field input[aria-invalid="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.nova-consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  min-height: 44px;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.nova-consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* The contact address inside Nova's answers: its tap area is 44 px tall. Vertical padding on an inline box never
   moves a line, so the text sets exactly as before; the gaps around a message are wider than the padding. */
.nova-text a { padding: 12px 0; }
.nova-consent input[aria-invalid="true"] { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Its own line, outside the box's label: a tap meant for the box can never land on it. */
.nova-privacy { margin-top: -8px; font-size: 15px; color: var(--muted); }
.nova-privacy a { display: inline-flex; align-items: center; min-height: 44px; }
.nova-submit { display: grid; }
.nova-submit .btn { position: relative; width: 100%; overflow: hidden; }
/* Busy: the label keeps its full contrast; a light slides along the bottom edge (still, with reduced motion). */
.nova-submit .btn[aria-busy="true"] { cursor: progress; }
.nova-submit .btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 3px;
  background: var(--on-accent);
  opacity: .55;
  animation: nova-busy 1.1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nova-submit .btn[aria-busy="true"]::after { width: 100%; }
}

/* ---- the closing band's way back to Nova ---- */
.closing .btn { margin-top: 8px; }

@keyframes nova-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nova-show { to { opacity: 1; } }
@keyframes nova-dot { 0%, 70%, 100% { opacity: .7; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
@keyframes nova-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes nova-glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nova-busy { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

@media (min-width: 720px) {
  .nova { padding: 20px; gap: 18px; }
}