/* Owner Assistant: a quiet, dark page with the avatar as its subject, and a card for
   every answer so nothing said is lost.
   Brand values are set from brand.js at load (app.js applyBrand); these are the Jeep
   Avenger defaults so the page is right before it runs. */
:root {
  --bg: #08090b;
  --bg-2: #101216;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hi: rgba(255, 255, 255, 0.1);
  --hairline: rgba(255, 255, 255, 0.1);
  --text: #f3f2ef;
  --muted: #9a9fa8;
  --faint: #6b707a;
  --accent: #e3ac1c;
  --accent-ink: #0b0d10;
  --blue: #1597d3;
  --danger: #d23a31;
  --ok: #3cbf7a;

  --font: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  font-family: var(--font); color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(21, 151, 211, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}
button { font: inherit; color: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ── Header: logo and model, nothing else ────────────────────────────────── */
.top {
  width: 100%; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(22px + env(safe-area-inset-top)) 32px 22px;
}
.logo { height: 28px; width: auto; display: block; }
.model { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.wordmark { height: 12px; width: auto; display: block; opacity: 0.95; }
.product { font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }

main { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ── Landing ─────────────────────────────────────────────────────────────── */
.landing {
  position: relative; width: 100%; max-width: 1180px; padding: 0 32px;
  display: grid; align-items: end; min-height: min(72vh, 680px);
}
.landing-photo {
  position: absolute; inset: 0 32px; border-radius: 28px; overflow: hidden;
  background: var(--hero-image, none) 70% 60% / cover no-repeat;
}
.landing-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 9, 11, 0.92) 0%, rgba(8, 9, 11, 0.7) 34%, rgba(8, 9, 11, 0) 70%),
    linear-gradient(0deg, rgba(8, 9, 11, 0.6) 0%, rgba(8, 9, 11, 0) 45%);
}
.landing-copy { position: relative; padding: 56px; max-width: 560px; }
.eyebrow { margin: 0 0 18px; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0 0 14px; font-size: clamp(32px, 4.6vw, 54px); font-weight: 300; line-height: 1.04; letter-spacing: -0.015em; }
.lede { margin: 0 0 34px; font-size: 17px; font-weight: 300; color: rgba(243, 242, 239, 0.78); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 34px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
  box-shadow: 0 10px 30px -10px rgba(227, 172, 28, 0.55);
}
.cta:hover { filter: brightness(1.06); box-shadow: 0 14px 34px -10px rgba(227, 172, 28, 0.7); }
.cta:active { transform: scale(0.98); }
.cta:disabled { opacity: 0.55; cursor: default; }

/* "Try asking" links: small, quiet, never more than a line or two. */
.try { margin: 22px 0 0; font-size: 12.5px; color: var(--faint); line-height: 1.9; }
.try .try-label { margin-right: 6px; }
.try button {
  border: 0; background: none; padding: 0; margin: 0 2px;
  color: var(--muted); font-size: 12.5px;
  text-decoration: underline; text-decoration-color: rgba(154, 159, 168, 0.35); text-underline-offset: 4px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.try button:hover { color: var(--text); text-decoration-color: var(--accent); }
.try .sep { color: var(--faint); margin: 0 4px; }

/* ── Session ─────────────────────────────────────────────────────────────── */
.session { width: 100%; max-width: 620px; padding: 4px 24px 0; display: none; flex-direction: column; align-items: center; }
.session-main { width: 100%; display: flex; flex-direction: column; align-items: center; }
.session-top { width: 100%; display: flex; flex-direction: column; align-items: center; }
.dock { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* What the assistant is doing and the last question, beside the avatar tile on a phone
   (below); the cards say the same elsewhere. */
.now { display: none; }
body:not([data-state="idle"]) .landing { display: none; }
body:not([data-state="idle"]) .session { display: flex; }

/* The stage takes the video's own shape (set from the track in app.js); square until
   it arrives. Never crop a person to fill a box. */
.stage {
  position: relative; width: 100%;
  max-width: min(560px, calc((100dvh - 290px) * var(--video-aspect, 1)));
  aspect-ratio: var(--video-aspect, 1);
  border-radius: 28px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #1b2129 0%, #0d1014 70%);
  box-shadow: 0 0 0 1px var(--hairline), 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 120px -40px rgba(21, 151, 211, 0.35);
}
.video, .video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video video { object-fit: contain; }

.joining {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
body[data-state="connecting"] .joining,
body[data-state="live"] .stage[data-avatar="none"] .joining { display: flex; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.14); border-top-color: var(--accent);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The status light: top left of the avatar, green while it listens, red otherwise. */
.status {
  position: absolute; top: 18px; left: 18px; display: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(8, 9, 11, 0.35), 0 0 12px rgba(210, 58, 49, 0.7);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
body[data-state="live"] .status { display: block; }
.status[data-light="green"] {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(8, 9, 11, 0.35), 0 0 14px rgba(60, 191, 122, 0.85);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe { 50% { box-shadow: 0 0 0 3px rgba(8, 9, 11, 0.35), 0 0 4px rgba(60, 191, 122, 0.4); } }

/* Shown only when the browser blocks sound until a tap. */
.tap {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(8, 9, 11, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}

.notice {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: safe center; text-align: center; gap: 10px;
  padding: 32px; background: radial-gradient(circle at 50% 35%, #1b2129 0%, #0d1014 70%);
  overflow-y: auto;  /* with "Need a person?" it can outgrow a phone's square stage */
}
body[data-state="ended"] .notice, body[data-state="unavailable"] .notice { display: flex; }
.notice-title { margin: 0; font-size: 24px; font-weight: 300; }
.notice-text { margin: 0 0 18px; max-width: 360px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.notice-text:empty { display: none; }

/* Captions: off by default (CC), one quiet line under the stage. */
.caption {
  width: 100%; max-width: 560px; margin: 18px 0 0; min-height: 3em;
  text-align: center; font-size: 15px; font-weight: 300; line-height: 1.55; color: rgba(243, 242, 239, 0.86);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Controls: four round glass buttons, each named underneath. */
.controls { display: flex; gap: 16px; margin-top: 22px; }
.ctl-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ctl-label { font-size: 13px; color: var(--muted); }
.ctl {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); background: var(--surface);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.ctl:hover { background: var(--surface-hi); }
.ctl:active { transform: scale(0.95); }
.ctl svg { width: 21px; height: 21px; fill: var(--text); }
.ctl .off { display: none; }
#mic[aria-pressed="false"] .on { display: none; }
#mic[aria-pressed="false"] .off { display: block; }
#mic[aria-pressed="false"], #cc[aria-pressed="true"], #keyboard[aria-expanded="true"] { background: var(--text); border-color: var(--text); }
#mic[aria-pressed="false"] svg, #cc[aria-pressed="true"] svg, #keyboard[aria-expanded="true"] svg { fill: var(--bg); }
.ctl.end { background: var(--danger); border-color: var(--danger); }
.ctl.end:hover { background: #e0463c; }
.ctl.end svg { fill: #fff; }
body:not([data-state="live"]) .controls { visibility: hidden; }

/* The question box: hidden until the keyboard button opens it. */
.ask {
  width: 100%; max-width: 460px; margin-top: 18px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 20px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: rise 0.28s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } }
.ask input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 16px; font-weight: 300; color: var(--text);
}
.ask input::placeholder { color: var(--faint); }
.send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); display: grid; place-items: center; }
.send svg { width: 17px; height: 17px; fill: var(--accent-ink); }

.note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.session .try { text-align: center; margin-top: 18px; }
body[data-answers] .session .try { display: none; }

/* ── Answer cards ──────────────────────────────────────────────────────────
   One per question, newest first: what was asked, the answer as short steps (the one
   being spoken lit up), the handbook section, page and pictures, and Share and Copy.
   The steps are cut from Agentforce's words, not a transcript, and each appears as the
   avatar says it. 15 px body text at full contrast, for an owner who may not catch,
   or keep, every spoken word. */
.answers { width: 100%; max-width: 560px; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.card {
  border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface);
  animation: rise 0.3s var(--ease);
}
.card-q {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  list-style: none; cursor: pointer;
}
.card-q::-webkit-details-marker { display: none; }
.card-q-label { font-size: 13px; color: var(--muted); }
.card-q-text { font-size: 16px; line-height: 1.4; color: var(--text); }
.card:not([open]) .card-q-text { font-size: 14px; color: rgba(243, 242, 239, 0.85); }
.card-body { padding: 0 18px 18px; }
.card-state { margin: 0; font-size: 15px; color: var(--muted); }
.card-steps { margin: 0; padding: 0 0 0 22px; }
.card-steps li::marker { color: var(--muted); }
div.card-steps { padding: 0; }
.card-steps > li, .card-steps > p {
  margin: 0 0 6px; padding: 4px 10px; border-radius: 10px;
  font-size: 15px; line-height: 1.5; color: var(--text);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  animation: rise 0.3s var(--ease);
}
.card-steps .now { background: rgba(227, 172, 28, 0.16); box-shadow: inset 3px 0 0 var(--accent); }
.card[data-failed] .card-steps > * { color: var(--muted); }

.card-hb { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hairline); }
.card-hb-label { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.card-hb-where { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.card-hb-where span { color: var(--muted); }
.card-pics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.card-pics button {
  display: block; width: 100%; height: 130px; padding: 8px; border-radius: 12px;
  border: 1px solid var(--hairline); background: #f4f4f2; cursor: zoom-in;
}
.card-pics img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-pics span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 14px; line-height: 1.4; color: rgba(243, 242, 239, 0.86);
}

.card-actions { display: flex; gap: 10px; margin: 16px 0 0; }
.card-actions button {
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface-hi);
  font-size: 15px; color: var(--text);
}
.card-actions button:hover { border-color: var(--accent); }

/* "Need a person?": the roadside line, a dealer and a call with a salesperson, on
   answers the assistant can't fully help with and on the end notices. */
.person { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hairline); }
.person-label { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.person-links { display: flex; flex-wrap: wrap; gap: 10px; }
.person-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface-hi);
  font-size: 15px; color: var(--text); text-decoration: none;
}
.person-links a:hover { border-color: var(--accent); }
.notice .person { margin: 0 0 18px; padding: 0; border: 0; }
.notice .person-links { justify-content: center; }

/* The demo booking page (book-a-call.html). */
body.book { min-height: 100dvh; }
.book-main { width: 100%; max-width: 560px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 20px 40px; align-items: stretch; }
.book-demo {
  margin: 0 0 24px; padding: 12px 16px; border-radius: 12px;
  background: rgba(227, 172, 28, 0.14); border: 1px solid rgba(227, 172, 28, 0.5);
  font-size: 15px; line-height: 1.5; color: var(--text);
}
.book-main h1 { font-size: 30px; font-weight: 400; line-height: 1.2; }
.book-lede { margin: 0 0 24px; font-size: 17px; line-height: 1.5; color: rgba(243, 242, 239, 0.86); }
.book-day h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--muted); }
.book-slots { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.book-slots a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); text-decoration: none; font-size: 17px;
}
.book-slots a:hover { border-color: var(--accent); }
.book-done { display: none; margin: 8px 0 22px; padding: 16px 18px; border-radius: 14px; background: var(--surface-hi); }
.book-done:target { display: block; }
.book-done h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.book-done p, .book-back { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(243, 242, 239, 0.86); }

/* Wide screens: the cards sit to the right of the avatar, scrolling on their own. */
@media (min-width: 1100px) {
  body:not([data-state="idle"]) .session {
    display: grid; max-width: 1280px; padding: 4px 32px 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 400px); column-gap: 40px; align-items: start;
  }
  .session-main { grid-column: 2; }
  .answers {
    grid-column: 3; margin: 0; position: sticky; top: 16px;
    max-height: calc(100dvh - 32px); overflow-y: auto; padding-bottom: 16px;
    animation: slide-in 0.4s var(--ease);
  }
}
@keyframes slide-in { from { opacity: 0; transform: translateX(-10px); } }

/* Lightbox. */
.lightbox {
  border: 0; padding: 0; border-radius: 22px; overflow: hidden;
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--bg-2); color: var(--text); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9);
}
.lightbox::backdrop { background: rgba(4, 5, 6, 0.82); backdrop-filter: blur(6px); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 22px; }
.lb-caption { margin: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-close { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); display: grid; place-items: center; }
.lb-close svg { width: 16px; height: 16px; fill: var(--text); }
.lightbox img { display: block; width: 100%; height: auto; max-height: calc(100vh - 110px); object-fit: contain; background: #fff; }

/* Footer: the disclosure, small and quiet. */
.foot {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: 40px 32px calc(28px + env(safe-area-inset-bottom));
  text-align: center; font-size: 11.5px; line-height: 1.7; color: var(--faint);
}
.foot p { margin: 0 0 6px; }
.foot a { color: var(--muted); }
.links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.links:empty { display: none; }

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .top { padding: calc(16px + env(safe-area-inset-top)) 20px 16px; }
  .logo { height: 22px; }
  .wordmark { height: 9.5px; }
  .product { font-size: 9px; letter-spacing: 0.28em; }

  .landing { padding: 0 16px; min-height: auto; display: flex; flex-direction: column; align-items: stretch; }
  .landing-photo { position: relative; inset: auto; height: 46vh; min-height: 260px; border-radius: 24px; background-position: 60% 50%; }
  .landing-photo::after { background: linear-gradient(0deg, rgba(8, 9, 11, 0.9) 0%, rgba(8, 9, 11, 0) 55%); }
  .landing-copy { padding: 26px 8px 0; margin-top: -86px; max-width: none; }
  .lede { margin-bottom: 26px; }
  .cta { width: 100%; }

  .session { padding: 0 16px; }
  .stage { max-width: min(100%, calc((100dvh - 290px) * var(--video-aspect, 1))); border-radius: 24px; }
  /* Ended or unavailable, the stage holds only its notice (the video is gone): it
     takes the notice's height, so "Need a person?" and Start again both show. */
  body[data-state="ended"] .stage, body[data-state="unavailable"] .stage { aspect-ratio: auto; }
  body[data-state="ended"] .notice, body[data-state="unavailable"] .notice { position: relative; inset: auto; overflow: visible; }
  .notice { padding: 24px 16px; gap: 8px; }
  .notice .person { margin-bottom: 12px; }
  .notice .person-links { gap: 8px; }
  .controls { gap: 14px; }
  .ctl { width: 54px; height: 54px; }
  .foot { padding: 32px 20px calc(22px + env(safe-area-inset-bottom)); }

  /* Answer first: once there is an answer, the avatar becomes a tile at the top (the
     whole picture at its own shape, smaller, never cropped), what it is doing and the
     last question beside it, the cards in the middle, and the controls pinned to the
     bottom. Ended or unavailable, the stage returns to full size for its notice. */
  /* Sticky on the block that holds the top row: its own container, the session, also
     holds the cards, so it stays put the whole way down them. */
  body[data-state="live"][data-answers] .session-main {
    position: sticky; top: 0; z-index: 5;
    background: #0b0c0f;  /* opaque: the answer scrolls underneath */
  }
  body[data-state="live"][data-answers] .session-top {
    flex-direction: row; align-items: center; gap: 14px; padding: 10px 0;
  }
  body[data-state="live"][data-answers] .stage { flex: none; width: 42%; max-width: 180px; border-radius: 16px; }
  body[data-state="live"][data-answers] .status { top: 10px; left: 10px; }
  body[data-state="live"][data-answers] .now { display: block; flex: 1; min-width: 0; }
  .now-state { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--accent); }
  .now-asked { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text); }
  .now-asked:empty { display: none; }
  body[data-state="live"][data-answers] .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
    background: #0b0c0f; border-top: 1px solid var(--hairline);
  }
  body[data-state="live"][data-answers] .controls { margin-top: 8px; }
  body[data-state="live"][data-answers] .caption { margin-top: 2px; min-height: 0; -webkit-line-clamp: 2; }
  body[data-state="live"][data-answers] .answers { margin-top: 12px; padding-bottom: 190px; }
  .card { scroll-margin-top: 150px; }
  .card-steps > * { scroll-margin-top: 170px; scroll-margin-bottom: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}