/* Leo shell (leo-shell.js): the site on the left, Leo docked on the right.
   Geometry and motion follow our agentic web builds: a 440px companion
   that settles in place (40px slide + fade), a full view that fades in over the page,
   and on phones a full-height sheet that drops to a floating peek bar.
   Solid surfaces, 1px hairlines, one accent. */
:root {
  --leo-w: clamp(380px, 34vw, 440px);
  --leo-bg: #06070F;
  --leo-surface: #0B0D18;
  --leo-raised: #161937;
  --leo-line: rgba(255, 255, 255, 0.08);
  --leo-line-2: rgba(255, 255, 255, 0.14);
  --leo-ink: #F4F5FA;
  --leo-muted: rgba(244, 245, 250, 0.56);
  --leo-accent: #6A6CFF;
  --leo-ease: cubic-bezier(.16, 1, .3, 1);
}

/* framed by the agent experiences page: Leo is already beside the page there */
html.dv-hosted .nav-leo,
html.dv-hosted .leo-ask-btn,
html.dv-hosted .leo-ask { display: none !important; }

/* the original page, once the site frame has taken over */
html.leo-on, html.leo-on body { overflow: hidden !important; background: var(--leo-bg) !important; }
html.leo-on > body > :not(.leo-shell) { display: none !important; }

.leo-shell { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; }
.leo-shell *, .leo-shell *::before, .leo-shell *::after { box-sizing: border-box; }

.leo-site {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: calc(100% - var(--leo-w)); height: 100%;
  border: 0; display: block; background: var(--leo-bg);
  visibility: hidden; opacity: 0; pointer-events: auto;
  transition: opacity .18s ease;
}
.leo-shell.site-ready .leo-site { visibility: visible; opacity: 1; }
.leo-shell.is-closed .leo-site { width: 100%; }

.leo-dock {
  position: absolute; right: 0; top: 0; z-index: 2;
  width: var(--leo-w); height: 100%;
  background: var(--leo-bg); border-left: 1px solid var(--leo-line);
  opacity: 0; visibility: hidden; transform: translateX(40px);
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
  pointer-events: auto;
}
.leo-shell.is-open .leo-dock {
  opacity: 1; visibility: visible; transform: none;
  transition: transform .5s var(--leo-ease), opacity .5s var(--leo-ease), visibility 0s;
}
.leo-frame { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: var(--leo-bg); }
.leo-wait {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--leo-muted); font: 600 12px/1 'Chakra Petch', Inter, sans-serif; letter-spacing: .08em;
}
.leo-wait-face {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--leo-surface) url('/assets/agent/poster.webp') 50% 22% / 220% no-repeat;
}

/* expanded (full view): Leo covers the window and fades in over the page; the page stays loaded
   (inert) underneath, and Leo shows it as a page card with what he did. */
.leo-shell[data-view="expanded"] .leo-dock { width: 100%; border-left: 0; }
.leo-shell[data-view="expanded"] .leo-site { pointer-events: none; transition: none; }
.leo-shell.xfade[data-view="expanded"] .leo-dock { animation: leo-full-in .45s var(--leo-ease) both; }
.leo-shell.xfade[data-view="docked"] .leo-dock { animation: leo-full-in .2s ease both; }
@keyframes leo-full-in { from { opacity: 0; } }

/* a video Leo brings: large over the site area (the left side), the page untouched underneath */
.leo-player {
  position: absolute; left: 0; top: 0; z-index: 2; width: calc(100% - var(--leo-w)); height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 32px;
  background: rgba(6, 7, 15, 0.92); pointer-events: auto;
  animation: leo-player-in .25s ease both;
}
@keyframes leo-player-in { from { opacity: 0; } }
.lp-box { width: min(100%, calc((100vh - 140px) * 16 / 9)); display: flex; flex-direction: column; gap: 12px; }
.lp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--leo-ink); }
.lp-bar b { font: 600 15px/1.3 'Chakra Petch', Inter, sans-serif; letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-act { display: inline-flex; gap: 8px; flex: none; }
.lp-go, .lp-x, .lp-sound {
  height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--leo-line-2);
  background: var(--leo-surface); color: var(--leo-ink); font: 500 13px/1 Inter, sans-serif; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.lp-x { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.lp-go:hover, .lp-x:hover, .lp-sound:hover { background: var(--leo-raised); border-color: rgba(255, 255, 255, 0.24); }
.lp-go:active, .lp-x:active, .lp-sound:active { transform: scale(.97); }
.lp-go:focus-visible, .lp-x:focus-visible, .lp-sound:focus-visible { outline: 2px solid var(--leo-accent); outline-offset: 2px; }
.lp-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--leo-line); }
.lp-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lp-sound { position: absolute; left: 14px; top: 14px; }
.lp-sound[hidden] { display: none; }

/* phones and tablets: Leo is a full-height sheet, or a floating peek bar over the page */
@media (max-width: 1023.98px) {
  .leo-site { width: 100%; }
  .leo-dock { width: 100%; height: 100%; border-left: 0; transform: translateY(16px); }
  .leo-shell.is-open .leo-dock { transition-duration: .35s; }
  .leo-shell[data-view="peek"] .leo-dock {
    top: auto; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto; height: 60px; border-radius: 30px; overflow: hidden; /* a full pill (owner, 18 Oct): its round ends wrap Leo's face and the button */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 44px -16px rgba(0, 0, 0, 0.6);
    /* glass (owner, 18 Oct 2026): the page shows through, blurred; the dock tints the bar itself */
    background: rgba(14, 15, 24, 0.3);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
  }
  /* clear frame in peek, same colour scheme as the dock so the browser does not paint it opaque */
  .leo-shell[data-view="peek"] .leo-frame { background: transparent; color-scheme: dark; }
  /* the loading face sits under the frame; with the frame clear it would show through the bar */
  .leo-shell[data-view="peek"] .leo-dock:has(.leo-frame) .leo-wait { display: none; }
  .leo-shell[data-view="peek"].is-open .leo-dock { animation: leo-sheet-in .35s var(--leo-ease) both; }
  /* the video fills the screen; Leo stays as the peek bar below it */
  .leo-player { width: 100%; padding: 16px 12px calc(84px + env(safe-area-inset-bottom)); }
  .lp-box { width: 100%; }
}
@keyframes leo-sheet-in { from { opacity: 0; transform: translateY(16px); } }
/* phones: with Leo as the peek bar the page keeps room at its foot, so the last lines and the hero's scroll cue
   are never under the bar (owner, 18 Oct 2026) */
@media (max-width: 1023.98px) {
  html.leo-peek body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  html.leo-peek .scroll-cue { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

.leo-shell.no-anim .leo-dock, .leo-shell.no-anim .leo-site { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .leo-player { animation: none; }
  .leo-dock, .leo-site { transition: none !important; }
  .leo-shell .leo-dock { animation: none !important; transform: none !important; }
}

.leo-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- openers on the pages ---------- */

/* "Ask Leo about this": a quiet text button beside a section's own buttons.
   The space is kept until the script is ready, so nothing moves when it appears. */
.leo-ask-btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 100px;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
  font: 500 14px/1.2 Inter, -apple-system, sans-serif; letter-spacing: .01em; white-space: nowrap;
  cursor: pointer; visibility: hidden;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
html.leo-ready .leo-ask-btn { visibility: visible; }
.leo-ask-btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.leo-ask-btn:active { transform: scale(.98); }
.leo-ask-btn:focus-visible { outline: 2px solid var(--leo-accent); outline-offset: 2px; }
.leo-ask-btn i {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #14151f url('/assets/agent/poster.webp') 50% 22% / 220% no-repeat;
}
.cs-light .leo-ask-btn, .leo-ask-btn--light { color: #0b0c16; border-color: rgba(8, 9, 20, 0.22); }
.cs-light .leo-ask-btn:hover, .leo-ask-btn--light:hover { border-color: #0b0c16; background: rgba(8, 9, 20, 0.04); }

/* the home page question, under the hero title */
.hero-title.has-ask { flex-direction: column; }
.leo-ask {
  position: relative; display: flex; align-items: center;
  width: 100%; max-width: 520px; height: 52px; margin: 30px auto 0;
  background: var(--leo-surface); border: 1px solid var(--leo-line-2); border-radius: 14px;
  pointer-events: auto; text-align: left;
  transition: border-color .16s ease;
}
.leo-ask:hover { border-color: rgba(255, 255, 255, 0.24); }
.leo-ask:focus-within { border-color: var(--leo-accent); }
.leo-ask label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leo-ask input {
  flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 18px;
  background: transparent; border: 0; outline: none; color: var(--leo-ink);
  font: 400 15px/1.2 Inter, -apple-system, sans-serif; letter-spacing: 0; text-transform: none;
}
.leo-ask input::placeholder { color: rgba(244, 245, 250, 0.5); }
.leo-ask button {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 6px;
  background: var(--leo-raised); color: #fff; border: 0; border-radius: 10px; cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.leo-ask button:hover { background: var(--leo-accent); transform: translateY(-1px); }
.leo-ask button:active { transform: scale(.98); }
.leo-ask button:focus-visible { outline: 2px solid var(--leo-accent); outline-offset: 2px; }
.leo-ask button svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .leo-ask { height: 50px; margin-top: 24px; }
  .leo-ask input { font-size: 16px; } /* no zoom on focus in iOS */
}
.leo-ask-btn--inline { margin-left: 12px; vertical-align: middle; }
@media (max-width: 600px) { .leo-ask-btn--inline { margin: 14px 0 0; } }