/* ============================================================
   BORG SITES, the AI Builder.

   The layout law for a working page: a slim panel on the LEFT, and
   the ENTIRE remaining screen belongs to what the customer is
   building. No site footer here, one thin quiet row instead.

   The page has exactly two states. Before the first build it is a
   centered chat box on a clean page. The moment building starts,
   .shell gains .is-docked: the same chat column slides to the left
   at 360px and the canvas becomes the site. Nothing else moves,
   which is why there is one chat block in the markup and not two.

   tokens.css is the single source of truth for colour, type,
   spacing, radius, shadow and motion; this file only composes
   those tokens. This is an app page, so it does NOT load the
   public chrome, and the base element / button / input styles it
   needs live here, copied from dashboard.css and editor.css so all
   three app pages look like one product.

   NOTE: nothing in this file reaches the customer's generated
   site. The preview frame is a sandboxed srcdoc document with its
   own reset, written by builder.js.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--ink);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;               /* the workspace never scrolls the page */
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; border-radius: 6px; }

.hidden { display: none !important; }
.spacer { margin-left: auto; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) { .grad-text { color: var(--brand-2); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  padding: .72rem 1.2rem; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2), background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
  white-space: nowrap; background: var(--ink-1); color: var(--text);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn--primary { background: var(--grad-brand-deep); color: var(--text-on-brand); box-shadow: var(--glow-brand); }
.btn--ghost { background: var(--ink-1); color: var(--text); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-sm); }
.btn--sm { padding: .5rem .85rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.linkbtn { border: 0; background: transparent; color: var(--brand-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }

/* ---- inputs ---- */
.input {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text);
  background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-xs);
  padding: .68rem .85rem; transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.input:focus { outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(46,125,246,.16); }
.input::placeholder { color: var(--text-faint); }
label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--text-dim); }
.field { display: grid; gap: .4rem; }
.field-error { color: #c0392b; font-size: var(--fs-xs); margin: 0; min-height: 1em; }
.form-status { font-size: var(--fs-sm); margin: 0; min-height: 1.2em; }
.form-status.is-error { color: #c0392b; }
.form-status.is-ok { color: #0F7a34; }

/* ---- the house note, copied from components.css the same way the buttons
   and the inputs were: this page does not load the public chrome, and all
   three app pages look like one product. Tokens only, no new colour. ---- */
.note { border-left: 3px solid var(--brand-2); background: var(--grad-soft); padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-sm); color: var(--text-dim); }

/* ---- chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim);
  padding: .34rem .8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); background: var(--ink-1); white-space: nowrap;
}
.chip--brand { color: var(--brand-2); border-color: transparent; background: var(--grad-soft); }
.chip--low { color: #a8471f; border-color: rgba(168,71,31,.28); background: rgba(255,107,74,.09); }

/* ============================================================
   FULL-PAGE CARDS (loading, not switched on)
   ============================================================ */
.auth {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; padding: var(--gutter);
  background:
    radial-gradient(60vw 40vw at 15% -5%, rgba(46,125,246,.12), transparent 60%),
    radial-gradient(50vw 40vw at 100% 0%, rgba(224,53,158,.10), transparent 62%),
    var(--ink);
}
.auth-card {
  width: min(440px, 100%); background: var(--ink-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.7rem, 4vw, 2.6rem);
}
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .5rem; color: var(--text); }
.auth-brand:hover { text-decoration: none; }
.auth-brand .mark, .brand .mark, .bfoot__brand .mark { width: 32px; height: 32px; border-radius: 50%; background: url("/assets/img/borg360-mark.png") center/contain no-repeat; flex: none; filter: drop-shadow(0 4px 10px rgba(123,63,228,.3)); }
.auth-value { color: var(--text-dim); font-size: var(--fs-sm); margin: 0 0 1.4rem; }
.auth-value a { color: var(--brand-2); font-weight: 600; }
.nc-ico { width: 44px; height: 44px; margin: 1rem auto .4rem; color: var(--brand-2); }

/* ============================================================
   THE SHELL: slim bar, the workspace, one thin quiet row
   ============================================================ */
.shell { display: flex; flex-direction: column; height: 100vh; height: 100svh; }

.bbar {
  flex: none; z-index: var(--z-header);
  display: flex; align-items: center; gap: .9rem;
  min-height: 52px; padding: .35rem clamp(.7rem, 2vw, 1.2rem);
  background: var(--glass-bg); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hairline-soft);
}
.bbar .brand { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; color: var(--text); flex: none; }
.bbar .brand:hover { text-decoration: none; }
.bbar .brand .mark { width: 25px; height: 25px; }
.bbar-name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--text);
  padding-left: .85rem; border-left: 1px solid var(--hairline);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bbar-name:empty { display: none; }
/* Quiet on purpose: starting another site is always available and never the
   thing being asked for. */
.bbar-new { flex: none; color: var(--text-faint); }
.bbar-new:hover { color: var(--brand-2); }
.bbar-new[disabled] { opacity: .5; cursor: not-allowed; text-decoration: none; }

.bmain {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.shell.is-docked .bmain { align-items: stretch; justify-content: flex-start; padding: 0; }

.bfoot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem 1.2rem; padding: .35rem clamp(.7rem, 2vw, 1.2rem);
  border-top: 1px solid var(--hairline); background: var(--ink-1);
  color: var(--text-faint); font-size: var(--fs-xs);
}
.bfoot__brand { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: -.02em; color: var(--text); }
.bfoot__brand:hover { text-decoration: none; }

/* ============================================================
   THE CHAT COLUMN, in both of its lives
   ============================================================ */
.bchat { width: min(720px, 100%); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
/* the opening panel plus the tier line can stand taller than a phone's workspace, so the column carries its own scroll rather than losing its ends */
.shell:not(.is-docked) .bchat { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.shell.is-docked .bchat {
  width: 360px; flex: none; height: 100%; gap: .7rem;
  padding: .9rem .85rem; background: var(--ink-1);
  border-right: 1px solid var(--hairline);
}

/* the opening, gone the moment building starts */
.bintro { text-align: center; }
.bintro h1 { font-size: var(--fs-xl); }
.bintro__lead { color: var(--text-dim); font-size: var(--fs-sm); margin: .7rem auto 0; max-width: 52ch; }
.shell.is-docked .bintro { display: none; }

/* the conversation, only once there is one */
.blog { display: none; }
.shell.is-docked .blog {
  display: flex; flex-direction: column; gap: .6rem;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: .2rem;
}
.bubble {
  max-width: 100%; padding: .6rem .8rem; border-radius: var(--radius-xs);
  font-size: var(--fs-sm); overflow-wrap: anywhere;
}
.bubble p { margin: 0; white-space: pre-wrap; }
.bubble--you { align-self: flex-end; background: var(--grad-soft), var(--ink-1); border: 1px solid rgba(46,125,246,.24); }
.bubble--builder { align-self: flex-start; background: var(--ink-2); border: 1px solid var(--hairline-soft); }
.bubble--builder.is-error { background: rgba(192,57,43,.06); border-color: rgba(192,57,43,.24); color: #8f2c1f; }
.bubble.is-working { color: var(--text-dim); }
.bubble.is-working p::after { content: "..."; animation: bdots var(--dur-4) steps(4, end) infinite; }
@keyframes bdots { 0% { content: "" } 25% { content: "." } 50% { content: ".." } 75% { content: "..." } }

/* what to put in the first message. The first message is the one that drafts
   the whole site, so this belongs to the opening and goes the moment building
   starts, exactly like the intro and the examples. */
.bnote { flex: none; }
.bnote h2 { font-size: var(--fs-sm); margin-bottom: .3rem; }
.bnote p { margin: 0; }
.shell.is-docked .bnote { display: none; }

/* the composer */
.bform { display: grid; gap: .5rem; flex: none; }
.bform__input { resize: none; line-height: var(--lh-body); font-size: var(--fs-base); padding: .9rem 1rem; min-height: 5.4rem; }
.shell.is-docked .bform__input { font-size: var(--fs-sm); min-height: 4.2rem; padding: .65rem .8rem; }
.bform__row { display: flex; align-items: center; gap: .7rem; }
.bform__hint { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }
.shell.is-docked .bform__hint { display: none; }

/* Turbo: one switch beside the send button, and one line under the row that
   says what it does while it is on, or why it is off. Tokens only, measured:
     off  track outline and thumb in --text-faint: 5.17:1 on --ink (the open
          page), 5.58:1 on --ink-1 (the docked column and the track itself)
     on   track filled with --grad-brand-deep: its lightest stop, #C93E96, is
          4.22:1 against the page, and the white thumb on it is 4.55:1
     the word "Turbo" is --text (17.2:1 and up), the line --text-dim (7.04:1
     and up), and the focus ring is the page's own --brand-1 (3.62:1 and up).
   A button, so Enter and Space both flip it and it never submits the form. */
.bturbo {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: .35rem .25rem; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
}
.bturbo__track {
  position: relative; flex: none; width: 34px; height: 20px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--text-faint); background: var(--ink-1);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.bturbo__thumb {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--text-faint);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.bturbo[aria-checked="true"] .bturbo__track { background: var(--grad-brand-deep); border-color: transparent; }
.bturbo[aria-checked="true"] .bturbo__thumb { background: var(--text-on-brand); transform: translateX(14px); }
.bturbo[disabled] { opacity: .55; cursor: not-allowed; }
.bturbo-note { margin: 0; font-size: var(--fs-xs); color: var(--text-dim); }

/* which builder is answering. It sits with the composer because that is what
   spends the credits, and it stays in both states, like the chip it is read
   from. Centered under the opening, left-aligned once the column docks, the
   same way the rest of this column turns. */
.btier { margin: 0; flex: none; font-size: var(--fs-xs); color: var(--text-dim); text-align: center; }
.shell.is-docked .btier { text-align: left; }
/* The "confirm your email" line wears the tier note's look, and carries the
   customer's address, which has no spaces to break at: it may break anywhere,
   so a long one never pushes the column wider than a phone. */
.bconfirm { overflow-wrap: anywhere; }

/* the three ways in, gone the moment building starts */
.bchips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; justify-content: center; }
.bchips__lbl { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); width: 100%; text-align: center; }
.shell.is-docked .bchips { display: none; }

/* the quiet way to a human */
.bhuman { margin: 0; flex: none; text-align: center; }
.shell.is-docked .bhuman { text-align: left; padding-top: .1rem; border-top: 1px solid var(--hairline-soft); margin-top: .1rem; }
.bhuman .linkbtn { color: var(--text-faint); font-weight: 600; }
.bhuman .linkbtn:hover { color: var(--brand-2); }

/* ============================================================
   THE CANVAS: everything the chat column does not use
   ============================================================ */
.bstage { display: none; }
.shell.is-docked .bstage { display: block; position: relative; flex: 1; min-width: 0; background: var(--ink-2); }
.bframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ink-1); }
.bstage__empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem;
  text-align: center; color: var(--text-faint); font-size: var(--fs-sm);
  background: var(--ink-2); pointer-events: none;
}
.bstage__empty.hidden { display: none !important; }

/* ============================================================
   "NEED A PERSON?"
   ============================================================ */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(11,16,49,.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; z-index: var(--z-modal); left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(520px, calc(100% - 2rem)); max-height: calc(100svh - 2rem);
  background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out);
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.modal-head { padding: 1.25rem 1.35rem .9rem; }
.modal-head h2 { font-size: var(--fs-lg); }
.modal-head p { color: var(--text-dim); font-size: var(--fs-sm); margin: .45rem 0 0; }
.modal-body { padding: 0 1.35rem 1rem; overflow-y: auto; }
.modal-foot { padding: .9rem 1.35rem; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--ink-1); }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: var(--z-toast); background: var(--dark); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); padding: .7rem 1.15rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); max-width: calc(100% - 2rem); text-align: center; overflow-wrap: anywhere; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #8f2c1f; }

/* ============================================================
   RESPONSIVE. On a phone there is no left, so the work takes the
   top of the screen and the chat sits under it like a composer.
   The page still never scrolls.
   ============================================================ */
@media (max-width: 900px) {
  .shell.is-docked .bchat { width: 300px; }
}
@media (max-width: 760px) {
  .shell.is-docked .bmain { flex-direction: column; }
  .shell.is-docked .bstage { order: 1; flex: 1 1 auto; min-height: 0; width: 100%; }
  .shell.is-docked .bchat {
    order: 2; width: 100%; height: auto; flex: none; max-height: 46svh;
    border-right: 0; border-top: 1px solid var(--hairline);
  }
  .shell.is-docked .blog { max-height: 26svh; }
  .bbar-name { display: none; }
}
@media (max-width: 420px) {
  .bbar { gap: .5rem; }
  .bform__row .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .modal, .modal-backdrop, .toast, .bturbo__track, .bturbo__thumb { transition: none !important; }
  .btn:hover { transform: none; }
  .bubble.is-working p::after { animation: none; content: "..."; }
}