/* ============================================================
   BORG SITES, Borg Studio (/studio): the AI design chat

   The builder's dark navy panel (Chat and Design) beside a light canvas
   holding the live template, under the public header and a slim head band.
   The panel, the strip bar and every control in them are the builder's own
   (site/assets/css/build.css), copied here and scoped to the workspace,
   because build.css styles whole elements (headings, paragraphs, focus,
   [hidden]) and would restyle the public header and footer this page keeps.
   The head band stays in the light public system, and the shared site footer
   (<borg-footer>, as on every public page) sits below the workspace.

   Measured contrast (WCAG AA), every text pair here, the builder's tokens:
     text #F2F4FF on bar #0A0E27 17.34, panel #10152F 16.37, card #182046 14.36,
       hover #1F2852 12.91
     secondary #A9B0D6 on bar 8.93, panel 8.43, card 7.40, hover 6.65
     white on the deep gradient, lightest stop #C93E96, 4.55
     error #FFC9C2 on panel 12.29; the preview's address #4A5072 on #E3E6F0 6.28;
     the working pill, white on #0A0E27 at .92, 18 and up
   Non-text (3:1): field borders #646EA0 on panel 3.66, card 3.21, bar 3.87;
   focus ring #2E7DF6 on bar 4.87, panel 4.60, card 4.03; the send arrow,
   white on the bright gradient, 3.26 at its pink end.
   ============================================================ */

/* ---------- the page: head band and workspace are one screen ---------- */
.studio-main {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h) - 1px);
  height: calc(100dvh - var(--header-h) - 1px);
  min-height: 560px;
}

/* Compact head band above the app: eyebrow and the page's crawlable H1 on
   one modest line, one sentence under it, so the workspace keeps the screen. */
.studio-head { flex: none; text-align: center; padding: .8rem 0; border-bottom: 1px solid var(--hairline); }
.studio-head__inner { width: 100%; padding-inline: 1.4rem; }
.studio-head__row { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .25rem .9rem; }
.studio-head .eyebrow { margin-bottom: 0; }
.studio-head__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.studio-head__lead { margin-top: .25rem; font-size: var(--fs-sm); color: var(--text-dim); }

/* ---------- the workspace's own tokens, the builder's ---------- */
.sapp {
  --b-bg: #0A0E27;
  --b-panel: #10152F;
  --b-card: #182046;
  --b-hover: #1F2852;
  --b-line: #2A3363;
  --b-control: #646EA0;
  --b-text: #F2F4FF;
  --b-text-2: #A9B0D6;
  --b-focus: #2E7DF6;
  --b-canvas: #E9ECF6;
  --b-err-soft: #FFC9C2;
  --b-err: #FF9B8E;
  --b-r-card: 12px;
  --b-r-input: 10px;
  --b-fast: .16s;
  --panel-w: 400px;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--b-bg); color: var(--b-text);
  font-family: var(--font-body); font-size: .875rem; line-height: 1.5;
}
.sapp :focus-visible { outline: 2px solid var(--b-focus); outline-offset: 2px; }
.sapp ::selection { background: rgba(46, 125, 246, .45); color: #FFFFFF; }
.bpanel, .sbar { color-scheme: dark; }
.bpanel *, .sbar * { scrollbar-width: thin; scrollbar-color: var(--b-line) transparent; }
.sapp__main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); }
@media (max-width: 1099.98px) { .sapp { --panel-w: 360px; } }

/* the phones' switch, hidden on wider screens */
.bswitch { display: none; }

/* ---------- the working line: the bright gradient, moving ---------- */
.bcomposer__shimmer {
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4), var(--brand-1));
  background-size: 200% 100%;
  animation: b-flow 1.6s linear infinite;
}
@keyframes b-flow { from { background-position: 0% 0; } to { background-position: -200% 0; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.bbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--b-r-input);
  font-family: var(--font-display); font-weight: 600; font-size: .875rem; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; background: transparent; color: var(--b-text);
  transition: background-color var(--b-fast) var(--ease), border-color var(--b-fast) var(--ease), filter var(--b-fast) var(--ease), transform var(--b-fast) var(--ease);
}
.bbtn:active { transform: translateY(1px); }
.bbtn--sm { height: 34px; padding: 0 12px; font-size: .8125rem; }
.bbtn--block { width: 100%; }
/* white on the deep gradient, 4.55:1 at its lightest stop; hover only darkens it */
.bbtn--primary { background: var(--grad-brand-deep); color: #FFFFFF; box-shadow: 0 6px 20px -8px rgba(123, 63, 228, .6), inset 0 1px 0 rgba(255, 255, 255, .16); }
.bbtn--primary:hover { filter: brightness(.92); color: #FFFFFF; }
.bbtn--secondary { background: var(--b-card); border-color: var(--b-line); color: var(--b-text); }
.bbtn--secondary:hover { background: var(--b-hover); border-color: var(--b-control); color: var(--b-text); }
.bbtn--ghost { color: var(--b-text-2); }
.bbtn--ghost:hover { background: var(--b-card); color: var(--b-text); }
.bbtn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* ============================================================
   THE PANEL AND ITS TABS
   ============================================================ */
.bpanel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--b-panel); border-right: 1px solid var(--b-line); }
.btabs { display: flex; gap: 4px; padding: 0 12px; height: 46px; border-bottom: 1px solid var(--b-line); flex: none; }
.btab {
  position: relative; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--b-text-2); font-family: var(--font-display); font-weight: 600; font-size: .875rem;
  transition: color var(--b-fast) var(--ease);
}
.btab:hover, .btab[aria-selected="true"] { color: var(--b-text); }
/* the active tab's line: the bright gradient, with no words on it */
.btab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad-brand); transform: scaleX(0); transition: transform .28s var(--ease-out); }
.btab[aria-selected="true"]::after { transform: scaleX(1); }
.btab:focus-visible { outline-offset: -4px; border-radius: 8px; }

.btabpanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.btabpanel[hidden] { display: none; }
.btabpanel:focus-visible { outline: none; }
.btabpanel[inert], .btabpanel.is-locked { opacity: .55; }
.bdesign.is-locked { pointer-events: none; }

.bsection { padding: 18px 16px; border-bottom: 1px solid var(--b-line); }
.bsection:last-child { border-bottom: 0; }
.bsection__title { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--b-text); }
.bsection__lead { color: var(--b-text-2); font-size: .8125rem; }
.bsection__lead strong { color: var(--b-text); }
.bsection__title + * { margin-top: 12px; }
.bempty { color: var(--b-text-2); font-size: .8125rem; }

/* ---------- fields ---------- */
.blabel { display: block; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; color: var(--b-text); margin-bottom: 6px; }
.binput {
  width: 100%; min-height: 40px; padding: 9px 12px;
  background: var(--b-bg); color: var(--b-text);
  border: 1px solid var(--b-control); border-radius: var(--b-r-input);
  font-size: .875rem; line-height: 1.45;
  transition: border-color var(--b-fast) var(--ease);
}
.binput:hover { border-color: var(--b-text-2); }
.binput:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 1px; border-color: var(--b-focus); }

/* ============================================================
   CHAT
   ============================================================ */
.bchat { display: flex; flex-direction: column; overflow: hidden; }
.bchat[hidden] { display: none; }
.bchat__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 16px 12px; display: flex; flex-direction: column; gap: 16px; }

.bwelcome { margin: auto 0; padding: 12px 4px 4px; }
.bwelcome[hidden] { display: none; }
.bwelcome__orb {
  display: block; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 18px;
  background: conic-gradient(from 210deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4), var(--brand-1));
  box-shadow: 0 0 0 6px rgba(123, 63, 228, .14), 0 14px 40px -10px rgba(224, 53, 158, .55);
  animation: b-spin 9s linear infinite;
}
@keyframes b-spin { to { transform: rotate(360deg); } }
.bwelcome__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--b-text); }
.bwelcome__text { margin-top: 6px; color: var(--b-text-2); font-size: .9375rem; }
.bwelcome__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bchip {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--b-line); background: var(--b-card); color: var(--b-text);
  font-size: .8125rem; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer;
  transition: border-color var(--b-fast) var(--ease), background-color var(--b-fast) var(--ease), transform var(--b-fast) var(--ease);
}
.bchip:hover { border-color: var(--b-control); background: var(--b-hover); transform: translateY(-1px); }
.bchip:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.bmsg { max-width: 100%; animation: b-rise .32s var(--ease-out) both; }
@keyframes b-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bmsg__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.6; color: var(--b-text); }
.bmsg--user { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--b-card); border: 1px solid var(--b-line); }
.bmsg--ai { align-self: stretch; padding-left: 14px; border-left: 2px solid transparent; border-image: var(--grad-brand) 1; }
.bmsg--ai.is-error { border-image: none; border-left-color: var(--b-err); }
.bmsg--ai.is-error .bmsg__text { color: var(--b-err-soft); }

.btyping { display: inline-flex; gap: 4px; padding: 6px 0; }
.btyping i { width: 6px; height: 6px; border-radius: 50%; background: var(--b-text-2); animation: b-dot 1.2s var(--ease-in-out) infinite; }
.btyping i:nth-child(2) { animation-delay: .15s; }
.btyping i:nth-child(3) { animation-delay: .3s; }
@keyframes b-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.bmsg__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bchange {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--b-line); background: var(--b-card); color: var(--b-text);
  font-size: .75rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: border-color var(--b-fast) var(--ease), background-color var(--b-fast) var(--ease);
}
.bchange:hover { border-color: var(--b-control); background: var(--b-hover); }
.bchange__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-brand); }

/* ---------- the sign-in card: in the conversation, taking focus ---------- */
.scard {
  padding: 18px 16px; border-radius: var(--b-r-card); border: 1px solid transparent;
  background: linear-gradient(var(--b-card), var(--b-card)) padding-box, var(--grad-brand) border-box;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
  animation: b-rise .32s var(--ease-out) both;
}
.scard:focus { outline: none; }
.scard:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 3px; }
.scard__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: var(--b-text); }
.scard__text { margin-top: 6px; color: var(--b-text-2); font-size: .875rem; line-height: 1.55; }
.scard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scard__actions .bbtn { flex: 1 1 auto; }

/* ---------- the composer ---------- */
.bcomposer {
  position: relative; flex: none; margin: 4px 12px 12px; border-radius: 14px;
  background: var(--b-card); border: 1px solid var(--b-control);
  transition: border-color var(--b-fast) var(--ease), box-shadow var(--b-fast) var(--ease);
}
.bcomposer:focus-within { border-color: var(--b-focus); box-shadow: 0 0 0 3px rgba(46, 125, 246, .22); }
.bcomposer__shimmer { position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; opacity: 0; transition: opacity .3s var(--ease); }
.bcomposer.is-working .bcomposer__shimmer { opacity: 1; }
.bcomposer__input {
  display: block; width: 100%; min-height: 48px; max-height: 200px; padding: 13px 14px 4px;
  border: 0; background: transparent; color: var(--b-text); resize: none; font-size: .9375rem; line-height: 1.5;
}
.bcomposer__input::placeholder { color: var(--b-text-2); opacity: 1; }
.bcomposer__input:focus-visible { outline: none; }
.bcomposer__input:disabled { cursor: not-allowed; }
.bcomposer__row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 10px; }
.bcomposer__credits { margin-right: auto; color: var(--b-text-2); font-size: .75rem; white-space: nowrap; }
.bcomposer__note { padding: 0 14px 12px; color: var(--b-text-2); font-size: .8125rem; }
.bcomposer__note[hidden], .bcomposer [hidden] { display: none; }

/* the send button: the bright gradient, an arrow and no words */
.bsend {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--grad-brand); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(224, 53, 158, .65);
  transition: transform var(--b-fast) var(--ease), filter var(--b-fast) var(--ease);
}
.bsend:hover { transform: translateY(-1px); filter: brightness(1.08); }
.bsend:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

/* ============================================================
   DESIGN
   ============================================================ */
.sdesign__intro { margin: 0; }
.bpresets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bpreset {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; text-align: left; cursor: pointer;
  border-radius: var(--b-r-input); border: 1px solid var(--b-line); background: var(--b-card); color: var(--b-text);
  transition: border-color var(--b-fast) var(--ease);
}
.bpreset:hover { border-color: var(--b-control); }
.bpreset[aria-pressed="true"] { border-color: transparent; background: linear-gradient(var(--b-card), var(--b-card)) padding-box, var(--grad-brand) border-box; }
.bpreset__dots { display: inline-flex; flex: none; }
.bpreset__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch, #888888); box-shadow: 0 0 0 1.5px var(--b-card); }
.bpreset__dot + .bpreset__dot { margin-left: -4px; }
.bpreset__name { font-size: .8125rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bcolors { display: grid; gap: 8px; }
.bcolor { display: grid; grid-template-columns: minmax(0, 1fr) 36px 96px; align-items: center; gap: 8px; }
.bcolor__label { font-size: .8125rem; color: var(--b-text); }
.bcolor__swatch { position: relative; width: 36px; height: 36px; border-radius: var(--b-r-input); overflow: hidden; border: 1px solid var(--b-control); }
.bcolor__pick { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); padding: 0; border: 0; cursor: pointer; background: transparent; }
.bcolor__swatch:focus-within { outline: 2px solid var(--b-focus); outline-offset: 2px; }
.bcolor__pick:focus-visible { outline: none; }
.bcolor__hex { min-height: 36px; padding: 6px 10px; font-family: var(--font-mono); font-size: .8125rem; text-transform: lowercase; }

.sfonts { display: grid; gap: 8px; }
.sfont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 168px); align-items: center; gap: 8px; }
.sfont__label { font-size: .8125rem; color: var(--b-text); }
.bselect { position: relative; display: inline-flex; width: 100%; }
.bselect__input {
  appearance: none; -webkit-appearance: none; width: 100%; height: 36px; padding: 0 34px 0 12px;
  border: 1px solid var(--b-control); border-radius: var(--b-r-input); background: var(--b-bg); color: var(--b-text);
  font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.bselect__input:hover { border-color: var(--b-text-2); }
.bselect__input option { background: var(--b-panel); color: var(--b-text); }
.bselect__chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--b-text-2); pointer-events: none; }

.sranges { display: grid; gap: 12px; }
.brange { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.brange .blabel { grid-column: 1 / -1; margin: 0; }
.brange__input { width: 100%; accent-color: var(--b-focus); height: 28px; cursor: pointer; }
.brange__value { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--b-text-2); font-size: .8125rem; }

.sactions { display: grid; gap: 8px; }
.sshare { margin-top: 12px; padding: 14px; border: 1px solid var(--b-line); border-radius: var(--b-r-card); background: var(--b-card); }
.sshare[hidden] { display: none; }
.sshare__label { display: block; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; color: var(--b-text); margin-bottom: 8px; }
.sshare__row { display: flex; gap: 8px; }
.sshare__input { flex: 1 1 auto; min-width: 0; min-height: 40px; font-size: .8125rem; }
.sshare__row .bbtn { flex: none; }
.sshare__status { font-size: .8125rem; color: var(--b-text-2); margin: 8px 0 0; }
.sshare__label + .sshare__status, .sshare__row + .sshare__status { margin-top: 10px; }
.sshare__gap { margin-top: 8px; }
.shint { margin-top: 14px; font-size: .8125rem; line-height: 1.55; color: var(--b-text-2); }
.shint a { color: var(--b-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.shint a:hover { text-decoration-thickness: 2px; }

/* ============================================================
   THE CANVAS: the strip bar, then the template in its device
   ============================================================ */
.sstage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.sbar { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px; background: var(--b-bg); border-bottom: 1px solid var(--b-line); }

/* The template strip: one small live render per featured template (the
   gallery's .screen technique), the builder's template cards in look. Partial
   chips at the right edge are the scroll affordance. The 4px pad keeps the
   active chip's ring off the scroll edges. */
.tpl-strip { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 4px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tpl-strip::-webkit-scrollbar { display: none; }
.tpl-strip__rail { flex: none; display: flex; gap: 8px; }
.tpl-chip {
  flex: none; width: 120px; display: block; overflow: hidden; cursor: pointer; text-decoration: none;
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: 10px; color: var(--b-text);
  transition: border-color var(--b-fast) var(--ease), box-shadow var(--b-fast) var(--ease), transform var(--b-fast) var(--ease);
}
.tpl-chip:hover { border-color: var(--b-control); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8); }
.tpl-chip.is-on { border-color: transparent; background: linear-gradient(var(--b-card), var(--b-card)) padding-box, var(--grad-brand) border-box; }
.tpl-chip:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 1px; }
.tpl-chip__shot { display: block; width: 100%; }
.tpl-chip__name { display: block; padding: 4px 8px 5px; font-family: var(--font-display); font-weight: 600; font-size: .75rem; line-height: 1.25; color: var(--b-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-chip.is-on .tpl-chip__name, .tpl-chip--all:hover .tpl-chip__name { color: var(--b-text); }
.tpl-chip--all .tpl-chip__shot--all { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--b-hover); color: var(--b-text); }
.tpl-chip--all svg { width: 26px; height: 26px; }
/* while Borg Sites AI answers, the strip waits; the whole gallery stays one click away */
.tpl-strip.is-locked .tpl-chip { pointer-events: none; }
.tpl-strip.is-locked .tpl-chip:not(.is-on) { opacity: .5; }
.tpl-strip.is-locked .tpl-chip--all { pointer-events: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tpl-strip { scroll-behavior: auto; } }

/* the device toggle, the builder's segmented control */
.bseg { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: var(--b-r-input); background: var(--b-panel); border: 1px solid var(--b-line); }
.bseg__btn {
  display: inline-grid; place-items: center; width: 40px; height: 34px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--b-text-2); cursor: pointer;
  transition: background-color var(--b-fast) var(--ease), color var(--b-fast) var(--ease);
}
.bseg__btn:hover { color: var(--b-text); }
.bseg__btn[aria-pressed="true"] { background: var(--b-card); color: var(--b-text); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px -2px rgba(0, 0, 0, .5); }

/* the canvas: light, dotted, so the template is the brightest thing here */
.sstage__canvas {
  position: relative; display: flex; min-width: 0; min-height: 0; overflow: hidden; padding: 24px;
  background-color: var(--b-canvas);
  background-image: radial-gradient(circle at center, rgba(10, 14, 39, .11) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.bdevice {
  flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: #FFFFFF; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(10, 14, 39, .08), 0 34px 80px -34px rgba(10, 14, 39, .45), 0 12px 24px -16px rgba(10, 14, 39, .25);
  transition: border-radius .38s var(--ease-out), box-shadow .38s var(--ease-out);
}
.bdevice__bar { display: flex; align-items: center; gap: 12px; flex: none; height: 36px; padding: 0 14px; background: #F4F5FA; border-bottom: 1px solid #E3E6F0; }
.bdevice__dots { display: inline-flex; gap: 6px; }
.bdevice__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D3D7E3; }
.bdevice__address {
  flex: 0 1 420px; min-width: 0; margin: 0 auto; padding: 4px 12px; border-radius: 999px; background: #E3E6F0; color: #4A5072;
  font-size: .75rem; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bdevice__screen { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #FFFFFF; }
.bdevice__frame { display: block; width: 100%; height: 100%; border: 0; background: #FFFFFF; }
/* a phone 390 wide in the builder's bezel, as tall as the canvas allows */
.bdevice[data-device="mobile"] {
  flex: none; align-self: center; width: 414px; max-width: 100%; height: min(868px, 100%); margin: 0 auto; padding: 12px;
  background: #0A0E27; border-radius: 46px;
  box-shadow: 0 0 0 1px rgba(10, 14, 39, .2), 0 40px 90px -36px rgba(10, 14, 39, .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.bdevice[data-device="mobile"] .bdevice__bar { display: none; }
.bdevice[data-device="mobile"] .bdevice__screen { border-radius: 36px; }

/* while the AI works: the canvas waits, and says why */
.bworking { position: absolute; inset: 0; z-index: 5; display: grid; place-items: end center; padding-bottom: 28px; cursor: progress; }
.bworking[hidden] { display: none; }
.bworking__pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: rgba(10, 14, 39, .92); color: #FFFFFF; font-family: var(--font-display); font-weight: 600; font-size: .8125rem;
  box-shadow: 0 16px 40px -14px rgba(10, 14, 39, .7);
  animation: b-rise .3s var(--ease-out) both;
}
.bworking__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad-brand); animation: b-pulse 1.2s var(--ease-in-out) infinite; }
@keyframes b-pulse { 0%, 100% { transform: scale(.8); box-shadow: 0 0 0 0 rgba(224, 53, 158, .5); } 50% { transform: scale(1); box-shadow: 0 0 0 6px rgba(224, 53, 158, 0); } }
.sstage.is-busy .bdevice { box-shadow: 0 0 0 2px rgba(123, 63, 228, .45), 0 34px 80px -34px rgba(10, 14, 39, .45); }

/* ============================================================
   PHONES AND SMALL TABLETS (under 900px): one column at a time
   Still one screen with the head band, so the composer is in view on arrival.
   ============================================================ */
@media (max-width: 899.98px) {
  .studio-main { min-height: 600px; }
  .bswitch { display: flex; align-items: center; justify-content: center; flex: none; gap: 2px; padding: 6px 12px; background: var(--b-bg); border-bottom: 1px solid var(--b-line); }
  .bswitch__btn {
    flex: 1 1 0; max-width: 180px; height: 40px; border: 1px solid var(--b-line); background: var(--b-panel); color: var(--b-text-2);
    font-family: var(--font-display); font-weight: 600; font-size: .875rem; cursor: pointer;
  }
  .bswitch__btn:first-child { border-radius: var(--b-r-input) 0 0 var(--b-r-input); }
  .bswitch__btn:last-child { border-radius: 0 var(--b-r-input) var(--b-r-input) 0; }
  .bswitch__btn[aria-pressed="true"] { background: var(--b-card); color: var(--b-text); border-color: var(--b-control); }
  .sapp__main { grid-template-columns: minmax(0, 1fr); }
  .sapp__main[data-view="panel"] .sstage { display: none; }
  .sapp__main[data-view="preview"] .bpanel { display: none; }
  .bpanel { border-right: 0; }
  .sbar .bseg { display: none; }
  .sstage__canvas { padding: 0; }
  .bdevice, .bdevice[data-device="mobile"] {
    flex: 1 1 auto; width: 100%; height: auto; max-width: none; margin: 0; padding: 0;
    border-radius: 0; box-shadow: none; background: #FFFFFF; transition: none;
  }
  .bdevice__bar { display: none; }
  .bdevice[data-device="mobile"] .bdevice__screen { border-radius: 0; }
}
/* small phones: the head band keeps its eyebrow and heading, and the
   composer gets the room the one-line description took */
@media (max-width: 599.98px) {
  .studio-head__lead { display: none; }
}
@media (max-width: 479.98px) {
  .bcolor { grid-template-columns: minmax(0, 1fr) 36px 88px; }
  .sfont { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); }
}

/* ============================================================
   REDUCED MOTION: everything still, nothing slides
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sapp *, .sapp *::before, .sapp *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .bcomposer__shimmer { animation: none; background-position: 0 0; }
  .bwelcome__orb, .bworking__dot, .btyping i { animation: none; }
  .btyping i { opacity: .7; }
}