/* The builder.
 *
 * Additive only. Every selector is namespaced under .mb, nothing here loads
 * until the first build starts, and site.css is untouched. Colours come from
 * the existing tokens so the builder reads as the same product as the page it
 * came from.
 *
 * The layout is a takeover, not a panel. Once you are building, the marketing
 * page is noise: you want the conversation and the running app, nothing else.
 */

.mb [hidden] { display: none !important; }

/* Full-screen shell. Fixed rather than appended in flow, so the page beneath
 * keeps its scroll position for when the builder closes. */
.mb {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 400px 1fr;
  background: var(--bg);
}
body.mb-on { overflow: hidden; }

/* ---------------------------------------------------------------- left rail */

.mb-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
}

.mb-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mb-back {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.mb-back:hover { background: var(--raised-2); color: var(--ink); }
.mb-title {
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mb-spend {
  margin-left: auto;
  flex-shrink: 0;
  font: 500 0.75rem/1 var(--mono);
  color: var(--faint);
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* The conversation. */
.mb-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* What the person asked for, right aligned the way a sent message reads. */
.mb-you {
  align-self: flex-end;
  max-width: 85%;
  background: var(--raised-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 13px;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.mb-say {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dim);
  white-space: pre-wrap;
}
.mb-say strong { color: var(--ink); font-weight: 600; }
.mb-say.is-error { color: #ffb3bb; }

/* Live status while the model works. */
.mb-live {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--dim);
}
.mb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--building);
  flex-shrink: 0;
  animation: mb-pulse 1.4s ease-in-out infinite;
}
.mb-live.is-ready .mb-dot { background: #35c07a; animation: none; }
.mb-live.is-failed .mb-dot { background: var(--cherry-text); animation: none; }
@keyframes mb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .mb-dot { animation: none; } }

/* The files card. A collapsed summary, not a scrolling build log: the list of
 * every write is what a CI job shows, and it makes a finished app look like a
 * machine transcript instead of something that was made. */
.mb-card {
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: 12px;
  padding: 12px 13px;
}
.mb-card p { font-size: 0.9rem; margin-bottom: 9px; }
.mb-files { display: flex; flex-wrap: wrap; gap: 5px; }
.mb-file {
  font: 400 0.75rem/1 var(--mono);
  color: var(--dim);
  background: var(--raised-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 5px 7px;
}
.mb-more { color: var(--faint); font-size: 0.75rem; align-self: center; }

.mb-next { display: flex; flex-wrap: wrap; gap: 7px; }
.mb-next button {
  font: inherit;
  font-size: 0.8125rem;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--dim);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.mb-next button:hover { border-color: #454545; color: var(--ink); }

/* The composer is MOVED here from the hero, not recreated. Same element, same
 * handlers, same plus menu and model picker. */
.mb-dock {
  flex-shrink: 0;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--line);
}
.mb-dock .composer { margin: 0; max-width: none; }

/* ---------------------------------------------------------------- preview */

.mb-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0f0f0f;
}
.mb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mb-url {
  flex: 1;
  min-width: 0;
  font: 400 0.75rem/1 var(--mono);
  color: var(--faint);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-act {
  font-size: 0.8125rem;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.mb-act:hover { border-color: #454545; color: var(--ink); }

.mb-frame { flex: 1; min-height: 0; position: relative; }
.mb-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.mb-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  color: var(--faint);
  font-size: 0.875rem;
}
.mb-empty p { max-width: 40ch; }

@media (max-width: 900px) {
  .mb { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .mb-side { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* A completed action group. Deliberately quiet: it is a receipt for time that
 * passed, not something you need to read. */
.mb-did {
  font-size: 0.8125rem;
  color: var(--faint);
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

/* A one-off notice, e.g. the free first build. Quiet but not invisible. */
.mb-note {
  font-size: 0.8125rem;
  color: var(--dim);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
}

/* Preview / Code tabs. */
.mb-tabs { display: flex; gap: 2px; background: var(--raised); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; flex-shrink: 0; }
.mb-tab { font: inherit; font-size: 0.8125rem; color: var(--dim); background: none; border: 0;
  padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.mb-tab.is-on { background: var(--raised-2); color: var(--ink); }
.mb-grow { flex: 1; }
.mb-act.is-primary { background: var(--ink); color: #111; border-color: var(--ink); font-weight: 600; }
.mb-act.is-primary:disabled { opacity: .35; cursor: not-allowed; }
.mb-act.is-primary:hover:not(:disabled) { opacity: .9; }

/* Code view: file list beside the source. */
.mb-code { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; }
.mb-code[hidden] { display: none !important; }
.mb-tree { overflow-y: auto; border-right: 1px solid var(--line); padding: 8px; display: flex;
  flex-direction: column; gap: 1px; }
.mb-leaf { font: 400 0.75rem/1.5 var(--mono); color: var(--dim); background: none; border: 0;
  text-align: left; padding: 5px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.mb-leaf:hover { background: var(--raised); color: var(--ink); }
.mb-leaf.is-on { background: var(--raised-2); color: var(--ink); }
.mb-src { overflow: auto; padding: 16px 18px; margin: 0; font: 400 0.8125rem/1.7 var(--mono);
  color: var(--ink); white-space: pre; tab-size: 2; }

/* The credit balance lives in the account menu, not pinned to the sidebar.
 * A counter on screen at all times makes the product feel metered; you look
 * for the number when you care, and otherwise it should be out of the way. */
.acct-credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--dim);
}
.acct-credits b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.acct-credits[hidden] { display: none !important; }