/* Build Your scene: Vector's floating conversation beside a floating live preview window. */
.build {
  position: fixed;
  inset: 0;
  z-index: var(--z-scene);
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3rem 4rem 3rem calc(var(--world-pad) + var(--nav-space) + 1rem);
}

/* ---- Conversation ---------------------------------------------------------- */
.build__chat {
  display: flex;
  flex-direction: column;
  height: min(44rem, 100dvh - 6rem);
  overflow: hidden;
  border-radius: 26px;
  background: var(--surface-white);
  box-shadow: 0 10px 30px rgb(17 17 17 / 0.06);
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgb(17 17 17 / 0.07);
}

/* Vector in miniature: the entity arrives here from the Vector scene */
.build-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 52% 48% 55% 45%;
  background: var(--ink);
  animation: avatar-breathe 2.6s ease-in-out infinite;
}

.build-avatar.is-thinking {
  animation-duration: 0.9s;
}

@keyframes avatar-breathe {
  50% { scale: 1.08; border-radius: 46% 54% 48% 52%; }
}

.chat__name {
  font-size: 0.95rem;
  font-weight: 700;
}

.chat__status {
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.chat__restart {
  margin-left: auto;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgb(17 17 17 / 0.12);
  border-radius: 999px;
  background: none;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.chat__log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  padding: 1.25rem;
  overscroll-behavior: contain;
}

.chat-msg {
  max-width: 90%;
  font-size: 0.95rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.chat-msg--vector {
  align-self: flex-start;
}

.chat-word {
  display: inline-block;
}

.chat-msg--user {
  align-self: flex-end;
  padding: 0.55rem 0.9rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--ink);
  color: var(--bg);
}

.chat-msg--thinking {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1.25rem;
}

.chat__chips:not(:empty) {
  padding-bottom: 0.75rem;
}

.chat-chip {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgb(17 17 17 / 0.14);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
}

.chat-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.chat-chip--done {
  border-color: var(--accent);
  color: var(--accent);
}

.chat__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid rgb(17 17 17 / 0.07);
}

.chat__input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-radius: 14px;
  outline: 0;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}

.chat__input:focus-visible {
  box-shadow: 0 0 0 2px var(--ink);
}

.chat__input:disabled {
  opacity: 0.5;
}

.chat__send {
  display: grid;
  place-items: center;
  width: 2.6rem;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
}

.chat__send:disabled {
  opacity: 0.3;
}

.chat__send svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat__restart:focus-visible,
.chat-chip:focus-visible,
.chat__send:focus-visible,
.brief__submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Adaptive brief form, inside the conversation */
.brief {
  display: grid;
  gap: 0.7rem;
  width: 100%;
  max-width: none;
  padding: 1rem;
  border-radius: 18px;
  background: var(--bg);
}

.brief__field {
  display: grid;
  gap: 0.3rem;
}

.brief__label {
  font-size: 0.78rem;
  font-weight: 600;
}

.brief__control {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(17 17 17 / 0.12);
  border-radius: 10px;
  background: var(--surface-white);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}

.brief__control:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.brief__control[aria-invalid="true"] {
  border-color: var(--surface-coral);
}

.brief__error {
  color: #b4473a;
  font-size: 0.75rem;
}

.brief__error:empty {
  display: none;
}

.brief__submit {
  margin-top: 0.25rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9rem;
  font-weight: 600;
}

.brief__submit:disabled {
  opacity: 0.5;
}

.brief-summary__list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.9rem 1rem 0.9rem 1.9rem;
  border-radius: 16px;
  background: var(--bg);
  font-size: 0.88rem;
}

/* ---- Preview window ---------------------------------------------------------- */
.preview {
  display: flex;
  flex-direction: column;
  justify-self: center;
  width: min(100%, (100dvh - 6rem) * 1.45);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-white);
  box-shadow: 0 14px 40px rgb(17 17 17 / 0.08);
}

.preview__bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgb(17 17 17 / 0.07);
  font-size: 0.75rem;
}

.preview__dots {
  display: flex;
  gap: 5px;
}

.preview__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(17 17 17 / 0.14);
}

.preview__url {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-muted);
}

.preview__status {
  margin-left: auto;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.preview__status b {
  color: var(--ink);
  font-weight: 600;
}

.preview__status[data-phase="rebuilt"] b {
  color: var(--accent);
}

.preview__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
}

.preview__page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  container-type: inline-size;
  background: var(--p-bg);
  color: var(--p-ink);
}

/* System scan line during a rebuild: the only "loading" signal */
.preview__scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* ---- Generated site (scaled with the preview width) ---------------------------- */
.preview__page[data-feel="blank"] { --p-bg: #fbfaf8; --p-ink: #1d1d1b; }
.preview__page[data-feel="calm"] {
  --p-bg: #f7f6f2; --p-ink: #1d1d1b; --p-muted: rgb(29 29 27 / 0.55); --p-surface: #ffffff;
  --p-line: rgb(29 29 27 / 0.1); --p-accent: var(--surface-media); --p-on-accent: #1d1d1b; --p-radius: 1.2cqw; --p-weight: 600;
}
.preview__page[data-feel="bold"] {
  --p-bg: #ffffff; --p-ink: #111111; --p-muted: rgb(17 17 17 / 0.55); --p-surface: #f2f1ef;
  --p-line: rgb(17 17 17 / 0.1); --p-accent: var(--surface-coral); --p-on-accent: #111111; --p-radius: 2.4cqw; --p-weight: 800;
}
.preview__page[data-feel="warm"] {
  --p-bg: #f4ede2; --p-ink: #2a2420; --p-muted: rgb(42 36 32 / 0.6); --p-surface: #fbf7f0;
  --p-line: rgb(42 36 32 / 0.12); --p-accent: var(--surface-amber); --p-on-accent: #2a2420; --p-radius: 0.6cqw; --p-weight: 500;
}
.preview__page[data-feel="technical"] {
  --p-bg: #121316; --p-ink: #eceff3; --p-muted: rgb(236 239 243 / 0.55); --p-surface: #1c1e23;
  --p-line: rgb(255 255 255 / 0.08); --p-accent: var(--surface-purple); --p-on-accent: #ffffff; --p-radius: 0.8cqw; --p-weight: 600;
}

.preview__page :is(h1, h2, h3, p, figure) { margin: 0; }
/* Base size on the children: cqw on the page itself would resolve against the viewport */
.preview__page > * { font-size: 1.6cqw; line-height: 1.4; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 2.2cqw 4cqw;
  border-bottom: 1px solid var(--p-line);
}
.site-logo { font-weight: 800; }
.site-links { display: flex; gap: 2.4cqw; color: var(--p-muted); }
.site-search {
  flex: 1;
  max-width: 24cqw;
  padding: 0.8cqw 1.6cqw;
  border-radius: 99cqw;
  background: var(--p-surface);
  color: var(--p-muted);
}
.site-nav > :last-child { margin-left: auto; }

.site-section { padding: 3.5cqw 4cqw; }
.site-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2cqw; }
.site-heading h2 { font-size: 2.4cqw; font-weight: var(--p-weight); }

.site-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4cqw;
  align-items: center;
  padding-block: 6cqw;
}
.site-hero h1 { font-size: 5.4cqw; font-weight: var(--p-weight); line-height: 1.02; text-wrap: balance; }
.site-hero p { margin-top: 1.4cqw; color: var(--p-muted); font-size: 1.9cqw; }
.site-actions { display: flex; gap: 1.2cqw; margin-top: 2.6cqw; }
.site-art {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--p-radius);
  background: var(--p-accent);
}
.site-art span {
  position: absolute;
  right: 12%;
  bottom: -18%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--p-surface);
  opacity: 0.6;
}

.site-btn {
  padding: 1cqw 2cqw;
  border: 1px solid var(--p-ink);
  border-radius: calc(var(--p-radius) * 0.8);
  background: var(--p-ink);
  color: var(--p-bg);
  font: inherit;
  font-weight: 600;
}
.site-btn--ghost { background: none; color: var(--p-ink); }
.site-btn--small { padding: 0.7cqw 1.5cqw; font-size: 1.4cqw; }

.site-grid { display: grid; gap: 2cqw; }
.site-grid--3 { grid-template-columns: repeat(3, 1fr); }
.site-card {
  padding: 2.2cqw;
  border-radius: var(--p-radius);
  background: var(--p-surface);
}
.site-card h3 { font-size: 1.8cqw; font-weight: 600; }
.site-card p { color: var(--p-muted); }
.site-icon { display: block; width: 3cqw; height: 3cqw; margin-bottom: 1.4cqw; border-radius: 30%; background: var(--p-accent); }

.site-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.site-gallery span { aspect-ratio: 4 / 3; border-radius: var(--p-radius); background: var(--p-surface); }
.site-gallery span:nth-child(3n + 1) { background: var(--p-accent); opacity: 0.7; }

.site-quote p { color: var(--p-ink); }
.site-quote figcaption { display: flex; align-items: center; gap: 1cqw; margin-top: 1.6cqw; color: var(--p-muted); }
.site-avatar { display: inline-block; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--p-accent); }

.site-switch {
  display: inline-flex;
  padding: 0.4cqw;
  border: 0;
  border-radius: 99cqw;
  background: var(--p-surface);
  color: var(--p-muted);
  font: inherit;
  font-size: 1.3cqw;
}
.site-switch span { padding: 0.5cqw 1.4cqw; border-radius: 99cqw; }
.site-switch[aria-pressed="false"] span:first-child,
.site-switch[aria-pressed="true"] span:last-child { background: var(--p-ink); color: var(--p-bg); }
.site-plan.is-featured { outline: 2px solid var(--p-accent); }
.site-card .site-price { margin: 0.8cqw 0 1.2cqw; color: var(--p-ink); font-size: 2.6cqw; font-weight: 700; }

.site-form { display: grid; gap: 1.2cqw; max-width: 50cqw; }
.site-field { padding: 1.2cqw 1.6cqw; border: 1px solid var(--p-line); border-radius: calc(var(--p-radius) * 0.6); color: var(--p-muted); }
.site-field--tall { padding-bottom: 5cqw; }
.site-form .site-btn { justify-self: start; }

.site-footer {
  display: flex;
  justify-content: space-between;
  padding: 3cqw 4cqw;
  border-top: 1px solid var(--p-line);
  color: var(--p-muted);
  font-size: 1.3cqw;
}

.site-cart, .site-chip, .site-tab, .site-slot, .site-heart, .site-toggle {
  border: 1px solid var(--p-line);
  background: none;
  color: var(--p-ink);
  font: inherit;
}
.site-cart { display: inline-flex; gap: 0.8cqw; align-items: center; padding: 0.7cqw 1.5cqw; border-radius: 99cqw; }
.site-cart b { min-width: 2.2cqw; padding: 0 0.6cqw; border-radius: 99cqw; background: var(--p-accent); color: var(--p-on-accent); font-variant-numeric: tabular-nums; text-align: center; }
.site-chips { display: flex; flex-wrap: wrap; gap: 1cqw; }
.site-chip { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.7cqw 1.6cqw; border-radius: 99cqw; }
.site-chip[aria-pressed="true"], .site-tab[aria-pressed="true"], .site-slot[aria-pressed="true"] {
  border-color: var(--p-ink);
  background: var(--p-ink);
  color: var(--p-bg);
}
.site-product .site-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: 1.4cqw;
  border-radius: calc(var(--p-radius) * 0.8);
  background: var(--p-bg);
}
.site-product .site-btn { margin-top: 1.2cqw; }
.site-heart { position: absolute; top: 1cqw; right: 1cqw; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--p-surface); }
.site-heart[aria-pressed="true"] { border-color: var(--p-accent); background: var(--p-accent); }
.site-summary p { display: flex; justify-content: space-between; padding: 0.8cqw 0; }
.site-summary .site-btn { width: 100%; margin-top: 1.4cqw; }
.site-summary .site-total { border-top: 1px solid var(--p-line); color: var(--p-ink); font-weight: 700; }

.site-app { display: grid; grid-template-columns: 18cqw 1fr; min-height: 100%; }
.site-side { display: flex; flex-direction: column; gap: 1.4cqw; padding: 3cqw 2.4cqw; border-right: 1px solid var(--p-line); color: var(--p-muted); }
.site-side .site-logo { margin-bottom: 2cqw; color: var(--p-ink); }
.site-side .is-active { color: var(--p-ink); font-weight: 600; }
.site-main { min-width: 0; }
.site-main .site-section { padding: 0 3cqw 3cqw; }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 3cqw; }
.site-top h1 { font-size: 3cqw; font-weight: var(--p-weight); }
.site-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; padding: 0 3cqw 3cqw; }
.site-kpi strong { display: block; margin-top: 0.6cqw; font-size: 2.8cqw; font-variant-numeric: tabular-nums; }
.site-tabs { display: flex; gap: 0.6cqw; }
.site-tab { padding: 0.5cqw 1.4cqw; border-radius: 99cqw; font-size: 1.3cqw; }
.site-bars { display: flex; align-items: flex-end; gap: 1.2cqw; height: 22cqw; }
.site-bars span { flex: 1; border-radius: 0.6cqw 0.6cqw 0 0; background: var(--p-accent); }
.site-table p { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 1cqw 0; border-bottom: 1px solid var(--p-line); color: var(--p-ink); font-variant-numeric: tabular-nums; }
.site-table p:last-child { border-bottom: 0; }
.site-alert { display: flex; align-items: center; gap: 1.2cqw; color: var(--p-ink); }
.site-dot { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--p-accent); }
.site-people { display: flex; gap: 1cqw; }

.site-calendar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; }
.site-calendar div { display: grid; gap: 0.8cqw; }
.site-calendar p { color: var(--p-ink); font-weight: 600; text-align: center; }
.site-slot { padding: 0.8cqw 0; border-radius: calc(var(--p-radius) * 0.6); font-variant-numeric: tabular-nums; }
.site-row { display: flex; align-items: center; justify-content: space-between; color: var(--p-ink); }
.site-toggle { position: relative; width: 5.4cqw; height: 3cqw; border-radius: 99cqw; background: var(--p-line); }
.site-toggle::after { content: ""; position: absolute; top: 0.4cqw; left: 0.4cqw; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--p-ink); transition: translate 150ms ease-out; }
.site-toggle[aria-pressed="true"] { background: var(--p-accent); }
.site-toggle[aria-pressed="true"]::after { translate: 2.4cqw 0; }

.site-blank { display: grid; gap: 3cqw; padding: 4cqw; }
.site-blank span { display: block; border-radius: 1.2cqw; background: rgb(17 17 17 / 0.06); }
.site-blank__bar { height: 3cqw; }
.site-blank__hero { height: 26cqw; }
.site-blank__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.site-blank__row span { height: 12cqw; }
.site-blank__note { color: rgb(17 17 17 / 0.4); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .build-avatar { animation: none; }
}

/* ---- Library components added for the new preview types --------------------------------- */
.site-hero--statement { display: block; padding-block: 28px 18px; }
.site-hero--statement h1 { font-size: 2.1em; line-height: 1.05; }

.site-faq { display: grid; gap: 6px; }
.site-faq summary { font-weight: 600; cursor: pointer; }
.site-faq details p { margin-top: 6px; }

.site-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.site-work { display: flex; align-items: flex-end; min-height: 64px; padding: 8px; border-radius: var(--p-radius); background: var(--p-line); }
.site-work--1 { min-height: 92px; }
.site-work--2 { min-height: 50px; }
.site-work b { font-size: 0.85em; font-weight: 600; }

.site-case { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items: center; }
.site-case__image { aspect-ratio: 4 / 3; border-radius: var(--p-radius); background: var(--p-accent); opacity: 0.85; }
.site-kicker { font-size: 0.75em; font-weight: 600; opacity: 0.6; text-transform: uppercase; }

.site-bio { display: flex; gap: 14px; align-items: center; }
.site-avatar--large { width: 48px; height: 48px; flex: none; }

.site-form--two { grid-template-columns: 1fr 1fr; }

.site-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.site-column { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: var(--p-radius); background: var(--p-line); }
.site-column > p { font-size: 0.75em; font-weight: 600; opacity: 0.7; }
.site-ticket { padding: 8px; border: 0; background: var(--p-surface); color: inherit; text-align: left; font: inherit; font-size: 0.85em; cursor: pointer; }

.site-thread { display: grid; gap: 6px; }
.site-bubble { justify-self: start; max-width: 80%; padding: 6px 10px; border-radius: var(--p-radius); background: var(--p-line); font-size: 0.85em; }
.site-bubble--user { justify-self: end; background: var(--p-accent); color: var(--p-on-accent); }
.site-composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }

.site-steps { display: grid; gap: 6px; }
.site-steps p { display: flex; align-items: center; gap: 8px; font-size: 0.85em; }
.site-dot.is-live { background: var(--p-accent); }

.site-viewport { display: grid; gap: 8px; }
.site-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.site-model { width: 100%; height: 150px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.site-model g { transform-origin: center; transform-box: fill-box; }
.site-model.is-spinning g { animation: site-spin 9s linear infinite; }

@keyframes site-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.site-tree { display: grid; gap: 2px; }
.site-node { padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: inherit; text-align: left; font: inherit; font-size: 0.85em; cursor: pointer; }
.site-node[aria-pressed="true"] { background: var(--p-line); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .site-model.is-spinning g { animation: none; }
}

/* Download the brief as Markdown, after the summary */
.brief__download {
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  background: var(--surface-white);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.brief__download:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}