>> tags grow to two digits with more shots). */
.gen-video-inputs--motion .gen-motion-opts.gen-mshot-opts { grid-template-columns: 1fr; }
.gen-mshot-opts .gen-motion-opt { white-space: nowrap; min-width: 0; }
/* v07zz587 — New Angle mode panel (matches the Swap/Blank right-column panels).
v07zz596 — the mode grid is now a clean 5×2 (10 modes); --span2 kept for reuse. */
.gen-model-btn--span2 { grid-column: 1 / -1; }
/* v07zz596 — Depth Map mode: source picker (this shot's frames + videos). */
.gen-depth-panel { display: flex; flex-direction: column; gap: 9px; }
.gen-depth-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 8px; overflow-y: auto; max-height: 250px; padding: 2px;
}
.gen-depth-tile {
position: relative; border: 2px solid color-mix(in srgb, var(--card-border) 45%, transparent); border-radius: var(--r-sm);
background: color-mix(in srgb, var(--cream) 60%, transparent); padding: 0; cursor: pointer; overflow: hidden;
aspect-ratio: 21 / 11; display: block;
}
.gen-depth-tile:hover { border-color: color-mix(in srgb, var(--gold-4) 75%, transparent); }
.gen-depth-tile.is-picked { border-color: var(--gold-5); box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--gold-5) 35%, transparent); }
.gen-depth-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-depth-play {
position: absolute; top: 4px; right: 5px; font-size: var(--fs-10); color: var(--white);
text-shadow: 0 1px 3px rgba(0,0,0,0.7); pointer-events: none;
}
.gen-depth-label {
position: absolute; left: 0; right: 0; bottom: 0; font-size: var(--fs-9-5); font-weight: var(--fw-semi);
letter-spacing: var(--track-04); color: var(--white); background: linear-gradient(transparent, rgba(0,0,0,0.62));
padding: 8px 5px 3px; text-align: left; pointer-events: none;
}
.gen-depth-msg { color: var(--ink); background: color-mix(in srgb, var(--gold-5) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold-5) 35%, transparent); border-radius: var(--r-sm); padding: 7px 10px; }
.gen-newangle-panel { display: flex; flex-direction: column; gap: 9px; }
.gen-newangle-field { display: flex; flex-direction: column; gap: 4px; }
.gen-newangle-input { width: 100%; min-height: 58px; resize: vertical; }
/* v07zz643 — Craft Prompt panel. Every row that changes with state (status line,
tail preview) has a RESERVED fixed height, so switching model, crafting, erroring
or tagging a reference never moves anything below it (invariant #20). */
/* v07zz651 — the four jobs in ONE row. The panel is ~640px wide so all four fit; a 2×2
grid cost 34px of height and squeezed the tail preview down to 22px. Fixed columns means
the panel height is constant whichever is picked (invariant #20). */
/* v707 — ONE ROW, however many presets there are. This was repeat(4, 1fr), so the
moment a saved preset joined the four built-ins it wrapped onto a second row on its
own — Hugo: "i need the 5 pills to be on one row". auto-flow:column + equal
auto-columns means the row grows to fit N cells instead of wrapping. */
/* v1052 — TWO ROWS. grid-auto-flow:column is gone: it is what forced the single
row, and it silently overrides the inline grid-template-columns that
craftGridCols() sets. The column count comes from the component (half the cell
count, rounded up) so the two rows stay balanced as presets are added.
grid-auto-rows:1fr keeps both rows the same height even when one row's labels
wrap to two lines and the other's don't. */
.gen-craft-intents {
display: grid;
grid-auto-rows: 1fr;
gap: 6px; flex: 0 0 auto;
}
/* min-height reserves the two-line case so a one-word label and a wrapped label
are the same cell — and so switching job never changes the block's height
(invariant #20). */
.gen-craft-intents .gen-model-btn {
width: 100%; min-width: 0; flex: unset; font-size: var(--fs-11-5); padding: 6px 8px;
white-space: normal; line-height: 1.2; min-height: 34px;
}
/* v07zz654 — Craft with Kimi sits in the video head row, in line with the
Standard / Motion transfer pills. The separate .gen-craft-videorow (with its Animate /
Camera move / Action chips) is gone — those chips fought the input boxes. */
/* v955 -- gap owned by the labeled flex band above. */
/* v699 — was `justify-content: space-between`, which spread ALL FOUR children (model
pills, Stop, Adjust, Craft) evenly across the row, so Stop and Adjust floated away
from the Craft button they belong to. Push only the model pills left; the three
action buttons then cluster together on the right at the normal 8px gap. */
.gen-craft-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
/* The four children need ~387px and the panel is ~380px, so something always wraps.
`space-between` scattered Stop/Adjust away from Craft; `margin-right:auto` on the
pills pushed Craft onto its own line instead. Give the model pills a full row of
their own — then Stop · Adjust · Craft prompt always land together on the next
line, at the normal 8px gap, which is what Hugo asked for. */
.gen-craft-row > .gen-swap-toggle { flex: 1 1 100%; }
.gen-craft-row > .gen-craft-stop { margin-left: auto; }
.gen-craft-btn {
flex: 0 0 auto; font: inherit; font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-02);
padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
border: 1px solid color-mix(in srgb, var(--gold-5) 55%, transparent);
background: linear-gradient(150deg, color-mix(in srgb, var(--gold-10) 75%, var(--mix-light)), var(--gold) 70%); color: color-mix(in srgb, var(--ink-umber-2) 47%, var(--mix-dark));
transition: filter var(--dur-1) ease, opacity var(--dur-1) ease, transform 60ms ease, box-shadow var(--dur-1) ease;
}
.gen-craft-btn:hover:not(:disabled) { filter: brightness(1.07); }
/* v07zz661 — Hugo: "it looks like clicking it worked but the button didnt actually
clicked animation." It had no :active state at all, so a click that DID fire read as a
dead button — and a craft takes 1-2 minutes before anything else happens. Press it in. */
.gen-craft-btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); filter: brightness(0.92); }
.gen-craft-btn:focus-visible { outline: var(--ring-w) solid color-mix(in srgb, var(--leaf) 75%, transparent); outline-offset: var(--ring-offset); }
.gen-craft-btn:disabled { opacity: 0.45; cursor: default; }
/* Working ≠ dead. While it thinks it stays gold and keeps its ticking label — dimming it
to the 0.45 disabled state for 90 seconds is what made it look broken. */
.gen-craft-btn.is-busy:disabled {
opacity: 1; cursor: progress;
animation: gen-craft-pulse 1.5s ease-in-out infinite;
}
@keyframes gen-craft-pulse {
0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-5) 0%, transparent); }
50% { filter: brightness(1.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-5) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.gen-craft-btn.is-busy:disabled { animation: none; }
.gen-craft-btn:active:not(:disabled) { transform: none; }
}
/* v07zz661 — Hugo: "fix that gold pill so it's the same shape and size as the
Standard/Motion transfer style pills." It was an 8px-radius rectangle sitting next to
999px pills. Matches .gen-swap-seg — same radius, font, tracking and padding — and since
both carry a 1px border they come out the same height.
MUST stay BELOW .gen-craft-btn: same specificity, so the base class wins on ties. It was
originally written ABOVE it and every property here was silently overridden. */
.gen-craft-btn--inline {
margin-left: auto;
border-radius: var(--r-round);
font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-02);
padding: 6px 14px;
}
/* Two lines reserved: the busy line is the longest state and must not reflow the panel. */
.gen-craft-status {
min-height: 30px; font-size: var(--fs-11-5); line-height: 1.32; color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-2) 81%, var(--mix-light)));
display: flex; align-items: center;
}
.gen-craft-err { color: var(--danger-2); }
/* v07zz644 — the tail block FILLS the leftover height instead of claiming a fixed
104px. The panel is a hard 380px with overflow hidden (.gen-section--match-refs), so
a fixed height here made the content 464px and silently cropped 84px — Hugo could
only see one line of the block. min-height:0 is required or a flex child refuses to
shrink below its content and the clipping comes straight back. */
/* v726 — craft mode outgrew the hard 380px (5-cell job grid + presets + brief + provider
row + this tail), so the tail flexed down to a one-line sliver — Hugo: "the
cinematography block is cropped." Same fix as VO (v07zz552): both cards keep 380 as the
FLOOR and grow with content; the tail gets a floor of its own so it is always readable.
Heights only ever change when the MODE changes, never from a toggle inside the panel. */
/* v730 — grow-with-content (v726) was the wrong shape once the tail got long: the whole
ROW ballooned (measured 951px) and shoved MODE/MODEL down the page — Hugo: "it's
pushing everything down." Craft mode now has a FIXED taller row (same precedent as VO's
460): both cards 620px, scrolling INSIDE if content ever exceeds it. Deterministic
height, nothing below ever moves. */
.gen-row-2col--craft .gen-section--match-refs { height: 620px; overflow-y: auto; }
/* v732 — VIDEO gets the same treatment. v724's Cinematography fields pushed the video
card's content past its fixed 380px, and a fixed FLEX COLUMN with overflow:hidden does
not crop overflow — it SHRINKS every child until they fit, which squashed every
textarea to a one-line sliver (Hugo: "why did this panel completely collapse??").
Two halves, both required:
1. the taller fixed card (620px, scrolling inside if content ever exceeds it);
2. flex-shrink:0 on the card's children — WITHOUT this the column still crushes
children before it ever scrolls, and the bug comes straight back. */
/* v853 — 620px → 520px. Hugo: "the button is too low at the page and we have a scroll.
reduce the height of the middle block with the prompt boxes slightly so everything fits."
v852 added Location / Light / Subject / Behaviour to the FROM THE SHOTLIST card above,
which grew it from ~170px to 270px and pushed COPY PROMPT & MARK SENT off the fold. This
hands back exactly that 100px. Measured at 520: the four boxes are still 114/161/161/161
tall — the same size he was already typing into — and both columns of the row shrink
together, so refs and prompt boxes stay aligned. */
/* v950 — 520 → 560: rails slimmed, 96px floors per box, card +40px.
v955 — Hugo's chosen full-height layout: the shotlist card now stacks INSIDE the
left column (above the refs), and this panel takes the whole right side. The
fixed height goes — the panel stretches to the left column's height (row is
align-items: stretch) and the flexible middle hands ALL of it to the typing
boxes. min-height keeps the old floor; overflow still scrolls inside; children
stay flex-shrink:0 so nothing can ever be crushed. */
.gen-row-2col--video .gen-section--match-refs { height: 100%; min-height: 0; overflow-y: auto; flex: 1 1 auto; }
.gen-row-2col--video .gen-section--match-refs > *,
.gen-row-2col--craft .gen-section--match-refs > * { flex-shrink: 0; }
.gen-craft-tailwrap { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; }
/* v730 — Hugo: "collapsable and scrollable with a specific height. At the moment it's
pushing everything down." The v726 min-height floor let the box GROW past it with the
long v729 role expansions, and the grow-with-content card grew along. FIXED height now:
the box scrolls inside itself and the panel height is deterministic. The header is a
collapse toggle (chevron rotates; state persists via filmtracker.craftTailOpen). */
.gen-row-2col--craft .gen-craft-tail { height: 170px; flex: 0 0 auto; }
.gen-craft-tailtoggle {
display: flex; align-items: center; gap: 6px;
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; text-align: left; width: 100%;
}
.gen-craft-tailtoggle:hover { color: var(--ink, var(--ink-umber)); }
.gen-craft-tailchev { display: inline-block; font-size: var(--fs-10); transition: transform var(--dur-1) ease; }
.gen-craft-tailchev.is-open { transform: rotate(90deg); }
.gen-craft-tailwrap.is-collapsed { flex: 0 0 auto; }
.gen-craft-tail {
flex: 1 1 auto; min-height: 0; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: var(--fs-10-5); line-height: 1.45;
padding: 7px 9px; border-radius: var(--r-sm);
border: 1px solid var(--card-border);
background: color-mix(in srgb, var(--black) 5%, transparent); color: var(--ink, var(--ink-umber));
}
.gen-craft-tail-empty { font-family: var(--font-ui, "Inter", sans-serif); font-style: italic; opacity: 0.7; }
/* v07zy — Hugo: Mode column has 4 buttons. The default flex-wrap
layout produced a 3+1 orphan ("Batch" on its own row) at narrower
viewports. Force a 2×2 grid so the four buttons are always equal-
sized and aligned regardless of column width. */
.gen-model-row--mode {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* v713 — Hugo: "why the hell are the pills all tall now in single image mode???
Compared to Craft Mode."
Because the settings row is flexible and Single/Grid mode shows an extra ASPECT RATIO
column that Craft mode doesn't. That extra column stole width from MODE, the labels
ran out of room, "Change Light" / "Modify Image" / "Craft Prompt" wrapped to two
lines, and every pill in the grid grew to match. So the pills changed height purely
because of which OTHER panel happened to be on screen — invariant #20, the thing that
must never happen.
Fixed both ends: the MODE column is now a FIXED width so no other panel can squeeze
it, and the pills have a fixed height so a wrapped label can't change the row. */
.gen-setting:has(.gen-model-row--mode) {
min-width: 244px;
max-width: 244px;
flex: 0 0 244px;
}
.gen-model-row--mode .gen-model-btn {
min-width: 0;
flex: unset;
width: 100%;
/* reserve the two-line case for everything, so 1-line and 2-line pills match */
height: 42px;
padding: 4px 8px;
font-size: var(--fs-12);
line-height: 1.18;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
/* v07zz643 — NOTE: Craft Prompt is the 12th mode, so the 2-column grid lands on a clean
6×2 with no orphan. An earlier attempt spanned it full-width, which pushed Replace
Assets into a half-empty row and made the column 7 rows tall. Don't re-add the span
unless the mode count goes ODD again. */
/* v07zz400 — Mode | Model | Resolution as three equal-height columns.
Mode keeps its 3×2 grid (6 buttons, 3 rows tall); Model + Resolution stack
their options in ONE vertical column so the three cards match in height and
nothing below shifts when you toggle anything (invariant #20). */
/* v726 — Hugo: "why is there a gap here next to mode in Craft Prompt mode?"
Because v713 pinned the Mode CARD at 244px but this row is a GRID: max-width on a
child does not narrow its TRACK. Track 1 stayed fr-sized, the 244px card sat at its
left edge, and the rest of the track rendered as dead space — widest in craft's
5-column template, which is where he saw it. The fix is to pin the TRACK: every
template's first column is now the same 244px the card is. */
.gen-settings.gen-settings--stacked3 {
grid-template-columns: 244px minmax(0, 1fr) minmax(0, 0.8fr);
align-items: stretch;
}
.gen-settings--stacked3 .gen-setting {
display: flex;
flex-direction: column;
}
/* The button group fills the card below the label so the three columns line up. */
.gen-settings--stacked3 .gen-model-row,
.gen-settings--stacked3 .gen-res-row { flex: 1; }
/* v07zz414/439 — single/grid/batch add TWO extra columns between Model + Resolution:
"Visual style" (6 buttons) and "Time of day" (12 buttons, v906) → FIVE columns total
(Mode | Model | Visual style | Time of day | Resolution). Both button grids fill 3
rows then wrap into more sub-columns, so their height matches Mode (3×2) / Model /
Resolution — nothing below shifts (invariant #20). Time of day gets the widest track
(12 presets → 4 sub-columns; the count must stay divisible by 3 or the last column
rags). Keeping Resolution on this same row was the fix for it
wrapping to a second line after the Time-of-day column was added. */
.gen-settings--stacked3.gen-settings--withstyle {
grid-template-columns: 244px minmax(0, 0.98fr) minmax(0, 0.90fr) minmax(0, 1.40fr) minmax(0, 0.50fr); /* v1058 — model track widened for its 2nd sub-column */
}
/* v07zz544 — single/grid/batch add a 6th "Aspect ratio" column (before Resolution) so the
Resolution card stays ON this row instead of wrapping to a second line. */
.gen-settings--stacked3.gen-settings--withstyle.gen-settings--withaspect {
grid-template-columns: 244px minmax(0, 0.95fr) minmax(0, 0.88fr) minmax(0, 1.25fr) minmax(0, 0.55fr) minmax(0, 0.45fr); /* v1058 — model track widened for its 2nd sub-column */
}
/* v07zz461 — Upscale row: Mode | Model | Visual style | Target resolution (FOUR columns —
no Time-of-day column, so it can't reuse the 5-col withstyle template). Style gets the
wide track since it's the only preset column here. */
.gen-settings--stacked3.gen-settings--withstyle-us {
grid-template-columns: 244px minmax(0, 1.0fr) minmax(0, 1.35fr) minmax(0, 0.5fr); /* v1058 — model track widened for its 2nd sub-column */
}
/* 23 Sep 2026 — Change light gains the Aspect ratio column: Mode | Model | Visual style | Aspect | Resolution. */
.gen-settings--stacked3.gen-settings--withstyle-us.gen-settings--withaspect {
grid-template-columns: 244px minmax(0, 1.0fr) minmax(0, 1.2fr) minmax(0, 0.55fr) minmax(0, 0.5fr);
}
.gen-style-grid {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 8px;
}
.gen-style-grid .gen-model-btn { min-width: 0; width: 100%; white-space: normal; line-height: 1.15; }
/* v1058 — THREE rows, wrapping into sub-columns, exactly like .gen-style-grid and
the time-of-day grid beside it. Was a 5-tall flex stack, which only looked right
while there were three models. Keep this in step with the model COUNT: at 3 rows
a 6th model would still fit (3+3); a 7th starts a third sub-column and the track
below needs widening again. */
/* v1064 — SIX models (three GPT API models + the subscription one): back to the v1058
THREE rows, filling two sub-columns. The rows stretch to the card's full height
(.gen-setting--models), so the pills line up with the 3-row neighbours top and bottom. */
.gen-setting--models { display: flex; flex-direction: column; }
.gen-model-row--stack {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 8px;
flex: 1 1 auto;
}
.gen-model-row--stack .gen-model-btn {
min-width: 0;
width: 100%;
white-space: normal;
line-height: 1.15;
}
.gen-res-row--stack {
display: flex;
flex-direction: column;
gap: 8px;
}
.gen-res-row--stack .gen-res-btn {
flex: 1 1 0;
}
@media (max-width: 1100px) {
/* Reuse the shared collapse — stacked3 folds to one column like the rest. */
.gen-settings.gen-settings--stacked3 { grid-template-columns: 1fr; }
}
/* v07zz — Batch panel × buttons. Match the visual language of the
modal close button (display: grid; place-items: center for true
centering of the SVG glyph). No more drifty unicode "×". */
.gen-batch-x-btn {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--card-border);
background: color-mix(in srgb, var(--mix-light) 60%, transparent);
color: var(--ink-muted);
cursor: pointer;
display: grid;
place-items: center;
flex-shrink: 0;
padding: 0;
transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.gen-batch-x-btn:hover {
background: color-mix(in srgb, var(--danger-soft) 12%, transparent);
color: var(--danger);
border-color: var(--danger-border);
}
.gen-batch-x-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gen-model-btn {
flex: 1 1 auto;
min-width: 160px;
/* v06b — Single-line layout so the row sits level with the
Resolution buttons (which are single-line). The API-model
subtitle was dropped per Hugo: he doesn't need to see
'gemini-3-pro-image-preview · default' under the friendly name. */
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
font: inherit;
font-size: var(--fs-13);
font-weight: var(--fw-semi);
border-radius: var(--r-panel);
border: 1.5px solid var(--card-border);
background: color-mix(in srgb, var(--cream) 65%, transparent);
color: var(--ink);
cursor: pointer;
text-align: center;
transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.gen-model-btn:hover { background: color-mix(in srgb, var(--cream) 95%, transparent); }
.gen-model-btn.is-active {
border-color: color-mix(in srgb, var(--leaf) 75%, transparent);
background: color-mix(in srgb, var(--leaf) 12%, transparent);
box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 30%, transparent);
}
.gen-res-row { display: flex; gap: 8px; }
.gen-res-btn {
flex: 1;
font: inherit;
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: var(--track-04);
/* v06c — Match .gen-model-btn's vertical padding (10px) so the
Resolution buttons render at the same height as the Model row
and visually sit on the same baseline. */
padding: 10px 0;
border-radius: var(--r-panel);
border: 1.5px solid var(--card-border);
background: color-mix(in srgb, var(--cream) 65%, transparent);
color: var(--ink);
cursor: pointer;
}
.gen-res-btn:hover { background: color-mix(in srgb, var(--cream) 95%, transparent); }
.gen-res-btn.is-active {
border-color: color-mix(in srgb, var(--leaf) 75%, transparent);
background: color-mix(in srgb, var(--leaf) 18%, transparent);
}
/* v832 — the pixel sub-line under each tier name is GONE (Hugo: "get rid of those
shitty little numbers. i diodnt ask for that"). The labels carry the meaning on
their own now, so .gen-res-btn--px / .gen-res-px went with it. */
/* Prompt preview.
v06e — Now split into two clearly-labeled sub-blocks: a muted
"Reference" block for the header (saved to the log, NOT sent to
the model) + an accent "Prompt sent to model" block for the body.
The visual distinction answers the "does the header get sent?"
question without needing a paragraph of copy. */
.gen-preview-section .gen-section-head { margin-bottom: 0; }
.gen-preview-split {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.gen-preview-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.gen-preview-block-label {
display: flex;
flex-direction: column;
gap: 1px;
}
.gen-preview-block-tag {
display: inline-block;
align-self: flex-start;
font-size: var(--fs-9-5);
font-weight: var(--fw-bold);
letter-spacing: var(--track-12);
text-transform: uppercase;
padding: 3px 9px;
border-radius: var(--r-round);
background: color-mix(in srgb, var(--ink-muted) 18%, transparent);
color: var(--ink-muted);
}
.gen-preview-block-tag--accent {
background: color-mix(in srgb, var(--leaf) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent);
color: var(--olive-3);
}
.gen-preview-block-sub {
font-size: var(--fs-10);
color: var(--ink-muted);
font-style: italic;
letter-spacing: var(--track-02);
}
.gen-preview-text {
margin: 0;
font-family: var(--font-mono, "JetBrains Mono"), monospace;
font-size: var(--fs-11-5);
line-height: 1.45;
color: var(--ink);
background: color-mix(in srgb, var(--shadow-ink) 6%, transparent);
padding: 12px;
border-radius: var(--r-sm);
white-space: pre-wrap;
max-height: 320px;
overflow-y: auto;
scrollbar-width: thin;
/* v06o — Labels above this block left-align with this 12px padding. */
}
.gen-preview-text--muted {
background: color-mix(in srgb, var(--ink-muted) 10%, transparent);
color: var(--ink-muted);
font-size: var(--fs-11);
max-height: 160px;
}
/* v06o — Editable preview body: looks identical to the read-only
but is now a