/* Demo AI assistant: the floating icon and its panel.
   Step 1 of the feature - UI only. Nothing here talks to a server, and the
   whole thing stays hidden unless the preview flag is on, so the public demo
   page is byte-for-byte the same experience until the feature is complete.

   Colours come from the demo page's own variables so the assistant cannot
   drift away from the page's look. Every var() carries the demo page's
   fallback value, so this stylesheet is safe even if loaded alone. */

/* ---------- the launcher ---------- */
.ai-assist-launch {
  position: fixed;
  right: 16px;
  /* keep clear of the iPhone home indicator and Safari's bottom bar */
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60; /* below the sheet (410) and below alerts (500) */
  display: none; /* switched on by the preview flag only */
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ai-assist-launch[data-on='1'] { display: inline-flex; }

/* While the page's own start panel is open it owns the bottom of the screen
   with a full-width "Start test" button. A floating launcher over a primary
   action invites a mis-tap on the action, so the launcher steps aside. This is
   a state, not a breakpoint: the launcher is never hidden by screen size. */
.ai-assist-root[data-quiet='1'] .ai-assist-launch {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.ai-assist-launch:focus-visible { outline: 2px solid var(--accent, #5e5bd6); outline-offset: 4px; border-radius: 999px; }

/* the question that invites the tap: it is the visible label, so the button's
   accessible name contains this text (WCAG label-in-name) */
.ai-assist-pill {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1, #111827);
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
}

.ai-assist-orb {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--accent, #5e5bd6) 0%, #413cc4 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* a soft white ring lifts it off a light page; the shadow gives it weight */
  box-shadow: 0 12px 26px rgba(94, 91, 214, 0.34), 0 0 0 2px rgba(255, 255, 255, 0.9);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.ai-assist-orb svg { width: 28px; height: 28px; display: block; }

/* the nudge: three gentle pulses when the page settles, then it stays calm.
   Pure CSS, so there is no timer to leak and nothing to clean up. */
.ai-assist-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(94, 91, 214, 0.5);
  animation: aiAssistPulse 2.4s ease-out 3;
  pointer-events: none;
}

@keyframes aiAssistPulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.ai-assist-launch:hover .ai-assist-orb {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 32px rgba(94, 91, 214, 0.46), 0 0 0 3px rgba(255, 255, 255, 0.95);
}

.ai-assist-launch:active .ai-assist-orb { transform: translateY(0) scale(0.99); }

/* ---------- the panel ---------- */
.ai-assist-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15, 17, 21, 0.42);
  display: none;
}

.ai-assist-veil[data-on='1'] { display: block; }

.ai-assist-panel {
  position: fixed;
  z-index: 410; /* above the veil, below alerts at 500 */
  left: 50%;
  transform: translateX(-50%);
  /* a bottom sheet on phones, a centred card from 560px up */
  bottom: 0;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.ai-assist-panel[data-on='1'] { display: flex; }

/* pinned header: it must never scroll away with the body */
.ai-assist-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: #fff;
}

.ai-assist-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-1, #111827);
  letter-spacing: -0.01em;
}

.ai-assist-head p {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3, #6b7280);
}

.ai-assist-close {
  margin-left: auto;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  color: var(--text-3, #6b7280);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.ai-assist-close:hover { color: var(--text-1, #111827); }
.ai-assist-close:focus-visible { outline: 2px solid var(--accent, #5e5bd6); outline-offset: 2px; }

/* the scrollable middle */
.ai-assist-body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* pinned action bar: on iPhone Safari the URL pill covers fixed content near
   the top, and the home indicator sits at the bottom - so the buttons live in
   a bar with a safe-area inset rather than at the end of a scrolling list */
.ai-assist-foot {
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, #e5e7eb);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-assist-foot .btn { width: 100%; }

/* a disabled Start must look disabled: the page's primary button keeps its
   full brand colour otherwise, which reads as "click me" and then does nothing */
.ai-assist-start:disabled,
.ai-assist-start[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.ai-assist-hint {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3, #6b7280);
}

.ai-assist-verify {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface-2, #f5f6f8);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-assist-verify-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1, #111827);
}

.ai-assist-verify-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3, #6b7280);
}

.ai-assist-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-assist-steps li {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-3, #6b7280);
}

.ai-assist-steps b { color: var(--text-1, #111827); font-weight: 600; }

.ai-assist-steps .n {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-2, #f5f6f8);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-3, #6b7280);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-assist-msg {
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--surface-2, #f5f6f8);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-1, #111827);
}

.ai-assist-msg[data-kind='info'] { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }

/* ---------- from 560px up: a centred card instead of a sheet ---------- */
@media (min-width: 560px) {
  .ai-assist-panel {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    max-height: 86vh;
  }
}

/* the launcher is the entry point: it is never hidden at any breakpoint */
@media (max-width: 420px) {
  .ai-assist-pill { padding: 8px 12px; font-size: 12.5px; }
  .ai-assist-orb { width: 52px; height: 52px; }
  .ai-assist-orb svg { width: 25px; height: 25px; }
  .ai-assist-head h2 { font-size: 15.5px; }
}

/* On a phone a labelled launcher is wide enough to sit over a card's own
   "Start this test" button, and covering a primary action is worse than
   being small. So phones get the orb alone - the least footprint a floating
   button can have - and the label collapses away as an affordance, never the
   action itself. From tablet width up there is room for the question. */
@media (max-width: 560px) {
  .ai-assist-pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-assist-orb { transition: none; }
  .ai-assist-orb::after { animation: none; opacity: 0; }
  .ai-assist-launch:hover .ai-assist-orb { transform: none; }
}

/* printing a demo page should not print a floating button */
@media print {
  .ai-assist-launch, .ai-assist-veil, .ai-assist-panel { display: none !important; }
}

/* the page must not scroll behind an open sheet */
body.ai-assist-locked { overflow: hidden; }


/* ---------- the conversation ---------- */
.ai-assist-live { display: flex; flex-direction: column; gap: 10px; }

.ai-assist-transcript {
  max-height: 38vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}

.ai-assist-bubble {
  padding: 9px 12px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 92%;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-assist-bubble[data-role='visitor'] {
  align-self: flex-end;
  background: var(--accent, #5e5bd6);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-assist-bubble[data-role='assistant'] {
  align-self: flex-start;
  background: var(--surface-2, #f5f6f8);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-1, #111827);
  border-bottom-left-radius: 4px;
}

.ai-assist-status {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-3, #6b7280);
  min-height: 18px;
}

.ai-assist-type { display: flex; gap: 8px; align-items: stretch; }

.ai-assist-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-1, #111827);
  background: #fff;
}

.ai-assist-input:focus-visible {
  outline: 2px solid var(--accent, #5e5bd6);
  outline-offset: 1px;
}

.ai-assist-type .btn { flex: 0 0 auto; }

/* a text label that only screen readers hear */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* The hidden attribute must win. Blocks like .ai-assist-type and
   .ai-assist-live set display:flex, which beats [hidden]'s display:none, so
   every "hidden" block was still on screen - the visitor saw Start, the typed
   row and End conversation stacked together. Scoped to the assistant. */
.ai-assist-root [hidden] { display: none !important; }


/* --- room to breathe ------------------------------------------------------
   Measured on a 1280px viewport: the panel was 520x474 with a 188px
   transcript, so the conversation had less space than the header above it and
   the input was squeezed underneath. The transcript now claims the height the
   panel already allows (capped by the panel's own max-height). */
.ai-assist-transcript {
  max-height: min(46vh, 420px);
}

/* the close control should be a comfortable tap target, not a 34px dot */
.ai-assist-close {
  width: 44px;
  height: 44px;
}

@media (min-width: 560px) {
  /* a full-width secondary action on a wide card reads as another primary;
     the End button sizes to its text instead */
  .ai-assist-foot #aiAssistEnd { width: auto; align-self: center; }
  .ai-assist-transcript { max-height: min(52vh, 460px); }
}


/* The End action duplicates the close control at the top, so it should not
   compete with Send: sized to its text and centred at every width, phone
   included, where a full-width ghost button reads as a second primary. */
.ai-assist-foot #aiAssistEnd {
  width: auto;
  align-self: center;
  padding-left: 18px;
  padding-right: 18px;
}

/* a touch less header so the conversation gets the height instead */
.ai-assist-head { padding: 14px 16px 10px; }


/* The typed row was inverted: a blanket .ai-assist-foot .btn width:100%, meant
   for the full-width Start primary, was also reaching Send, which took the
   whole row and left the input a 26px sliver. Measured, not guessed. */
.ai-assist-type .btn {
  width: auto;
  flex: 0 0 auto;
}


/* The page's own stylesheet has body.demo-page .btn { width: 100% } in a mobile
   media query. That is one element plus two classes, which outranks a
   two-class selector - so on phones only, Send took the whole row and left the
   input a 26px sliver. Three classes, scoped to our own root so nothing else
   on the page can be affected. */
.ai-assist-root .ai-assist-type .btn {
  width: auto;
  flex: 0 0 auto;
}


/* ---------------------------------------------------------------------------
   Stage 1: the paper card.
   The bar is driven by the real bank_progress_done / bank_progress_total from
   the exam document, so it can only ever move when questions actually exist.
   --------------------------------------------------------------------------- */
.ai-assist-paper {
  margin: 10px 12px 0;
  padding: 12px;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 12px;
  background: #fff;
}

.ai-assist-paper-head {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-1, #1c2430);
  font-weight: 600;
}

.ai-assist-bar {
  height: 8px;
  border-radius: 999px;
  background: #eef1f4;
  overflow: hidden;
}

.ai-assist-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent, #2f6df6);
  transition: width 0.4s ease;
}

.ai-assist-paper-meta {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--text-2, #5b6675);
}

.ai-assist-quote {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--accent, #2f6df6);
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-2, #5b6675);
}

.ai-assist-paper-do {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ai-assist-paper-do .ai-assist-input { flex: 1 1 auto; min-width: 0; }

/* Same trap as the typed row: the page's own body.demo-page .btn is (0,2,1),
   so a two-class selector loses. Three classes, scoped to our root. */
.ai-assist-root .ai-assist-paper-do .btn {
  width: auto;
  flex: 0 0 auto;
}

.ai-assist-paper-alt {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-assist-paper-alt .btn {
  width: auto;
  font-size: 12.5px;
  padding: 7px 11px;
}

.ai-assist-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}