/* ==========================================================================
   ascendai.us — AI WEBSITE ASSISTANT UI
   --------------------------------------------------------------------------
   The assistant is the site's primary contact experience, and part of the
   argument that Ascend AI actually uses intelligent technology. So it is
   built from the same tokens as the rest of the page — same glass, same
   glow, same type — rather than looking like a third-party widget dropped
   on top of the design.

   Layout:
     Desktop (>=560px)  panel anchored bottom-right above the launcher
     Mobile  (<560px)   full-height sheet — a 360px card on a phone leaves
                        no room to actually read a reply

   Contents:
     1. Container + launcher
     2. Panel shell
     3. Header
     4. Message log + bubbles
     5. Deterministic fallback form
     6. Suggestions
     7. Composer
     8. Footnote
   ========================================================================== */


/* ==========================================================================
   1. CONTAINER + LAUNCHER
   ========================================================================== */

/* [hidden] until assistant.js reveals it — a launcher that cannot reach its
   backend is worse than no launcher. See index.html. */
.assistant[hidden] {
  display: none;
}

.assistant {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: var(--z-assistant);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-md);
}

.assistant-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem 0.7rem 0.75rem;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--text);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-med) var(--ease);
}

.assistant-launcher:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(232, 162, 76, 0.09);
}

/* ---- The Ascend AI mark -------------------------------------------------
   Replaces the generic amber circle that used to sit here. A coloured dot
   made the assistant look like any other support widget; this makes it read
   as part of Ascend AI.

   HOW THE CROP WORKS
   ascend-ai-symbol.svg (the standalone symbol) has not been delivered, and
   fabricating one is not permitted. So this shows the SYMBOL REGION of the
   approved lockup by cropping it in CSS. The SVG file is untouched — no
   redraw, no recolour, no background removal.

   The maths, so it can be checked rather than trusted:
     the symbol occupies roughly x 570-1478, y 469-1110 of a 2048 canvas;
     centred on (1024, 790) a square crop of 1000 units starts at (524, 290).
     scale  = 2048 / 1000       -> 204.8% of the container
     offset = 524/1000, 290/1000 -> -52.4%, -29% of the container
   Change the crop only if the artwork itself changes.

   Uses the transparent variant, so no container is needed behind it.

   WHEN THE REAL SYMBOL ARRIVES: point the <img> at ascend-ai-symbol.svg,
   delete the width/height/left/top overrides below, and drop the light tile
   if the symbol ships with transparency. */
.assistant-mark {
  position: relative;
  display: inline-block;
  /* 1.406:1 — the symbol's aspect ratio. */
  width: 30px;
  height: 21px;
  flex-shrink: 0;
  overflow: hidden;
  /* No background, no border-radius, no border, no tile. The mark sits
     directly on the button. Do not reintroduce a container behind it. */
}

.assistant-mark img {
  /* Crop window: x 526, y 433, w 998, h 709 of the 2048 canvas.
     Derived from the SYMBOL bounds (x 570.6-1478.2, y 465.5-1110.9) plus
     45/32 units of padding. The wordmark begins at y 1209.4, so the crop
     bottom (1143) clears it by 66 units.

     An earlier crop ran to y 1290 and pulled the tops of the wordmark
     letters into the mark. If you see stray shapes under the A, the crop
     has drifted back into the wordmark band. */
  position: absolute;
  width: 205.31%;
  height: 288.66%;
  left: -52.7%;
  top: -61.1%;
  max-width: none;
}

/* Slightly larger in the launcher, where it is the only brand cue. */
.assistant-launcher .assistant-mark {
  width: 32px;
  height: 23px;
}

/* While the panel is open the launcher is redundant — the panel has its own
   close control, and two competing buttons is clutter. */
.assistant-launcher[aria-expanded="true"] {
  display: none;
}

@media (max-width: 460px) {
  .assistant-launcher-label { display: none; }

  .assistant-launcher {
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }
}


/* ==========================================================================
   2. PANEL SHELL
   ========================================================================== */

.assistant-panel {
  display: flex;
  flex-direction: column;
  width: min(410px, calc(100vw - 2rem));
  height: min(620px, calc(100vh - 8rem));
  padding: 0;                 /* .card adds padding; the panel manages its own */
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.assistant-panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .assistant-panel {
    animation: assistant-in var(--dur-med) var(--ease-out-soft);
  }
}

@keyframes assistant-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Mobile: full sheet. dvh accounts for browser chrome that vh does not. */
@media (max-width: 559px) {
  .assistant {
    right: 0;
    bottom: 0;
    left: 0;
    align-items: stretch;
    gap: 0;
  }

  .assistant-launcher {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
  }

  .assistant-panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}


/* ==========================================================================
   3. HEADER
   ========================================================================== */

.assistant-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass);
  flex-shrink: 0;
}

.assistant-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.assistant-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--text);
  margin: 0;
  max-width: none;
}

.assistant-status {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin: 0.2rem 0 0;
  max-width: none;
}

.assistant-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease);
}

.assistant-close:hover { color: var(--text); }
.assistant-close svg { width: 17px; height: 17px; }


/* ==========================================================================
   4. MESSAGE LOG
   ========================================================================== */

.assistant-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't scroll the page at the log's end */
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  scrollbar-width: thin;
}

.assistant-msg {
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-lg);
  font-size: var(--step-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;        /* long URLs must not widen the panel */
}

.assistant-msg p {
  margin: 0;
  max-width: none;
}

.assistant-msg p + p { margin-top: 0.6rem; }

/* Assistant turn */
.assistant-msg--bot {
  align-self: flex-start;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  color: var(--text-soft);
  border-bottom-left-radius: var(--radius-sm);
}

.assistant-msg--bot p { color: var(--text-soft); }

/* Visitor turn */
.assistant-msg--user {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: var(--text-on-accent);
  border-bottom-right-radius: var(--radius-sm);
  font-weight: 500;
}

.assistant-msg--user p { color: var(--text-on-accent); }

/* Notice / degraded state. Bordered rather than filled, so it reads as a
   system notice rather than as the assistant speaking. */
.assistant-msg--error {
  align-self: stretch;
  max-width: none;
  background: rgba(232, 176, 76, 0.06);
  border: 1px solid rgba(232, 176, 76, 0.28);
  color: var(--text-dim);
  font-size: var(--step-xs);
}

.assistant-msg--error p { color: var(--text-dim); }
.assistant-msg--error a { color: var(--accent-bright); }

/* Confirmation of a successful hand-off. */
.assistant-msg--ok {
  align-self: stretch;
  max-width: none;
  background: rgba(95, 208, 168, 0.07);
  border: 1px solid rgba(95, 208, 168, 0.3);
  color: var(--text-soft);
  font-size: var(--step-xs);
}

.assistant-msg--ok p { color: var(--text-soft); }

/* ---- Typing indicator --------------------------------------------------- */
.assistant-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.85rem 0.95rem;
}

.assistant-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: assistant-bounce 1.25s infinite ease-in-out;
}

.assistant-typing span:nth-child(2) { animation-delay: 0.16s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes assistant-bounce {
  0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-3px); }
}


/* ==========================================================================
   5. DETERMINISTIC FALLBACK FORM
   Revealed by assistant.js whenever the AI path cannot complete a hand-off.
   This is the safety net that stops a real enquiry disappearing because a
   model misbehaved — see index.html and assistant.js.
   ========================================================================== */

.assistant-fallback {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid rgba(232, 162, 76, 0.25);
  background: rgba(232, 162, 76, 0.05);
  flex-shrink: 0;
}

.assistant-fallback[hidden] { display: none; }

.assistant-fallback-note {
  margin: 0;
  font-size: var(--step-xs);
  color: var(--text-soft);
  max-width: none;
}

.assistant-fallback input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size: var(--step-sm);
  color: var(--text);
}

.assistant-fallback input::placeholder { color: var(--text-faint); }

.assistant-fallback input:focus {
  border-color: var(--accent);
  outline: none;
}

.assistant-fallback input:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}

.assistant-fallback .btn { width: 100%; }

/* ==========================================================================
   6. EXAMPLE PROMPTS

   NOT buttons. These were clickable chips, which made the assistant read as a
   scripted chatbot offering a fixed menu. It isn't one — it answers arbitrary
   questions.

   So they are plain, non-interactive text: no pointer cursor, no hover state,
   no borders, no pills. Do not restore chip styling, and do not wire them up.
   ========================================================================== */

.assistant-examples {
  padding: 0 var(--space-lg) var(--space-md);
  flex-shrink: 0;
}

.assistant-examples[hidden] { display: none; }

.assistant-examples-lead {
  margin: 0 0 var(--space-2xs);
  font-size: var(--step-xs);
  color: var(--text-dim);
  max-width: none;
}

.assistant-examples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.assistant-examples-list li {
  font-size: var(--step-xs);
  line-height: 1.5;
  color: var(--text-faint);
  /* Explicitly inert — nothing here should invite a click. */
  cursor: default;
  user-select: none;
}


/* ==========================================================================
   7. COMPOSER

   The field and the send button are one control: identical height, centred
   on the same axis. They previously disagreed — the textarea grew with its
   padding while the button stayed fixed — which left the button floating
   off-baseline.

   --composer-h is the single source of truth for that height. Change it
   here and both halves follow.
   ========================================================================== */

.assistant-form {
  --composer-h: 42px;

  display: flex;
  align-items: center;          /* centred, not flex-end — see note above */
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.assistant-form textarea {
  flex: 1 1 auto;
  resize: none;                 /* height is managed by assistant.js */
  height: var(--composer-h);
  min-height: var(--composer-h);
  max-height: 120px;
  /* Vertical padding centres a single line inside --composer-h:
     (42 - 21 line-height - 2 border) / 2 ~= 9px */
  padding: 9px 0.85rem;
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  line-height: 21px;            /* fixed px so the centring maths holds */
  color: var(--text);
  overflow-y: auto;
}

.assistant-form textarea::placeholder { color: var(--text-faint); }

.assistant-form textarea:focus {
  border-color: var(--accent);
  outline: none;                /* the border change is the focus signal */
}

.assistant-form textarea:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}

.assistant-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--composer-h);
  height: var(--composer-h);
  flex-shrink: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: var(--text-on-accent);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.assistant-send:hover:not(:disabled) { filter: brightness(1.08); }

.assistant-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.assistant-send svg { width: 18px; height: 18px; }

/* Once the field grows past one line the button stays pinned to the bottom
   so it tracks the send affordance rather than drifting to the middle. */
.assistant-form:has(textarea:not(:placeholder-shown)) {
  align-items: flex-end;
}

/* ==========================================================================
   8. FOOTNOTE
   The "this is AI, it can be wrong, it cannot commit" disclosure, plus the
   privacy link. Required honesty — and it stops replies being read as
   commitments.
   ========================================================================== */

.assistant-foot {
  margin: 0;
  padding: 0 var(--space-lg) var(--space-md);
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-faint);
  max-width: none;
  flex-shrink: 0;
}

.assistant-foot a { color: var(--text-dim); }
.assistant-foot a:hover { color: var(--accent); }