/* =====================================================================
 * The image workspace
 *
 * Built on top of chat.css rather than beside it: the rail, the picker,
 * the composer and the toasts are the same components. Only what is
 * genuinely new lives here — the settings column, the canvas and the
 * gallery.
 *
 * That is deliberate. Two stylesheets each defining a rail is how the two
 * pages start looking like different products after a few edits.
 * ================================================================== */

.bf-app--image {
  /* The rail is narrower here: gallery entries are thumbnails with a line
     of text, not full conversation titles. */
  /* The rail's width lives in tokens.css, declared once. */
  /* 274px left everything inside it fighting for width — six ratio
     buttons in a row with a wireframe and a label each need more than
     forty pixels apiece to look deliberate rather than squeezed. */
  --bf-settings-w: 312px;
}

/* ---------------------------------------------------------------------
 * One column, in the order you work
 *
 * The previous three-column layout put the settings in a tall stack that
 * had to be scrolled, and pushed the results into a sidebar. This follows
 * the reference: choose a model, describe, adjust, look at what came out.
 * ------------------------------------------------------------------ */

/*
 * The page is centred and stops widening.
 *
 * Left to fill the window, the content ran edge to edge on a large
 * monitor: nothing told the eye where a line began, and the two columns
 * drifted so far apart that choosing a setting meant crossing the
 * screen to reach it.
 *
 * 1500 is where both columns are comfortable — the writing column at
 * its 720 cap and the gallery wide enough for a full row of cards.
 * Anything past that is margin, which is what the space is for.
 */
.bf-studio {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--bf-space-5) var(--bf-space-6, 26px) var(--bf-space-6, 26px);
}

.bf-studio > .bf-studio__intro,
.bf-studio > .bf-studio__cols,
.bf-studio > .bf-results {
  max-width: 1500px;
  margin-inline: auto;
}

.bf-studio > * + * { margin-top: var(--bf-space-5); }

/* The display face, where Thin would actually look good — a heading at
   22px has room for a hairline stroke. */
.bf-studio__intro h1 {
  margin: 0 0 4px;
  font-family: var(--bf-font-display);
  font-size: 22px;
  font-weight: 700;
}

.bf-studio__intro p {
  margin: 0;
  color: var(--bf-text-faint);
  font-size: var(--bf-size-sm);
}

/* ---- Models, as a row you compare ---------------------------------- */

.bf-models { display: flex; align-items: center; gap: var(--bf-space-4); }

.bf-models__label {
  flex: none;
  color: var(--bf-text-faint);
  font-size: var(--bf-size-sm);
}

.bf-models__row {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.bf-models__row::-webkit-scrollbar { display: none; }

.bf-model-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--bf-line);
  border-radius: 13px;
  background: var(--bf-surface);
  color: var(--bf-text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--bf-fast) var(--bf-ease),
              background var(--bf-fast) var(--bf-ease);
}

.bf-model-pick:hover:not([disabled]) { border-color: var(--bf-line-strong); }

.bf-model-pick.is-active {
  border-color: var(--bf-accent);
  background: var(--bf-accent-soft);
}

.bf-model-pick[disabled] { opacity: .45; cursor: not-allowed; }

.bf-model-pick .bf-model-logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  /* The chosen model's mark takes our accent here, as it does in the chat. */
  --logo-accent: var(--orange-500);
}

.bf-model-pick.is-active .bf-model-logo {
  background: color-mix(in srgb, var(--orange-500) 14%, var(--bf-surface-3));
  border-color: color-mix(in srgb, var(--orange-500) 32%, transparent);
  color: var(--orange-500);
}

.bf-model-pick__text { display: grid; gap: 1px; text-align: start; }
.bf-model-pick__text strong { font-size: var(--bf-size-base); font-weight: 600; color: var(--bf-text); }
.bf-model-pick__text em { font-style: normal; font-size: var(--bf-size-2xs); color: var(--bf-text-faint); }
.bf-model-pick.is-active .bf-model-pick__text strong { color: var(--bf-accent); }

/* What it costs, which is the question a row of models is really asking. */
.bf-model-pick__cost {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--bf-radius-pill);
  background: rgba(255, 255, 255, .06);
  color: var(--bf-text-faint);
  font-size: var(--bf-size-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bf-model-pick.is-active .bf-model-pick__cost {
  background: rgba(169, 79, 49, .16);
  color: var(--bf-accent);
}

/* ---- The prompt, and the button that spends ------------------------ */

/*
 * The working area sits on a card.
 *
 * In the reference every control rests on a surface slightly lighter than
 * the page, so it is seen against that surface rather than against the
 * page's black. Here the prompt box and the settings floated directly on
 * the background with nothing beneath them to separate from — which is
 * most of why the buttons looked flat, whatever font they were set in.
 */
/*
 * The prompt and its settings are one request.
 *
 * They were two cards, which read as two steps — write here, then go and
 * configure. Inside one surface, with the prompt box losing its own
 * border, it is a single thing you fill in.
 */
.bf-work {
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-line);
  border-radius: 12px;
  background: var(--bf-surface);
  /*
   * No lit edge on the panel.
   *
   * Focus inside it lifted the border to the accent line, which around a
   * large panel read as the whole box glowing rather than as a field being
   * focused. The border stays where it is; the field inside still shows
   * its own focus.
   */
  box-shadow: none;
  transition: border-color 200ms cubic-bezier(.2, .7, .3, 1);
}

.bf-work:focus-within { border-color: var(--bf-line-strong); }

.bf-work > * + * { margin-top: var(--bf-space-3); }

/* No card within a card. */
/*
 * The prompt well, inside the panel.
 *
 * This stripped the border and flattened the field onto the panel — from
 * the days when the panel was a lighter grey and the contrast came for
 * free. On true black it made the one thing you have to type into
 * invisible.
 */
.bf-work .bf-ask__box {
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.13);
  background: #131313;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}

.bf-work .bf-ask__box:focus-within {
  border-color: var(--orange-border);
  background: #171717;
}

/* The settings sit on the same surface, separated by a line rather than
   by being a different colour. */
.bf-work .bf-opts {
  padding-top: var(--bf-space-3);
  border-top: 1px solid var(--bf-line);

  /*
   * One row, reading right to left.
   *
   * The container had no layout of its own, so each control took a line
   * of its own and the three settings ran down the page. They are one
   * decision made in three parts and belong on one line — and a media
   * query further down already assumed a grid that was never declared.
   */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-2, 10px);
}

/* The generate button ends the row, after the settings it applies to. */
.bf-work .bf-opts .bf-generate { margin-inline-start: auto; }

.bf-ask { display: flex; align-items: stretch; gap: var(--bf-space-3); }

/* Inside a card, the prompt box needs no card of its own. */

/*
 * The place you type, made visible.
 *
 * When the palette moved to true black this sat at #080808 on a #070707
 * panel — a field you could not see was a field, on a page whose whole
 * purpose starts with typing in it. A well needs to look sunk into the
 * surface, not painted the same colour as it.
 */
.bf-ask__box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--bf-space-4);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: #131313;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  transition: border-color var(--bf-fast) var(--bf-ease), background var(--bf-fast) var(--bf-ease);
}

.bf-ask__box:hover { border-color: rgba(255,255,255,.19); }

.bf-ask__box:focus-within {
  border-color: var(--orange-border);
  background: #171717;
}

.bf-ask__box textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--bf-text);
  font-family: inherit;
  font-size: var(--bf-size-md);
  line-height: 1.9;
  resize: none;
  outline: none;
}

.bf-ask__box textarea::placeholder { color: #8f8f8f; }

.bf-ask__tools { display: flex; gap: 4px; margin-top: 6px; }

.bf-ask__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--bf-text-faint);
  cursor: pointer;
  transition: background var(--bf-fast) var(--bf-ease), color var(--bf-fast) var(--bf-ease);
}

.bf-ask__icon:hover { background: rgba(255, 255, 255, .06); color: var(--bf-text); }

.bf-ask__go {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: none;
  justify-content: center;
}

/*
 * The primary action — copper, not flat orange.
 *
 * The gradient plus the inner highlight and bottom inner shadow are what
 * make it read as a surface rather than a coloured rectangle. Flat orange
 * at this size looks like a default button, which is the one thing the
 * spec was clear about avoiding.
 */




/* The price shares the surface: one control, one colour. */
/*
 * The one button in the row that acts.
 *
 * Its parts were styled and the button itself was not — so it rendered
 * as the browser's grey default beside a row of dark controls, which is
 * exactly backwards: the settings looked deliberate and the action
 * looked broken.
 *
 * The same orange as "گفتگوی جدید" and the send button: three ways of
 * starting something should not be three different oranges.
 */
.bf-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 22px;
  /*
   * The same halo the new-chat button had, and the same answer.
   *
   * A pale warm border at half opacity over the button's own colour reads
   * as a glow rather than an edge. The accent's darker step gives it a
   * boundary instead.
   */
  border: 1px solid var(--orange-600);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 34%),
    var(--orange-500);
  box-shadow: none;
  color: var(--bf-on-accent, #fff);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--bf-ease-all);
}

.bf-generate:hover:not([disabled]) {
  border-color: var(--orange-500);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 34%),
    var(--orange-400);
}

.bf-generate[disabled] { opacity: .55; cursor: not-allowed; }

.bf-generate__cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*
 * The preview's bolt is 9 × 14 — narrow and tall.
 *
 * Ours was square at 14 × 14, which beside a number reads heavier than
 * the same mark inside the model menu. Stated here rather than on the
 * tag, so the two agree wherever the icon appears.
 */
/*
 * The price is the second thing read on this button, so it is sized like
 * it matters rather than tucked in as a footnote.
 */
.bf-generate__cost {
  font-size: 1.08em;
  gap: 7px;
}

.bf-generate__cost svg {
  width: 12px;
  height: 18px;
  color: var(--bf-credit-mark);
}

/* The figure sits in a <b>, which brings its own weight; the label and
   the number must read as one line, so both are stated. */
.bf-generate__cost b { font-weight: 700; }
.bf-generate__label { font-weight: 700; }



@media (prefers-reduced-motion: reduce) {
  .bf-generate:hover:not([disabled]) { transform: none; }
}


.bf-generate__cost[hidden] { display: none; }

/* ---- Settings, as pills that open ---------------------------------- */



/*
 * The settings controls.
 *
 * Dark glass rather than orange: the label is grey, and only the chosen
 * value carries the accent. That is what keeps the generate button the
 * one thing in the row that looks like it acts.
 *
 * Every value here is from the specification — heights, radii, borders,
 * the inner highlight, and the ambient glow on the value alone.
 */
/*
 * A control that reads as a setting, not an action.
 *
 * These selectors carried comments and no declarations — the rules had
 * been lost at some point and nothing noticed, because a button with no
 * styling still renders. It rendered as the browser's own grey box,
 * stacked vertically, which is what the video page has been showing.
 */
.bf-opt__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--bf-ease-all);
}

.bf-opt__btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.bf-opt__btn[aria-expanded="true"] {
  border-color: var(--orange-border);
  color: var(--text-primary);
}

/* Outline marks at 1.5 stroke, never filled. */
.bf-opt__btn svg {
  flex: none;
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
  color: var(--text-muted);
}

.bf-opt__btn:hover svg,
.bf-opt__btn[aria-expanded="true"] svg { color: var(--orange-500); }

/*
 * Label and value on one line.
 *
 * Stacked, each control was two lines tall and the row needed a second
 * row. Side by side they read as one small thing, which is what they
 * are.
 */
.bf-opt__stack {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.bf-opt__name { color: var(--text-muted); font-size: var(--bf-size-2xs); }

/*
 * The chosen value.
 *
 * The ambient glow sits here and nowhere else — on the whole control it
 * would compete with the button; on the one word that changes, it marks
 * what you chose.
 */

.bf-opt__note { font-size: var(--bf-size-2xs); color: #6E6E6E; font-weight: 400; }

/*
 * Built, not native.
 *
 * A browser select cannot show a note under an option, cannot be styled,
 * and looks like a different product on every platform.
 */


/*
 * Never taller than the room there is.
 *
 * The exact height is set when the menu opens, since it depends on where
 * the page is scrolled; this is the ceiling and the scrolling behaviour
 * that goes with it.
 *
 * `overscroll-behavior: contain` stops a flick inside the list from
 * carrying on into the page behind it once the list ends.
 */
/*
 * The dropdown, as the video page still uses it.
 *
 * This was removed with the image page's old rules and left video's
 * menus unstyled — static, unlayered, and behind the rail. The image
 * page overrides it further down.
 */
.bf-opt__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: var(--bf-z-menu);
  min-width: 100%;
  width: max-content;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(20, 20, 20, .98);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.bf-opt__menu[hidden] { display: none; }

.bf-opt__menu,
.bf-opt__advanced {
  max-height: min(52vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bf-opt__menu--ratios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  min-width: 250px;
}




/*
 * Unavailable, and still readable.
 *
 * Fading the whole row to .4 turns the label into a smudge and the item
 * reads as half-loaded. Dimming the surface instead keeps the word legible,
 * which is the point: you are meant to see that ۴K exists and is not on
 * offer, not to wonder what that grey shape was.
 */



/* The wireframe that names a ratio faster than its numbers do. */
.bf-ratio-shape {
  flex: none;
  display: block;
  width: 16px;
  border: 1.4px solid currentColor;
  border-radius: 3px;
  opacity: .85;
}

.bf-ratio-shape[data-shape="1:1"]  { height: 16px; }
.bf-ratio-shape[data-shape="16:9"] { height: 9px; }
.bf-ratio-shape[data-shape="9:16"] { width: 9px; height: 16px; }
.bf-ratio-shape[data-shape="4:3"]  { height: 12px; }
.bf-ratio-shape[data-shape="3:4"]  { width: 12px; height: 16px; }
.bf-ratio-shape[data-shape="21:9"] { height: 7px; }


/*
 * Hidden until the panel is opened.
 *
 * A closed <details> hides its own content only when that content is laid
 * out normally. This panel is absolutely positioned, so the browser kept
 * rendering it — three hundred pixels wide, sitting off the left edge of
 * a phone screen and making the page scroll sideways.
 *
 * Nothing showed it, so nobody could see what was doing it.
 */

.bf-opt__advanced {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: var(--bf-z-menu);
  width: 300px;
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-line);
  border-radius: 14px;
  background: var(--bf-surface-2, #161616);
  box-shadow: var(--bf-shadow-lg);
}

.bf-opt__advanced label {
  display: block;
  margin-bottom: 6px;
  color: var(--bf-text-muted);
  font-size: var(--bf-size-sm);
}

.bf-opt__advanced label + * { margin-bottom: var(--bf-space-3); }

.bf-opt__advanced textarea,
.bf-opt__advanced input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--bf-line);
  border-radius: 10px;
  background: var(--bf-surface);
  color: var(--bf-text);
  font-family: inherit;
  font-size: var(--bf-size-sm);
  resize: vertical;
}

/* ---- Reference images attached to the prompt ----------------------- */

.bf-ask__attached[hidden] { display: none; }


.bf-ref img { width: 100%; height: 100%; object-fit: cover; }

.bf-ref button {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

/* An image carried over from the last generation, so a follow-up edits
   it rather than starting again. Marked, because it changes what happens. */

/* ---- Results ------------------------------------------------------- */

.bf-results[hidden], .bf-samples[hidden] { display: none; }

/*
 * A heading and whatever belongs beside it.
 *
 * `space-between` pushed the search box to the far edge of a wide screen,
 * where it floated with nothing around it and read as an unrelated
 * control. Next to the words it labels, it explains itself.
 */
.bf-results__head {
  display: flex;
  align-items: center;
  gap: var(--bf-space-4);
  margin-bottom: var(--bf-space-3);
}

.bf-results__head h2 {
  flex: none;
  margin: 0;
  font-size: var(--bf-size-md);
  font-weight: 600;
}

/* The trailing note takes the remaining room and stays quiet. */
.bf-results__head > span:last-child { margin-inline-start: auto; }

.bf-results__head span { color: var(--bf-text-faint); font-size: var(--bf-size-xs); }

.bf-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--bf-space-3);
}

.bf-shot {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bf-surface);
  border: 1px solid var(--bf-line);
}

.bf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* While it is being made, the share of the work done — not a spinner,
   which says only that something is happening. */
/*
 * While it is being made.
 *
 * The surface stays as it is and the ring sits on it — no shimmer, no
 * moving gradient. Those said "loading" in general; the share of the work
 * says it specifically, and two things saying the same thing is one too
 * many.
 */
.bf-shot--pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bf-surface);
  border-color: var(--bf-accent-line);
}

.bf-progress {
  position: relative;
  width: 66px;
  height: 66px;
}

.bf-progress svg { transform: rotate(-90deg); display: block; }
.bf-progress circle { fill: none; stroke-width: 3; }

/* The track is barely there — it is a groove, not a second ring. */
.bf-progress .bf-progress__track { stroke: rgba(255, 255, 255, .07); }

.bf-progress .bf-progress__bar {
  stroke: var(--bf-accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(.2, .7, .3, 1);
  filter: drop-shadow(0 0 5px rgba(169, 79, 49, .4));
}

.bf-progress__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bf-size-base);
  font-weight: 600;
  color: var(--bf-text);
  font-variant-numeric: tabular-nums;
}

.bf-shot__note { color: var(--bf-text-faint); font-size: var(--bf-size-xs); }

.bf-shot__tools {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
  opacity: 0;
  transition: opacity var(--bf-normal) var(--bf-ease);
}

.bf-shot:hover .bf-shot__tools { opacity: 1; }

.bf-shot__tools a,
.bf-shot__tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background var(--bf-fast) var(--bf-ease);
}

.bf-shot__tools a:hover,
.bf-shot__tools button:hover { background: rgba(255, 255, 255, .3); }

@media (hover: none) { .bf-shot__tools { opacity: 1; } }

/* ---- Sample prompts ------------------------------------------------ */

.bf-samples__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--bf-space-3);
}


.bf-sample:hover { border-color: var(--bf-accent-line); }
.bf-sample strong { font-size: var(--bf-size-base); font-weight: 600; color: var(--bf-text); }
.bf-sample em {
  font-style: normal;
  font-size: var(--bf-size-xs);
  color: var(--bf-text-faint);
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- A picture at full size ---------------------------------------- */

.bf-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bf-space-5);
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
}

.bf-lightbox[hidden] { display: none; }
.bf-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }

/* ---- Narrow screens ------------------------------------------------ */

@media (max-width: 860px) {
  .bf-studio { padding: var(--bf-space-4); }

  .bf-models { flex-direction: column; align-items: stretch; gap: 8px; }
  .bf-models__label { font-size: var(--bf-size-xs); }

  .bf-ask { flex-direction: column; }
  .bf-ask__go { flex-direction: row; justify-content: space-between; }
  .bf-generate { flex: 1; }

  .bf-results__grid { grid-template-columns: repeat(2, 1fr); }
  .bf-samples__row { grid-template-columns: repeat(2, 1fr); }

  .bf-studio__intro h1 { font-size: 19px; }
}

@media (max-width: 520px) {
  .bf-opt__menu { min-width: 168px; }
  .bf-opt__menu--ratios { min-width: 220px; }
  .bf-opt__advanced { width: min(84vw, 300px); max-width: calc(100vw - 24px); }
  .bf-samples__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-progress .bf-progress__bar { transition: none; }
}

/*
 * Which mode the attachment chose.
 *
 * A statement of what will happen, not a control — the person already
 * decided by attaching something or not. Without it, a differently-shaped
 * result is a mystery, and a model that refuses to start without a picture
 * refuses with nothing on screen to explain why.
 */
.bf-mode-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: var(--bf-size-xs);
  color: var(--bf-text-faint);
}

.bf-mode-note[hidden] { display: none; }

.bf-mode-note::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

.bf-mode-note.is-editing { color: var(--bf-accent); }
.bf-mode-note.is-editing::before { opacity: 1; }

/* A requirement rather than a description. */
.bf-mode-note.is-required { color: #C98368; }
.bf-mode-note.is-required::before { opacity: 1; }

/* =====================================================================
 * The navigation every workspace shares
 * ================================================================== */

.bf-rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--bf-space-4) var(--bf-space-4) var(--bf-space-3);
  text-decoration: none;
}

.bf-rail__brand span { display: grid; gap: 1px; }
.bf-rail__brand strong { font-size: var(--bf-size-md); font-weight: 700; color: var(--bf-text); }
.bf-rail__brand em { font-style: normal; font-size: var(--bf-size-2xs); color: var(--bf-text-faint); }


.bf-nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 11px;
  color: var(--bf-text-muted);
  font-size: var(--bf-size-base);
  text-decoration: none;
  transition: background var(--bf-fast) var(--bf-ease), color var(--bf-fast) var(--bf-ease);
}

.bf-nav__item:hover { background: rgba(255, 255, 255, .05); color: var(--bf-text); }

/*
 * The page you are on, at the stated strength.
 *
 * A flat tint reads as a highlight anywhere on the row; the gradient
 * fading out along it says "you are here" and lets the rail stay part of
 * the page rather than a strip of coloured blocks.
 */
/*
 * The page you are on, marked at its edge.
 *
 * The reference draws a bright bar on the row's outer side and lets the
 * fill fade away from it — so the eye finds the marker first and the
 * row second. A wash alone reads as a highlight; the bar reads as a
 * position.
 */
/*
 * The bar alone says where you are.
 *
 * A copper wash behind the row said it too, so the active item shouted
 * twice — and the wash is the vaguer of the two, since a highlight
 * reads as emphasis while a bar at the edge reads as a position.
 */
.bf-nav__item.is-here {
  position: relative;
  background: transparent;
  color: #fff;
  font-weight: 600;
}

.bf-nav__item.is-here::after {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-end: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--orange-500);
}

.bf-nav__item.is-here svg { color: var(--orange-500); }

.bf-nav__item svg { flex: none; }
.bf-nav__item span { flex: 1; min-width: 0; }

/* Not yet built, and saying so — a menu entry that silently does nothing
   is worse than one that admits it is coming. */
.bf-nav__item.is-soon { opacity: .5; cursor: default; }
.bf-nav__item.is-soon:hover { background: transparent; color: var(--bf-text-muted); }

.bf-nav__item em {
  font-style: normal;
  font-size: var(--bf-size-2xs);
  padding: 2px 7px;
  border-radius: var(--bf-radius-pill);
  background: rgba(255, 255, 255, .07);
  color: var(--bf-text-faint);
}

.bf-rail__section {
  padding: var(--bf-space-4) var(--bf-space-4) 6px;
}

.bf-rail__section h2 {
  margin: 0;
  font-size: var(--bf-size-xs);
  font-weight: 500;
  color: var(--bf-text-faint);
}

/* =====================================================================
 * The bar above the workspace
 * ================================================================== */

.bf-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  font-size: var(--bf-size-sm);
  color: var(--bf-text-faint);
}

/*
 * A target big enough to hit.
 *
 * The link was 23×23 — one pixel under what a finger reliably lands on,
 * which on a phone is the difference between going home and pressing
 * nothing. The padding grows the target without moving the text.
 */
.bf-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 4px;
  margin: -2px -4px;
  color: inherit;
  text-decoration: none;
}
.bf-crumb a:hover { color: var(--bf-text-muted); }
.bf-crumb strong { color: var(--bf-text); font-weight: 600; }





/* =====================================================================
 * Model badges
 * ================================================================== */

.bf-model-pick__tags { display: flex; gap: 5px; margin-top: 3px; }

.bf-tag {
  padding: 2px 8px;
  border-radius: var(--bf-radius-pill);
  font-size: var(--bf-size-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.bf-tag--smart  { background: rgba(169, 79, 49,.15);  color: var(--orange-400); }
.bf-tag--vision { background: rgba(167,139,250,.15); color: #C4B5FD; }
.bf-tag--coding { background: rgba(96,165,250,.15);  color: #93C5FD; }
.bf-tag--fast   { background: rgba(52,208,127,.15);  color: #6EE7A8; }

.bf-tag--cost {
  background: rgba(255, 255, 255, .06);
  color: var(--bf-text-faint);
  font-variant-numeric: tabular-nums;
}

.bf-model-pick.is-active .bf-tag--cost {
  background: rgba(169, 79, 49, .14);
  color: var(--bf-credit-mark);
}

/* =====================================================================
 * Ready-made templates, with a real result
 * ================================================================== */

.bf-samples__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--bf-space-3);
}

.bf-sample {
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid var(--bf-line);
  border-radius: 14px;
  background: var(--bf-surface);
  text-align: start;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--bf-fast) var(--bf-ease), transform var(--bf-fast) var(--bf-ease);
}

.bf-sample:hover { border-color: var(--bf-accent-line); transform: translateY(-2px); }

.bf-sample__shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bf-surface-2, #161616);
}

.bf-sample__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bf-sample__text { display: grid; gap: 3px; padding: 11px 13px 13px; }
.bf-sample__text strong { font-size: var(--bf-size-base); font-weight: 600; color: var(--bf-text); }
.bf-sample__text em {
  font-style: normal;
  font-size: var(--bf-size-2xs);
  color: var(--bf-text-faint);
  line-height: 1.8;
}

@media (max-width: 860px) {
  .bf-crumb { font-size: var(--bf-size-xs); }
  .bf-upgrade-btn span { display: none; }
  .bf-upgrade-btn { padding: 8px 11px; }
  .bf-samples__row { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
 * The sidebar scrolls
 *
 * With seven sections and an account block it is taller than a laptop
 * screen, and the lower entries were simply unreachable — the rail is a
 * fixed-height column and nothing inside it could overflow.
 * ================================================================== */

/*
 * Scrolling, without re-declaring display.
 *
 * This block set `display: flex` to make the rail a scrolling column.
 * image.css loads after chat.css, so that one word overrode the
 * `display: none` that hides the rail on a phone — and the menu covered
 * the whole screen with the page behind it.
 *
 * The layout was already flex; only the scrolling was new. Saying so
 * again was the whole fault.
 */
.bf-rail {
  flex-direction: column;
  overflow: hidden;
}

/* Everything between the brand and the account block scrolls together. */
.bf-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  align-content: start;
}

.bf-nav::-webkit-scrollbar { width: 4px; }
.bf-nav::-webkit-scrollbar-thumb { background: var(--bf-line-strong); border-radius: 2px; }

/* The brand and the account block stay put; they are the anchors. */
.bf-rail__brand,
.bf-rail__new,
.bf-rail__foot { flex: none; }

/* On the chat page the conversation list takes the scrolling instead —
   the navigation is short there and the history is not. */
.bf-app:not(.bf-app--image) .bf-nav { flex: none; overflow: visible; }

/* =====================================================================
 * Your earlier pictures, beside the work
 * ================================================================== */

.bf-earlier__find {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-pill);
  color: var(--bf-text-faint);
}

.bf-earlier__find input {
  width: 110px;
  border: 0;
  background: transparent;
  color: var(--bf-text);
  font-family: inherit;
  font-size: var(--bf-size-xs);
  outline: none;
}

/* A row that scrolls sideways rather than a grid that grows down: these
   are a reference, not the main event. */
/*
 * The row, and the fact that it continues.
 *
 * It always scrolled — but with the scrollbar hidden and no other sign,
 * a gallery of thirty looked like a gallery of five. Nothing was ever
 * lost; there was simply no way to know there was more.
 */
/*
 * The row, inset so the arrows have somewhere to be.
 *
 * They were centred on the row and overlapped the first and last card.
 * The padding gives each one its own space at the edge, and the row
 * scrolls underneath.
 */
.bf-earlier {
  position: relative;
  padding-inline: 42px;
}

@media (max-width: 640px) {
  /* No arrows on a touch screen, so no room needs keeping for them. */
  .bf-earlier { padding-inline: 0; }
}

.bf-earlier__row {
  display: flex;
  gap: var(--bf-space-3);
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-behavior: smooth;

  /*
   * THE ROW HAS A SCROLLBAR AGAIN, AND ON PURPOSE.
   *
   * It was hidden — `scrollbar-width: none` and the WebKit rule below —
   * on the reasoning that dragging is nicer than a scrollbar. Dragging IS
   * nicer. But dragging is JavaScript, and so are the two arrows, and so
   * is opening a picture; and the file that does all three is the biggest
   * on the page and loads last. Until it arrives the row has no affordance
   * at all: the owner reported it twice — «تا صفحه بالا نیومده نمیتونم
   * گالری رو اینور اونور ببرم … فقط همون چندتای اخر رو میتونم ببینم».
   *
   * A scrollbar costs nothing, works before a single line of script has
   * run, works with a trackpad, a wheel, a keyboard and a finger, and is
   * the affordance the row was missing rather than a second one.
   *
   * Thin and quiet so it does not fight the cards: it appears as part of
   * the shelf rather than as a browser part sitting under it.
   */
  scrollbar-width: thin;
  scrollbar-color: var(--bf-line-strong, rgba(255,255,255,.22)) transparent;

  /* Dragging the row should not select the labels under the cursor. */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

/* And the pictures inside must not be draggable objects themselves. */
/*
 * The picture inside a card does not take the press — nor does a video.
 *
 * This named `img` only, because when it was written every card held a
 * picture. The video shelf draws `<video>` elements, and a video swallows
 * the press where a picture would have let it through to the button
 * underneath: the card could not be opened at all, and nothing about it
 * looked wrong.
 *
 * A video element with no `controls` has nothing to do with a press
 * anyway — the card decides what happens, so the card should receive it.
 */
.bf-earlier__row img,
.bf-earlier__row video {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/*
 * Except once it is playing, when its own controls are the point.
 *
 * A chosen card shows the controls, and a control that cannot be pressed
 * is worse than none — so the video takes its events back at exactly the
 * moment it has something to do with them.
 */
.bf-earlier__row .bf-earlier__item.is-picked video {
  pointer-events: auto;
}

/*
 * The same bar for WebKit, which does not read the two properties above.
 * `display: none` here is what actually hid it on Safari and Chrome.
 */
.bf-earlier__row::-webkit-scrollbar {
  height: 6px;
}
.bf-earlier__row::-webkit-scrollbar-track {
  background: transparent;
}
.bf-earlier__row::-webkit-scrollbar-thumb {
  background: var(--bf-line-strong, rgba(255,255,255,.22));
  border-radius: 999px;
}
.bf-earlier__row::-webkit-scrollbar-thumb:hover {
  background: var(--bf-text-faint, rgba(255,255,255,.38));
}

.bf-earlier__row.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
}

.bf-earlier__row.is-dragging .bf-earlier__item { pointer-events: none; }

/*
 * The edge fades where there is more.
 *
 * The quietest of the three signals and the one that does the most work:
 * it needs no control and is read without being looked at.
 */
.bf-earlier::before,
.bf-earlier::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 48px;
  z-index: var(--bf-z-edge);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.bf-earlier::before {
  inset-inline-start: 42px;
  background: linear-gradient(to right, transparent, #070707 88%);
}

.bf-earlier::after {
  inset-inline-end: 42px;
  background: linear-gradient(to left, transparent, #070707 88%);
}

@media (max-width: 640px) {
  .bf-earlier::before { inset-inline-start: 0; }
  .bf-earlier::after { inset-inline-end: 0; }
}

/* In this layout the row runs right to left. */
.bf-earlier.has-start::after { opacity: 1; }
.bf-earlier.has-more::before { opacity: 1; }

/* ---- the arrows ---- */

.bf-earlier__step {
  position: absolute;
  top: 50%;
  z-index: var(--bf-z-edge-btn);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -20px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(12,12,12,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, border-color .16s ease, background .16s ease;
}

.bf-earlier__step:hover { border-color: var(--orange-border); background: rgba(20,20,20,.95); }

/*
 * Each arrow on the side it takes you toward.
 *
 * They were the other way round: the one that walks back to the newest
 * pictures sat where the older ones were going. Pointing at where you
 * land is the only arrangement that needs no thinking about.
 */
.bf-earlier__step--back { inset-inline-start: 0; }
.bf-earlier__step--next { inset-inline-end: 0; }

.bf-earlier.has-start .bf-earlier__step--back,
.bf-earlier.has-more .bf-earlier__step--next { opacity: 1; pointer-events: auto; }

@media (max-width: 640px) {
  /* On a touch screen the row is dragged; the arrows only take up room. */
  .bf-earlier__step { display: none; }
}


/*
 * A card of a stated size.
 *
 * Removing a duplicate took the base rule with it and left only the hover
 * and the children — so the cards had no width and the pictures stretched
 * to whatever the row gave them.
 */
/*
 * The card and its save button, as one cell.
 *
 * The button is positioned against this rather than the card, so it does
 * not become part of what a press on the picture opens.
 */
.bf-earlier__cell {
  position: relative;
  flex: none;
  display: block;
  width: 132px;
}

.bf-earlier__save {
  position: absolute;
  inset-inline-end: 6px;
  top: 6px;
  z-index: var(--bf-z-base);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  opacity: 0;
  transition: opacity .16s ease, border-color .16s ease, background .16s ease;
}

.bf-earlier__cell:hover .bf-earlier__save,
.bf-earlier__save:focus-visible { opacity: 1; }

.bf-earlier__save:hover { border-color: var(--orange-border); background: rgba(18,18,18,.9); }

/* On a touch screen there is no hover to reveal it, so it is always there. */
@media (hover: none) {
  .bf-earlier__save { opacity: 1; }
}

.bf-earlier__item {
  position: relative;
  flex: none;
  width: 132px;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--bf-line);
  border-radius: 12px;
  background: var(--bf-surface);
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  transition: border-color var(--bf-fast) var(--bf-ease);
}

.bf-earlier__item:hover { border-color: var(--bf-accent-line); }

.bf-earlier__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.bf-earlier__item span {
  padding: 0 9px 9px;
  font-size: var(--bf-size-2xs);
  color: var(--bf-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A heading with a line explaining it, rather than a note floating at the
   far edge of a wide screen with nothing around it. */
.bf-section-head h2 { margin: 0 0 3px; font-size: var(--bf-size-md); font-weight: 600; }
.bf-section-head p { margin: 0; font-size: var(--bf-size-xs); color: var(--bf-text-faint); }

/* The picture currently being worked on. */
.bf-earlier__item.is-picked { border-color: var(--bf-accent); }


/* Says what a second click will do, on the thing it will do it to. */
.bf-earlier__open {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  padding: 3px 9px;
  border-radius: var(--bf-radius-pill);
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: var(--bf-size-2xs);
  font-weight: 600;
  pointer-events: none;
}

/* =====================================================================
 * Two shelves, one at a time
 * ================================================================== */





/*
 * Both panels are shown; the script no longer switches between them.
 *
 * `is-on` was what revealed one and hid the other. With the tabs gone
 * they simply stack, so the class is left doing nothing rather than
 * being hunted through the script.
 */
.bf-shelf__panel + .bf-shelf__panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-default);
}

/* A heading, its explanation, and whatever filters it. */
/*
 * A heading and its filter, together.
 *
 * `space-between` pushed the filter to the far edge of a wide screen,
 * where it floated with nothing near it — and on a right-to-left page
 * that edge is the left, which is the opposite side from the heading it
 * belongs to. Grouped, it reads as belonging to the words beside it.
 */
.bf-section-head {
  display: flex;
  align-items: flex-end;
  gap: var(--bf-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--bf-space-3);
}

.bf-section-head > div { flex: none; }

.bf-shelf__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-pill);
  color: var(--bf-text-faint);
  font-size: var(--bf-size-xs);
}

.bf-shelf__filter select,
.bf-shelf__filter input {
  border: 0;
  background: transparent;
  color: var(--bf-text);
  font-family: inherit;
  font-size: var(--bf-size-xs);
  outline: none;
  cursor: pointer;
}

.bf-shelf__filter input { width: 110px; cursor: text; }
.bf-shelf__filter select option { background: var(--bf-surface-2, #1E1815); color: var(--bf-text); }

.bf-shelf__none {
  margin: 0;
  padding: var(--bf-space-5);
  border: 1px dashed var(--bf-line);
  border-radius: 14px;
  color: var(--bf-text-faint);
  font-size: var(--bf-size-sm);
  text-align: center;
}

.bf-sample[hidden] { display: none; }

@media (max-width: 640px) {
  .bf-section-head { align-items: stretch; }
  .bf-shelf__filter { justify-content: space-between; }
}

.bf-mm__trigger {
  display: flex;
  align-items: center;
  /*
   * A quiet control, as the reference has it.
   *
   * It was filled with orange and outlined in it — which made choosing a
   * model look like the most important thing on the page. It is a
   * setting; the button that spends credit is the one that should shout.
   */
  gap: 9px;

  /*
   * Sized to its own words, and sitting at the start of the box.
   *
   * The 218px floor came from the strip it used to live in, where it was
   * the only thing on the line. Inside the prompt box that floor stretched
   * it across the composer, so the quietest control on the page became its
   * widest element.
   */
  width: max-content;
  max-width: 100%;
  min-width: 0;
  /*
   * Pushed away from the end, so it rests at the start — the right, on
   * this page. `margin-inline-start: auto` does the opposite and put the
   * chooser in the far left corner of the composer.
   */
  margin-inline-end: auto;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)), var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 200ms cubic-bezier(.2, .7, .3, 1),
              background 200ms cubic-bezier(.2, .7, .3, 1);
}

.bf-mm__trigger:hover {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--surface-3);
}

/*
 * Open, and still reachable.
 *
 * The dimmer covers the page including this button, so the control that
 * opened the menu could not close it — a second press went into the
 * dark. Lifting it above the dimmer keeps the obvious way out working.
 */
.bf-mm__trigger[aria-expanded="true"] {
  border-color: var(--border-strong);
  position: relative;
  z-index: calc(var(--bf-z-backdrop) + 2);
}

.bf-mm__trigger .bf-model-logo { width: 20px; height: 20px; border-radius: 6px; flex: none; }

.bf-mm__label { display: grid; gap: 1px; flex: 1; min-width: 0; }
.bf-mm__label strong { font-size: 14px; font-weight: 500; }
.bf-mm__label em { font-style: normal; font-size: var(--bf-size-2xs); color: var(--text-muted); }

.bf-mm__chev {
  flex: none;
  color: var(--bf-text-faint);
  transition: transform 200ms cubic-bezier(.2, .7, .3, 1);
}

.bf-mm__trigger[aria-expanded="true"] .bf-mm__chev { transform: rotate(180deg); }


/* =====================================================================
 * The model menu
 *
 * Rebuilt from scratch after several attempts at adapting a supplied
 * design. Two things the operator asked for that the old one never
 * managed:
 *
 *   The panel is one flat black. No gradient, no transparency, no
 *   backdrop-filter on the card itself — the blur belongs to the page
 *   behind it, which is the only thing that should look soft.
 *
 *   Every row says what the model costs, what quality it reaches, and
 *   in one line what it is for.
 * ================================================================== */

/* ---- the page behind ---- */

.bf-mm__dim:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-backdrop);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bf-mm__dim[hidden] { display: none !important; }

/*
 * Three layers, in the order they have to be.
 *
 * dim (+0) · trigger (+1) · sheet (+2)
 *
 * Below the dim the trigger stopped closing the menu; above the sheet it
 * drew over the sheet's own title. It belongs between them: reachable
 * everywhere the sheet is not, and covered where it is.
 */
.bf-mm__panel { position: relative; z-index: calc(var(--bf-z-backdrop) + 2); }

/* ---- the panel ---- */

.bf-mm__panel:not([hidden]) {
  /*
   * Centred, because the reference is a sheet over a blurred page.
   *
   * `inset: auto` left it at its static position, which at 420px happened
   * to clear the trigger and at 600px did not — the trigger drew straight
   * over the panel's own title. The dim behind it already centres its
   * children; the panel simply was not one.
   */
  position: fixed;
  inset: 0;
  transform: none;
  margin: auto;
  height: max-content;
  /*
   * Sized from the reference rather than kept at the old 420.
   *
   * Measured on the picture: the panel is 601px wide, a row is 178 and
   * the mark 92 — a ratio the old width could not carry, because a 92px
   * mark inside 420px leaves nothing for a two-line Persian sentence.
   * 468 keeps the proportions and still fits a phone at one column.
   */
  width: min(520px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 21px;

  /*
   * Flat black, as asked. Nothing shows through it — the blur belongs
   * to the page behind, never to the card.
   */
  background: #121212;
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bf-mm__panel:not([hidden]) .bf-mm__search { display: none; }

/*
 * The trigger stays reachable, and recedes instead of hiding.
 *
 * Dropping it under the dim made it look right and stop working: the
 * menu is closed by pressing the same button that opened it, and the
 * backdrop swallowed that press. The measurement caught it; the eye
 * would not have, because a dimmed button and an unclickable one look
 * identical until you try.
 *
 * The overlap that prompted this is already gone — the sheet is centred
 * now rather than hanging off the trigger — so the elevation costs
 * nothing. Half opacity gives the reference's recessed look while the
 * press still lands.
 */
.bf-mm__trigger[aria-expanded="true"] {
  position: relative;
  z-index: calc(var(--bf-z-backdrop) + 1);
  opacity: .55;
}

/* ---- the heading ---- */

.bf-mm__head-bar,
.bf-mm__note { display: none; }

.bf-mm__panel:not([hidden]) .bf-mm__head-bar {
  display: block;
  margin-bottom: 14px;
  text-align: center;
}

.bf-mm__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--text-primary);
}

.bf-mm__title svg { flex: none; width: 24px; height: 24px; color: var(--orange-500); }

.bf-mm__sub { margin: 6px 0 0; font-size: 12.5px; color: #8f8f8f; }

/* ---- the list ---- */

/*
 * One continuous list, not a stack of separate cards.
 *
 * Gap between rows made each one read as its own object; the reference
 * has a single list divided by hairlines. The rounded corners belong to
 * the list, so the first and last rows sit inside them.
 */
.bf-mm__panel:not([hidden]) .bf-mm__list {
  display: grid;
  row-gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;

  /* Black, like the panel it sits in. */
  background: #121212;
}

/* ---- one model ---- */

.bf-mm__panel:not([hidden]) .bf-mm__card {
  position: relative;
  display: grid;

  /*
   * Text, then mark. The row runs left-to-right so the mark takes the
   * right-hand column, and the body sets itself back to RTL for the
   * Persian inside it.
   */
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 80px;
  column-gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 0;
  margin: 0;

  /*
   * Room on the left for the badge and the tick, which the reference
   * puts in that margin rather than over the text.
   */
  padding: 14px 19px 14px 58px;

  /* A row in a list, not a card on its own. */
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.085);
  border-radius: 0;
  /*
   * Black, with the hairline doing the dividing.
   *
   * The reference's ramp is a blue-grey that reads as a surface of its
   * own against a black panel — which is what made the rows look like
   * they had a colour the panel did not.
   */
  background: #121212;
  box-shadow: none;
  color: inherit;
  text-align: right;
  transition: border-color .16s ease, background .16s ease;
}

.bf-mm__panel:not([hidden]) .bf-mm__card:hover:not(.is-on):not([disabled]) {
  transform: none;
  background: #191919;
}

/*
 * The chosen row is outlined, not lifted out of the list.
 *
 * It keeps its place in the run — a negative top margin covers the
 * hairline above it so the outline is unbroken, and the raised
 * z-index stops the row below clipping its lower edge.
 */
.bf-mm__panel:not([hidden]) .bf-mm__card.is-on {
  position: relative;
  z-index: var(--bf-z-edge);
  margin: -1px 0 0;

  /*
   * A ring, not a hairline.
   *
   * The reference draws the chosen row as a card of its own: a full
   * copper border at 2px and a warm fill, so it separates from the
   * hairline-divided rows around it rather than merely tinting.
   *
   * The colour is the token, not the picture's #A94F31. That image was
   * drawn by a model that approximated the orange, and this project
   * has one accent with an audit that fails on any near-miss.
   */
  border: 2px solid var(--orange-500);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(169, 79, 49,.10) 0%, rgba(169, 79, 49,.05) 55%, rgba(169, 79, 49,.03) 100%),
    #8B4128;
  box-shadow: none;
}

.bf-mm__panel:not([hidden]) .bf-mm__card[disabled] { opacity: .45; cursor: not-allowed; }

/* The last row closes the list; it needs no line under it. */
.bf-mm__panel:not([hidden]) .bf-mm__card:last-of-type { border-bottom: 0; }

/* The rows carry their own hairline now. */
.bf-mm__panel:not([hidden]) .bf-mm__card + .bf-mm__card::before { display: none; }

/* ---- name, note, pills ---- */

.bf-mm__panel:not([hidden]) .bf-mm__body {
  order: 1;
  min-width: 0;
  display: block;
  direction: rtl;
  text-align: start;
}

.bf-mm__panel:not([hidden]) .bf-mm__head { display: block; }

.bf-mm__panel:not([hidden]) .bf-mm__name {
  display: block;
  margin: 0 0 4px;

  /* Room for the tick, which sits in the row's far corner. */
  padding-inline-end: 0;

  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;

  /* Measured from the reference: ~26px on a 601px panel. */
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * The name is white whether chosen or not.
 *
 * Orange belongs to the accents — the outline, the tick, the badge.
 * Colouring the name too made the chosen row shout twice.
 */
.bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__name { color: var(--text-primary); }

/*
 * Two lines, then stop.
 *
 * A truncated sentence tells you less than a short one, and a model
 * whose description you cannot read is not really a choice — but a
 * paragraph would make every row a different height.
 */
.bf-mm__panel:not([hidden]) .bf-mm__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 7px 0 14px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: #A9A9AC;
  overflow: hidden;
}

/*
 * WHAT IS BEHIND THE NAME, UNDER THE NAME.
 *
 * One entry with three models behind it said nothing about any of them on
 * the only page that entry can be chosen from. The names go on their own
 * line — not appended to the description, which is clamped to two lines and
 * would have swallowed them.
 *
 * One line, clipped: the count at the end says how many did not fit, and a
 * second line here would make one card taller than the rest.
 */
.bf-mm__panel:not([hidden]) .bf-mm__opts {
  display: block;
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #C9C6C2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__opts {
  font-size: var(--bf-size-2xs);
  line-height: 1.4;
  margin: 3px 0 0;
  color: #b9b7b3;
}

.bf-mm__panel:not([hidden]) .bf-mm__facts {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  flex-wrap: nowrap;
}

.bf-mm__panel:not([hidden]) .bf-mm__fact,
.bf-mm__panel:not([hidden]) .bf-mm__cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 33px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: #141416;
  box-shadow: none;
  color: #DBDBDB;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.bf-mm__panel:not([hidden]) .bf-mm__cost svg,
.bf-mm__panel:not([hidden]) .bf-mm__fact svg { flex: none; width: 17px; height: 17px; color: var(--bf-credit-mark); }

.bf-mm__panel:not([hidden]) .bf-mm__cost b { font-weight: 600; color: #e8e8e8; }


.bf-mm__panel:not([hidden]) .bf-mm__card[disabled] .bf-mm__cost svg,
.bf-mm__panel:not([hidden]) .bf-mm__card[disabled] .bf-mm__fact svg { color: var(--text-muted); }

/* ---- the operator's own label ---- */

/*
 * Beside the quality, not above the name.
 *
 * Over the row it overhung the top edge and needed a gap between rows
 * to clear the one before. Here it reads as one more thing known about
 * the model, which is what it is.
 */
/*
 * The badge sits in the row's own margin, top corner.
 *
 * It was inline with the chips, where it read as a third fact about
 * the model. The reference gives it the corner opposite the mark, on
 * its own, which is what makes it scan as a label on the row rather
 * than a property of it.
 *
 * The row is `direction: ltr`, so that corner is the physical left.
 */
.bf-mm__tag {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: 18px;
  order: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--orange-500);
  border-radius: 999px;
  background: transparent;
  color: var(--orange-500);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.bf-mm__card[disabled] .bf-mm__tag {
  border-color: rgba(255,255,255,.12);
  background: #0e0e0e;
  color: #8a8a8a;
}

/* ---- the mark ---- */

.bf-mm__panel:not([hidden]) .bf-mm__logo {
  order: 2;
  width: 80px;
  height: 80px;
  flex: none;
  justify-self: end;
  align-self: center;
  margin: 0;
  display: grid;
  place-items: center;

  /*
   * Framed, because this reference frames it.
   *
   * An earlier reference drew the mark bare and the frame was removed
   * to match it. This one puts every mark in a dark rounded tile with
   * a hairline, which is what makes a row of six logos from six
   * vendors read as one list instead of six pasted images.
   */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: #131314;
  color: #e8e8e8;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
}


/*
 * The mark fills its box.
 *
 * The rule reached `img` directly, but the markup wraps every logo in
 * `.bf-model-logo` — which carries its own 24px from the picker it was
 * borrowed from. So a 52px slot held a 24px mark and looked broken.
 */
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  font-size: 26px;
}

/*
 * The artwork fills the square.
 *
 * The base rule insets every logo to 74% of its tile — right where a
 * mark sits on a coloured chip, wrong here, where the tile has no fill
 * of its own and the inset just reads as empty margin.
 *
 * `cover` rather than `contain`: a logo supplied square should meet all
 * four edges, and one that is not square is better cropped than floated
 * in a gap.
 */
.bf-mm__panel:not([hidden]) .bf-mm__logo img,
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  border-radius: inherit;
}

/* ---- the tick ---- */

/*
 * Hidden on the element itself, not behind the panel's open state — or
 * it reappears on every row the moment the panel closes.
 */
/*
 * Hidden by opacity, not display.
 *
 * The mark is printed in every row so choosing one moves it without a
 * reload; hiding it with `display` removed it from the layout, which
 * made the name shift a little as the choice changed.
 */
.bf-mm__flag--on { opacity: 0; visibility: hidden; }

.bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__flag--on {
  /*
   * Beside the badge, not opposite it.
   *
   * The reference puts both marks in the same margin: the label at the
   * top, the tick below it and vertically centred. Split across two
   * corners they made the chosen row look like it had two unrelated
   * decorations.
   */
  /*
   * Physical `left`, not `inset-inline-start`.
   *
   * The tick lives inside the body, which sets itself back to RTL for
   * the Persian — so its inline-start is the right-hand side, and the
   * logical property put the tick in the corner opposite the one the
   * reference draws. Measured at 388px from the row's left edge instead
   * of 18. The row is deliberately LTR, so the physical side is the one
   * that means what it says here.
   */
  opacity: 1;
  visibility: visible;
  position: absolute;
  /*
   * Below centre, not on it.
   *
   * The badge sits at the top of this same margin, and a tick centred
   * exactly read as crowding it. The reference puts the tick at about
   * 53% of the row's height — a little under half — which is what gives
   * the two marks room from each other.
   */
  top: 58%;
  left: 20px;
  right: auto;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  margin: 0;
  color: var(--orange-500);
}

/*
 * The mark fills its box.
 *
 * The box was enlarged and the tick stayed the same size, because the
 * SVG carries `width="12"` on the element itself — growing the container
 * around a fixed drawing moves it without enlarging it.
 */
.bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__flag--on svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.6;
}

/* ---- the link and the footnote ---- */

.bf-mm__panel:not([hidden]) .bf-mm__all {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 4px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.bf-mm__panel:not([hidden]) .bf-mm__all span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-mm__panel:not([hidden]) .bf-mm__all svg { flex: none; }

.bf-mm__panel:not([hidden]) .bf-mm__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #7a7a7a;
  font-size: 11px;
}

.bf-mm__note svg { flex: none; width: 13px; height: 13px; }

/* ---- narrower screens ---- */

@media (max-width: 430px) {
  .bf-mm__dim:not([hidden]) { padding: 12px; }
  .bf-mm__panel:not([hidden]) { padding: 12px; border-radius: 16px; }
  .bf-mm__panel:not([hidden]) .bf-mm__card { padding: 11px 12px; }
  .bf-mm__panel:not([hidden]) .bf-mm__logo { width: 46px; height: 46px; border-radius: 11px; }
  .bf-mm__panel:not([hidden]) .bf-mm__name { font-size: 14px; }
}

/* =====================================================================
 * Where the credit went
 *
 * Everything here was already recorded and none of it was visible. The
 * shape follows the questions in the order they are asked: how much do I
 * have, what am I spending most on, and then — only for someone who
 * wants to check — every line.
 * ================================================================== */

.bf-usage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--bf-space-5) var(--bf-space-6, 26px) var(--bf-space-6, 26px);
}

.bf-usage > * + * { margin-top: var(--bf-space-5); }

/* ---- the three figures ---- */

.bf-usage__summary {
  display: flex;
  align-items: center;
  gap: var(--bf-space-5);
  flex-wrap: wrap;
  padding: var(--bf-space-5);
  border: 1px solid var(--bf-line);
  border-radius: 20px;
  background: var(--bf-surface);
}

.bf-usage__stat { display: grid; gap: 3px; }
.bf-usage__stat em { font-style: normal; font-size: var(--bf-size-xs); color: var(--bf-text-faint); }

.bf-usage__stat strong {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Only the first is the accent — the balance is the one that matters,
   and three orange numbers would say none of them do. */
.bf-usage__stat:first-child strong { color: var(--bf-accent); }

.bf-usage__top-up {
  margin-inline-start: auto;
  padding: 11px 20px;
  border-radius: 12px;
  background:
    /*
     * Centred on #A94F31, the orange of the greeting.
     *
     * The old stops ran #B76B52 to #8B4128 and the white sheen on top
     * lifted the crown to #B76B52 — light enough that the button and the
     * word "سلام" read as two different oranges. The gradient is kept,
     * because a flat fill is what makes a button look ordinary, but it
     * is now a shallow one around the true colour rather than a journey
     * away from it.
     */
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #A94F31 0%, #A94F31 52%, #8B4128 100%);
  border: 1px solid rgba(183, 107, 82,.58);
  box-shadow:
    0 10px 26px rgba(169, 79, 49,.23),
    0 2px 5px rgba(169, 79, 49,.13),
    inset 0 1px 0 rgba(255,255,255,.33),
    inset 0 -1px 0 rgba(110,30,0,.25);
  color: #F0E2DB;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 8px 25px rgba(169, 79, 49, 0.15),
    0 0 18px rgba(169, 79, 49, 0.10);
  font-size: var(--bf-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.bf-usage__top-up:hover { background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #B76B52 0%, #A94F31 50%, #A94F31 100%); }

/* ---- what it went on ---- */

.bf-usage__breakdown {
  padding: var(--bf-space-5);
  border: 1px solid var(--bf-line);
  border-radius: 20px;
  background: var(--bf-surface);
}

.bf-usage__breakdown h2 { margin: 0 0 var(--bf-space-4); font-size: var(--bf-size-md); font-weight: 600; }
.bf-usage__breakdown ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.bf-usage__breakdown li {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: var(--bf-space-4);
}

.bf-usage__model {
  font-size: var(--bf-size-sm);
  color: var(--bf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The share, drawn — a proportion is read faster than a percentage. */
.bf-usage__bar {
  height: 7px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-2, #1E1815);
  overflow: hidden;
}

.bf-usage__bar i {
  display: block;
  height: 100%;
  border-radius: var(--bf-radius-pill);
  background: linear-gradient(90deg, var(--bf-accent), var(--orange-400));
}

.bf-usage__amount {
  font-size: var(--bf-size-sm);
  color: var(--bf-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- every line ---- */

.bf-usage__list {
  padding: var(--bf-space-5);
  border: 1px solid var(--bf-line);
  border-radius: 20px;
  background: var(--bf-surface);
}

.bf-usage__filters { display: flex; gap: 4px; }

.bf-usage__filter {
  padding: 7px 14px;
  border-radius: 10px;
  color: var(--bf-text-muted);
  font-size: var(--bf-size-xs);
  text-decoration: none;
}

.bf-usage__filter:hover { background: rgba(255, 255, 255, .05); color: var(--bf-text); }
.bf-usage__filter.is-on { background: var(--bf-accent-soft); color: var(--bf-accent); font-weight: 600; }

.bf-usage__table { width: 100%; border-collapse: collapse; }

.bf-usage__table th {
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--bf-line);
  color: var(--bf-text-faint);
  font-size: var(--bf-size-xs);
  font-weight: 500;
  text-align: start;
}

.bf-usage__table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--bf-line);
  font-size: var(--bf-size-sm);
  color: var(--bf-text-muted);
  vertical-align: top;
}

.bf-usage__table tr:last-child td { border-bottom: 0; }

.bf-usage__when { color: var(--bf-text-faint); white-space: nowrap; }
.bf-usage__model-cell { color: var(--bf-text); }

/* The arithmetic, for anyone who wants to check it. */
.bf-usage__tokens {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: var(--bf-size-2xs);
  color: var(--bf-text-faint);
  font-variant-numeric: tabular-nums;
}

.bf-usage__amount-cell {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bf-usage__amount-cell.is-out { color: var(--bf-text); }
/* A figure in a ledger, not an event: the reading green, so a column
   of amounts is scanned rather than shouted. */
.bf-usage__amount-cell.is-in { color: var(--bf-sage, #74AA9C); }

.bf-usage__balance {
  color: var(--bf-text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bf-usage__pages { display: flex; gap: 4px; margin-top: var(--bf-space-4); flex-wrap: wrap; }

.bf-usage__pages a {
  min-width: 32px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--bf-text-muted);
  font-size: var(--bf-size-xs);
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.bf-usage__pages a:hover { background: rgba(255, 255, 255, .05); }
.bf-usage__pages a.is-on { background: var(--bf-accent-soft); color: var(--bf-accent); font-weight: 600; }

@media (max-width: 760px) {
  .bf-usage { padding: var(--bf-space-4); }
  .bf-usage__summary { gap: var(--bf-space-4); }
  .bf-usage__top-up { margin-inline-start: 0; width: 100%; text-align: center; }
  .bf-usage__breakdown li { grid-template-columns: 110px 1fr auto; gap: var(--bf-space-3); }

  /* The balance column goes first on a narrow screen: it is the least
     asked-for and the easiest to recompute from the rest. */
  .bf-usage__table th:last-child,
  .bf-usage__table td:last-child { display: none; }
}

/* Opened upward, when the room below has run out. */

/* =====================================================================
 * The credit mark
 *
 * One drawing, used wherever a credit figure appears, so a number can
 * stand alone and still be read as money. That is what lets a model row
 * say "۱۰" instead of "از ۱۰ اعتبار" — the words were identical on every
 * row and cost the width that made the figures comparable.
 * ================================================================== */

.bf-coin { flex: none; color: var(--bf-accent); }

.bf-mm__price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 3px 9px 3px 7px;
  border-radius: var(--bf-radius-pill);
  background: rgba(255, 255, 255, .06);
  color: var(--bf-text-muted);
  font-size: var(--bf-size-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bf-mm__price .bf-coin { color: var(--bf-text-faint); }

.bf-mm__item.is-on .bf-mm__price {
  background: rgba(169, 79, 49, .16);
  color: var(--bf-accent);
}

.bf-mm__item.is-on .bf-mm__price .bf-coin { color: var(--bf-accent); }


/* The chooser sits at the start of the line; its label follows. */
.bf-choose__label { order: 2; }

/* =====================================================================
 * The style filter
 *
 * A row of pills rather than a menu. This asks which model's styles to
 * show — nothing about price or duration bears on that, and with two or
 * three models the whole row fits on a line, so a menu would spend a
 * click on something already visible.
 *
 * Deliberately quieter than the settings pills above it: those change
 * what gets made and what it costs; this only changes what is on screen.
 * ================================================================== */





@media (max-width: 640px) {
  .bf-style-filter { width: 100%; }
  .bf-style-filter__pill { flex: 1; text-align: center; }
}

/* =====================================================================
 * The upload box
 *
 * A labelled box above the prompt rather than a small icon beside it. The
 * icon said "attach something" and nothing about what kind, how many, or
 * how large; the box answers all three before anyone presses it.
 * ================================================================== */



/* The corner labels: what it is for, and how full it is. */





/* The whole box accepts a drop, so aiming is not required. */
.bf-ask__box.is-over { border-color: var(--bf-accent); }

/* ---- what was chosen ---- */

.bf-ask__attached {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bf-ask__attached[hidden] { display: none; }

.bf-ref {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bf-line);
  background: var(--bf-surface-2, #1E1815);
}

.bf-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bf-ref button {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .76);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms cubic-bezier(.2, .7, .3, 1);
}

.bf-ref:hover button { opacity: 1; }

/* On touch there is no hover to reveal it. */
@media (hover: none) { .bf-ref button { opacity: 1; } }

/* Carried from the last result: marked, because it changes what the
   next request means. */


/* =====================================================================
 * What this model costs against its official price
 *
 * A statement, above the box that spends the credit. It reports a fact
 * and changes nothing, so it is not dressed as a control: no hover, no
 * pointer, nothing to press.
 *
 * Green rather than the accent on purpose. The accent belongs to the
 * button beside it; a saving is good news and reads as good news, and
 * two accent-coloured things competing above one button is one too many.
 * ================================================================== */

.bf-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 13px;
  /*
   * The sage green, not the status green.
   *
   * A discount is a figure to read and weigh, not a thing that just went
   * right — and the bright `--bf-success` beside the warm accent read as an
   * alert about the price rather than a fact about it.
   */
  border: 1px solid var(--bf-sage-line, rgba(116, 170, 156, .26));
  border-radius: var(--bf-radius-sm);
  background: var(--bf-sage-soft, rgba(116, 170, 156, .12));
  cursor: default;
}

.bf-deal[hidden] { display: none; }

/*
 * The figure, boxed.
 *
 * Solid where the line around it is soft, so the eye lands on the number
 * first and reads the sentence second — which is the order someone
 * deciding whether to spend actually wants.
 */
/*
 * The number sits mid-sentence, so it is boxed rather than set apart.
 *
 * `gap` is zero: «۱۰» and «٪» are one reading, and a gap between them
 * made the sign look like a separate word.
 */
.bf-deal__badge {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0 1px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(116, 170, 156, .18);
  color: var(--bf-sage, #74AA9C);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

.bf-deal__badge b {
  font-size: 15px;
  font-weight: 700;
}

.bf-deal span:not(.bf-deal__badge) {
  color: var(--bf-text-muted);
  font-size: 13px;
  line-height: 1.9;
}

@media (max-width: 520px) {
  .bf-deal {
    align-items: flex-start;
  }

  .bf-deal span:not(.bf-deal__badge) {
    font-size: 12.5px;
  }
}

/* =====================================================================
 * Plans
 * ================================================================== */

.bf-pricing {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--bf-space-5) var(--bf-space-6, 26px) var(--bf-space-6, 26px);
}

.bf-pricing > * + * { margin-top: var(--bf-space-5); }




/* What the gateway said, on return. */
.bf-pay-note {
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: var(--bf-size-sm);
}

.bf-pay-note.is-ok {
  border: 1px solid rgba(52, 208, 127, .4);
  background: rgba(52, 208, 127, .08);
  color: #6EE7A8;
}

.bf-pay-note.is-bad {
  border: 1px solid rgba(169, 79, 49, .4);
  background: rgba(169, 79, 49, .08);
  color: #FF9E92;
}



/* One plan may be marked; more than one and none of them is. */















.bf-orders h2 { margin: 0 0 var(--bf-space-3); font-size: var(--bf-size-md); font-weight: 600; }

.bf-order-state { font-size: var(--bf-size-xs); }
.bf-order-state.is-paid { color: var(--bf-ok, #34D07F); }
.bf-order-state.is-pending { color: #C98368; }
.bf-order-state.is-failed,
.bf-order-state.is-mismatch { color: #FF9E92; }

@media (max-width: 760px) {
  .bf-pricing { padding: var(--bf-space-4); }
  .bf-plans { grid-template-columns: 1fr; }
}

/* =====================================================================
 * Video
 *
 * The page shares the image workspace's styling; only what genuinely
 * differs is here.
 * ================================================================== */

/* Sound: two states, so a toggle rather than a menu. */
.bf-toggle[aria-pressed="true"] {
  border-color: rgba(169, 79, 49, 0.6);
  background: linear-gradient(180deg, #8B4128, #1a1310);
}

.bf-toggle[aria-pressed="true"] svg { color: #A94F31; }
.bf-toggle[aria-pressed="true"] .bf-opt__value { color: #A94F31; }
.bf-toggle[hidden] { display: none; }

/* A finished video, with its own controls. */
.bf-shot--video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #20201F;
  border: 1px solid var(--bf-line);
}

.bf-shot--video video { display: block; width: 100%; height: auto; }

.bf-shot__save {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  padding: 6px 12px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .66);
  color: #fff;
  font-size: var(--bf-size-xs);
  text-decoration: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.bf-shot--video:hover .bf-shot__save { opacity: 1; }

/* On touch there is no hover to reveal it. */
@media (hover: none) { .bf-shot__save { opacity: 1; } }

/*
 * While it renders.
 *
 * A video takes minutes rather than seconds, so the note says the page
 * can be closed — otherwise people sit and watch a circle, or worse,
 * leave and assume it failed.
 */
.bf-shot__note {
  margin: 0;
  padding: 0 16px;
  color: var(--bf-text-faint);
  font-size: var(--bf-size-xs);
  line-height: 1.8;
  text-align: center;
}

/* One at a time: a video grid of one column reads better than two
   half-width players nobody can see detail in. */
.bf-app--video .bf-results__grid { grid-template-columns: minmax(0, 620px); }

@media (max-width: 760px) {
  .bf-app--video .bf-results__grid { grid-template-columns: 1fr; }
}

/*
 * An empty page that says what to do next.
 *
 * "Nothing configured" for a model that plainly exists sends someone
 * looking in the wrong place; naming the step is the difference between
 * a dead end and a task.
 */
.bf-empty-setup {
  padding: var(--bf-space-6, 26px);
  border: 1px dashed var(--bf-line-strong);
  border-radius: 18px;
  text-align: center;
}

.bf-empty-setup h2 { margin: 0 0 10px; font-size: var(--bf-size-md); font-weight: 600; }

.bf-empty-setup p {
  margin: 0 auto 14px;
  max-width: 52ch;
  color: var(--bf-text-muted);
  font-size: var(--bf-size-sm);
  line-height: 2;
}

.bf-empty-setup strong { color: var(--bf-text); }

.bf-empty-setup__how {
  padding-top: 14px;
  border-top: 1px solid var(--bf-line);
  color: var(--bf-text-faint) !important;
  font-size: var(--bf-size-xs) !important;
}

/* =====================================================================
 * Two columns
 *
 * Making on one side, what was made on the other — so a picture stays
 * in view while the next one is set up.
 * ================================================================== */

.bf-studio__cols {
  display: grid;
  /*
   * A wider gallery column.
   *
   * The arrows live at the row's edges; in a narrow column they sat on
   * top of the pictures. Giving the column more room puts them beside
   * the cards rather than over them.
   */
  /*
   * The writing column takes what it needs; the gallery takes the rest.
   *
   * An even split gave both the same growth, so on a wide screen the
   * prompt box grew past the point of being comfortable to write in
   * while the gallery — which only benefits from width — got no more
   * than it did.
   */
  grid-template-columns: minmax(0, 720px) minmax(430px, 1.4fr);
  gap: 16px;
  align-items: start;
}

.bf-studio__make,
.bf-studio__seen { min-width: 0; }

/*
 * The writing column stops growing; the gallery does not.
 *
 * On a 1920 screen the prompt box reached 780px — wide enough that the
 * eye loses the start of a line on the way back from the end, and a
 * short prompt sits in a field built for a paragraph.
 *
 * The gallery is the opposite case: it is scanned, not read, so every
 * pixel of width shows another picture. Capping both would waste the
 * screen; capping neither made the prompt unpleasant to write in.
 */
.bf-studio__make { max-width: 720px; justify-self: end; width: 100%; }

/*
 * The panel surface.
 *
 * Near-black with a hairline top highlight and no glow. Panels are
 * visible by their border, not by being grey.
 */
.bf-work,
.bf-results,
.bf-shelf {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)), #070707;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.bf-results,
.bf-shelf { margin-top: 14px; }

@media (max-width: 1180px) {
  .bf-studio__cols { grid-template-columns: 1fr; }
}

/* =====================================================================
 * The picture well
 *
 * A modern media slot rather than a file input: a dashed inner area, a
 * frame-and-plus mark, and the limits stated where they are needed.
 * ================================================================== */

.bf-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 150px;
  padding: 18px 14px;
  border-radius: 11px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.012);
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .17s ease, background .17s ease;
}

.bf-upload:hover {
  border-color: rgba(169, 79, 49,.45);
  background: rgba(169, 79, 49,.025);
}

/* The mark: a frame, with the plus attached to it. */
.bf-upload__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  color: #bdbdbd;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.10);
}

.bf-upload__plus {
  position: absolute;
  inset-inline-end: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #B76B52, #8B4128);
  border: 2px solid #070707;
}

.bf-upload__face { text-align: center; }

.bf-upload__face strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
}

.bf-upload__face em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--bf-size-2xs);
}

.bf-upload__limit { color: var(--text-disabled); font-size: var(--bf-size-2xs); }

/*
 * How full it is, at the corner.
 *
 * The limit only matters once you are near it, so it sits out of the
 * way rather than in the middle of the invitation.
 */
.bf-upload__flag,
.bf-upload__count {
  position: absolute;
  top: 10px;
  font-size: var(--bf-size-2xs);
  color: var(--text-disabled);
}

.bf-upload__flag { inset-inline-end: 12px; color: var(--orange-400); }
.bf-upload__count { inset-inline-start: 12px; font-variant-numeric: tabular-nums; }

/* =====================================================================
 * The credit plans
 *
 * Every value from the specification you sent. Four near-black cards of
 * equal height, one of them copper; orange stays an accent everywhere
 * else.
 * ================================================================== */

.bf-pricing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
}

.bf-pricing__heading { display: flex; align-items: flex-start; gap: 13px; }

.bf-pricing__mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 10px;
  color: var(--orange-500);
  background: rgba(169, 79, 49,.035);
  border: 1px solid rgba(169, 79, 49,.32);
}

.bf-pricing__heading h1 { margin: 0; color: #f5f5f5; font-size: 30px; font-weight: 700; line-height: 1.3; }
.bf-pricing__heading p { margin: 6px 0 0; color: rgba(255,255,255,.46); font-size: 12.5px; font-weight: 400; }

/* ---- what you have now ---- */

.bf-current-credit {
  min-width: 310px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), #090909;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.bf-current-credit__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 10px;
  color: var(--orange-500);
  background: rgba(169, 79, 49,.055);
}

.bf-current-credit__body { flex: 1; min-width: 0; }
.bf-current-credit__body > span { display: block; color: rgba(255,255,255,.50); font-size: var(--bf-size-2xs); }

.bf-current-credit__body strong {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-top: 3px;
  direction: ltr;
  justify-content: flex-end;
  color: #f5f5f5;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bf-current-credit__body small { direction: rtl; color: var(--orange-500); font-size: var(--bf-size-2xs); font-weight: 600; }

.bf-current-credit__add {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0c0c0c;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.bf-current-credit__add:hover { color: #A94F31; border-color: rgba(169, 79, 49,.44); }

.bf-pricing__rule { height: 1px; margin: 16px 0 22px; background: rgba(255,255,255,.06); }

/* ---- the grid ---- */

.bf-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.bf-plan {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 22px;
  box-sizing: border-box;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.025), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent),
    #090909;
  box-shadow:
    0 18px 45px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

.bf-plan:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 22px 52px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03);
}

/* The one that is recommended. */
.bf-plan.is-popular {
  border-color: rgba(169, 79, 49,.88);
  background:
    radial-gradient(circle at 50% 0%, rgba(169, 79, 49,.075), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent),
    #0a0a0a;
  box-shadow:
    0 0 26px rgba(169, 79, 49,.07),
    0 20px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(183, 107, 82,.035);
}

.bf-plan.is-popular:hover {
  border-color: rgba(169, 79, 49,.98);
  box-shadow: 0 0 30px rgba(169, 79, 49,.10), 0 24px 58px rgba(0,0,0,.36);
}

.bf-plan__badge {
  position: absolute;
  top: -15px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #B76B52, #A94F31);
  font-size: var(--bf-size-2xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(169, 79, 49,.20);
}

.bf-plan__head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bf-plan__mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.bf-plan h2 { margin: 0; color: #f2f2f2; font-size: 21px; font-weight: 700; }
.bf-plan__sub { margin: 9px 0 0; text-align: center; color: rgba(255,255,255,.46); font-size: 12px; }

.bf-plan__price { margin: 26px 0 0; text-align: center; }

.bf-plan__price strong {
  display: block;
  direction: ltr;
  color: #f5f5f5;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -.6px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.bf-plan__price em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  color: rgba(255,255,255,.55);
  font-size: var(--bf-size-2xs);
}

.bf-plan__credits { margin: 30px 0 0; text-align: center; }
.bf-plan__credits > span { display: block; color: rgba(255,255,255,.47); font-size: var(--bf-size-2xs); }

.bf-plan__credits strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--orange-500);
  font-size: 18px;
  font-weight: 700;
}

.bf-plan__rule { height: 1px; margin: 24px 0 18px; background: rgba(255,255,255,.08); }

/*
 * Room under the last feature.
 *
 * `margin-top: auto` on the button pushes it to the foot of the card —
 * but on a card whose list happens to fill the space, there is nothing
 * left to push with and the two touch.
 */
.bf-plan__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.bf-plan__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  line-height: 1.5;
}

.bf-plan__list svg { flex: none; color: var(--orange-500); }

/*
 * The buttons all sit on one line.
 *
 * `margin-top: auto` rather than a fixed card height, so a plan with one
 * more feature than the others does not push its button below theirs.
 */
.bf-plan__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), #0b0b0b;
  color: #ececec;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.bf-plan form { margin-top: auto; }
.bf-plan form .bf-plan__buy { margin-top: 0; }

.bf-plan__buy:hover { background: #0f0f0f; border-color: rgba(255,255,255,.21); }
.bf-plan__buy:active { transform: translateY(1px) scale(.99); }
.bf-plan__buy[disabled] { color: rgba(255,255,255,.42); cursor: not-allowed; }

/* The one strong orange button on the page. */
.bf-plan__buy.is-primary {
  border: 1px solid rgba(183, 107, 82,.58);
  color: #fff;
  background:
    /*
     * Centred on #A94F31, the orange of the greeting.
     *
     * The old stops ran #B76B52 to #8B4128 and the white sheen on top
     * lifted the crown to #B76B52 — light enough that the button and the
     * word "سلام" read as two different oranges. The gradient is kept,
     * because a flat fill is what makes a button look ordinary, but it
     * is now a shallow one around the true colour rather than a journey
     * away from it.
     */
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #A94F31 0%, #A94F31 52%, #8B4128 100%);
  box-shadow:
    0 10px 26px rgba(169, 79, 49,.23),
    0 2px 5px rgba(169, 79, 49,.12),
    inset 0 1px 0 rgba(255,255,255,.33),
    inset 0 -1px 0 rgba(110,30,0,.25);
}

.bf-plan__buy.is-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(255,195,120,.70);
  filter: brightness(1.055);
  box-shadow: 0 13px 30px rgba(169, 79, 49,.30), inset 0 1px 0 rgba(255,255,255,.39);
}

.bf-plan__buy.is-primary:active {
  transform: translateY(1px) scale(.988);
  filter: brightness(.97);
  box-shadow: 0 5px 13px rgba(169, 79, 49,.17), inset 0 2px 5px rgba(90,25,0,.28);
}

@media (max-width: 1150px) { .bf-plans { grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media (max-width: 720px) {
  .bf-pricing__head { flex-direction: column; align-items: stretch; }
  .bf-current-credit { width: 100%; min-width: 0; }
  .bf-plans { grid-template-columns: 1fr; gap: 22px; }
}

/* =====================================================================
 * The settings, as labelled boxes
 *
 * Everything visible at once instead of behind a dropdown each. The
 * markup and every hook are unchanged — the trigger becomes the box's
 * label and the list is simply never hidden, so the script that fills
 * these and reads the clicks does not know anything moved.
 * ================================================================== */

.bf-image-page .bf-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.bf-image-page .bf-opt {
  /*
   * Positioned, because the advanced panel is placed against it.
   *
   * The earlier rule carried this and was removed with the rest; the
   * panel then had nothing to anchor to and opened at the corner of the
   * page.
   */
  position: relative;
  display: block;
  padding: 11px 12px;
  border-radius: var(--bf-radius-md);
  border: 1px solid rgba(255,255,255,.075);
  background: var(--surface-1);
}

/*
 * On the image page the trigger is a caption, not a control.
 *
 * The video page still uses these as dropdown triggers, so scoping
 * matters: unscoped, this took the pointer events off buttons that are
 * genuinely pressed there.
 */
.bf-image-page .bf-opt__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 0;
  height: auto;
  margin-bottom: 9px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: default;
  pointer-events: none;
}

.bf-image-page .bf-opt__btn svg { width: 13px; height: 13px; color: var(--text-disabled); }
.bf-image-page .bf-opt__caret { display: none; }
.bf-image-page .bf-opt__stack { display: contents; }
.bf-image-page .bf-opt__name { color: var(--text-secondary); font-size: 12px; }
.bf-image-page .bf-opt__value { display: none; }

/*
 * Always open.
 *
 * The `hidden` attribute is still set and cleared by the script; here it
 * simply does not hide anything, so nothing had to be rewired.
 */
/*
 * The image page's lists are flat; the video page's are still menus.
 *
 * Scoping this to the image page leaves video's dropdowns alone, which
 * is why they keep their stacking layer.
 */
.bf-image-page .bf-opt__menu,
.bf-image-page .bf-opt__menu[hidden] {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

.bf-image-page .bf-opt__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;

  /*
   * 38 tall, and it has to be enforced.
   *
   * `min-height` alone lost to a shorter computed height once the
   * earlier rule went, and the options came out at 22px — under what a
   * finger reliably lands on.
   */
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.075);
  background: #0a0a0a;
  color: #919191;
  font-family: inherit;
  font-size: 12.5px;

  /*
   * The pointer, which was lost when the old rules went.
   *
   * Without it the cursor stayed an arrow over something that is
   * plainly pressable — it read as dead space, even though pressing
   * worked.
   */
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.bf-image-page .bf-opt__item[disabled] { cursor: not-allowed; opacity: .5; }

/*
 * Hover shows the colour choosing would give it.
 *
 * A grey lift said "this responds" but not what pressing would do. The
 * same copper at half strength answers that before the press — and the
 * chosen one stays at full, so the two never read alike.
 */
.bf-image-page .bf-opt__item:hover:not([disabled]):not([aria-selected="true"]) {
  color: var(--text-primary);
  border-color: rgba(169, 79, 49,.34);
  background: linear-gradient(180deg, rgba(169, 79, 49,.06), rgba(169, 79, 49,.018));
}

.bf-image-page .bf-opt__item[aria-selected="true"] {
  color: #fff;
  border-color: rgba(169, 79, 49,.60);
  background: linear-gradient(180deg, rgba(169, 79, 49,.11), rgba(169, 79, 49,.035));
  box-shadow: inset 0 1px 0 rgba(183, 107, 82,.07);
}

/* Only the name shows; the note under it would double the row height. */
.bf-image-page .bf-opt__item em { display: none; }
.bf-image-page .bf-opt__item strong { font-weight: 500; }

/*
 * The generate button spans the row, under the boxes.
 *
 * It is the last thing done, so it reads better as a full-width bar
 * than as one more control among the settings.
 */
/*
 * The primary action, spanning the row under the settings.
 *
 * Copper rather than flat orange — the gradient with its inner highlight
 * and darker lower edge is what stops it reading as a coloured
 * rectangle. It comes last because it is the last thing done.
 */
.bf-image-page .bf-generate {
  grid-column: 1 / -1;
  order: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--bf-radius-md);
  border: 1px solid rgba(183, 107, 82,.58);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background:
    /*
     * Deeper copper.
     *
     * The lighter pair read as a highlight rather than the one action
     * that spends credit; this sits closer to the reference's own button
     * and lets the page around it stay quiet.
     */
    /*
     * Centred on #A94F31, the orange of the greeting.
     *
     * The old stops ran #B76B52 to #8B4128 and the white sheen on top
     * lifted the crown to #B76B52 — light enough that the button and the
     * word "سلام" read as two different oranges. The gradient is kept,
     * because a flat fill is what makes a button look ordinary, but it
     * is now a shallow one around the true colour rather than a journey
     * away from it.
     */
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #A94F31 0%, #A94F31 52%, #8B4128 100%);
  box-shadow:
    0 10px 26px rgba(169, 79, 49,.23),
    0 2px 5px rgba(169, 79, 49,.13),
    inset 0 1px 0 rgba(255,255,255,.33),
    inset 0 -1px 0 rgba(110,30,0,.25);
  transition: transform .17s ease, box-shadow .17s ease, filter .17s ease;
}

.bf-generate:hover:not([disabled]) {
  transform: translateY(-1px);
  filter: brightness(1.055);
  /*
   * No halo under the button.
   *
   * Two coloured shadows spread thirty pixels out, which on a full-width
   * button is a wash of colour across everything beneath it rather than a
   * lift. The button already rises a pixel and brightens; that is the
   * whole of the gesture.
   */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.bf-generate:active:not([disabled]) {
  transform: translateY(1px) scale(.988);
  filter: brightness(.97);
  box-shadow: 0 5px 13px rgba(169, 79, 49,.17), inset 0 2px 5px rgba(90,25,0,.28);
}

.bf-generate[disabled] {
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), #0b0b0b;
  color: var(--text-disabled);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.bf-generate[disabled] svg { color: var(--text-disabled); }



/* Advanced settings sit above the button, below the boxes. */
.bf-image-page .bf-opt--more { grid-column: 1 / -1; order: 98; }

.bf-image-page .bf-opt--more > summary {
  cursor: pointer;
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  border-radius: var(--bf-radius-md);
  border: 1px solid rgba(255,255,255,.075);
  background: var(--surface-1);
}

@media (max-width: 760px) {
  /* Narrow enough that each setting takes the full width. */
  .bf-opts .bf-opt { flex: 1 1 100%; }
  .bf-opts .bf-opt__btn { width: 100%; }
}

/* =====================================================================
 * The style filter
 *
 * Every value from the specification you sent, sized for this column.
 * The count beside each model is why this is a menu and not a row of
 * chips: it says how much there is before you choose.
 * ================================================================== */

.bf-style-filter { width: 100%; margin-top: 10px; }

.bf-style-filter__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 8px;
  align-items: start;
}

.bf-style-filter__label {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), #0b0b0b;
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.bf-style-select { position: relative; min-width: 0; z-index: var(--bf-z-menu); }

.bf-style-trigger {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  outline: none;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), #0a0a0a;
  color: #f4f4f4;
  font-family: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .16s ease, background .16s ease;
}

.bf-style-trigger:hover {
  border-color: rgba(169, 79, 49,.78);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent), #0c0c0c;
}

.bf-style-trigger[aria-expanded="true"] { border-color: rgba(169, 79, 49,.72); }

.bf-style-trigger__model { display: flex; align-items: center; gap: 10px; min-width: 0; }

.bf-style-logo,
.bf-style-option__mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.055);
  color: #f2f2f2;
  overflow: hidden;
}

.bf-style-logo svg,
.bf-style-option__mark svg { width: 19px; height: 19px; }

/*
 * THE FRAME IS THE TILE — IT DOES NOT CONTAIN ONE.
 *
 * These two rules drew a 32px circle and expected a bare <svg> or <img>
 * inside it. `bf_model_logo()` does not print a bare mark: it prints its
 * own tile, 46px with its own border and background, and a 46px tile
 * inside a 32px circle is what the owner photographed.
 *
 * The inner tile gives up its size, its border and its background to the
 * frame around it, and keeps the one thing it is for — the padding that
 * stops a white mark touching the edge.
 */
.bf-style-logo > .bf-model-logo,
.bf-style-option__mark > .bf-model-logo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: none;
  font-size: 11px;
}

/*
 * Except when the mark brings its own white background, where the white
 * chip IS the treatment and has to reach the edge.
 */
.bf-style-logo > .bf-model-logo--boxed,
.bf-style-option__mark > .bf-model-logo--boxed { background: #fff; }

.bf-style-option__mark img { width: 74%; height: 74%; object-fit: contain; }

.bf-style-name {
  color: #f5f5f5;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bf-style-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: rgba(255,255,255,.65);
  transition: transform .16s ease;
}

.bf-style-trigger[aria-expanded="true"] .bf-style-chevron { transform: rotate(180deg); }

/*
 * Dark smoked glass, only slightly transparent.
 *
 * No white edge and no bright outline — those are what turn a surface
 * into a window.
 */
.bf-style-menu {
  position: absolute;
  top: calc(100% + 7px);
  inset-inline: 0;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.085);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 35%),
    rgba(10,10,10,.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 55px rgba(0,0,0,.55);
  transform-origin: top;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px) scale(.985);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.bf-style-trigger[aria-expanded="true"] + .bf-style-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.bf-style-option {
  position: relative;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.bf-style-option + .bf-style-option { margin-top: 2px; }

.bf-style-option:hover {
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.045);
}

.bf-style-option__body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }

.bf-style-option__title {
  display: block;
  color: #f0f0f0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.bf-style-option__desc {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.42);
  font-size: var(--bf-size-2xs);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bf-style-count {
  width: 44px;
  min-width: 44px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.035);
  color: rgba(255,255,255,.57);
}

.bf-style-count strong { font-size: 14px; font-weight: 500; line-height: 1.05; }
.bf-style-count span { margin-top: 3px; font-size: 9.5px; line-height: 1; color: rgba(255,255,255,.40); }

.bf-style-option.is-selected {
  border-color: rgba(169, 79, 49,.62);
  background:
    radial-gradient(circle at 78% 50%, rgba(169, 79, 49,.11), transparent 48%),
    linear-gradient(90deg, rgba(169, 79, 49,.075), rgba(169, 79, 49,.025));
  box-shadow: inset 0 1px 0 rgba(183, 107, 82,.055);
}

.bf-style-option.is-selected .bf-style-count {
  background: rgba(169, 79, 49,.07);
  border-color: rgba(169, 79, 49,.08);
}

.bf-style-option.is-selected .bf-style-count strong { color: #A94F31; }

.bf-style-check { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; color: var(--orange-500); opacity: 0; }
.bf-style-option.is-selected .bf-style-check { opacity: 1; }

@media (max-width: 680px) {
  .bf-style-filter__row { grid-template-columns: 1fr; }
  .bf-style-filter__label { display: none; }
}

/* =====================================================================
 * Credit, in the header
 *
 * One line, as the reference has it: what you have, and a way to add to
 * it. It had grown into a two-line card with its own mark, which made
 * the balance look like a section rather than a figure.
 * ================================================================== */

.bf-credit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 5px 0 14px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(169, 79, 49,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent), var(--surface-2);
  color: var(--text-primary);
  font-size: 13px;
  white-space: nowrap;
}

/* The bolt is a mark, so it takes the accent. */
.bf-credit-chip__body svg { flex: none; color: var(--bf-credit-mark); }

/*
 * Centred, not sat on the baseline.
 *
 * `baseline` was right when the chip held two pieces of text — it lined
 * the label and the figure by the feet of their letters. An icon has no
 * baseline, so the browser used its bottom edge instead and the bolt
 * rode about 3px high.
 */
.bf-credit-chip__body { display: inline-flex; align-items: center; gap: 6px; }
.bf-credit-chip__body em { font-style: normal; color: var(--text-secondary); }

/*
 * The same orange the rail's own balance uses.
 *
 * This was `--orange-400` (#B76B52) while the figure at the foot of the
 * sidebar is `--orange-500` (#A94F31) — the site accent. Two readings
 * of one number, a shade apart, on the same screen.
 */
/*
 * White, with the bolt beside it carrying the accent.
 *
 * Both orange lost the figure inside the mark — read from the
 * reference, where the bolt is #A94F31 and the digits are plain white.
 */
/*
 * The figure, nudged onto the line its neighbours sit on.
 *
 * The three boxes are centred exactly — measured at zero apart — but a
 * digit does not fill its line box the way a drawn icon fills its
 * viewBox. In this face the numerals sit high in their em, so the ink
 * of the figure read about 7px above the ink of the bolt and the plus,
 * which is what the eye actually judges.
 *
 * A translate rather than a margin: it moves the glyphs without moving
 * the box, so nothing around them shifts.
 */
.bf-credit-chip__body strong {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  transform: translateY(1.5px);
}

.bf-credit-chip__add {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: rgba(169, 79, 49,.13);
  color: var(--orange-500);
  transition: var(--bf-ease-all);
}

.bf-credit-chip__add:hover { background: rgba(169, 79, 49,.2); }

@media (max-width: 720px) {
  .bf-credit-chip { gap: 6px; padding: 0 4px 0 10px; font-size: 12px; }
}

/*
 * The model menu is styled once, earlier in this file.
 *
 * A previous version of it lived here and won by coming later, so
 * every value ported from the preview was silently replaced by the
 * one it was meant to supersede.
 */

/* =====================================================================
 * The duration card
 *
 * Colours read from the reference image rather than chosen: the accent
 * measured #A94F31 across the filled track, the empty half #1B1B1D, the
 * card #0A0A0C on a near-black page.
 *
 * It opens as a dialog over a dimmed page, like the model menu — the
 * page behind stays visible and out of focus, and nothing about the
 * card itself is translucent.
 * ================================================================== */

.bf-time__dim:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-backdrop);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bf-time__dim[hidden] { display: none !important; }

/*
 * Open, and still reachable.
 *
 * The backdrop covers the page including the button that opened it, so
 * a second press went into the dark. Lifting the control above the
 * backdrop keeps the obvious way out working — the same rule the model
 * menu's trigger follows.
 */
.bf-opt[data-opt="seconds"] .bf-opt__btn[aria-expanded="true"] {
  position: relative;
  z-index: calc(var(--bf-z-backdrop) + 2);
}

/*
 * The card states its own rank, as well as its backdrop.
 *
 * The dim carries the stacking context once open, but a closed card is
 * still in the page — and anything reading its z-index there sees
 * `auto` and concludes it would open behind the rail.
 */
.bf-time {
  position: relative;
  z-index: calc(var(--bf-z-backdrop) + 1);
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 26px 28px 22px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  background: #0A0A0C;
  box-shadow: 0 26px 70px rgba(0,0,0,.72);
  overflow-y: auto;
  direction: rtl;
}

/* ---- the heading ---- */

.bf-time__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 30px;
}

.bf-time__mark {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #A94F31;
}

.bf-time__mark svg { width: 40px; height: 40px; }

.bf-time__titles { flex: 1; min-width: 0; display: grid; gap: 5px; }
.bf-time__titles strong { font-size: 21px; font-weight: 700; color: #F4F4F5; }
.bf-time__titles span { font-size: 13.5px; color: #9A9A9F; }

/*
 * The chosen number, stated once and large.
 *
 * The slider says it too, but a value you have to read off a track is a
 * value you check twice.
 */
.bf-time__value {
  flex: none;
  min-width: 96px;
  padding: 13px 16px;
  display: grid;
  justify-items: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: #0E0E10;
}

.bf-time__value b { font-size: 30px; font-weight: 800; line-height: 1; color: #A94F31; }
.bf-time__value span { font-size: 12px; color: #8E8E93; }

/* ---- the slider ---- */

.bf-time__slider { position: relative; padding-top: 44px; }

/* The label above the handle, pointing down at it. */
.bf-time__bubble {
  position: absolute;
  top: 0;
  /* Centred on the point the script gives it, not offset from it. */
  transform: translateX(-50%);
  padding: 7px 13px;
  border-radius: 9px;
  background: #8B4128;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.bf-time__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #8B4128;
}

/*
 * One input, styled in both engines.
 *
 * A range input is the only control that is already a slider — keyboard,
 * touch and screen readers included. Rebuilding it from divs would mean
 * rebuilding all three.
 */
/*
 * The filled proportion, set by the script as the handle moves.
 *
 * Declared here too so the track has a value before any script runs —
 * a fallback inside `var()` works, but leaves the real default written
 * nowhere.
 */
.bf-time__range {
  --bf-time-fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  direction: ltr;
}

.bf-time__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #A94F31 0 var(--bf-time-fill, 0%),
    #1B1B1D var(--bf-time-fill, 0%) 100%
  );
}

.bf-time__range::-moz-range-track { height: 8px; border-radius: 999px; background: #1B1B1D; }
.bf-time__range::-moz-range-progress { height: 8px; border-radius: 999px; background: #A94F31; }

.bf-time__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: 3px solid #A94F31;
  border-radius: 50%;
  background: #0A0A0C;
  box-shadow: 0 0 14px rgba(169, 79, 49,.45);
}

.bf-time__range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 3px solid #A94F31;
  border-radius: 50%;
  background: #0A0A0C;
  box-shadow: 0 0 14px rgba(169, 79, 49,.45);
}

.bf-time__range:focus-visible { outline: none; }
.bf-time__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(169, 79, 49,.3); }

/* ---- the scale beneath ---- */

.bf-time__ticks {
  display: flex;
  justify-content: space-between;
  margin: 14px 2px 0;
  direction: ltr;
}

.bf-time__tick { display: grid; justify-items: center; gap: 9px; }

.bf-time__tick i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3A3A3E;
}

.bf-time__tick span { font-size: 15px; color: #78787D; }

.bf-time__tick.is-on i { background: #A94F31; }
.bf-time__tick.is-on span { color: #A94F31; font-weight: 700; }

/* ---- the note ---- */

.bf-time__note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 26px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 14px;
  background: #0E0E10;
  color: #9A9A9F;
  font-size: 13.5px;
}

.bf-time__note svg { flex: none; width: 18px; height: 18px; color: #A94F31; }
.bf-time__note span { flex: 1; min-width: 0; }

.bf-time__note b {
  flex: none;
  padding: 7px 13px;
  border: 1px solid rgba(169, 79, 49,.45);
  border-radius: 9px;
  color: #C8C8CC;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .bf-time { padding: 18px 18px 16px; border-radius: 18px; }
  .bf-time__head { gap: 10px; margin-bottom: 22px; }
  .bf-time__mark { width: 34px; height: 34px; }
  .bf-time__mark svg { width: 30px; height: 30px; }
  .bf-time__titles strong { font-size: 17px; }
  .bf-time__titles span { font-size: 12px; }
  .bf-time__value { min-width: 74px; padding: 10px 12px; }
  .bf-time__value b { font-size: 24px; }
  .bf-time__tick span { font-size: 12.5px; }
  .bf-time__note { flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; }
}

/* =====================================================================
 * The two uploads
 *
 * A picture to start from and a clip to work from, each half the width,
 * so neither reads as the only way in. When a model takes only one, the
 * other is not drawn and the remaining control fills the row.
 * ================================================================== */

.bf-uploads {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.bf-uploads .bf-upload { flex: 1 1 0; min-width: 0; }

.bf-uploads .bf-upload[hidden] { display: none; }

@media (max-width: 560px) {
  .bf-uploads { flex-direction: column; }
}

/* =====================================================================
 * The attached clip
 *
 * Shown the way the picture strip shows a reference: below the
 * composer, removable, and large enough to recognise. Wider than a
 * picture chip because a frame of video at 66px tells you nothing.
 * ================================================================== */

.bf-clips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bf-clips[hidden] { display: none; }

.bf-clip {
  position: relative;
  width: 168px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: #0b0b0b;
  overflow: hidden;
}

.bf-clip video {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  background: #20201F;
}

/*
 * The remove button sits over the corner rather than beside it.
 *
 * Beside, it would push the clip out of line with the picture chips;
 * over it, both strips read as the same kind of thing.
 */
.bf-clip > button {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-end: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.bf-clip > button:hover { background: rgba(0,0,0,.88); }


/* =====================================================================
 * The image page, restyled — model menu, prompt box, upload control.
 *
 * The palette here was read out of a reference picture rather than chosen:
 * the card colour, the chip fill, the gold on a selected logo and the amber
 * on an unchosen badge are all measured values, and the comments say which.
 *
 * WHAT IS DELIBERATELY NOT HERE
 *
 * Nothing touches `.bf-mm__panel` itself — its background, its border, or
 * the frosted backdrop the site shows behind an open menu. That blur is not
 * in this stylesheet and could not be found; rather than guess at it and
 * risk breaking something that works, the panel box is left exactly as it
 * was.
 * ================================================================== */

/* ---- the upload box: smaller, and in a row with the pictures ---- */

/*
 * A square rather than a full-width bar.
 *
 * At 511 x 178 it took the whole width, so a picture added after it had
 * nowhere to go but underneath. The pictures live in .bf-ask__attached,
 * which sits below — so the two are put on one line and the box is cut to
 * the size of a thumbnail.
 *
 * The design itself is unchanged: same dashed outline, same radius, same
 * icon and text. Only its footprint moves.
 */
.bf-app .bf-ask__box .bf-upload {
  /* 130, not 116: «آپلود تصویر» needs the extra 14px to stay on one line,
     and the pictures beside it are the same size either way. */
  width: 130px;
  min-width: 0;
  height: 130px;
  min-height: 0;
  padding: 10px 8px;
  gap: 5px;
  /*
   * Aligned to the start of the column rather than stretched across it.
   *
   * Ordering did nothing useful here: the prompt box stacks its children
   * in a column, so it only moved the box down. What it needed was to
   * stop filling the width.
   */
  align-self: flex-start;
  margin-inline-end: auto;
}

/* The two hint lines do not fit a square, and once a picture sits beside it
   the box explains itself. */
.bf-app .bf-ask__box .bf-upload em,
.bf-app .bf-ask__box .bf-upload .bf-upload__limit { display: none; }

.bf-app .bf-ask__box .bf-upload strong {
  font-size: var(--bf-size-2xs);
  line-height: 1.3;
  /* Two words on one line: broken across two, the label reads as two
     separate things rather than one label. */
  white-space: nowrap;
}

.bf-app .bf-ask__box .bf-upload .bf-upload__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.bf-app .bf-ask__box .bf-upload .bf-upload__mark svg { width: 17px; height: 17px; }

/* The pictures move up onto the same line. */
.bf-app .bf-ask__attached:not([hidden]) {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.bf-app .bf-ask__attached .bf-ref {
  width: 130px;
  height: 130px;
}

/* ---- and its colour ---- */

/*
 * The theme's own design, untouched.
 *
 * An earlier pass rebuilt this as a 108px square in a row of thumbnails.
 * That was wrong twice over: the box is a full-width button with its own
 * text and icon, and uploaded pictures go somewhere else entirely
 * (.bf-ask__attached). Only the colour was ever asked for.
 */
.bf-app .bf-upload {
  border-color: rgba(169, 79, 49,.4);
  background: rgba(169, 79, 49,.06);
  color: #A94F31;
}

.bf-app .bf-upload strong,
.bf-app .bf-upload em,
.bf-app .bf-upload .bf-upload__limit { color: #A94F31; }

.bf-app .bf-upload .bf-upload__mark {
  background: rgba(169, 79, 49,.16);
  color: #A94F31;
}

/* ---- 2. the model picker, lifted off the edge below it ---- */
.bf-ask__box > .bf-opt:first-child,
.bf-modelbar { margin-bottom: 14px; }

/* ---- 3. the model menu, short enough to hold several models ---- */
.bf-mm__panel:not([hidden]) .bf-mm__list {
  /* 460, not 420: the gaps between cards cost height, and at 420 the last
     card was sliced by the frame — which reads as a rendering fault. */
  /* Four cards and a gap: 4 x 79 + 3 x 8 = 340. A card cut in half at
     the frame reads as a rendering fault rather than a list that goes on. */
  max-height: 340px;
  overflow-y: auto;
}

/*
 * Only the credit chip stays.
 *
 * A card was 138px, so three filled the screen. The name and the description
 * are what choose a model; the resolution chip is read once and never again.
 *
 * The two chips share a class, so they are told apart by the icon: the credit
 * chip has one, the resolution chip does not.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__fact:not(:has(.bf-mm__fact-icon)) {
  display: none;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card {
  padding: 11px 14px 11px 44px;
  column-gap: 10px;
  align-items: center;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card .bf-mm__logo {
  /*
   * Sized against the card, as the reference does it.
   *
   * Measured there: the tile is about 68% of the card's height. At 52px in
   * a 79px card it was a little under that and read as small; the card is
   * given room to breathe and the tile follows it up.
   */
  width: 62px;
  height: 62px;
  min-height: 0;
  border-radius: 14px;
  font-size: 15px;
}

/*
 * The mark fills its tile.
 *
 * In the reference the brand mark takes most of the tile rather than
 * floating in the middle of it — which is what made these read as small
 * even after the tile grew.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card .bf-mm__logo img,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card .bf-mm__logo svg,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card .bf-mm__logo .bf-model-logo,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card .bf-mm__logo .bf-model-logo img {
  width: 100%;
  height: 100%;
  /*
   * The mark fills the tile rather than sitting in the middle of it, which
   * is what the reference does and what made these read as small however
   * much the tile itself grew.
   */
  object-fit: contain;
  padding: 0;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card .bf-mm__body {
  min-height: 0;
  row-gap: 1px;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__head { min-height: 0; }
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__name { font-size: 14px; line-height: 1.3; }

/* One line of description: enough to tell two models apart. */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__desc {
  font-size: var(--bf-size-2xs);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  /*
   * Two lines, not one.
   *
   * One line was chosen to keep the card short, and it cut most
   * descriptions mid-sentence — which tells the reader less than no
   * description at all, because they can see that something is missing.
   */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The credit chip sits under the description, on its own line. */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__facts { min-height: 0; margin-top: 3px; }

/* A fixed 33px height, not padding — which is why setting padding alone
   changed nothing. */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__fact,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__cost {
  height: 22px;
  padding: 0 9px;
  font-size: 11px;
}
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__fact svg { width: 12px; height: 12px; }

/*
 * The tick, smaller and out from under the badge.
 *
 * At 30px it was almost as tall as the whole card, and it landed on the
 * «جدید» badge — two marks in one place, both unreadable.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__flag--on {
  /*
   * Small, and out of the corner the badge already occupies.
   *
   * Shrinking it was not enough: the «جدید» badge sits in the same corner,
   * so the two still overlapped. The tick moves to the bottom of that
   * column, where nothing else is.
   */
  width: 16px;
  height: 16px;
  top: auto;
  bottom: 9px;
  transform: none;
  left: 15px;
}

/* The badge keeps the top-left corner to itself. */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__tag {
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.5;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__list {
  background: #20201F;
  border-color: #20201F;
  /*
   * Each card stands on its own, as in the reference.
   *
   * They were flush against each other, so the only thing separating two
   * models was the edge where one ended and the next began — which read as a
   * drawn line even after every border was matched to the background. A gap
   * removes the question: there is nothing between them to see.
   */
  row-gap: 8px;
  padding: 4px 0;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card {
  background: #050505;
  border: 1px solid #20201F;
  border-radius: 12px;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on {
  background: #050505;
  border-color: #20201F;
  box-shadow: none;
}



.bf-app .bf-mm__panel:not([hidden]) .bf-mm__name { color: #bdbebd; }
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__desc { color: #9c9e9f; }

/*
 * The chosen model, measured off the Grok card in the reference.
 *
 *   the mark    #A94F31
 *   the tile    #20201F, unchanged from any other
 *   its ring    #2A1610 — a warm edge, not a bright one
 *
 * Only the logo changes. The card keeps its colour, the name keeps its
 * colour, and nothing gets a frame — which is what makes the reference read
 * as quiet rather than as an alert.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__logo {
  border: 1px solid #2A1610;
  box-shadow: none;
  background: #20201F;
}

/*
 * A picture cannot take a colour, so it is filtered instead.
 *
 * The selected logo was told to be #A94F31 and stayed white, and it took
 * three passes to see why: on this site a model's logo is an <img>, not
 * text or an SVG. `color` and `fill` do nothing to an image — they were
 * setting a property nothing read.
 *
 * The filter chain drives white to #A94F31, two points off the measured
 * #A94F31 and indistinguishable beside it. The fallback text keeps taking
 * `color` as before, so both kinds of logo turn.
 */
/*
 * Both shapes the markup can take.
 *
 * A stored logo renders as .bf-mm__logo > .bf-model-logo > img, not as a
 * direct child — so a rule written for the direct child was outranked by
 * the existing one at line 1985 and never applied. That is why the logo
 * stayed white however many times the colour was checked.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__logo img,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__logo .bf-model-logo img {
  /*
   * Solved, not guessed — tools/filtersolve.py.
   *
   * A filter chain is a fixed recipe. It cannot read `--orange-500`, so
   * when the accent moved this kept producing the colour it was tuned for
   * and the chosen model stayed gold however many times the palette was
   * swept. The tool simulates what a browser does for each filter in the
   * chain and searches for the parameters that land on the target; these
   * reach #A94F31 with zero error on all three channels.
   *
   * If the accent ever changes again, run:
   *     python3 tools/filtersolve.py "#RRGGBB"
   */
  filter: brightness(0) saturate(100%) invert(26%) sepia(40%) saturate(1510%)
          hue-rotate(337deg) brightness(119%) contrast(81%);
}

.bf-app .bf-mm__trigger .bf-model-logo img { filter: none; }

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__logo img,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__logo svg,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__logo .bf-model-logo {
  color: #A94F31;
  fill: #A94F31;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__flag--on,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card.is-on .bf-mm__flag--on svg {
  color: #A94F31;
}

/* Everything not chosen: amber. */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__tag {
  color: #A94F31;
  border-color: rgba(169, 79, 49,.4);
  background: rgba(169, 79, 49,.08);
}

/*
 * The credit chip: darker than the card it sits on, and orange.
 *
 * At #0b0b0b it was lighter than the selected card and read as raised, when
 * it is the quietest thing on the row. Sitting below the card's tone puts it
 * back where it belongs.
 *
 * The «جدید» badge keeps its amber — it marks something about the model, not
 * something about the price.
 */
/*
 * The credit chip, measured out of the reference.
 *
 *   fill    #090909   four points above the card it sits on
 *   border  #141414   present, but only just
 *   text    #A94F31
 *
 * Every one of these was read from empty pixels inside the chip, with the
 * text excluded — averaging a region that contains lettering reports the
 * lettering, which is how the card colour came out twice as light as it
 * should have been earlier in this work.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__fact {
  /* White words, orange bolt — which is what the reference does. The colour
     marks the unit, not the sentence. */
  color: #f2f2f2;
  background: #090909;
  border: 1px solid #141414;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__fact svg { color: #A94F31; }

/*
 * The credit chip, less round.
 *
 * A pill at 999px turned a short label into a lozenge. The reference keeps a
 * soft corner, not a capsule.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__fact,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__cost {
  border-radius: 7px;
}

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__tag { border-radius: 6px; }

/*
 * The heading, cut back to one line.
 *
 * "مدل‌های تصویری" with an icon and a sentence under it explaining what
 * image models are, above a list of image models. Three lines to say what
 * one says.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__head-bar svg,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__head-bar p,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__sub { display: none; }

.bf-app .bf-mm__panel:not([hidden]) .bf-mm__head-bar {
  padding-bottom: 10px;
}

/*
 * The generate button is the theme's own, untouched.
 *
 * An earlier pass repainted it amber for a disabled state. That was asked
 * for and then withdrawn, so it goes back to what the theme draws: a warm
 * outline over a faint gradient, no fill.
 */

/* ---- the model trigger: off the edge below it, and less rounded ---- */

/*
 * It sat directly on the line of the panel beneath it, so the two edges
 * touched and read as one thick rule. A little space and a little less
 * corner separates them.
 */
.bf-app .bf-mm__trigger {
  margin-bottom: 12px;
  margin-inline-end: 26px;
  border-radius: 9px;
}

/* ---- the prompt box, coloured from the menu ---- */

/*
 * The same two tones the menu uses, so the page reads as one thing:
 *
 *   the box itself   #20201F, as the menu panel is
 *   its controls     #050505, as the model cards are
 *   their edges      #141414, as the credit chip's is
 *
 * It was #131313 with a light border, which sat above everything around it
 * and made the prompt look like the loudest thing on the page rather than
 * the quietest.
 */
.bf-app .bf-ask__box {
  background: #20201F;
  border-color: #141414;
}

.bf-app .bf-ask__box .bf-upload,
.bf-app .bf-ask__box .bf-opt,
.bf-app .bf-ask__box .bf-chip,
/*
 * The generate button is excluded by its real class.
 *
 * The exclusion was written for a class called "make", which is not what the
 * theme calls it — so the rule caught the generate button and stripped the
 * warm outline the theme gives it.
 */
.bf-app .bf-ask__box button:not(.bf-mm__trigger):not(.bf-generate) {
  background: #050505;
  border-color: #141414;
}

/*
 * The panels below the prompt take the same two tones.
 *
 * With only the prompt changed, the boxes under it — quality, ratio, format
 * — kept their old grey and the column read as two different pages stacked.
 * A palette is only a palette if it goes all the way down.
 */
.bf-app .bf-opts .bf-opt,
.bf-app .bf-studio__make .bf-opt,
.bf-app .bf-adv {
  background: #20201F;
  border-color: #141414;
}

.bf-app .bf-opts .bf-opt button,
.bf-app .bf-opts .bf-chip,
.bf-app .bf-opts .bf-seg > * {
  background: #050505;
  border-color: #141414;
}

/*
 * Except the one that is chosen.
 *
 * Repainting every control in the column took the ring off «1:1» and «PNG»
 * as well, so nothing showed which ratio or format was active — the palette
 * swallowed the one piece of state those rows exist to carry.
 */
.bf-app .bf-opts [aria-pressed=true],
.bf-app .bf-opts [aria-checked=true],
.bf-app .bf-opts .is-on,
.bf-app .bf-opts .is-active,
.bf-app .bf-opts .is-selected {
  border-color: #A94F31;
  color: #A94F31;
}

/* ---- the outer box loses its glow ---- */

/*
 * The pale ring came from two places, not one: a 7.5% white border and a 2%
 * white inset shadow along the top. Both go, so the column sits on the page
 * the way the left column already does.
 */
.bf-app .bf-work {
  background: #20201F;
  border-color: #20201F;
  box-shadow: none;
}

/* ---- the prompt box and the settings, one tone ---- */

.bf-app .bf-ask__box {
  background: #050505;
  border-color: #141414;
  /* Wider: the box had 15px of side padding inside a 16px-padded parent,
     which spent 62px of a 577px column on nothing. */
  padding-inline: 8px;
  margin-inline: -6px;
}

.bf-app .bf-opts .bf-opt,
.bf-app .bf-studio__make .bf-opt,
.bf-app .bf-adv {
  background: #050505;
  border-color: #141414;
}

/* ---- the model trigger moves inside the prompt box ---- */

/*
 * Top left of the prompt, where the thing it names is written — rather than
 * floating above the box on the line of the panel below it.
 */
/*
 * A physical left, not a logical one.
 *
 * The page runs right to left, so the logical start is the right edge — the
 * trigger landed on the opposite side from the one asked for.
 */
.bf-app .bf-mm {
  /*
   * Above the prompt box, and at the physical left.
   *
   * Two things went wrong here. Absolute positioning put it on top of the
   * upload area, so it sits in the flow now. And flex-start means the right
   * on a right-to-left page — measured at 318px from the left edge and 9px
   * from the right, the opposite of what was asked. flex-end is the left
   * here.
   */
  position: static;
  margin: 0 0 10px;
  display: flex;
  justify-content: flex-end;
}

.bf-app .bf-ask__box { position: relative; }

.bf-app .bf-mm__trigger {
  margin: 0;
  border-radius: 9px;
  background: #20201F;
  border-color: #141414;
  /*
   * 176px cut "Nano Banana Pro" off at its own edge and left the logo
   * squeezed against the text. Wider gives both room, and a minimum keeps
   * short names from collapsing the box.
   */
  min-width: 228px;
  padding-inline: 14px;
  /*
   * Taller, because the label is 47px inside a 42px button — two pixels
   * escaping at the top and two at the bottom.
   */
  height: auto;
  min-height: 54px;
  padding-block: 6px;
}

/* ---- the upload square, matched to the thumbnails ---- */
/* ---- the upload square, tidied ---- */

/*
 * The plus badge goes.
 *
 * It sat on the corner of the icon, and once the box shrank to a square the
 * two overlapped. It said nothing the icon and the label did not already
 * say, so removing it is simpler than finding room for it.
 */
.bf-app .bf-ask__box .bf-upload .bf-upload__plus { display: none; }

/*
 * And the optional flag lifts clear of the icon.
 *
 * Absolutely placed for the tall box, it landed behind the icon when the box
 * became a square. Moved to the top edge, where nothing else is.
 */
.bf-app .bf-ask__box .bf-upload .bf-upload__flag {
  top: 6px;
  inset-inline-start: 8px;
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 6px;
}

/* Room for it above the icon. */
.bf-app .bf-ask__box .bf-upload { padding-top: 22px; }

/* ---- inside the model trigger: name left, logo right ---- */

/*
 * The name and its maker sit at the left edge, the logo at the right.
 *
 * The button is a flex row with the logo written first, so on this
 * right-to-left page the logo took the right and the label floated in the
 * middle of whatever space was left. Pushing the label to fill that space
 * puts its text against the left edge and pins the logo to the right.
 */
/*
 * Left to right inside the button, so first means left.
 *
 * The button inherits the page's right-to-left direction, which turns every
 * ordering instruction around: order: 2 put the logo at the LEFT, next to
 * the name instead of opposite it. Setting the direction here makes the
 * axis behave the way the rule reads.
 */
.bf-app .bf-mm__trigger {
  justify-content: space-between;
  direction: ltr;
}

.bf-app .bf-mm__trigger .bf-mm__label {
  flex: 1;
  text-align: left;
  direction: ltr;
}

.bf-app .bf-mm__trigger .bf-model-logo {
  order: 2;
  flex: none;
  /* Matched to the menu's, so the closed picker and the open list agree. */
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 15px;
}

/*
 * The mark fills its tile, whatever padding the file was drawn with.
 *
 * Measured on the page: the tile is 48px and the mark spans 35, so about
 * six pixels of transparent margin a side comes baked into the artwork
 * itself. Setting the image to 100% cannot remove that — it is part of
 * the picture, not of the box.
 *
 * Scaling by 1.3 takes those six pixels back out. The tile already clips,
 * so a mark drawn without padding is trimmed by a hair rather than left
 * floating in a gap, which is the better of the two.
 */
.bf-app .bf-mm__trigger .bf-model-logo img,
.bf-app .bf-mm__trigger .bf-model-logo svg {
  width: 100%;
  height: 100%;
  transform: scale(1.3);
}

/* The Persian text inside keeps its own direction. */
.bf-app .bf-mm__trigger .bf-mm__label em { direction: rtl; }

/* ---- the two panels on the left ---- */

.bf-app .bf-shelf {
  background: #050505;
}

/*
 * The controls drop to black, so they read as recessed rather than raised.
 *
 * Not scoped to the shelf: the style picker and the by-model button sit
 * outside it in the markup even though they look like they are inside, so a
 * descendant rule reached neither.
 */
.bf-app .bf-style-trigger,
.bf-app .bf-style-scope,
.bf-app .bf-mm__search,
.bf-app .bf-gal__search,
.bf-app .bf-shelf input,
.bf-app .bf-shelf .bf-search,
.bf-app .bf-shelf label {
  background: #20201F;
  border-color: #141414;
}


/*
 * The panel's own colour, and nothing else about it.
 *
 * It was left untouched so the frosted backdrop the site shows would not
 * break — but the result is a panel at #121212 sitting on a page of black,
 * which reads as a lit box rather than a quiet one.
 *
 * Only `background-color` is set here. `backdrop-filter`, the border, the
 * shadow and the position are all left exactly as the theme has them, so
 * whatever produces the blur keeps producing it.
 */
.bf-app .bf-mm__panel:not([hidden]) {
  background-color: #20201F;
}


/* =====================================================================
 * Two corrections to the image page.
 * ================================================================== */

/*
 * A chosen option colours its own text, and nothing else.
 *
 * Selecting 2K or 16:9 tinted the whole chip — border, background and a
 * highlight — which made a row of them read as several competing surfaces.
 * The state belongs on the word: 2K turns orange, the chip it sits in does
 * not move.
 */
.bf-image-page .bf-opt__item[aria-selected="true"],
.bf-app .bf-opt__item[aria-selected="true"],
.bf-app .bf-opts [aria-selected="true"] {
  color: #A94F31;
  border-color: #141414;
  background: #050505;
  box-shadow: none;
}

.bf-image-page .bf-opt__item[aria-selected="true"] strong,
.bf-app .bf-opt__item[aria-selected="true"] strong,
.bf-app .bf-opts [aria-selected="true"] strong { color: #A94F31; }

/* The little glyph beside a ratio follows its label. */
.bf-app .bf-opts [aria-selected="true"] svg { color: #A94F31; }

/*
 * The download control moves to the top right of a gallery picture.
 *
 * It was placed with a logical inset, which on a right-to-left page resolves
 * to the left — so the icon sat in the corner opposite the one intended. A
 * physical `right` puts it where it was asked for, whichever way the page
 * runs.
 */
.bf-app .bf-earlier__save,
.bf-earlier__save {
  inset-inline-end: auto;
  right: 6px;
  left: auto;
}





/* =====================================================================
 * The model menu on this page
 * ================================================================== */

/*
 * The word is white; the control is not a warning.
 *
 * In the accent it competed with the model's own name for attention, and
 * the thing you are meant to read first is which model is loaded.
 */
.bf-mm__what {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding-inline-end: 10px;
  margin-inline-end: 2px;
  border-inline-end: 1px solid #262626;
}

.bf-mm__trigger {
  border-color: #262626 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/*
 * Under the pointer it lifts; it does not light up.
 *
 * An accent outline on hover reads as a warning or a focus ring rather
 * than as "this can be pressed", and the same control in the chat has
 * never done it. Taken from v2.84.0, where both behaved the same: the
 * border goes to the strong neutral and the surface comes up one step.
 */
.bf-mm__trigger:hover {
  border-color: var(--border-strong) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--surface-3) !important;
}

/*
 * Every model mark in this menu, not just the one on the trigger.
 *
 * `--logo-accent` is written inline from each model's own colour, so the
 * tile took whatever that model was given — gold for one, green for the
 * next. The last attempt covered the trigger only, and the cards inside
 * the open sheet kept their own colours, which is what stayed gold in the
 * screenshot.
 *
 * `--logo-accent` is redefined on the menu itself, so everything inside
 * inherits it however deeply it sits.
 */
.bf-mm,
.bf-mm__panel,
.bf-mm__trigger,
.bf-mm__card,
.bf-mm__logo {
  --logo-accent: #A94F31;
}

.bf-mm .bf-model-logo,
.bf-mm__panel .bf-model-logo {
  background: color-mix(in srgb, #A94F31 14%, var(--bf-surface-3)) !important;
  border-color: color-mix(in srgb, #A94F31 32%, transparent) !important;
  color: #A94F31 !important;
}

/* =====================================================================
 * One border colour for the controls on this page
 * ================================================================== */
.bf-opt__btn,
.bf-toggle,
.bf-opt__menu,
.bf-style-option,
.bf-shot,
.bf-gallery__item,
.bf-mm__panel:not([hidden]) .bf-mm__cost,
.bf-mm__panel:not([hidden]) .bf-mm__fact {
  border-color: #262626 !important;
}

.bf-toggle[aria-pressed="true"],
.bf-style-option.is-selected,
.bf-opt__btn[aria-expanded="true"] {
  border-color: var(--orange-500) !important;
}

.bf-mm__panel:not([hidden]) .bf-mm__cost b,
.bf-credit-chip__label,
.bf-model-card__flag--new,
.bf-mm__tag {
  color: var(--orange-500) !important;
}

.bf-model-card__flag--new { border-color: var(--orange-500) !important; }

/* =====================================================================
 * A ladder, not one colour everywhere
 *
 * Painting every panel the same shade made the page flat: the upload area,
 * the styles, the gallery and the settings all sat at one level and the eye
 * had nothing to climb. The reference does it with three steps — the page,
 * a block raised off it, and the field you type into raised again — and
 * each step is small enough to read as depth rather than as a colour
 * change.
 *
 *   #151515   the page
 *   #1C1C1C   a panel resting on it
 *   #212121   a block inside a panel
 *   #262626   the border between them
 *
 * Nothing here is pure black. A hole reads as missing, and every one of
 * these is a surface.
 * ================================================================== */

/* Panels: they sit on the page. */
.bf-work,
.bf-adv,
.bf-adv__body,
.bf-panel,
.bf-card,
.bf-gallery,
.bf-drop,
.bf-upload,
.bf-image-page .bf-opts,
.bf-image-page .bf-opt,
.bf-shelf__panel,
.bf-section {
  background: #1C1C1C !important;
  border: 1px solid #262626 !important;
}

/*
 * A panel that has a border needs room inside it.
 *
 * The rule above gave these boxes an edge but no padding, so the heading
 * sat exactly on the top border and the line ran through the words —
 * measured: the heading's top and the panel's top were one pixel apart.
 *
 * The border was added later than the panels were laid out, which is how
 * a box ends up with an edge nobody made space for.
 */
.bf-shelf__panel {
  padding: 16px 16px 14px !important;
  border-radius: 14px !important;
}

/*
 * Two panels in a row are separated by the gap between them, not by a
 * rule across the second one — each already has its own edge.
 */
.bf-shelf__panel + .bf-shelf__panel {
  margin-top: 16px;
  padding-top: 16px !important;
  border-top: 1px solid #262626 !important;
}

/*
 * The upload area matches the model menu, as asked.
 *
 * They sit side by side at the top of the page, and two different darks
 * next to each other read as a mistake rather than a hierarchy.
 */
.bf-ask__media,
.bf-drop,
.bf-upload {
  background: var(--surface-3) !important;
  border: 1px solid #262626 !important;
}

/*
 * Controls sink; surfaces rise.
 *
 * A button that sits *above* the panel it lives on looks like another
 * panel. Pressing something is a downward gesture, so the choices — the
 * quality steps, the ratios, the counts — sit a shade below the group
 * that holds them. It also keeps them off pure black, which reads as a
 * hole rather than a control.
 *
 *   #1C1C1C   the group
 *   #171717   a choice inside it, one step down
 *   #1F1F1F   the same choice under the pointer, coming back up
 */
.bf-opt__btn,
.bf-toggle,
.bf-opt__menu {
  background: #171717 !important;
  border: 1px solid #262626 !important;
}

/* Larger surfaces still rise off the panel, because they hold content. */
.bf-work .bf-ask__box,
.bf-style-option,
.bf-shot,
.bf-gallery__item {
  background: #212121 !important;
  border: 1px solid #262626 !important;
}

/* Under the pointer, a control comes up to meet you. */
.bf-opt__btn:hover,
.bf-toggle:hover {
  background: #1F1F1F !important;
  border-color: #333333 !important;
}

.bf-style-option:hover,
.bf-shot:hover,
.bf-gallery__item:hover {
  background: #262626 !important;
  border-color: #333333 !important;
}

/* What is chosen is named by the accent, not by another grey. */
.bf-toggle[aria-pressed="true"],
.bf-style-option.is-selected,
.bf-opt__btn[aria-expanded="true"] {
  border-color: var(--orange-500) !important;
  background: #212121 !important;
}

/*
 * And nothing around the prompt box is lit.
 *
 * Focus lifted its border to the accent, which around a large box reads as
 * the whole thing glowing rather than as a field being focused.
 */
.bf-work,
.bf-work .bf-ask__box,
.bf-work .bf-ask__box:focus-within {
  box-shadow: none !important;
}

.bf-work .bf-ask__box:focus-within { border-color: #3A3A3A !important; }

/*
 * The quiet grey the gallery hint uses, given to the picker's own label.
 *
 * It is the tone this page already uses for a line that explains rather
 * than announces, which is exactly what "انتخاب مدل" is.
 */
/*
 * The same token the gallery hint uses, not a grey that looks like it.
 *
 * That line is `--bf-text-faint`, and matching the token rather than the
 * rendered value means the two stay together if the token ever moves.
 */
.bf-mm__what { color: var(--bf-text-faint) !important; }


/* =====================================================================
 * The containers that were still sitting on near-black
 *
 * Found with tools/whowins.py, which resolves the cascade for a class
 * rather than trusting the last rule written. Every one of these held the
 * panels the previous pass had already lightened, so the panels changed
 * and the page behind them did not — which is what stayed black in the
 * screenshots while the checks came back green.
 * ================================================================== */
.bf-shelf,
.bf-results,
.bf-earlier {
  background: #1C1C1C !important;
  border: 1px solid #262626 !important;
}

/*
 * The open model sheet, one step above the page it covers.
 */
.bf-mm__panel:not([hidden]) {
  background: #1C1C1C !important;
  border: 1px solid #303030 !important;
}

/*
 * The style filter and its trigger are controls, so they sink like the
 * other controls do.
 */
.bf-style-trigger,
.bf-style-filter__label {
  background: #171717 !important;
  border: 1px solid #262626 !important;
}

.bf-style-trigger:hover,
.bf-style-filter__label:hover {
  background: #1F1F1F !important;
  border-color: #333333 !important;
}


/* =====================================================================
 * The generate button, the same button as "new conversation"
 *
 * They are the one primary action on their page, and they had drifted
 * apart: different padding, a smaller face, a heavier weight. Matched to
 * the rail's button so the site has one shape for "this is the thing to
 * press".
 * ================================================================== */
.bf-generate {
  padding: 14px 20px !important;
  border: 1px solid var(--orange-600) !important;
  border-radius: var(--bf-radius-xs) !important;
  font-size: var(--bf-size-base) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 34%),
    var(--orange-500) !important;
}

.bf-generate:hover:not([disabled]) {
  border-color: var(--orange-500) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #B76B52 0%, #A94F31 50%, #A94F31 100%) !important;
}

/*
 * The price, and its mark, sized to be read.
 */
.bf-generate__cost {
  font-size: 1.15em !important;
  gap: 8px !important;
}

.bf-generate__cost svg {
  width: 15px !important;
  height: 22px !important;
  color: var(--bf-credit-mark) !important;
}


/* =====================================================================
 * A mark that fills its tile, in the open sheet as well as on the button
 *
 * The trigger was scaled to take back the transparent margin baked into
 * the artwork; the cards in the open sheet were not, so a model looked
 * one size closed and another size open. Both are scaled the same now,
 * and the tile clips, so nothing spills out of the rounded corner.
 * ================================================================== */
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo,
.bf-mm__trigger .bf-model-logo {
  overflow: hidden;
}

.bf-mm__panel:not([hidden]) .bf-mm__logo img,
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo img,
.bf-mm__panel:not([hidden]) .bf-mm__logo svg,
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.3) !important;
}


/* =====================================================================
 * The cards inside the open sheet
 *
 * The sheet was lightened and the rows inside it were not, so the panel
 * moved and the list stayed at #050505 — near enough to black that the
 * rows read as gaps in the sheet rather than as choices on it.
 * ================================================================== */
.bf-mm__panel:not([hidden]) .bf-mm__card {
  background: #212121 !important;
  border: 1px solid #2E2E2E !important;
}

.bf-mm__panel:not([hidden]) .bf-mm__card:hover {
  background: #262626 !important;
  border-color: #3A3A3A !important;
}

/* The chosen row is named by the accent, not by another grey. */
.bf-mm__panel:not([hidden]) .bf-mm__card.is-on {
  background: #212121 !important;
  border: 1px solid var(--orange-500) !important;
}


/* =====================================================================
 * The option buttons, by the class they actually carry
 *
 * The quality steps, the ratios, the counts and the formats are all
 * `.bf-opt__item`. Nothing in this stylesheet ever set a background on
 * that class, so they fell through to the page and read as black — while
 * every rule I wrote named `.bf-toggle` and `.bf-opt__btn`, which are the
 * group's own trigger, not the choices inside it.
 *
 * Found by rendering the real template with tools/renderpage.php and
 * reading the classes out of the HTML the page actually produces, rather
 * than out of the ones I assumed it used.
 *
 * They take the upload area's surface, as asked, so a choice and the drop
 * zone beside it sit at the same level.
 * ================================================================== */
.bf-opt__item,
.bf-opt__menu .bf-opt__item,
.bf-opt__menu--ratios .bf-opt__item {
  background: #212121 !important;
  border: 1px solid #2E2E2E !important;
}

.bf-opt__item:hover {
  background: #262626 !important;
  border-color: #3A3A3A !important;
}

.bf-opt__item[aria-pressed="true"],
.bf-opt__item.is-selected,
.bf-opt__item.is-on {
  background: #212121 !important;
  border-color: var(--orange-500) !important;
  color: var(--orange-500) !important;
}

/* The little shape drawn beside a ratio follows the same edge. */
.bf-ratio-shape {
  border-color: currentColor !important;
}


/* =====================================================================
 * The ratio marks, drawn to one scale
 *
 * Each shape set its own height with a fixed width of 16, so 21:9 was a
 * 16x7 sliver, 1:1 a 16x16 square and 9:16 a 9x16 upright — three
 * different sizes sitting in one row, which reads as a mistake rather
 * than as a set. They are drawn inside a common 20x20 box now, each
 * scaled to fit it, so the row lines up and every mark is legible.
 * ================================================================== */
.bf-ratio-shape {
  flex: none;
  display: block;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .9;
}

.bf-ratio-shape[data-shape="1:1"]  { width: 17px; height: 17px; }
.bf-ratio-shape[data-shape="16:9"] { width: 20px; height: 11px; }
.bf-ratio-shape[data-shape="9:16"] { width: 11px; height: 20px; }
.bf-ratio-shape[data-shape="4:3"]  { width: 19px; height: 14px; }
.bf-ratio-shape[data-shape="3:4"]  { width: 14px; height: 19px; }
.bf-ratio-shape[data-shape="21:9"] { width: 20px; height: 9px; }

/*
 * Room for the tallest of them, so the row does not jump.
 */
.bf-opt__menu--ratios .bf-opt__item {
  min-height: 42px;
  gap: 9px;
}

/* =====================================================================
 * The credit mark on the generate button
 * ================================================================== */
.bf-generate__cost {
  font-size: 1.2em !important;
  gap: 9px !important;
}

.bf-generate__cost svg {
  width: 17px !important;
  height: 24px !important;
  color: #C56240 !important;
}

/*
 * Nothing lit around the button, in any state.
 *
 * A coloured shadow spread wide on a full-width button is a wash across
 * whatever is beneath it, not a lift.
 */
.bf-generate,
.bf-generate:hover,
.bf-generate:focus,
.bf-generate:focus-visible,
.bf-generate:active {
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}


/* =====================================================================
 * A mark that is exactly its tile, in the sheet and on the trigger
 *
 * `object-fit: cover` on a square tile makes the mark meet all four
 * edges; the scale takes back the transparent margin the artwork carries.
 * The tile clips, so nothing reaches past the rounded corner.
 * ================================================================== */
.bf-mm__trigger .bf-model-logo,
.bf-mm__panel:not([hidden]) .bf-mm__logo,
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.bf-mm__trigger .bf-model-logo img,
.bf-mm__trigger .bf-model-logo svg,
.bf-mm__panel:not([hidden]) .bf-mm__logo img,
.bf-mm__panel:not([hidden]) .bf-mm__logo svg,
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo img,
.bf-mm__panel:not([hidden]) .bf-mm__logo .bf-model-logo svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /*
   * Just enough to close the tile, not enough to crop the mark.
   *
   * At 1.34 the artwork's own edges were being trimmed — the mark filled
   * the tile but lost a little of itself all the way round, which is
   * worse than a small rim because what is missing cannot be seen.
   */
  transform: scale(1.14) !important;
}


/* =====================================================================
 * Measured on the page, not guessed
 * ================================================================== */

/*
 * The choices take the upload area's surface, as asked.
 *
 * Photographed side by side: the drop zone renders #1E1E1E and the
 * choices #212121 — close enough to look like a mistake rather than a
 * difference. They are the same shade now.
 */
.bf-opt__item,
.bf-opt__menu .bf-opt__item,
.bf-opt__menu--ratios .bf-opt__item {
  background: #1E1E1E !important;
}

.bf-opt__item:hover { background: #262626 !important; }

.bf-opt__item[aria-selected="true"],
.bf-opt__item[aria-pressed="true"],
.bf-opt__item.is-selected {
  background: #1E1E1E !important;
  border-color: var(--orange-500) !important;
  color: var(--orange-500) !important;
}

/*
 * The trigger keeps its model on one line.
 *
 * The label sits in front of the name, and in a narrow column that pushed
 * "GPT Image 2" onto three lines. The name may not wrap; the label gives
 * way first if the space runs out.
 */
.bf-mm__trigger { flex-wrap: nowrap !important; }

.bf-mm__label strong,
.bf-mm__label em {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bf-mm__what {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/*
 * Every credit bolt on the page, one colour and one size.
 */
.bf-generate__cost svg,
.bf-mm__cost svg,
.bf-mm__fact svg,
.bf-credit-chip svg,
.bf-credit-chip__body svg {
  color: #C56240 !important;
}

.bf-generate__cost svg {
  width: 18px !important;
  height: 26px !important;
}

.bf-generate__cost {
  font-size: 1.22em !important;
  gap: 10px !important;
}


/* =====================================================================
 * The upload area, to the reference
 *
 * A dashed edge says "drop something here" in a way a solid border does
 * not, and the mark sits on its own tile above the words rather than
 * beside them.
 * ================================================================== */
.bf-upload {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1.5px dashed #3A3A3A !important;
  border-radius: 14px !important;
  background: #1C1C1C !important;
  padding: 18px 16px !important;
}

.bf-upload:hover {
  border-color: var(--orange-500) !important;
  background: #212121 !important;
}

.bf-upload svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--orange-500) !important;
}

.bf-upload__flag {
  position: static !important;
  order: -1;
  align-self: flex-end;
}


/* =====================================================================
 * The open group is marked by its menu, not by a ring round its name
 *
 * The trigger drew an accent outline when its list was open, and the
 * outline was cut to the text rather than to the control — so a longer
 * label pressed against it and, in Persian, the descender of the last
 * letter crossed it. The list opening underneath already says which
 * group is open; the name does not need a second announcement.
 * ================================================================== */
.bf-opt__btn[aria-expanded="true"],
.bf-image-page .bf-opt__btn[aria-expanded="true"] {
  border-color: #2E2E2E !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text-primary) !important;
}

.bf-opt__btn[aria-expanded="true"] svg,
.bf-image-page .bf-opt__btn[aria-expanded="true"] svg {
  color: var(--orange-500) !important;
}

/*
 * And the control has room for its own words.
 *
 * A fixed height with tight padding left the label touching the edge at
 * the sizes Persian actually renders at.
 */
.bf-opt__btn,
.bf-image-page .bf-opt__btn {
  min-height: 40px !important;
  height: auto !important;
  padding: 8px 14px !important;
  line-height: 1.9 !important;
}


/* =====================================================================
 * The credit mark on the generate button, measured from the reference
 *
 * Read off the picture that was sent, not estimated:
 *
 *   button   52px tall, #AF4B2F
 *   disc     26px across — exactly half the button's height — #1E1816
 *   bolt     the accent, not white, as asked
 *
 * The disc is what makes the mark legible: a bolt drawn straight onto
 * the button competes with the button's own colour and sinks into it.
 * Sizing it in `em` keeps the same half-height relationship whatever the
 * button ends up being.
 * ================================================================== */
.bf-generate__cost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
}

.bf-generate__cost svg {
  width: 1em !important;
  height: 1em !important;
  padding: 0.42em !important;
  box-sizing: content-box !important;
  border-radius: 999px !important;
  background: #1E1816 !important;
  color: #A94F31 !important;
  flex: none !important;
}

.bf-generate__cost b {
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}


/* =====================================================================
 * The option lists are the size of what is in them
 *
 * The menu was a full-width box with its own surface, and the choices sat
 * at one end of it — so every group showed a dark empty strip beside its
 * buttons. It looked like room had been reserved for options that do not
 * exist, which is exactly backwards: add a quality step and it should
 * take its place in the row, not fill a gap that was left waiting.
 *
 * The list is now sized to its content and carries no surface of its own.
 * It wraps when it runs out of room, so a longer set flows onto a second
 * line by itself.
 * ================================================================== */
.bf-opt__menu,
.bf-image-page .bf-opt__menu,
.bf-opt__menu--ratios {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
}

/*
 * Each group takes the height its own contents need.
 *
 * Stretching them to a common height is what left the short ones with a
 * void underneath.
 */
.bf-image-page .bf-opts {
  align-items: start !important;
}

.bf-image-page .bf-opt {
  align-self: start !important;
  height: auto !important;
}




/* =====================================================================
 * 1 — the closed picker: the tile holds the mark, not the other way round
 *
 * Scaling the mark up pushed it past the tile and clipped its corners, so
 * the tile stopped reading as a container at all. The mark is contained
 * again, and the tile is a little smaller than it was so the mark shows
 * whole inside it.
 * ================================================================== */
.bf-mm__trigger .bf-model-logo {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.bf-mm__trigger .bf-model-logo img,
.bf-mm__trigger .bf-model-logo svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  /*
   * `cover`, not `contain`.
   *
   * Measured on the page: with `contain` at 84% the mark came out 28x34
   * inside a 42px tile — two thirds of it — because a mark that is not
   * square is fitted to whichever side runs out first, and the rest of
   * the tile is left empty. `cover` fills the box, and the small scale
   * takes back the transparent margin the artwork carries.
   */
  object-fit: cover !important;
  transform: scale(1.28) !important;
  margin: 0 !important;
}

/* =====================================================================
 * 3 — the open sheet: the mark is exactly its tile
 *
 * This is where the gap was. `cover` fills the box, and the scale takes
 * back the transparent margin the artwork carries, so the mark meets all
 * four edges with nothing showing round it.
 * ================================================================== */
.bf-mm__panel .bf-mm__logo,
.bf-mm__panel .bf-mm__logo .bf-model-logo,
.bf-mm__card .bf-model-logo {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.bf-mm__panel .bf-mm__logo img,
.bf-mm__panel .bf-mm__logo svg,
.bf-mm__panel .bf-mm__logo .bf-model-logo img,
.bf-mm__panel .bf-mm__logo .bf-model-logo svg,
.bf-mm__card .bf-model-logo img,
.bf-mm__card .bf-model-logo svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.5) !important;
  margin: 0 !important;
}

/* =====================================================================
 * 2 — the group's name sits above its box, not inside it
 *
 * "کیفیت" and its choices were in one bordered box, so the name read as
 * another item in the row. Outside and above, it labels the set the way a
 * caption does, and the box holds only things you can press.
 * ================================================================== */
.bf-image-page .bf-opt,
.bf-opt {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.bf-opt__btn,
.bf-image-page .bf-opt__btn {
  border: 0 !important;
  background: transparent !important;
  padding: 0 0 9px !important;
  min-height: 0 !important;
  height: auto !important;
  cursor: default !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.bf-opt__btn:hover,
.bf-image-page .bf-opt__btn:hover {
  background: transparent !important;
  border: 0 !important;
}

.bf-opt__menu,
.bf-image-page .bf-opt__menu,
.bf-opt__menu--ratios {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  background: #1C1C1C !important;
  border: 1px solid #262626 !important;
  border-radius: 12px !important;
  padding: 10px !important;
  margin: 0 !important;
}


/* =====================================================================
 * In the open sheet the mark stands on its own
 *
 * Measured: the mark already reaches 97% of the tile, with a one-pixel
 * rim. What still read as a gap is not size — it is shape. The OpenAI
 * mark is round and the tile is a rounded square, so the tile's corners
 * show however large the mark is drawn, and scaling further would only
 * crop the mark's sides while leaving those corners behind.
 *
 * So the tile stops painting itself. Without a fill there is no corner to
 * notice, and the mark is exactly what you see — which is what "the same
 * size as its box" actually asks for when the two shapes differ.
 *
 * The tile still clips, so a square mark is trimmed to the same rounded
 * outline as before and nothing spills over the card.
 * ================================================================== */
.bf-mm__panel .bf-mm__logo,
.bf-mm__panel .bf-mm__logo .bf-model-logo,
.bf-mm__card .bf-model-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * The video page's own row of looks is gone.
 *
 * It held six sentences typed into that template; the shelf shows the
 * operator's saved video styles now, through the same component the
 * picture studio uses, so these rules had nothing left to style.
 *
 * Deleted rather than left: `.bf-styles__row .bf-style-option` looks
 * harmless because it is scoped, and a scoped rule for a wrapper that no
 * longer exists is exactly the kind of thing somebody later reads as
 * evidence that the wrapper does.
 */

/*
 * One upload box on its own fills the row.
 *
 * The pair sit side by side; a single box left in a two-column grid
 * would take half the width and leave a gap where the other used to be,
 * which reads as something that failed to load.
 */
/*
 * One box alone keeps the width it would have had beside another.
 *
 * The boxes share the row with `flex: 1 1 0`, so a single one took the
 * whole width and came out roughly twice the size — it read as a
 * different control rather than the same one with nothing next to it.
 *
 * The earlier rule here set grid columns, which did nothing: the row is
 * a flex row, not a grid. Half the width, less the gap, is what it
 * measured before.
 */
.bf-uploads[data-boxes="1"] .bf-upload {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
}

/*
 * And the same when the second box is hidden rather than absent, since
 * the count is written by the template and the hiding by the setting.
 */
.bf-uploads:has(.bf-upload[hidden]) .bf-upload:not([hidden]) {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
}

/* ---- the duration row on the video page ----------------------------- */

/*
 * It looks like the quality buttons beside it, because it does the same
 * job: it shows what is chosen and can be pressed to change it. What
 * differs is only that the choices behind it are a range rather than a
 * handful, so pressing opens a slider instead of revealing a row.
 */
/*
 * Wider than the quality buttons, because it says more.
 *
 * "۵ ثانیه" is a value rather than a label, and a box sized to the words
 * makes it look like one more option in a row instead of the thing that
 * opens the slider.
 */
.bf-seconds__pick {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 12px 22px !important;
  font-size: 15px;
}

/* ---- the confirm button under the slider ---------------------------- */

.bf-time__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.bf-time__ok {
  min-width: 150px;
  padding: 13px 26px;
  border: 1px solid var(--orange-500);
  border-radius: 12px;
  background: var(--orange-500);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.bf-time__ok:hover {
  background: var(--orange-400);
  border-color: var(--orange-400);
}

/*
 * A video in the shelf fills its cell the way a picture would.
 *
 * Without this it keeps its own proportions inside the square and leaves
 * bars above and below, which reads as a broken thumbnail rather than a
 * clip.
 */
/*
 * A CLIP IS A PICTURE THAT MIGHT NOT ARRIVE.
 *
 * The shelf drew each clip as a bare `<video>` and relied on the browser
 * painting its first frame. When it does not — a phone saving data, a host
 * that will not answer a range request, a codec declined, a file cleaned
 * away — the card was an empty box with a caption under it, which is what
 * the owner photographed.
 *
 * The holder is the card's own picture and is always there. The video is
 * laid over it and covers it the moment there is a frame to show, so
 * nothing is lost where the browser does cooperate.
 */
.bf-clip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.bf-clip__holder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-text-faint, rgba(255,255,255,.34));
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.055) 0%, transparent 62%),
    var(--surface-3);
}

.bf-earlier__item video {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  /*
   * Transparent, not `--surface-3`.
   *
   * An opaque background here would paint over the holder and put the
   * empty box straight back — the element is there whether or not it has
   * anything to show.
   */
  background: transparent;
}

/*
 * The video prompt has room for what people actually write.
 *
 * Two lines meant a third pushed the first out of sight, and someone
 * writing dialogue for two speakers cannot see what they have written.
 * Seven lines fits a short scene, and it grows from there rather than
 * scrolling — the whole prompt stays readable while it is being written.
 */
.bf-video-page .bf-ask__box textarea {
  min-height: 11.5em;
  max-height: 40vh;
  overflow-y: auto;
}

/*
 * The ratio choice, while a picture decides it.
 *
 * Dimmed and unpressable rather than hidden: a control that disappears
 * reads as something broken, while one that is plainly out of use reads
 * as something explained.
 */
.bf-opt.is-locked .bf-opt__menu {
  opacity: .38;
  pointer-events: none;
}


/* =====================================================================
 * The model picker: the badge, and the credit chip
 *
 * The badge is `.bf-mm__tag`, and later rules in this file carry
 * `.bf-app` in front of them — one class more specific, which is why a
 * rule without it never applies however true it is. These carry the
 * prefix and sit at the end.
 * ================================================================== */

/*
 * The badge returns to the corner, and the text keeps clear of it.
 *
 * Moving it into the flow put it under the description, which is worse
 * than where it started: a badge belongs at the edge of the card where
 * the eye finds it without reading. The reason it landed on the words
 * was never the corner — it was that nothing reserved the corner for
 * it, so a long description simply flowed underneath.
 *
 * So it goes back, and the card's text is given a margin the width of
 * the badge to sit clear of.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__tag,
.bf-mm__panel:not([hidden]) .bf-mm__tag {
  position: absolute !important;
  /*
   * Physical `left`, not `inset-inline-start`.
   *
   * The page is right-to-left, so the logical property resolves to the
   * right — measured at 397px from the card's left edge, which is the
   * far corner from the one asked for. The badge belongs on the left of
   * the card whichever way the words run.
   */
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  margin: 0 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  background: rgba(169, 79, 49, .16) !important;
  border: 1px solid rgba(169, 79, 49, .38) !important;
  color: var(--orange-400) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  white-space: nowrap !important;
}

/*
 * Room for it, on the cards that have one.
 *
 * Only where a badge exists: reserving the space on every card would
 * narrow the ones that do not need it, and a column of text that starts
 * in a different place on each row is its own kind of untidy.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__card:has(.bf-mm__tag) .bf-mm__body,
.bf-mm__panel:not([hidden]) .bf-mm__card:has(.bf-mm__tag) .bf-mm__body {
  /*
   * On the left, matching the corner the badge is pinned to.
   */
  padding-left: 96px;
}

/*
 * The name row goes back to how it was.
 *
 * It was made a flex row to hold the badge; the badge is no longer in
 * it, and leaving the change behind would be a repair for a fault that
 * has moved on.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__head,
.bf-mm__panel:not([hidden]) .bf-mm__head {
  display: block;
}

/*
 * The credit chip, close to the card it sits on.
 *
 * Measured on your screenshot: the card reads #212121 and the chip was
 * coming out black against it. A shade under the card keeps it quiet —
 * it is the least important thing in the row — without reading as a
 * hole cut in the surface.
 */
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__cost,
.bf-mm__panel:not([hidden]) .bf-mm__cost,
.bf-app .bf-mm__panel:not([hidden]) .bf-credit-chip,
.bf-mm__panel:not([hidden]) .bf-credit-chip,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact,
.bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact {
  background: #1E1E1E !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/*
 * A hidden upload box stays hidden.
 *
 * `.bf-upload { display: flex !important }` was written to shape the box
 * and, being `!important` and later in the file, it also overruled the
 * `[hidden]` rule above it. So turning off "video input" in the model
 * settings hid nothing: the box was marked hidden and drawn anyway, and
 * a person would attach a clip to a model that cannot take one.
 *
 * `display: none` with the same weight, placed last, settles it — and
 * `[hidden]` is the browser's own way of saying this element is not part
 * of the page, so nothing else should be reading it either.
 */
.bf-upload[hidden],
.bf-uploads .bf-upload[hidden],
.bf-app .bf-uploads .bf-upload[hidden] {
  display: none !important;
}

/* ---- the optional video controls ------------------------------------ */

/*
 * A narrower upload box for the rows that sit among the other options.
 *
 * The two at the top of the page are the main way in and are sized for
 * that; these are occasional, and at the same size they would make the
 * page look like it was mostly upload boxes.
 */
.bf-upload--slim {
  min-height: 74px;
  padding: 14px 18px;
}

.bf-opt__hint {
  display: block;
  padding: 10px 4px;
  color: var(--bf-text-dim);
  font-size: 13px;
  line-height: 1.9;
}

/* ---- advanced settings ---------------------------------------------- */

.bf-advanced {
  margin-top: 14px;
  border: 1px solid var(--bf-line);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}

.bf-advanced > summary {
  padding: 13px 16px;
  color: var(--bf-text-dim);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.bf-advanced > summary::-webkit-details-marker { display: none; }

.bf-advanced > summary::after {
  content: '⌄';
  float: left;
  transition: transform .2s ease;
}

.bf-advanced[open] > summary::after { transform: rotate(180deg); }

.bf-advanced > summary:hover { color: var(--bf-text); }

.bf-advanced__body {
  padding: 4px 16px 16px;
  display: grid;
  gap: 14px;
}

.bf-advanced__field {
  display: grid;
  gap: 7px;
}

.bf-advanced__field > span {
  color: var(--bf-text-dim);
  font-size: 13px;
}

.bf-advanced__field textarea,
.bf-advanced__field input {
  width: 100%;
}

/*
 * The download under a video opened from the shelf.
 *
 * Placed against the bottom of the screen rather than against the video,
 * because the video's own height is not known until it has loaded and a
 * button that jumps once the metadata arrives is worse than one that
 * never moves.
 */
.bf-lightbox__save {
  position: fixed;
  inset-block-end: 28px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 11px 26px;
  border: 1px solid var(--orange-500);
  border-radius: 12px;
  background: var(--orange-500);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.bf-lightbox__save:hover {
  background: var(--orange-400);
  border-color: var(--orange-400);
  color: #FFFFFF;
}

/*
 * THE WAY OUT.
 *
 * Both viewers — the picture one and the video one — closed only on a
 * press on the backdrop or on Escape. A phone has no Escape key, and a
 * clip or a tall picture fills the viewport, so the backdrop is a sliver
 * of margin: there was effectively no way out of either.
 *
 * Pinned to the viewport rather than to the media, for the reason the
 * download button above is: the media's height is not known until it has
 * loaded, and a control that jumps when the metadata lands is worse than
 * one that never moves. Top-start, which is the far corner from the
 * download and, in a right-to-left page, the corner a thumb does not rest
 * on.
 */
.bf-lightbox__shut {
  position: fixed;
  inset-block-start: 18px;
  inset-inline-start: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(20, 20, 22, .72);
  color: #EDEDED;
  cursor: pointer;
  /* Big enough for a thumb; the 42px box is the target, not the glyph. */
  -webkit-tap-highlight-color: transparent;
}

.bf-lightbox__shut:hover {
  background: rgba(32, 32, 36, .92);
  border-color: rgba(255, 255, 255, .3);
  color: #FFFFFF;
}

.bf-lightbox__shut:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* ==========================================================================
 * The model's second option
 *
 * Every other pill in this row pairs a short label with a figure — «۱K» and
 * a price — so `.bf-opt__item` lays them out side by side with a 6px gap and
 * lets the pill size itself. This one pairs a NAME with a sentence, and in
 * that row the two run together: a Latin name against Persian text with six
 * pixels between them reads as one word, and the pill grows wide enough to
 * push everything after it off the row.
 *
 * So this menu, and only this menu, stacks them — which is what the chat
 * page's own two-line options already do, and is why they are readable.
 * Scoped by id so nothing else in either studio moves.
 * ======================================================================= */
.bf-image-page #bf-variants {
  max-width: 320px;
}

.bf-image-page #bf-variants .bf-opt__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;

  width: 100%;
  height: auto;
  min-height: 0;
  padding: 9px 12px;
  text-align: right;
}

.bf-image-page #bf-variants .bf-opt__item strong {
  font-size: 13px;
  line-height: 1.4;
}

.bf-image-page #bf-variants .bf-opt__item em {
  /*
   * Shown, against the studio's own rule three thousand lines up.
   *
   * `.bf-image-page .bf-opt__item em { display: none }` hides the note on
   * every option pill, and it is right to: those pair a short label with a
   * figure, and a second line would double the height of a row with six of
   * them in it.
   *
   * This control is the opposite shape. It has exactly two rows, and the
   * note is the entire reason the operator wrote it — «کیفیت بالاتر» versus
   * «سریع‌تر» is how somebody decides. Two names alone would make them pick
   * blind.
   */
  display: block;
  font-style: normal;
  font-size: var(--bf-size-2xs);
  line-height: 1.55;
  opacity: .72;
}

/*
 * A REFERENCE IMAGE THAT IS STILL ARRIVING.
 *
 * The chip used to appear only once the upload had finished, so choosing a
 * photo on a phone did nothing visible for fifteen seconds — and the
 * generate button stayed live the whole time, ready to start a generation
 * without the picture it was supposed to be based on.
 *
 * Now the chip appears at once with the picture in it, says how far it has
 * got, and cannot be removed until it is there.
 */
.bf-ref.is-uploading {
  position: relative;
}

.bf-ref.is-uploading img {
  opacity: .55;
}

.bf-ref__pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.bf-ref__bar {
  position: absolute;
  inset-inline: 4px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
}

.bf-ref__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bf-accent, #A94F31);
  transition: width .18s ease;
}

/* =====================================================================
 * The one chip that is money
 * =====================================================================
 *
 * The row gives the price the same clothes as the seconds and the sound,
 * and those two are specifications while this one is what it costs. Same
 * shape, different ink, so the eye finds the figure in one pass without
 * the row breaking into two kinds of thing.
 *
 * WHY IT IS DOWN HERE, AND WHY IT SHOUTS.
 *
 * This chip's skin is written in four places: line ~1975 gives the mark
 * its colour, ~4629 gives `.bf-app` a background and a border, ~5096 sets
 * a border-colour with `!important`, and ~6157 sets a background and a
 * border-colour with `!important` again. Written where it belonged — with
 * the other chip rules — this changed nothing at all on the page, and
 * looked correct in the file. A browser measuring the computed colour is
 * what found that; reading the stylesheet never would.
 *
 * So it sits last and carries the same weight the rules above it carry.
 * That is not a good arrangement, and it is written down in BACKLOG.md
 * rather than quietly accepted: four rules for one chip is the actual
 * fault, and folding them together needs its own characterization pass.
 */
.bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact--cost,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact--cost {
  background: var(--bf-sage-soft, rgba(116, 170, 156, .12)) !important;
  border-color: var(--bf-sage-line, rgba(116, 170, 156, .26)) !important;
  color: var(--bf-sage, #74AA9C) !important;
}

/* The bolt goes with it. Left in the credit orange it read as a warning
   sitting inside a calm chip. */
.bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact--cost svg,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact--cost svg {
  color: var(--bf-sage, #74AA9C) !important;
}

/*
 * A model that cannot be used keeps the dim treatment.
 *
 * Its chip says «به‌زودی», which never carries this class — but a model
 * priced and unusable would, and a bright figure on a card nobody can
 * press is an offer that is not on offer.
 */
.bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact--cost.is-dim,
.bf-app .bf-mm__panel:not([hidden]) .bf-mm__facts .bf-mm__fact--cost.is-dim {
  background: #1E1E1E !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: var(--text-muted) !important;
}

/* =====================================================================
 * What a style is, before it is used
 * =====================================================================
 *
 * Pressing a ready-made style used to apply the whole thing at once —
 * prompt in the box, settings changed, page scrolled — with no way to
 * read it first. Two things were invisible: the words that produce the
 * look, and which model produced the picture being looked at.
 *
 * A sheet rather than a page: it answers a question about something on
 * the page behind it, and the page behind it is where you go back to.
 */
.bf-style-card[hidden] { display: none; }

.bf-style-card {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-modal, 90);
  display: grid;
  place-items: center;
  padding: 20px;
}

.bf-style-card__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
}

.bf-style-card__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: var(--bf-surface-2, #141416);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
}

/* ---- the head ---- */

.bf-style-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 17px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.bf-style-card__mark {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--bf-sage-line, rgba(116, 170, 156, .26));
  background: var(--bf-sage-soft, rgba(116, 170, 156, .12));
  color: var(--bf-sage, #74AA9C);
}

.bf-style-card__mark svg { width: 21px; height: 21px; }

.bf-style-card__title { flex: 1; min-width: 0; display: grid; gap: 1px; }
.bf-style-card__title strong {
  font-size: 15.5px;
  font-weight: 700;
  color: #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-style-card__title em {
  font-style: normal;
  font-size: 12px;
  color: var(--bf-text-faint, #8a8a8a);
}

.bf-style-card__x {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  background: transparent;
  color: var(--bf-text-muted, #b5b5b5);
  cursor: pointer;
}

.bf-style-card__x:hover { color: #f2f2f2; border-color: rgba(255, 255, 255, .2); }

/* ---- the body ---- */

.bf-style-card__body {
  padding: 15px 17px 6px;
  overflow-y: auto;
}

.bf-style-card__shot {
  display: block;
  margin: 0 0 15px;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d0e;
}

.bf-style-card__shot[hidden] { display: none; }

/*
 * Capped, because the picture is the example and not the subject.
 *
 * Left to its own height a tall one filled the sheet and pushed the
 * prompt, the model and the facts below the fold — so the panel opened
 * showing only the thing the person had just been looking at.
 */
.bf-style-card__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 230px;
  object-fit: cover;
}

.bf-style-card__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: var(--bf-text-muted, #b5b5b5);
  font-size: 12.5px;
  font-weight: 600;
}

.bf-style-card__label svg { flex: none; color: var(--bf-accent, #A94F31); }

/*
 * The copy button sits at the end of its own heading, not beside the
 * text: a control inside a block of text is a control people press by
 * accident while trying to select the text.
 */
.bf-style-card__copy {
  margin-inline-start: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: transparent;
  color: var(--bf-text-muted, #b5b5b5);
  cursor: pointer;
}

.bf-style-card__copy:hover { color: #f2f2f2; border-color: rgba(255, 255, 255, .2); }

/*
 * The prompt, as typed.
 *
 * A monospaced face because most of these are English and this is the
 * text somebody copies out — a proportional face hides a double space
 * and makes a long prompt hard to compare against what they pasted.
 */
.bf-style-card__prompt {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: #0f0f10;
  color: #d8d8d8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- which model made it ---- */

.bf-style-card__made { margin: 0 0 16px; }
.bf-style-card__made[hidden] { display: none; }

.bf-style-card__model {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: #101011;
}

.bf-style-card__model .bf-model-logo { width: 34px; height: 34px; border-radius: 10px; }

.bf-style-card__model .bf-sample__model-name {
  color: #f2f2f2;
  font-size: 13.5px;
  font-weight: 600;
}

.bf-style-card__model .bf-sample__model-vendor {
  color: var(--bf-text-faint, #8a8a8a);
  font-size: var(--bf-size-2xs);
}

/* The name and the vendor stack; the mark stays beside both. */
.bf-style-card__model .bf-sample__model-name,
.bf-style-card__model .bf-sample__model-vendor { display: block; }

/* ---- the facts ---- */

.bf-style-card__facts { margin: 0 0 14px; }
.bf-style-card__facts[hidden] { display: none; }

.bf-style-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bf-style-chip {
  display: inline-grid;
  gap: 1px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: #101011;
  text-align: center;
}

.bf-style-chip em {
  font-style: normal;
  font-size: 11px;
  color: var(--bf-text-faint, #8a8a8a);
}

.bf-style-chip strong {
  font-size: 13px;
  font-weight: 700;
  color: #ededed;
  font-variant-numeric: tabular-nums;
}

.bf-style-card__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--bf-sage-line, rgba(116, 170, 156, .26));
  border-radius: 10px;
  background: var(--bf-sage-soft, rgba(116, 170, 156, .12));
  color: var(--bf-text-muted, #b5b5b5);
  font-size: 12.5px;
  line-height: 1.85;
}

.bf-style-card__note svg { flex: none; margin-top: 3px; color: var(--bf-sage, #74AA9C); }

/* ---- the foot ---- */

.bf-style-card__foot {
  display: flex;
  gap: 10px;
  padding: 13px 17px 15px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.bf-style-card__use,
.bf-style-card__secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.bf-style-card__use {
  flex: 1.35;
  border: 0;
  background: var(--bf-accent, #A94F31);
  color: #fff;
}

.bf-style-card__use:hover { filter: brightness(1.08); }

.bf-style-card__secondary {
  border: 1px solid rgba(255, 255, 255, .11);
  background: transparent;
  color: var(--bf-text-muted, #b5b5b5);
}

.bf-style-card__secondary:hover { color: #f2f2f2; border-color: rgba(255, 255, 255, .22); }

/*
 * The two seconds after a copy.
 *
 * Green because that is what «it worked» already looks like everywhere
 * else in this product — the same token the code block's own copy button
 * uses. The border comes with it so the change is visible at a glance and
 * not only to somebody reading the label.
 */
.bf-style-card__secondary.is-done {
  color: var(--bf-ok, #34D07F);
  border-color: color-mix(in srgb, var(--bf-ok, #34D07F) 45%, transparent);
}

/* The page behind does not scroll while the sheet is open. */
body.bf-style-card-open { overflow: hidden; }

@media (max-width: 520px) {
  .bf-style-card { padding: 0; place-items: end stretch; }

  .bf-style-card__panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }

  .bf-style-card__foot { flex-direction: column-reverse; }
  .bf-style-card__use,
  .bf-style-card__secondary { flex: none; width: 100%; }
}