/* Beta landing page — layout for the JS-built skeleton (index.js).
   Derived from the mock (_mock.css): content pane, avatar pane, input island, responsive + print.
   Card/hero/footer styles are omitted here; they arrive when real content is built. */

:root {
  color-scheme: light dark;
  --bg-page:        #dfeaf2;
  --bg-card:        #ffffff;
  --bg-glass:       rgba(255, 255, 255, 0.72);
  --text-primary:   #1d1d1f;
  --text-secondary: #4b4b52;
  --text-muted:     #86868b;
  --border-color:   #e5e5e7;
  --shadow-color:   rgba(0, 0, 0, 0.08);
  --echo-color:     rgba(0, 0, 0, 0.45);
  --echo-etch:      rgba(255, 255, 255, 0.95);
  --chip-border:    #b0b0b5;
  --menu-tile:      linear-gradient(155deg, #eef4fb 0%, #ffffff 72%);
  --menu-fill:        rgba(255, 255, 255, 0.2);
  --menu-fill-strong: rgba(0, 0, 0, 0.09);
  --form-card-bg:           #fff9e6;

  --island-radius:  28px;
  --card-radius:    24px;
  --edge-inset:     24px;
  --avatar-width:   280px;
}

/* Dark variant — follows the system (browser) color-scheme setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:        #0a0f1e;
    --bg-card:        #171d30;
    --bg-glass:       rgba(22, 28, 44, 0.6);
    --text-primary:   #eef2f8;
    --text-secondary: #b3bccb;
    --text-muted:     #7a8496;
    --border-color:   rgba(255, 255, 255, 0.12);
    --shadow-color:   rgba(0, 0, 0, 0.45);
    --echo-color:     rgba(255, 255, 255, 0.6);
    --echo-etch:      rgba(0, 0, 0, 0.5);
    --chip-border:    rgba(255, 255, 255, 0.35);
    --menu-tile:      linear-gradient(155deg, #1e2740 0%, #171d30 72%);
    --menu-fill:        rgba(0, 0, 0, 0.2);
    --form-card-bg:           #3d3a28;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }
body {
  min-height: 100%;
  overscroll-behavior-y: contain;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Atmosphere ----------
   A lively sky-over-floor backdrop, fixed behind all content so it doesn't scroll. Extended past the
   viewport by the device safe-area insets (negative top margin + extra height) so it covers the
   notch/status-bar and the home-indicator strip below the toolbar that content scrolls into. The dark
   variant swaps it for a hero.png-style nebula (below). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sky);
}

:root {
  --sky:
    /* Fade the atmosphere to the page color at the top/bottom edges, so any strip the fixed layer
       doesn't reach (below the toolbar / safe areas) blends seamlessly into the same base color. */
    linear-gradient(to bottom, var(--bg-page), transparent 48px, transparent calc(100% - 48px), var(--bg-page)),
    /* warm sun glow, upper-right */
    radial-gradient(48% 42% at 80% 16%, rgba(255, 209, 138, 0.55), rgba(255, 209, 138, 0) 70%),
    /* azure sky bloom, upper-left */
    radial-gradient(55% 48% at 20% 22%, rgba(120, 186, 240, 0.5), rgba(120, 186, 240, 0) 72%),
    /* sun-lit pool on the floor, toward the avatar */
    radial-gradient(46% 120px at 78% 100%, rgba(255, 224, 168, 0.55), rgba(255, 224, 168, 0) 80%),
    /* floor — perceivable ground plane: cool light, depth gradient toward the horizon */
    linear-gradient(to top,
      rgba(196, 210, 228, 0.92) 0,
      rgba(196, 210, 228, 0.5) 42px,
      rgba(196, 210, 228, 0.16) 72px,
      rgba(196, 210, 228, 0) 96px),
    /* horizon haze */
    linear-gradient(0deg, transparent 52%, rgba(150, 214, 224, 0.32) 62%, transparent 76%),
    /* base sky wash */
    linear-gradient(to bottom, #bfe0f5 0%, #d6e6f2 46%, #eaf0f4 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sky:
      /* fade to the page color at the top/bottom edges (see the light variant) */
      linear-gradient(to bottom, var(--bg-page), transparent 48px, transparent calc(100% - 48px), var(--bg-page)),
      /* amber star glow, lower-left */
      radial-gradient(42% 42% at 16% 82%, rgba(235, 150, 66, 0.32), rgba(235, 150, 66, 0) 70%),
      /* azure nebula glow, upper-right */
      radial-gradient(62% 55% at 80% 26%, rgba(78, 146, 214, 0.42), rgba(78, 146, 214, 0) 72%),
      /* cool haze, mid */
      radial-gradient(85% 70% at 52% 52%, rgba(96, 138, 200, 0.16), rgba(96, 138, 200, 0) 82%),
      /* floor — dark ground plane with a faint azure sheen so it stays perceivable */
      linear-gradient(to top,
        rgba(34, 50, 80, 0.9) 0,
        rgba(26, 40, 66, 0.55) 44px,
        rgba(22, 34, 58, 0.22) 76px,
        rgba(22, 34, 58, 0) 100px),
      /* base deep-space */
      linear-gradient(to bottom, #070b16 0%, #0a1122 46%, #0c1426 100%);
  }
}

/* ---------- Layout ----------
   body = app. main#content is the primary flow and dictates the page's height; the window scrolls
   it. #avatar-pane and #input-island are fixed overlays that float above the content. Desktop puts
   the avatar on the right; mobile puts it above the input island. Content starts empty — the
   padding still reserves the avatar column and the space under the island. */

#content {
  padding: 40px calc(var(--avatar-width) + 40px) 220px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ---------- Avatar pane (placeholder) ---------- */

#avatar-pane {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--avatar-width);
  pointer-events: none;
  z-index: 90;
}

#avatar-stage {
  position: absolute;
  inset: 0;
}
#avatar-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Input dock ----------
   The status bar and the input island share one bottom-anchored column (status bar on top). The dock
   is pinned to the bottom with auto height, so as the unibar grows the column grows upward and the
   status bar rides up, staying just above it. The Unibar styles the pill; the page positions the dock. */

#input-dock {
  position: fixed;
  bottom: var(--edge-inset);
  /* Align with the hero video's breached edges. */
  left: 20px;
  right: calc(var(--avatar-width) + 20px);
  z-index: 101;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Content entities ----------
   The three interleaved entities the timeline renders into #content (see _mock.html): a proofread
   user echo (user-card), the agent's plain-text reply (agent-card), and a knowledge record rendered
   from RAPP → HTML (knowledge-card). */

.card {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--card-radius);
  padding: 24px 28px;
}
.card p { font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.card p + p { margin-top: 10px; }

.user-card {
  width: 100%;
  padding: 16px 28px 0 0;
  text-align: left;
}
.user-card p {
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--echo-color);
  text-shadow: 0 1px 0 var(--echo-etch);
  transition: opacity 0.25s ease;
}
.user-card p::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M2 1 11 7 2 13Z' fill='%23888888'/%3E%3C/svg%3E");
  margin-right: 10px;
  vertical-align: -2px;
  filter: drop-shadow(0 1px 0 var(--echo-etch));
}
@media (prefers-color-scheme: dark) {
  .user-card p::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M2 1 11 7 2 13Z' fill='%23c7d0de'/%3E%3C/svg%3E");
  }
}


/* ---------- Follow-up nav card ----------
   Appended after a knowledge card (index.js appendFollowUp): dashed topic chips, no background,
   under the "Tell me about …" user echo and aligned with the card content. */
.nav-card {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}
.nav-chip {
  border: 1px dashed var(--chip-border);
  background: none;
  border-radius: 16px;
  padding: 7px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* ---------- Input-island menu (expanded panel) ----------
   Two sections: §1 app/doc links as an icon grid ([icon][title] over [caption]); §2 conversational
   prompts as shorter/wider cells. Both responsive (columns wrap to width). The unibar owns the
   panel's edge padding and the pinned brand header (.uai-unibar-menu-header/-body); the classes
   here style only the content the page injects. */
.menu-section { display: flex; flex-direction: column; gap: 10px; }
.menu-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.menu-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.menu-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--menu-fill);
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
}
.menu-link-top { display: flex; align-items: center; gap: 16px; }
.menu-icon { width: 60px; height: 60px; object-fit: contain; flex: 0 0 auto; }
.menu-text { height: 34px; width: auto; object-fit: contain; flex: 0 1 auto; }
.menu-name { font-weight: 600; font-size: 15px; color: var(--text-secondary); margin-top: 4px; }
.menu-caption { font-size: 12px; color: var(--text-muted); }

.menu-prompts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.menu-prompt {
  display: block;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: var(--menu-fill);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

/* Form card — the read-only echo of a submitted form (the user's turn); mirrors the editable form's
   draft-tinted grid, minus the inputs. */
.form-card {
  width: 100%;
  background: var(--form-card-bg);
  border-radius: var(--card-radius);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 12px;
}
.form-card-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.form-card-label { font-size: 12px; color: var(--text-muted); }
.form-card-value {
  font-size: 15px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Content typography for RAPP/markdown → HTML. Knowledge records, the hero, and the doc viewer all
   render into a `.record-body`, so scoping here covers every one. Mirrors companion's markdown styling.
   Paragraphs use the shared `.card p`. */
.record-body h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; }
.record-body h2 { font-size: 21px; font-weight: 600; color: var(--text-primary); margin: 20px 0 12px; }
.record-body h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 16px 0 8px; }
.record-body ul, .record-body ol { padding-left: 2rem; margin: 0.5em 0; }
.record-body ul { list-style: disc; }
.record-body ol { list-style: decimal; }
.record-body li { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 0.25em; }
.record-body li:last-child { margin-bottom: 0; }
.record-body ul ul, .record-body ul ol, .record-body ol ul, .record-body ol ol { margin: 0.25em 0; }
.record-body li > p:last-child { margin-bottom: 0; }
.record-body strong, .record-body b { color: var(--text-primary); font-weight: 600; }
.record-body a { color: #1a73e8; text-decoration: none; word-break: break-word; }
.record-body code { background: rgba(128, 128, 128, 0.16); padding: 2px 4px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; font-size: 0.85em; }
.record-body pre { background: rgba(128, 128, 128, 0.16); padding: 8px 10px; border-radius: 4px; overflow-x: auto; margin: 0.5em 0; line-height: 1.4; }
.record-body pre code { background: transparent; padding: 0; }
.record-body blockquote { border-left: 3px solid rgba(128, 128, 128, 0.35); padding-left: 12px; margin: 0.5em 0; opacity: 0.9; }
.record-body > :first-child { margin-top: 0; }

/* ---------- Hero card ----------
   The special first card: a brand row, the hero's media that breaches the card edges (the "front
   perspective" pop-out, reserved for the hero), and the record's paragraph(s) below. No nav
   buttons. Values ported from _mock.css. */

.hero-card { display: flex; flex-direction: column; gap: 20px; }

/* The hero's media: an empty panel on the inner surface, in place of the video. */
.hero-media {
  margin-left: -48px;
  margin-right: -48px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--uai-inner-surface);
  container-type: inline-size;
}
.hero-media-content { display: flex; height: 100%; padding: 8px; }
/* Its corners sit concentric with the media's: the media's 18px less the 8px between them. */
/* The phone: a picture of One's screen, at the picture's own proportions. */
.hero-media-phone {
  aspect-ratio: 572 / 1266;
  display: flex;
  border-radius: 10px;
  background: url("resource/images/one-phone-light.png") center / cover;
}
@media (prefers-color-scheme: dark) {
  .hero-media-phone { background-image: url("resource/images/one-phone-dark.png"); }
}
/* The pitch, centred: the product's name over its promise at the top, the subscribe button over the
   trial at the bottom, every size a share of the media's width (cqw). */
.hero-media-pitch {
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 6cqw;
  justify-items: center;
  text-align: center;
  padding: 5.4cqw;
}
/* The block between the promise and the button: the row the grid gives it, whatever its icons. */
.hero-pitch-icons { justify-self: stretch; color: var(--text-muted); }
.hero-pitch-heading { display: flex; flex-direction: column; align-items: center; gap: 1.65cqw; }
.hero-pitch-call { display: flex; flex-direction: column; align-items: center; gap: 1.47cqw; }
.hero-pitch-title { font-size: 3.9cqw; line-height: 1.1; color: var(--text-primary); }
.hero-pitch-subtitle { font-size: 3.8cqw; line-height: 1.2; color: var(--text-secondary); }
.hero-pitch-trial { font-size: 2.08cqw; color: var(--text-muted); }
.hero-pitch-subscribe { padding: 2.625cqw 6.09cqw; border-radius: 999px; background: var(--uai-control-blue); color: #ffffff; font-size: 3.15cqw; font-weight: 600; text-decoration: none; }

.hero-media-mascot { flex: 1; display: grid; place-items: center; }
.hero-media-mascot > .uai-one-mascot { width: 80%; }

.brand-row { display: flex; align-items: center; gap: 18px; }
.brand-mark { height: 28px; width: auto; display: block; }
.brand-lines { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.brand-parent { font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em; }
.brand-product { font-size: 14px; font-weight: 600; color: var(--text-secondary); }

/* Full-screen video player: a video's gallery cell opens this modal; a click on the dimmed backdrop (outside
   the video) closes it. The frame keeps 16:9 and grows to fill the viewport. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
}
.video-modal-frame {
  width: min(92vw, 92vh * 16 / 9);
  aspect-ratio: 16 / 9;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.video-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.image-modal-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* ---------- Record media ----------
   A knowledge card stacks its body, then a gallery of its pictures and videos. */

.knowledge-card { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Tables (RAPP/markdown → HTML) ----------
   Styled after companion's markdown tables: full width, collapsed borders, padded cells, hairline row
   rules, wrapped in a horizontally-scrollable container (the converter emits `.table-scroll`). RAPP
   tables carry only <td>; the doc viewer's markdown may add a <th> header row. */
.record-body .table-scroll {
  overflow-x: auto;
  margin: 0.75em 0;
  -webkit-overflow-scrolling: touch;
}
.record-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}
.record-body th,
.record-body td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}
.record-body th {
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.record-body tr:last-child td { border-bottom: 0; }
.price-included { padding-left: 1em; }
b + .price-included { margin-top: 6px; }

/* The live demos: the top of each demo's website, its name inside it at the foot, on a dark fade. The
   image and the name share one cell. */
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.record-body .demo-link { display: grid; overflow: hidden; border-radius: 18px; text-decoration: none; }
.demo-shot, .demo-name { grid-area: 1 / 1; }
.demo-shot { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
.demo-name {
  align-self: end;
  padding: 24px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Mobile ----------
   Avatar moves to the top-right (upper half), input island sits fixed at the bottom, content flows
   and scrolls in between. */

@media (max-width: 768px) {
  #content {
    padding: 24px 20px calc(var(--edge-inset) + 60px + 312px) 20px;
    gap: 12px;
  }

  #avatar-pane {
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(var(--edge-inset) + 54px);
    width: 150px;
    height: auto;
    aspect-ratio: 1 / 2;
  }

  #input-dock {
    left: 20px;
    right: 20px;
  }

  /* Breach 10px past the card edge (28px card padding + 10px), vs 20px on desktop. */
  .hero-media { margin-left: -38px; margin-right: -38px; }  .demo-grid { grid-template-columns: 1fr; }
}

/* ---------- Page footer ----------
   An ordinary last card. The big margin above drops it into the middle of the reserved
   space under the content — the other half is #content's bottom padding. */
.footer-card {
  order: 1; /* keeps the footer last even when cards are appended after it */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 140px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.footer-links .footer-link {
  font-size: 13px;
  letter-spacing: 0.18em;
}
.footer-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}
.footer-copyright { font-size: 13px; color: var(--text-muted); }

/* ---------- Print ----------
   No !important — print wins by the cascade. Theme tokens are redefined here (the same
   mechanism as the dark-mode block above), so every var() consumer updates; the few
   literal-value overrides use selectors of equal/greater specificity placed later in
   this stylesheet, so normal source order settles them. */

@media print {
  /* Black text, white page, no card fills, no etch (the only drop-shadow rode on --echo-etch). */
  :root {
    --bg-page: #fff;
    --text-primary: #000;
    --text-secondary: #000;
    --text-muted: #000;
    --echo-color: #000;
    --echo-etch: transparent;
    --bg-card: transparent;
    --form-card-bg: transparent;
    --bg-glass: transparent;
  }

  /* Hide the live UI, the follow-up (echo + nav chips), and the footer links. */
  body::before,
  #avatar-pane,
  #input-dock,
  .nav-card,
  .user-card:has(+ .nav-card),
  .footer-links { display: none; }

  html, body { overflow: visible; height: auto; }
  #content { padding: 20px; }

  /* Links → black. */
  .record-body a,
  .footer-link { color: #000; }

  /* Every filled card gains a border in place of its fill (.card = hero/knowledge/agent). */
  .card,
  .form-card { border: 1px solid #000; }

  /* The hero's media stays within the card. */
  .hero-media { margin-left: 0; margin-right: 0; }

  .footer-card { margin-top: 40px; }
}