/* ============================================================
   ASK AIDAN — one prompt box, in the manner of America.gov
   ============================================================ */

/* Fonts are self-hosted (fonts/, SIL Open Font License) so visitors' browsers
   never contact Google. Latin subset only; anything outside it falls back to
   the system fonts in each font-family stack. Inter is one variable file. */
@font-face {
  font-family: 'Dynalight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dynalight-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Fascinate';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fascinate-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
}

:root {
  --bg:      #FFFCF7;   /* barely cream */
  --ink:     #2B2420;
  --mute:    #7A6E64;
  --faint:   #A99D92;
  --line:    #F1E7DB;
  --field:   #FFFFFF;
  --bubble:  #FDF0E2;

  /* Sunset */
  --sun-yellow: #FFEB0D;
  --sun-orange: #FF410D;
  --accent:     var(--sun-orange);
  --sunset:     linear-gradient(120deg, var(--sun-yellow) 0%, var(--sun-orange) 100%);
  --glow-a:     rgba(255, 235, 13, 0.16);
  --glow-b:     rgba(255, 65, 13, 0.08);
  --feather-opacity: 0.5;

  --shadow:  0 1px 2px rgba(120, 40, 10, 0.04), 0 10px 32px rgba(255, 65, 13, 0.07);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --col: 46rem;
  --gut: 16px;
  /* The gap under the subtitle, before the prompt box. Phones reuse it above
     the title so the two read as the same breath. */
  --breath: clamp(1.75rem, 5vh, 2.75rem);
}

/* Dusk: the same sunset, after it has set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:     #16110E;
    --ink:    #F7EEE4;
    --mute:   #B9AA9B;
    --faint:  #85776A;
    --line:   #2B221C;
    --field:  #1E1814;
    --bubble: #2A1F17;
    --glow-a: rgba(255, 235, 13, 0.07);
    --glow-b: rgba(255, 65, 13, 0.12);
    --feather-opacity: 0.35;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 32px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg:     #16110E;
  --ink:    #F7EEE4;
  --mute:   #B9AA9B;
  --faint:  #85776A;
  --line:   #2B221C;
  --field:  #1E1814;
  --bubble: #2A1F17;
  --glow-a: rgba(255, 235, 13, 0.07);
  --glow-b: rgba(255, 65, 13, 0.12);
  --feather-opacity: 0.35;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 32px rgba(0, 0, 0, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 100%;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A low sun just over the horizon: warm haze up top, a faint band below.
   Fixed, so it stays put while the thread scrolls over it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 28rem at 50% -6rem, var(--glow-a), transparent 70%),
    radial-gradient(40rem 22rem at 85% 0%, var(--glow-b), transparent 70%),
    radial-gradient(70rem 18rem at 50% calc(100% + 6rem), var(--glow-b), transparent 70%);
}

/* Feathered texture: long, soft fibres like the barbs of a feather, drawn by
   an SVG noise filter stretched along one axis (no image to download). It is
   tilted a little so the strands run diagonally, and masked so it gathers at
   the edges of the page and stays out from behind the words. */
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--feather-opacity);
  transform: rotate(-14deg);
  /* One large piece rather than a repeating tile, so there are no seams. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.042' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.45 0 0 0 0 0.06 1.7 0 0 0 -0.86'/%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 46%, transparent 42%, #000 100%);
  mask-image: radial-gradient(ellipse 58% 52% at 50% 46%, transparent 42%, #000 100%);
}

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

svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.9rem, env(safe-area-inset-top)) max(var(--gut), 1.5rem) 0.9rem;
}

/* The bar's backing is a separate layer so it can fade: in on the first
   question instead of snapping on, and out along its bottom edge instead of
   ending in a hard line. Frosted rather than solid, so the glow, texture
   and cursor halo carry on underneath it. */
.top::before,
body.chatting .dock::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.top::before {
  inset: 0 0 -1.25rem 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

body.chatting .top::before { opacity: 1; }

.brand {
  font-family: 'Dynalight', 'Brush Script MT', cursive;
  font-size: 1.6rem;   /* script faces run small; this matches the old cap height */
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.brand span {
  background: var(--sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.newchat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), border-color 160ms var(--ease-out);
}

.newchat svg { width: 1rem; height: 1rem; }
.newchat[hidden] { display: none; }
.newchat:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .newchat:hover { border-color: var(--faint); }
}

/* On the welcome screen there is nothing to scroll under the bar, so let the
   sunset run straight through it instead of showing the bar's edge. */
/* ------------------------------------------------------------
   Cursor halo — a little sunset that follows the pointer.
   Sits behind the content (z-index -1), so it warms the page without
   ever tinting the text. Only for real pointers; see script.js.
   ------------------------------------------------------------ */

.halo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 235, 13, 0.30) 0%,
    rgba(255, 65, 13, 0.15) 38%,
    rgba(255, 65, 13, 0.05) 58%,
    transparent 72%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  will-change: transform;
}

.halo.on { opacity: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .halo { mix-blend-mode: screen; }
}
:root[data-theme="dark"] .halo { mix-blend-mode: screen; }

@media (hover: none), (pointer: coarse) {
  .halo { display: none; }
}

/* ------------------------------------------------------------
   Layout: centered welcome, then a thread with the box docked
   ------------------------------------------------------------ */

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: calc(var(--col) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut) clamp(3rem, 12vh, 7rem);
}

body.chatting .app { justify-content: flex-start; padding-bottom: 0; }

/* ------------------------------------------------------------
   Hello
   ------------------------------------------------------------ */

.hello { text-align: center; margin-bottom: var(--breath); }

/* On a phone the welcome is taller than the screen leaves room for, so it
   stops centring and the title ends up pressed under the logo. Give it the
   same room above as the subtitle has below. */
@media (max-width: 34rem) {
  .hello { margin-top: var(--breath); }
}

.hello__title {
  margin: 0;
  font-family: 'Fascinate', Georgia, serif;
  font-size: clamp(3.5rem, 13vw, 6.5rem);
  font-weight: 400;   /* Fascinate has a single weight */
  line-height: 1.05;
  animation: rise 700ms var(--ease-out) both;
}

.hello__title .dot {
  background: var(--sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hello__sub {
  margin: 1rem auto 0;
  /* No width cap: one line wherever it fits, and an even two-line wrap
     (text-wrap: balance) only when the screen is too narrow. */
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--mute);
  text-wrap: balance;
  animation: rise 700ms var(--ease-out) 80ms both;
}

body.chatting .hello { display: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Prompt box
   ------------------------------------------------------------ */

.dock { animation: rise 700ms var(--ease-out) 160ms both; }

body.chatting .dock {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 1.25rem 0 max(0.9rem, env(safe-area-inset-bottom));
  animation: none;
}

/* Full-bleed and feathered at the top, so there is no box: the column of
   text dissolves into frost behind the input instead of hitting an edge. */
body.chatting .dock::before {
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
          mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
  animation: fadein 400ms var(--ease-out) both;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.ask {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.55rem 0.55rem 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background: var(--field);
  box-shadow: var(--shadow);
  transition: border-color 160ms var(--ease-out);
}

.ask:focus-within { border-color: var(--sun-orange); }

.ask textarea {
  flex: 1;
  min-width: 0;
  max-height: 11rem;
  margin: 0;
  padding: 0.6rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;    /* ≥16px, or iOS zooms on focus */
  font-weight: 300;
  line-height: 1.45;
  resize: none;
  outline: none;
}

.ask textarea::placeholder { color: var(--faint); }

.send {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--sunset);
  color: #2B1A12;   /* dark on the bright gradient; white would vanish on the yellow end */
  cursor: pointer;
  transition: transform 120ms var(--ease-out), opacity 160ms var(--ease-out);
}

.send svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.6; }
.send:active { transform: scale(0.92); }
.send:disabled { opacity: 0.35; filter: saturate(0.4); cursor: default; transform: none; }

/* ------------------------------------------------------------
   Suggested questions
   ------------------------------------------------------------ */

/* Turnstile: takes no room unless Cloudflare shows its checkbox. */
.check { display: flex; justify-content: center; }
.check.asking { margin-top: 0.75rem; }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.chips button {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--mute);
  text-align: left;
  cursor: pointer;
  transition:
    transform 120ms var(--ease-out),
    color 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}

.chips button:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .chips button:hover { color: var(--ink); border-color: var(--sun-orange); background: var(--field); }
}

body.chatting .chips { display: none; }

.note {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
  text-wrap: balance;
}

.note svg { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.3em; vertical-align: -0.12em; }

body.chatting .note { margin-top: 0.7rem; font-size: 0.72rem; }

/* ------------------------------------------------------------
   Thread
   ------------------------------------------------------------ */

.thread {
  display: none;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 1.5rem 0 0.5rem;
  list-style: none;
}

body.chatting .thread { display: flex; }

.msg { animation: rise 420ms var(--ease-out) both; }

.msg--user {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.7rem 1.05rem;
  border-radius: 1.3rem 1.3rem 0.4rem 1.3rem;
  background: var(--bubble);
  font-size: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--bot {
  align-self: stretch;
  font-size: 1.05rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.msg--bot p { margin: 0; }
.msg--bot p + p,
.msg--bot p + ul,
.msg--bot ul + p { margin-top: 0.85rem; }

.msg--bot ul { margin: 0; padding-left: 1.2rem; }
.msg--bot li + li { margin-top: 0.3rem; }
.msg--bot strong { font-weight: 500; }

.msg--bot a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.msg--err { color: var(--mute); }

.retry {
  margin-top: 0.6rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
}

/* Thinking — three dots, nothing more */
.typing { display: inline-flex; gap: 0.3rem; padding: 0.6rem 0; }

.typing i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--sun-orange);
  animation: blink 1.2s ease-in-out infinite;
}

.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}

/* ------------------------------------------------------------
   Preferences
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hello__title, .hello__sub, .dock, .msg, body.chatting .dock::before { animation: none; }
  .top::before { transition: none; }
  .typing i { animation: none; opacity: 0.6; }
  .send:active, .chips button:active, .newchat:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
}

@media (prefers-contrast: more) {
  body::after { display: none; }
  :root { --mute: var(--ink); --faint: var(--mute); --line: var(--faint); }
}