/* 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;
  /* dvh tracks browser chrome that slides away; the fixed inset already covers
   * the viewport and this keeps it honest where it does not. */
  width: 100vw;
  height: 100dvh;
  z-index: 40;
  display: grid;
  /* The stage only ever shows a phone, so the old 400px rail left a field of
   * unused black to its right. The rail now takes a real share of the window
   * and stops growing where a chat column stops being readable. */
  grid-template-columns: clamp(420px, 36vw, 580px) 1fr;
  /* The row track is explicit for a reason. Without it the single implicit row
   * is content-sized, so the panels are only as tall as what is inside them and
   * the leftover height sits above and below as dead bands. minmax(0, 1fr)
   * makes the row fill and lets its children scroll instead of growing. */
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  /* site.css styles every <section> with 84px of vertical padding for the
   * marketing page, and the takeover is a <section>. With border-box sizing the
   * shell still measured as full height while its CONTENT box was inset, which
   * is what produced the dead bands above and below the panels -- and why
   * measuring .mb rather than .mb-side kept reporting success. */
  padding: 0;
  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);
}

/* Both header bars are the SAME fixed height: content of different sizes was
 * setting each bar's height independently, so the rule under the left header
 * and the rule under the right toolbar sat at visibly different levels. */
.mb-top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 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;
  border-radius: 16px;
  padding: 10px 12px 8px;
  box-shadow: none;
}
.mb-dock .composer textarea {
  min-height: 24px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mb-dock .composer-row { margin-top: 6px; }
.mb-dock .composer-row .mini-pill { padding: 5px 11px; font-size: 0.75rem; }

/* ---------------------------------------------------------------- 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;
  height: 52px;
  padding: 0 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: minmax(0, 1fr) minmax(0, 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; }

/* The native-tier illustration is the real app icon, not a drawn window.
 * A hand-built Mac frame with traffic-light dots is decoration pretending to be
 * a screenshot; the icon is an actual product asset and reads as the thing
 * itself. It also survives a redesign, which a mock never does. */
.app-mark {
  display: grid;
  place-items: center;
  padding: 8px;
}
.app-mark img {
  width: min(300px, 62%);
  height: auto;
  border-radius: 23%;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
}
@media (max-width: 820px) {
  .app-mark img { width: min(210px, 52%); }
}

/* A model the current plan cannot run. Dimmed and clearly out of reach rather
 * than hidden: knowing Fable exists is part of why someone upgrades, but
 * picking it and only then being refused is not. Clicking goes to pricing. */
.pm-row.locked { opacity: .45; }
.pm-row.locked .pm-name { color: var(--dim); }
.pm-row.locked:hover { opacity: .6; background: var(--raised-2); }
.pm-row.locked .pm-tag { border-color: var(--cherry-fill); color: var(--cherry-text); }

/* Native preview: the app is a phone, so frame it as one instead of stretching
 * a 393px-wide bundle across a desktop iframe. */
.mb.mb-phone .mb-frame { display: grid; place-items: center; background: #0a0a0a; }
.mb.mb-phone .mb-frame iframe {
  width: 393px;
  height: 852px;
  flex: none;
  border-radius: 34px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
  background: #000;
}
/* Scale comes from fitPhone(), which measures the stage. A media query can
 * only be right at the widths someone thought of; every window in between
 * clipped the phone, and a clipped preview is the one thing this must never be.
 * transform-origin centres the shrink so the phone stays optically placed. */
.mb.mb-phone .mb-frame iframe { transform-origin: center center; }

/* Publish panel */
.mb-pub-note { font-size: 0.8125rem; color: var(--dim); margin: 6px 0; line-height: 1.5; }
.mb-pub-input {
  width: 100%; margin-top: 6px; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--raised-2); color: var(--ink);
  font: 400 0.8125rem/1 var(--mono);
}
.mb-pub-input:focus { outline: 0; border-color: #4a4a4a; }

/* ------------------------------------------------------------------ rail
 *
 * Built to a reference: filter group, Recents heading, search, then the work.
 * The reference reads calm because it is generous -- 40px rows, real gaps
 * between sections, nothing decorated. The sizing here is deliberate.
 */
.mb-rail { display: flex; flex-direction: column; }
.mb-filters, .mb-list { display: flex; flex-direction: column; gap: 1px; }

/* Any .side-row that is a <button> needs the reset, not just history rows: a
 * bare button reverts to centred text on a filled, bordered box.
 *
 * NOT `font: inherit`. The shorthand also sets font-size, and being the more
 * specific selector it beat the sizing rule below -- rows rendered at the
 * body's 17px instead of 14px, which is why the rail read a fifth too large
 * against the reference. Inherit the family only and state the size once. */
.mb-rail button.side-row, button.mb-hist-row {
  width: 100%; text-align: left; background: none; border: 0;
  cursor: pointer;
  /* No color here: this reset outranks the row rules below on specificity, so
   * a color set in it silently grays every row. The rows own their color. */
  font-family: inherit; font-style: inherit;
  -webkit-appearance: none; appearance: none;
}
/* Measured against the reference at its 2x scale, not eyeballed: 16px/500
 * near-white rows, 20px icons at the SAME brightness as the text, 38px rows,
 * 13px gray labels, a real pause before Recents. The earlier rail failed by
 * being small and dim -- the reference is large and bright. */
/* One notch smaller than the last pass, matched to the reference's density:
 * the row is quiet, the group is tight, and the icon sits a step behind the
 * label instead of competing with it. */
.mb-rail .side-row {
  padding: 8px 10px; font-size: 15px; line-height: 20px; font-weight: 500;
  color: #e3e3e3;
  border-radius: 9px; gap: 11px;
}
.mb-rail .side-row i { width: 18px; height: 18px; color: #a8a8a8; }
.mb-rail .side-row i svg { width: 18px; height: 18px; stroke-width: 1.7; }
.mb-rail .side-row:hover { color: #fff; }
.mb-rail .side-row:hover i { color: #d6d6d6; }
/* Highlight follows the cursor, never the state: a persistent gray block on
 * one row makes the list read as a menu with a stuck key. */
button.mb-hist-row:hover { background: rgba(255, 255, 255, .05); }

.mb-search {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 6px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--raised); color: var(--faint);
  transition: border-color 0.15s ease;
}
.mb-search:focus-within { border-color: #4a4a4a; }
.mb-search i { display: grid; place-items: center; flex-shrink: 0; }
.mb-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mb-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--ink); font-family: inherit; font-size: 14px; line-height: 20px;
}
.mb-search input::placeholder { color: var(--faint); }
.mb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

button.mb-hist-row {
  position: relative;                /* the bookmark is layered, not in flow */
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 6px 10px; border-radius: 9px;
  font-size: 15px; line-height: 20px; font-weight: 500; color: #e3e3e3;
}
button.mb-hist-row:hover { color: #fff; }
/* An app-icon tile, the way a launcher shows an app. Neutral rather than a
 * colour per project: a rail of rainbow squares is noise, not identity. */
.mb-tile {
  /* Bare glyph, no box: the tile treatment made every row carry an empty
   * container. The icon alone says what kind of app it is. */
  flex-shrink: 0; width: 20px; height: 20px;
  display: grid; place-items: center; color: #a8a8a8;
}
.mb-tile svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mb-tile svg.is-warn { stroke: #e0a63d; }
.mb-hist-row:hover .mb-tile { color: var(--dim); }
.mb-hist-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A building row pulses where its kind-icon would be: state reads at the start
 * of the row, and a small pip beside a name reads as decoration.
 *
 * Selector weight matters here: the dot is an <i>, and `.mb-rail .side-row i`
 * sizes every icon in the rail to 18px. Matching on i.mb-dot outranks it. */
.mb-rail .side-row i.mb-dot, .mb-hist-row i.mb-dot {
  flex-shrink: 0; width: 6px; height: 6px;
}
.mb-hist-row.is-failed .mb-hist-name { color: var(--faint); }
.mb-hist-tag {
  flex-shrink: 0; font-size: 0.625rem; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: 5px;
  color: #d98b95; background: rgba(255, 107, 122, .1);
}
/* The bookmark stays out of the way until the row is under the cursor, so a
 * quiet list does not carry a column of controls nobody asked for. */
/* Layered over the row's right edge instead of sitting in the flex flow: in
 * flow it reserved 34px of every row forever, so names truncated to make space
 * for a control that is invisible until you hover. */
.mb-mark {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; text-align: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 0; cursor: pointer; border-radius: 6px;
  -webkit-appearance: none; appearance: none;
  color: var(--faint); opacity: 0; transition: opacity .13s ease, color .13s ease;
}
/* On hover the name yields just enough room that the bookmark never covers it. */
.mb-hist-row:hover .mb-hist-name { padding-right: 24px; }
.mb-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.mb-hist-row:hover .mb-mark, .mb-mark:focus-visible { opacity: 1; }
.mb-mark:hover { color: var(--ink); }
.mb-mark.is-on { opacity: 1; color: var(--cherry-text); }
.mb-mark.is-on svg { fill: currentColor; }

/* ----------------------------------------------------------------- panels
 *
 * Publish and Invite hang from their buttons in the top bar. Absolute, so they
 * never become grid children of the takeover: an unstyled panel briefly did,
 * and it added a second grid row that collapsed the whole layout.
 */
.mb-panel {
  position: absolute;
  z-index: 60;
  background: #191919;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: mb-panel-in .14s ease-out;
}
@keyframes mb-panel-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .mb-panel { animation: none; } }

.mb-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
}
.mb-panel-head b { font-size: 14px; font-weight: 600; }
.mb-panel-title { display: flex; align-items: center; gap: 8px; }
.mb-panel-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; color: var(--dim); }
.mb-x {
  background: none; border: 0; cursor: pointer; color: var(--faint);
  font-size: 18px; line-height: 1; padding: 0 2px; border-radius: 6px;
}
.mb-x:hover { color: var(--ink); }

.mb-panel-body { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.mb-sec { display: flex; flex-direction: column; gap: 7px; }
.mb-sec b { font-size: 13.5px; font-weight: 600; }
.mb-sec small, .mb-sub { font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.mb-hint { color: var(--dim) !important; }
.mb-hint b { font-size: inherit; }
.mb-sec-split { height: 1px; background: var(--line); margin: 2px 0; }

.mb-url-row { display: flex; align-items: center; gap: 7px; }
.mb-url-field {
  flex: 1; min-width: 0;
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--raised-2);
  color: var(--ink); font-family: inherit; font-size: 13px; line-height: 18px;
  overflow: hidden; text-overflow: ellipsis;
}
.mb-url-field:focus { outline: 0; border-color: #4a4a4a; }
.mb-url-field::placeholder { color: var(--faint); }
.mb-icon-btn {
  flex-shrink: 0; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--raised-2);
  color: var(--dim); cursor: pointer;
}
.mb-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mb-icon-btn:hover { color: var(--ink); border-color: #454545; }

.mb-primary {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 0;
  background: var(--ink); color: #111;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 18px;
  cursor: pointer; transition: opacity .14s ease;
}
.mb-primary:hover { opacity: .9; }
.mb-primary.is-done { background: #35c07a; color: #06240f; }

.mb-ghost-btn {
  flex-shrink: 0; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: none; color: var(--dim);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 18px; cursor: pointer;
}
.mb-ghost-btn:hover { border-color: #454545; color: var(--ink); }
.mb-ghost-btn.is-done { color: #7fe0a8; border-color: #2f6b48; }

.mb-invite-row { display: flex; align-items: center; gap: 8px; }
.mb-invite-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-invite-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-invite-copy b { font-size: 13.5px; font-weight: 600; }

/* Segmented control in the publish panel. */
.mb-seg {
  display: flex; gap: 3px; margin: 12px 14px 0;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px;
}
.mb-seg-btn {
  flex: 1; padding: 7px 0; border: 0; border-radius: 8px;
  background: none; color: var(--dim); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
.mb-seg-btn.is-on { background: var(--raised-2); color: var(--ink); }

/* Panel header with a subtitle line, per the reference. */
.mb-panel-head.is-stacked { flex-wrap: wrap; row-gap: 4px; }
.mb-head-sub { width: 100%; font-size: 12.5px; color: var(--faint); font-weight: 400; }

/* Role select in the invite row. */
.mb-role { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mb-role-ico, .mb-link-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mb-link-ico { margin-right: 6px; vertical-align: -1px; }
.mb-role .mp-chev { font-size: 9px; color: var(--faint); }
.mb-role-menu {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--raised); padding: 4px; margin-top: -8px;
}
.mb-role-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 10px; border: 0; border-radius: 7px; background: none;
  color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.mb-role-opt small { font-size: 11.5px; color: var(--faint); font-weight: 400; }
.mb-role-opt:hover:not(:disabled) { background: var(--raised-2); }
.mb-role-opt:disabled { opacity: .55; cursor: default; }
.mb-role-opt.is-on { background: var(--raised-2); }
.mb-primary.is-compact { width: auto; padding: 8px 18px; flex-shrink: 0; }
.mb-invite-copy b { display: flex; align-items: center; }

/* Account menu. */
.mb-acct-id { display: flex; align-items: center; gap: 11px; padding: 14px 14px 10px; }
.mb-acct-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--cherry, #b3243a); color: #fff; font-weight: 700; font-size: 15px;
}
.mb-acct-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mb-acct-who b { font-size: 14px; }
.mb-acct-who small { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-acct-credits {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 6px; font-size: 13.5px; font-weight: 600;
}
.mb-acct-row { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.mb-acct-bar { height: 5px; border-radius: 999px; background: var(--raised-2); margin: 0 14px; overflow: hidden; }
.mb-acct-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e0a63d, #e06c3d); }
.mb-acct-plan {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 12px; font-size: 12.5px; color: var(--faint);
}
.mb-acct-plan b { color: var(--dim); font-weight: 600; }
.mb-acct-list { border-top: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; }
.mb-acct-list a, .mb-acct-list button {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 9px; border: 0; border-radius: 8px; background: none;
  color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 450;
  cursor: pointer; text-decoration: none; text-align: left; width: 100%;
}
.mb-acct-list svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--dim); flex-shrink: 0; }
.mb-acct-list a:hover, .mb-acct-list button:hover { background: var(--raised-2); }
.mb-acct-list small { margin-left: auto; color: var(--faint); font-size: 11.5px; }

/* ------------------------------------------------------------ error card */
.mb-error {
  border: 1px solid rgba(255, 128, 128, .28);
  background: rgba(255, 100, 100, .05);
  border-radius: 12px;
  padding: 13px 14px;
}
.mb-error-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.mb-error-head b { font-size: 13.5px; font-weight: 600; }
.mb-error-head svg { width: 16px; height: 16px; fill: none; stroke: #ff9d9d; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mb-error-msg { font-size: 13px; line-height: 1.55; color: var(--dim); margin: 0 0 10px; }
.mb-error-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mb-error-row .is-retry { color: var(--ink); border-color: #4a4a4a; }
.mb-error-detail {
  margin-top: 10px; padding: 10px 11px; border-radius: 8px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line-soft);
  font: 400 11.5px/1.55 var(--mono); color: var(--dim);
  white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto;
}

.mb-inv-note { font-size: 12px; line-height: 1.5; color: #7fe0a8; }
.mb-inv-note.is-bad { color: #ffb3bb; }

.mb-hist-tag.is-shared { color: #9fb7d9; background: rgba(120, 160, 220, .12); }

/* Top-right identity cluster. Restored after a block edit deleted it: an
 * unstyled <button> here reverts to UA chrome, which is how the invite and
 * account buttons briefly rendered as tiny gray system buttons. */
.mb-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  /* padding 0 + line-height 1: UA button padding and font leading each nudge
   * the letter off the optical centre of the circle. */
  padding: 0; line-height: 1;
  font-size: 0.8125rem; font-weight: 700; color: var(--ink);
  background: var(--raised-2); border: 1px solid var(--line); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.mb-avatar:hover { border-color: #454545; }
.mb-avatar.is-me { background: var(--grad); color: #fff; border: 0; }

/* The collaborator button: a dark rounded square, per the reference. Same
 * transparent fill as the Download pill beside it -- two adjacent controls on
 * one bar with two different fills read as a mistake, and it was one. */
.mb-avatar#mb-invite {
  width: 34px; height: 34px; border-radius: 10px;
  background: none; border: 1px solid var(--line); color: #cfcfcf;
}
.mb-avatar#mb-invite:hover { border-color: #454545; color: #fff; }
.mb-inv-tell {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: #9fd8ff; text-decoration: underline;
}
.mb-inv-tell:hover { color: #cdeaff; }

/* Context menu on a project row: the same anatomy as the reference, holding
 * only actions that exist. */
.mb-ctx {
  position: fixed; z-index: 70; min-width: 188px;
  background: #1c1c1c; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  padding: 5px; display: flex; flex-direction: column;
  animation: mb-panel-in .12s ease-out;
}
.mb-ctx button {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 7px; background: none;
  color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 450; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-ctx button:hover { background: rgba(255, 255, 255, .06); }
.mb-ctx button.is-danger { color: #ff8d97; }
.mb-ctx-split { height: 1px; background: var(--line); margin: 4px 2px; }

/* Inline rename swaps the name for an input the same size, so nothing jumps. */
.mb-rename {
  flex: 1; min-width: 0;
  background: var(--raised-2); border: 1px solid #4a4a4a; border-radius: 6px;
  padding: 1px 6px; color: var(--ink);
  font-family: inherit; font-size: 15px; line-height: 20px; outline: none;
}

/* The rail's status notes read in the same voice as the section label. */
.mb-hist-note {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  font-size: 14px; font-weight: 400; color: #9a9a9a;
}
/* The running clock beside the status line. */
.mb-elapsed { margin-left: auto; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mb-live { justify-content: flex-start; }

/* One row per file written, kept in the transcript.
 *
 * These used to collapse into a "Made N changes" receipt, on the theory that a
 * list of writes reads like CI output. Watching real builds proved the
 * opposite: the list IS the progress, and the collapsed count made twenty
 * minutes of work look like nothing happened. */
.mb-step { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--dim); }
.mb-step svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: var(--faint); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.mb-step-verb { color: var(--ink); font-weight: 500; }
.mb-step-chip {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px;
  background: var(--raised-2); border: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--dim);
}

/* ------------------------------------------------- the stage while building
 *
 * The preview pane is empty for the longest part of the product. Static text
 * there reads as nothing happening, so it carries the shape of the work and a
 * rotating tip instead. Corner marks echo a design canvas selection: the app
 * is being drawn, not merely processed.
 */
.mb-empty.is-building { padding: 0; }
.mb-bx { display: grid; justify-items: center; gap: 0; text-align: center; }
.mb-bx-frame { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.mb-bx-frame i {
  position: absolute; width: 5px; height: 5px; border-radius: 1px;
  background: var(--cherry-text, #d34f63); opacity: .9;
}
.mb-bx-frame i:nth-child(1) { top: 0; left: 0; }
.mb-bx-frame i:nth-child(2) { top: 0; right: 0; }
.mb-bx-frame i:nth-child(3) { bottom: 0; left: 0; }
.mb-bx-frame i:nth-child(4) { bottom: 0; right: 0; }
.mb-bx-icon {
  width: 46px; height: 46px;
  fill: none; stroke: var(--ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.mb-bx-icon.is-in { animation: mb-bx-pop .5s cubic-bezier(.2, .9, .3, 1); }
@keyframes mb-bx-pop { from { opacity: 0; transform: scale(.82) rotate(-6deg); } }

.mb-bx-title {
  margin: 22px 0 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); min-height: 1.6em;
}
.mb-bx-rule {
  display: block; width: 260px; height: 1px; margin: 26px 0 22px;
  background: linear-gradient(90deg, transparent, rgba(211, 79, 99, .5), transparent);
}
.mb-bx-tip {
  margin: 0; max-width: 34ch; font-size: 0.875rem; line-height: 1.55;
  color: var(--faint);
}
.mb-bx-tip.is-in { animation: mb-bx-fade .6s ease-out; }
@keyframes mb-bx-fade { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .mb-bx-icon.is-in, .mb-bx-tip.is-in { animation: none; }
}

/* Spec-sized prompts collapse to a preview; the conversation stays a
 * conversation instead of one message becoming the whole panel.
 *
 * These rules were lost in an earlier block rewrite of this file, which is why
 * "Show more" appeared to do nothing: with no .is-clamped styling the bubble was
 * never collapsed in the first place, so the button toggled a class that
 * changed nothing and a long spec buried the entire build below the fold.
 */
.mb-you.is-clamped {
  max-height: 168px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
/* Expanded is capped too. A 4,000-word brief at full height pushes every
 * message the build produced off the screen, which reads as "there is no
 * chat". Past this height it scrolls inside its own bubble. */
.mb-you.is-open {
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mb-more-btn {
  align-self: flex-end;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.75rem; color: var(--faint);
  padding: 0 4px; margin-top: -8px;
}
.mb-more-btn:hover { color: var(--ink); }
.mb-avatar svg { display: block; }

/* ------------------------------------------------------------- code view */

.mb-tree-dir {
  font: 500 11px/1 var(--mono);
  color: var(--faint);
  letter-spacing: .02em;
  padding: 12px 10px 5px;
}
.mb-leaf.is-nested { padding-left: 20px; }

/* Source with a gutter. The pre is the scroll container; the gutter does not
 * scroll horizontally with the code, so a long line cannot push the line
 * numbers out of view. */
.mb-src {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  overflow: auto;
  tab-size: 2;
}
.mb-gutter {
  flex-shrink: 0;
  position: sticky;
  left: 0;
  text-align: right;
  color: #4a4a4a;
  user-select: none;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--line-soft);
  padding-right: 12px;
}
.mb-code-body { white-space: pre; display: block; min-width: 0; }

/* One accent per token class, all readable on the surface behind them. */
.t-c { color: #6a7a6f; font-style: italic; }   /* comments  */
.t-s { color: #c9a97e; }                       /* strings   */
.t-k { color: #d98ba0; }                       /* keywords  */
.t-f { color: #86b2d9; }                       /* calls     */
.t-y { color: #8fc8b4; }                       /* types     */
.t-n { color: #cfa3d6; }                       /* numbers   */

/* Delete confirmation. A real dialog naming the project, because a button that
 * rewrites its own label to ask a question is not a confirmation. */
.mb-confirm-wrap {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  animation: mb-panel-in .12s ease-out;
}
.mb-confirm {
  width: min(400px, calc(100vw - 32px));
  background: #1c1c1c; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  padding: 18px;
}
.mb-confirm b { font-size: 15px; font-weight: 600; display: block; margin-bottom: 6px; }
.mb-confirm p { font-size: 13.5px; line-height: 1.55; color: var(--dim); margin: 0 0 16px; }
.mb-confirm p b { display: inline; font-size: inherit; color: var(--ink); }
.mb-confirm-row { display: flex; justify-content: flex-end; gap: 8px; }
.mb-cf-cancel, .mb-cf-go {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 0;
}
.mb-cf-cancel { background: var(--raised-2); color: var(--ink); }
.mb-cf-cancel:hover { background: #333; }
.mb-cf-go { background: #c0394b; color: #fff; }
.mb-cf-go:hover { background: #d0455a; }
.mb-cf-go:disabled { opacity: .6; cursor: default; }