/* style — buttons, the cost card and the status line.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- buttons ---------- */
.btn {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 5px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--card-hover); border-color: var(--border-dash); }
.btn.small { padding: 4px 10px; font-size: 10px; }
.btn.ghost { background: none; color: var(--text-dim); }
.btn.primary {
  background: var(--accent); border: none; color: #fff;
  box-shadow: 0 3px 14px rgba(var(--accent-rgb), 0.35);
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.primary:disabled { opacity: .4; cursor: default; box-shadow: none; filter: none; }
.btn.big { width: 100%; padding: 10px 0; font-size: 13px; border-radius: var(--radius); }

/* A SPARKLE BEFORE THE WORD. Simon: "Make it so the buttons that say
   'Generate' have the sparkle next to the word 'Generate', so 'Generate' has a
   sparkle, and then 'Generate' next to it to the right."

   Drawn by CSS rather than put in the markup, which matters more than it
   sounds: both of these buttons have their label REWRITTEN at runtime -- the
   classic one says "Open crop canvas" on a launcher model (renderFields), the
   Create pane's says "Capture the performance" on Reshoot (paint) -- so a
   glyph living inside the label is a glyph that disappears the first time
   anything relabels it, or survives onto a word it has no business being
   next to. It is also why the class is toggled rather than set once: the
   sparkle belongs to the word Generate, not to the button.

   And keeping it out of the text means textContent still reads exactly
   "Generate", which is what a dozen tests and the panel's own label checks
   are reading.

   THE MARK IS THE NODE SPACE'S OWN. Simon: "adjust the sparkle graphic that's
   next to Generate so it matches the same sparkle graphic that we use for the
   Generate buttons in the node space." That is GEN_ICO in js/nleedit.js -- a
   big four-pointed star with a small one off its shoulder -- and it lives in
   --spark-ico (css/tokens.css) so this and the timeline's button draw the
   same thing. It was a text star before, which was close and not the same.

   Masked, not backgrounded, so it inherits currentColor. */
.gen-spark::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--spark-ico) center / contain no-repeat;
  mask: var(--spark-ico) center / contain no-repeat;
}

/* ---------- Generate, and Ask beside it ----------

   Simon: "make it so the ask in prompts is within the prompt box, next to
   generate smaller button you can click ask rather than prompt." Ask used to
   be a checkbox at the top of the prompt block, a row and a half away from
   the button you press.

   Generate keeps ALL the slack — .btn.big is width:100% and flex:1 holds it
   there — so it does not visibly shrink when Apply appears beside it. The
   two small buttons are sized off their own text and match the big button's
   height, so the row reads as one control with two modifiers rather than
   three buttons of assorted sizes. */
#gen-row { display: flex; align-items: stretch; gap: 6px; }
#gen-row .btn.big { flex: 1; }
.btn.gen-side {
  flex: none; align-self: stretch; padding: 0 12px;
  border-radius: var(--radius); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
/* Lit while the box is a request box — the same accent Generate wears, at
   outline weight, because Ask being ON is a state you need to see from the
   corner of your eye while typing into a box that looks unchanged. */
.btn.gen-side.on {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft, rgba(var(--accent-rgb), .12));
}
/* Apply is the one that spends, so it is filled rather than outlined. */
.btn.gen-side.apply {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn.gen-side.apply:hover { filter: brightness(1.1); background: var(--accent); }
.btn.gen-side.hidden { display: none; }

/* ---------- what pressing Generate will cost ----------
   Under the button, small, on the right. Still the last thing you read before
   pressing — but off the button itself, where it was competing with the word
   Generate for a glance that only has room for one of them. Right-aligned
   because that is where a total goes, and tabular figures so the line does
   not twitch as the number changes under your hand. */
/* WHAT ELSE PRESSES THIS BUTTON.

   A shortcut nobody is told about is a shortcut nobody uses. It sits under
   the button with the estimate, quietly, in the same tone — the two are the
   same kind of thing: what this button is about to do, and how else to do
   it. */
#gen-hint {
  margin-top: 3px; text-align: right;
  font-size: 10px; color: var(--text-faint); letter-spacing: .2px;
}
#gen-hint kbd {
  font: inherit; font-weight: 700; color: var(--text-dim);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 3px; padding: 0 4px;
}

#gen-cost {
  margin-top: 5px; text-align: right;
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
#gen-cost.hidden { display: none; }

/* ---------- cost card (inline, slim) ---------- */
#cost-card {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 8px;
}
#cost-value { font-size: 19px; font-weight: 800; letter-spacing: 0.3px; }
.cost-label { color: var(--text-faint); font-size: 11px; }

/* ---------- status ---------- */
.status {
  margin-top: 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 10px;
  overflow: hidden;   /* nothing in here may push past the card's edge */
}
/* flex-start, not center: once a long failure message wraps to two or three
   lines the Dismiss button should stay level with the first line. */
.status-row { display: flex; align-items: flex-start; gap: 8px; }
.status-row .spinner { margin-top: 2px; }
.status-row #btn-hide-status { flex: none; }
/* A failure message is often one unbroken token — a URL, a JSON blob, a stack
   line — and a flex item's automatic min-width would let that stretch the
   card past the edge of the panel. min-width:0 lets it shrink, anywhere lets
   it break mid-token, and the height cap keeps a wall of text from shoving
   the rest of the column down the page. */
.status-row #status-text {
  flex: 1 1 auto; min-width: 0;
  color: var(--text-dim); font-size: 11px; line-height: 1.45;
  overflow-wrap: anywhere; word-break: break-word;
  max-height: 5.8em; overflow-y: auto;
}
.spinner {
  width: 12px; height: 12px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .9s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
#log {
  margin-top: 6px; max-height: 72px; overflow-y: auto; overflow-x: hidden;
  font-size: 10px; color: var(--text-faint);
  font-family: "Geist Mono", Consolas, monospace; white-space: pre-wrap; user-select: text;
  /* pre-wrap only breaks at whitespace — provider errors rarely have any */
  overflow-wrap: anywhere; word-break: break-word;
}
.status.error .spinner { display: none; }
.status.error #status-text { color: var(--red); }
.status.done .spinner { display: none; }
.status.done #status-text { color: var(--green); }