';inherits:false;initial-value:0deg}
.ag-box::after{
content:"";position:absolute;inset:-1px;border-radius:17px;
padding:1.5px;pointer-events:none;
background:conic-gradient(from var(--ag-beam-angle) at 50% 50%,
transparent 0deg,transparent 186deg,
rgba(var(--beam-b),.85) 246deg,
rgba(var(--beam-a),1) 300deg,
rgba(var(--beam-b),.5) 330deg,
transparent 360deg);
/* Standard gradient-border trick: paint the full rect, then subtract
the content box so only the 1.5px ring survives. The children
(textarea/.ag-brow) are unpositioned so this paints above them, but
the ring only ever occupies the rim and takes no pointer events. */
/* Order matters: the `mask` shorthand resets mask-composite, so each
composite declaration has to follow its own shorthand. */
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;
opacity:.7;
animation:agBeamSpin 7s linear infinite;
transition:opacity .35s var(--ease);
}
.ag-box:focus-within::after{opacity:1;animation-duration:3.4s}
@keyframes agBeamSpin{to{--ag-beam-angle:360deg}}
/* Power Agent Mode's crimson aura is the glow/beam palette override on
.ag-box.power-mode above — geometry is shared, so there is nothing
else to declare here. The old version duplicated every inset, blur
and radius, which is how it drifted into three separate bugs: its
-28px/-36px horizontal insets were double the clip budget and got
hard-cut; it never reset the base mask, so the base mask silently
applied to it anyway; and its keyframes animated `filter`, which
overrode the blur its own :focus-within rule was trying to set (and
animating filter is not compositor-friendly to begin with).
agPowerPulse / agOuterPowerPulse / agPowerBorderPulse all went with
it — the rim beam now carries the "armed" read that the border pulse
used to. */
.ag-box textarea{width:100%;border:0;outline:0;resize:none;background:none;font-family:var(--body);font-size:.95rem;line-height:1.5;color:var(--ink);min-height:24px;max-height:140px;overflow-y:auto;padding:0}
.ag-box textarea::placeholder{color:var(--mut);font-weight:400}
/* wrap, because .ag-attach-row below asks for a whole line and cannot get
one without it. In a nowrap row its width:100% is just a shrink target:
the chips ended up as a 419px block sitting BESIDE the + button, sharing
the line with every control, and each extra image made the strip taller
and pushed the buttons down instead of stacking above them. With nothing
attached the row still fits on one line, so this changes nothing until
there is something to show. */
.ag-brow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:6px}
.ag-brow-sp{flex:1}
/* Attach button + the chip that replaces it once a file's picked —
Replit's "+" in the composer row, repurposed here specifically for a
logo/image the agent should build from rather than invent. Rectangular
like every other control here (see the sitewide button pass), not the
old circular .ag-send. */
.ag-attach{flex:none;width:30px;height:30px;border:1px solid var(--line);background:transparent;color:var(--ink-2);
border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:.15s}
.ag-attach:hover{border-color:var(--line-hover);color:var(--ink)}
.ag-attach svg{width:16px;height:16px}
/* Chips wrap onto their own line rather than squeezing the composer's
button row — eight attachments is a legitimate thing to do and must not
push the send button off the end. */
/* Thumbnails on a message that carried photos. Fixed aspect and cover, so
a portrait photo beside a landscape one cannot make the row ragged. */
.ag-user-imgs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-bottom:6px}
.ag-user-imgs img{width:54px;height:54px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:var(--paper-2)}
/* Dragging a file over the composer. A visible target, because a drop that
misses navigates the page to the file and loses the conversation. */
.ag-composer.dropping .ag-box{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ag-attach-row{display:contents}
.ag-attach-row:not(:empty){display:flex;flex-wrap:wrap;gap:6px;order:-1;width:100%}
/* Uploading: dimmed, and the remove button still works — a slow upload is
the moment you are most likely to change your mind. */
.ag-attach-chip.busy{opacity:.6}
.ag-attach-chip.busy img{filter:grayscale(1)}
.ag-attach-chip.failed{border-color:#d9382c;color:#d9382c}
.ag-attach-chip.failed img{opacity:.4}
.ag-attach-chip[hidden]{display:none}
.ag-attach-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper-2);
border-radius:999px;padding:3px 4px 3px 3px;font-size:.78rem;font-weight:600;color:var(--ink-2);max-width:160px}
.ag-attach-chip img{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:none;background:#fff}
.ag-attach-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-attach-chip button{flex:none;border:0;background:none;color:var(--mut);cursor:pointer;width:16px;height:16px;display:grid;place-items:center}
.ag-attach-chip button:hover{color:var(--ink)}
.ag-attach-chip button svg{width:12px;height:12px}
/* Claude & Replit Model Selector Pill */
/* ── EFFORT ───────────────────────────────────────────────────────────
How hard to think, as one value on a range rather than a mode you had
to know to pair with something else. Reads as a value, not a menu: no
chevron, because it opens a slider and not a list. */
.ag-effort-wrap{position:relative;display:inline-flex;flex:none}
/* Bordered at rest, like the two controls beside it. Transparent until
hover, it was the only thing on that row that did not look pressable
until you had already found it - and the row reads as a set of three
buttons, so one of them being a bare word broke the set. */
.ag-effort-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;
border:1px solid var(--line);background:var(--card);cursor:pointer;
font:inherit;font-size:.78rem;font-weight:600;color:var(--ink-2);
transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
/* THE PILL IS AS WIDE AS ITS WIDEST LABEL, ALWAYS.
The level name changes as you drag, and the names are not the same
length: "Fast" measured 47.1px and "Balanced" 77.5px, so the pill
swung 30.4px and every control to its right - the model pill, the
mic, the send button - slid by exactly that much. Dragging the
slider made the whole composer row shuffle sideways under the
cursor, and on a narrow composer it was enough to wrap the row.
Every label is in the DOM, stacked in one grid cell; the three that
are not current are visibility:hidden, so they still take part in
sizing and nothing else. A min-width in px would do the same job
until the font, the type scale or the wording changed; this cannot
go stale, because the thing being measured IS the set of labels. */
.ag-effort-lbl{display:grid;justify-items:center}
.ag-effort-lbl>*{grid-area:1/1}
.ag-effort-lbl>i{visibility:hidden;font-style:normal;pointer-events:none}
.ag-effort-pill:hover{background:var(--paper-2);border-color:var(--line-hover)}
.ag-effort-pill.open{background:var(--paper-2);border-color:var(--line-hover)}
/* No indicator dot. The level's NAME is the indicator — a coloured bead
beside a word that already says the same thing is one signal too many,
and the reference carries none. The top of the scale still tints the
label so it is readable at a glance. */
.ag-effort-pill[data-level="smart"],
.ag-effort-pill[data-level="max"]{color:var(--accent)}
.ag-effort-tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(3px);
background:var(--ink);color:var(--paper);font-size:.7rem;font-weight:600;
padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;
opacity:0;transition:opacity .14s var(--ease),transform .14s var(--ease);z-index:60}
.ag-effort-wrap:hover .ag-effort-tip{opacity:1;transform:translateX(-50%) translateY(0)}
.ag-effort-wrap:has(.ag-effort-pop.open) .ag-effort-tip{opacity:0}
/* Narrower and shorter than it was. The description line went with it:
the level name IS the description once you have read it once, and a
paragraph re-rendering under your thumb is noise while you drag. */
.ag-effort-pop{position:absolute;bottom:calc(100% + 10px);right:0;width:252px;z-index:70;
background:var(--card);border:1px solid var(--line);border-radius:15px;padding:13px 15px 14px;
box-shadow:0 18px 44px -18px rgba(23,23,23,.28),0 2px 8px -5px rgba(23,23,23,.14);
opacity:0;visibility:hidden;transform:translateY(5px) scale(.975);transform-origin:100% 100%;
transition:opacity .2s cubic-bezier(.2,.8,.2,1),transform .24s cubic-bezier(.2,.8,.2,1),visibility .24s}
.ag-effort-pop.open{opacity:1;visibility:visible;transform:none}
:root[data-theme="dark"] .ag-effort-pop{
box-shadow:0 22px 48px -18px rgba(0,0,0,.72),0 2px 10px -5px rgba(0,0,0,.5)}
.ag-effort-head{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.ag-effort-head .k{font-size:.78rem;font-weight:500;color:var(--mut)}
.ag-effort-head .v{font-size:.78rem;font-weight:600;color:var(--accent);
transition:opacity .16s var(--ease)}
.ag-effort-head .v.swap{opacity:0}
.ag-effort-head .q{margin-inline-start:auto;width:14px;height:14px;color:var(--mut);flex:none;opacity:.55}
.ag-effort-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--mut);margin-bottom:6px}
.ag-effort-row{display:flex;align-items:center;gap:9px}
.ag-effort-track{position:relative;flex:1 1 auto;height:26px;min-width:0}
/* THE RAMP IS THE DOTS THEMSELVES.
Three grids of the same 7px pitch, each a heavier dot than the last,
faded in over a different stretch of the track. Stacked, the left end is
a faint speckle and the right is solid — so the control says "more" by
getting denser, which is the thing you can read without reading.
There is no lit bar over the top. An overlay that filled to the thumb
was the first attempt and it destroyed the ramp: at the top of the scale
it painted full-strength dots across the whole width, so Max and Fast
looked identical apart from where the handle sat. The gradient is
static; only the thumb moves. */
.ag-effort-track .dots,
.ag-effort-track .dots::before,
.ag-effort-track .dots::after{
position:absolute;inset:0;border-radius:8px;content:"";pointer-events:none}
/* THE GRAIN IS THE SCALE. THE BLUE IS MAX.
The ramp is a dot grain that densifies toward "Smarter" — that is the
scale itself, and it is there at every level, because it is what makes
the positions mean something. What it is NOT is blue: a filled band at
every level said "full power" four times over and left the top of the
scale with nothing of its own to say.
The fill belongs to Max alone, and it arrives rather than appearing —
wiped in from the left over about a second and a half, with the bright
head of the run travelling just ahead of it. That is the whole point of
it: you see the track charge.
On scale: the pitch was 7px with dots at 26/33/40% of the cell, 3.6 to
5.6px across and about three and a half rows on a 26px track. At that
size you do not read a density, you read a printed halftone. 4px pitch
at ~17% is roughly 1.4px across and six and a half rows, fine enough to
read as texture.
Every grain layer sits on the SAME 4px lattice, aligned. Offsetting the
heavier ones by half a cell was tried and is worse: it puts dots
BETWEEN the existing dots, so the layers stop being one field at
several strengths and become overlapping grids — and grids of
different pitch beat into a plaid you can see at a glance. */
.ag-effort-track .dots{
background:var(--paper-2);overflow:hidden;
background-image:radial-gradient(circle at center,
color-mix(in srgb,var(--accent) 42%,transparent) 17%, transparent 19%);
background-size:4px 4px;
-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.44) 42%,#000 88%);
mask-image:linear-gradient(90deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.44) 42%,#000 88%)}
.ag-effort-track .dots::before{
background-image:radial-gradient(circle at center,
color-mix(in srgb,var(--accent) 66%,transparent) 18%, transparent 20%);
background-size:4px 4px;
-webkit-mask-image:linear-gradient(90deg,transparent 14%,rgba(0,0,0,.5) 52%,#000 88%);
mask-image:linear-gradient(90deg,transparent 14%,rgba(0,0,0,.5) 52%,#000 88%)}
.ag-effort-track .dots::after{
background-image:radial-gradient(circle at center,
var(--accent) 19%, transparent 21%);
background-size:4px 4px;
-webkit-mask-image:linear-gradient(90deg,transparent 48%,rgba(0,0,0,.45) 76%,#000 100%);
mask-image:linear-gradient(90deg,transparent 48%,rgba(0,0,0,.45) 76%,#000 100%)}
/* ── THE CHARGE ───────────────────────────────────────────────────────
Max only, and it fills in rather than switching on.
A MASK, NOT A CLIP. clip-path did the job but its edge is a hard
vertical line, and a hard line travelling across a track reads as a
progress bar filling — mechanical, and the one thing this should not
look like. The mask carries a soft falloff about a third of the track
wide, so what moves is a gradient shoulder rather than a cut, and the
band appears to soak across instead of being wiped in.
The geometry: the mask is 240% of the element, opaque to 42% of its own
width and transparent by 56%. At mask-position 100% the element shows
the image's last 41.67%, which is entirely past the fade — fully
hidden. At 0% it shows the first 41.67%, entirely inside the opaque
run — fully lit. Sliding between the two therefore reveals left to
right, the direction the scale reads, with the shoulder sweeping
across. Both numbers matter: a shorter mask leaves the charged state
faded at its right edge, a longer one starts already partly visible.
No transition on the way out. Dragging off Max drops it immediately,
which is correct: the band means "this one setting", and a band fading
away over a third of a second while you are already on Smart is the
band lying about the level. */
.ag-effort-track .fill{
position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:1;
opacity:0;
/* Eight stops rather than four. The ramp is the full width of a small
control, so four left visible steps between them; at this count the
transition between any two is under the threshold where an edge
shows. The 180deg layer on top is a single soft highlight along the
upper edge, which is what stops the band reading as flat ink. */
background-image:
linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 62%),
linear-gradient(90deg,
transparent 0%,
color-mix(in srgb,var(--accent) 4%,transparent) 14%,
color-mix(in srgb,var(--accent) 11%,transparent) 28%,
color-mix(in srgb,var(--accent) 21%,transparent) 42%,
color-mix(in srgb,var(--accent) 34%,transparent) 56%,
color-mix(in srgb,var(--accent) 47%,transparent) 70%,
color-mix(in srgb,var(--accent) 58%,transparent) 85%,
color-mix(in srgb,var(--accent) 66%,transparent) 100%);
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 42%,
rgba(0,0,0,.72) 47%,rgba(0,0,0,.28) 52%,rgba(0,0,0,0) 56%);
mask-image:linear-gradient(90deg,#000 0%,#000 42%,
rgba(0,0,0,.72) 47%,rgba(0,0,0,.28) 52%,rgba(0,0,0,0) 56%);
-webkit-mask-size:240% 100%;mask-size:240% 100%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:100% 0;mask-position:100% 0}
/* Eased at BOTH ends. A pure ease-out leaves at full speed from a
standing start, which is the abrupt part of a wipe however soft its
edge; this leans in, runs, and settles. */
.ag-effort-track[data-heat="max"] .fill{
opacity:1;animation:effCharge 1.6s cubic-bezier(.4,0,.2,1) forwards}
.ag-effort-track.dragging[data-heat="max"] .fill{animation-duration:.85s}
@keyframes effCharge{
from{-webkit-mask-position:100% 0;mask-position:100% 0}
to{-webkit-mask-position:0% 0;mask-position:0% 0}
}
/* ── THE FIELD ────────────────────────────────────────────────────────
Light speckle and a bright head, both of which live ON the charge — a
white mote over the bare ground is invisible, so this is Max-only too.
It has to be: the charge is what these are texture and motion FOR. */
.ag-effort-track .particles{
position:absolute;inset:0;border-radius:8px;overflow:hidden;
pointer-events:none;z-index:2;opacity:0;
/* No transition on opacity, because the field is either on or off and
a fade buys nothing: it belongs to Max alone, and the charge beneath
it is already the thing that arrives gradually.
An earlier comment here claimed a transition on this property "sticks
because the popover subtree is hidden". That was wrong, and it is
worth saying so rather than deleting it: the measurement behind it
was taken in a browser tab that was not painting, where every
animation clock is throttled to a standstill - a plain created
on the spot showed currentTime 0 after 900ms and rAF fired once in
800ms. Nothing about this element is special. Anyone re-measuring
animation timing on this page should check document.visibilityState
and rAF cadence first. */
background-image:radial-gradient(circle at center,
rgba(255,255,255,.55) 16%,transparent 18%);
background-size:4px 4px;
background-position:0 0;
-webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.5) 52%,#000 92%);
mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.5) 52%,#000 92%);
animation:effDrift 4s linear infinite}
.ag-effort-track[data-heat="max"] .particles{opacity:1}
.ag-effort-track.dragging[data-heat="max"] .particles{animation-duration:1.7s}
/* Exactly one cell, so it loops seamlessly and the motion reads as the
grain travelling rather than the whole panel sliding. */
@keyframes effDrift{ to{background-position:4px 0} }
/* Motes flickering on a period that does not divide the drift's, so the
two never line up into a single pulse. */
.ag-effort-track .particles::before{
content:"";position:absolute;inset:0;
background-image:radial-gradient(circle at center,
rgba(255,255,255,.8) 15%,transparent 17%);
background-size:4px 4px;
-webkit-mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.4) 62%,#000 100%);
mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.4) 62%,#000 100%);
animation:effTwinkle 2.6s ease-in-out infinite}
@keyframes effTwinkle{ 0%,100%{opacity:.16} 50%{opacity:.66} }
/* THE HEAD. A bright leading edge with a tail behind it. Its first pass
is timed to the charge - same 1.6s, both starting the moment the level
becomes Max - so the light arrives and the band is left behind it. It
keeps looping after that, which is what stops a charged track looking
like a finished progress bar.
Linear on purpose: an eased sweep reads as a shine passing over glass,
a constant one reads as something moving under its own power. */
.ag-effort-track .particles::after{
content:"";position:absolute;top:-2px;bottom:-2px;width:15%;
background:linear-gradient(90deg,
transparent,
rgba(255,255,255,.28) 38%,
rgba(255,255,255,.92) 62%,
rgba(255,255,255,.55) 78%,
transparent);
filter:blur(1.5px);
transform:translateX(-200%);opacity:0}
.ag-effort-track[data-heat="max"] .particles::after{
opacity:1;animation:effRun 1.6s linear infinite}
.ag-effort-track.dragging[data-heat="max"] .particles::after{animation-duration:.95s}
@keyframes effRun{
0%{transform:translateX(-200%)}
100%{transform:translateX(800%)}
}
/* At the top the track itself is lit, not just its contents. Max only,
for the same reason as everything else here. */
.ag-effort-track .dots{transition:box-shadow .35s var(--ease)}
.ag-effort-track[data-heat="max"] .dots{
box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),
0 0 15px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
/* The slow ambient sheen, under the head and over the charge. It is drawn
in accent, so like everything else blue here it is Max only - at the
lower levels it was a blue wash crossing a track that is supposed to
have no blue in it at all. */
.ag-effort-track .sheen{position:absolute;inset:0;border-radius:8px;overflow:hidden;
pointer-events:none;z-index:3;opacity:0}
.ag-effort-track[data-heat="max"] .sheen{opacity:1}
.ag-effort-track .sheen::after{content:"";position:absolute;top:0;bottom:0;width:38%;
background:linear-gradient(100deg,transparent,
color-mix(in srgb,var(--accent) 26%,transparent) 45%,transparent);
transform:translateX(-140%);
animation:effSheen 4.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes effSheen{
0%{transform:translateX(-140%)}
60%{transform:translateX(300%)}
100%{transform:translateX(300%)}
}
/* The visible thumb is a div so it can EASE between steps. A native range
thumb jumps: the browser paints it at the new value on the same frame,
so arrow keys and taps both snap. The input is still the control — it
keeps focus, keyboard and touch — with its own thumb made transparent
and left full height for the hit area. */
.ag-effort-thumb{position:absolute;top:50%;left:0;width:24px;height:20px;border-radius:7px;
/* NO CUSTOM PROPERTY IN HERE — the transform is written from JS.
Two attempts went through a variable and both failed silently while
every diagnostic said they should work: calc(var(--n) * var(--len))
computed to zero, and a single var(--eff-x) latched at whatever value
it first held. Measured across five steps the thumb reported x=119
while --eff-x read 0, 59, 119 and 178 in turn — the property updates,
the transform does not follow it. An unregistered custom property
inside transform is not a reliable dependency for style recalc here,
so positionThumb() assigns the whole declaration instead. The
transition below still does the easing. */
/* POSITIONED WITH `left`, NOT `transform`.
Three attempts went through transform and all three failed the same
way: the computed matrix stayed at one value no matter what was
written. Measured directly — setting style.transform to
translate(0px,-50%), even with !important, still rendered at 172px,
and there was no competing rule and no animation on the element. The
cause was never identified; `left` is not subject to it, transitions
identically, and the vertical centring keeps a static transform. */
transform:translateY(-50%);
background:#fff;border:1px solid rgba(23,23,23,.16);
box-shadow:0 1px 3px rgba(23,23,23,.22);
pointer-events:none;z-index:3;
transition:left .26s cubic-bezier(.22,1,.28,1),box-shadow .24s var(--ease)}
/* The halo is the level rather than decoration, so it is a class the two
top levels carry — driven from JS, which already knows the level, rather
than from a custom property inside a shadow. */
.ag-effort-track[data-heat="smart"] .ag-effort-thumb{
box-shadow:0 1px 3px rgba(23,23,23,.22),0 0 8px color-mix(in srgb,var(--accent) 34%,transparent)}
.ag-effort-track[data-heat="max"] .ag-effort-thumb{
box-shadow:0 1px 3px rgba(23,23,23,.22),0 0 13px color-mix(in srgb,var(--accent) 52%,transparent)}
/* Dragging AT max: the halo gains a hard ring as well as the bloom, so the
handle reads as charged rather than merely glowing. */
.ag-effort-track.dragging[data-heat="max"] .ag-effort-thumb{
box-shadow:0 1px 3px rgba(23,23,23,.22),
0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent),
0 0 18px color-mix(in srgb,var(--accent) 72%,transparent)}
/* No easing while dragging — a 260ms ease chasing a pointer trails behind
it, which reads as stutter rather than as smoothness. */
.ag-effort-track.dragging .ag-effort-thumb{transition:box-shadow .24s var(--ease)}
.ag-effort-track.dragging .ag-effort-thumb{left:var(--x,0)}
:root[data-theme="dark"] .ag-effort-thumb{background:#f6f6f8;border-color:rgba(0,0,0,.45);
box-shadow:0 1px 4px rgba(0,0,0,.6)}
.ag-effort-range:focus-visible ~ .ag-effort-thumb{
box-shadow:0 1px 3px rgba(23,23,23,.26),0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent)}
.ag-effort-track:active .ag-effort-thumb{transition-duration:.1s}
.ag-effort-range{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:4;
-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.ag-effort-range:focus{outline:none}
.ag-effort-range::-webkit-slider-runnable-track{height:26px;background:transparent}
.ag-effort-range::-moz-range-track{height:26px;background:transparent}
.ag-effort-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
width:24px;height:26px;background:transparent;border:0}
.ag-effort-range::-moz-range-thumb{width:24px;height:26px;background:transparent;border:0}
/* The same hint the reference carries: enter commits and closes. */
.ag-effort-enter{flex:none;width:15px;height:15px;color:var(--mut);opacity:.5}
@media (prefers-reduced-motion:reduce){
/* Reduced motion means no motion, not no control. This group used to be
display:none in one rule - pill, popover, thumb and all - so anyone
with the OS setting on lost the ability to change effort at all
rather than losing the animation. The control stays; its transitions
and animations do not. */
.ag-effort-pop,.ag-effort-tip,.ag-effort-head .v,.ag-effort-thumb,
.ag-effort-pill,.ag-effort-track .dots{transition:none;animation:none}
/* These exist only in order to move, so there is nothing left of them
to keep. The charge goes with them: a band that is supposed to arrive
is not worth having if it cannot. */
.ag-effort-track .fill,
.ag-effort-track .particles,
.ag-effort-track .sheen{display:none}
}
@media (max-width:900px){
/* Anchor to the COMPOSER, not the pill and not the viewport.
Pill-anchored, the popover started at -65px on a 375px screen —
measured, with Faster off the left edge. Viewport-anchored was worse
in a way that only showed on the new-chat screen, where the composer
is centred in the hero rather than pinned to the bottom, so it landed
below the composer on top of the tiles. Making the wrap static hands
the containing block to .ag-box, which is already position:relative
and is the thing this should track. */
.ag-effort-wrap{position:static}
.ag-effort-pop{left:0;right:0;width:auto;bottom:calc(100% + 10px);transform-origin:50% 100%}
.ag-effort-tip{display:none}
}
.ag-model-wrap{position:relative;display:inline-flex;flex:none}
.ag-model-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.8rem;font-weight:600;
cursor:pointer;transition:.16s;user-select:none}
.ag-model-pill:hover{border-color:var(--line-hover);background:var(--paper-2)}
.ag-model-pill svg{width:11px;height:11px;color:var(--mut);transition:transform .16s ease}
.ag-model-pill.open svg{transform:rotate(180deg)}
/* Claude & Replit Popover Menu */
/* Opens DOWNWARD from the pill, like an ordinary dropdown, and is sized
to fit its content — no max-height, no inner scrollbar. Opening upward
was what forced the cap in the first place: the pill sits low in the
composer, so an upward panel ran out of room above and had to scroll
inside itself. Downward it has the whole page below it, and the
section it lives in scrolls if the viewport is genuinely too short. */
.ag-model-popover{position:absolute;top:calc(100% + 8px);bottom:auto;right:0;left:auto;
width:min(250px,calc(100vw - 28px));
max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;
box-shadow:0 16px 40px -10px rgba(11,22,38,.45);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:100}
.ag-model-popover.open{opacity:1;visibility:visible;transform:none}
/* Anchored to the pill's TOP edge instead of its bottom. The entrance
slide flips with it so the panel still moves toward the pill. */
.ag-model-popover.drop-up{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)}
.ag-model-popover.drop-up.open{transform:none}
/* Flipped when there is no room below — the composer sits at the bottom
of the screen once a conversation starts, and a downward panel there
is simply cut off by the viewport. Direction is chosen at open time
(see the pill handler); CSS cannot see the available space. */
.pop-section-ttl{font-size:.66rem;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;padding:5px 8px 4px}
.pop-option{display:flex;align-items:flex-start;gap:10px;width:100%;padding:6px 8px;border:1px solid transparent;
border-radius:10px;background:none;color:var(--ink);cursor:pointer;text-align:left;transition:.14s}
.pop-option:hover{background:var(--paper-2)}
.pop-option.on{background:var(--paper-2);border-color:var(--line)}
.pop-option .pop-ic{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:1px;color:var(--accent)}
.pop-option .pop-ic svg{width:16px;height:16px}
.ag-pill-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
.ag-pill-icon svg{width:13px;height:13px}
.pop-option .pop-text b{display:block;font-size:.84rem;font-weight:700;color:var(--ink)}
.pop-option .pop-text small{display:block;font-size:.72rem;color:var(--mut);line-height:1.25;margin-top:1px}
.pop-divider{height:1px;background:var(--line);margin:4px 0}
.pop-switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:10px;cursor:pointer}
.pop-switch-row:hover{background:var(--paper-2)}
.pop-switch-row .pop-text b{display:block;font-size:.83rem;font-weight:700;color:var(--ink)}
.pop-switch-row .pop-text small{display:block;font-size:.73rem;color:var(--mut);margin-top:2px}
/* Provider rows. Only providers that can actually RUN are listed: Souqi's
own models plus whatever the account has saved a key for in Settings.
Unconfigured providers are not shown as greyed-out teasers — a picker
full of options that fail on send is worse than a short one — they are
reached through the "Other providers" link at the bottom instead. */
.pop-prov{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid transparent;
border-radius:10px;background:none;color:var(--ink);cursor:pointer;text-align:left;transition:.14s;font:inherit}
.pop-prov:hover{background:var(--paper-2)}
.pop-prov.on{background:var(--paper-2);border-color:var(--line)}
.pop-prov .nm{flex:1;font-size:.83rem;font-weight:600}
.pop-prov .st{font-size:.68rem;font-weight:600;color:var(--mut);white-space:nowrap}
.pop-prov .st.ready{color:#2ea87a}
.pop-prov .st.add{color:var(--accent)}
.pop-more{text-decoration:none}
.pop-more .nm{font-weight:500;color:var(--mut)}
.pop-more .st{display:inline-flex;align-items:center;gap:3px}
.pop-more .st svg{width:12px;height:12px}
.pop-more:hover .nm{color:var(--ink)}
/* iOS / Claude style toggle switch */
.ag-switch{position:relative;display:inline-block;width:34px;height:20px;flex:none}
.ag-switch input{opacity:0;width:0;height:0}
.ag-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--stone);
transition:.2s;border-radius:999px}
.ag-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background:#fff;
transition:.2s;border-radius:50%}
.ag-switch input:checked + .ag-slider{background:#7c3aed}
.ag-switch input:checked + .ag-slider:before{transform:translateX(14px)}
/* Voice Input Microphone button */
.ag-voice-btn{flex:none;width:30px;height:30px;border:1px solid var(--line);background:transparent;color:var(--ink-2);
border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:.16s}
.ag-voice-btn:hover{border-color:var(--line-hover);color:var(--ink)}
.ag-voice-btn svg{width:15px;height:15px}
.ag-voice-btn.listening{background:rgba(239,68,68,0.18);border-color:#ef4444;color:#ef4444;animation:micPulse 1.2s infinite alternate}
@keyframes micPulse{
0%{box-shadow:0 0 0 0 rgba(239,68,68,0.4);transform:scale(1)}
100%{box-shadow:0 0 0 6px rgba(239,68,68,0);transform:scale(1.08)}
}
/* Rounded square, not the old full circle — matches the attach button
and every other control's radius (see the sitewide rectangle-button
pass) rather than being the one round thing in the row. */
.ag-send{flex:none;width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;background:var(--stone);color:var(--ink-2);display:grid;place-items:center;transition:background .2s,color .2s,transform .16s,box-shadow .2s}
.ag-send svg{width:15px;height:15px}
.ag-send.live{background:var(--accent);color:#fff;box-shadow:0 2px 8px -2px rgba(26,166,223,.55)}
.ag-send.live:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 4px 12px -2px rgba(26,166,223,.6)}
.ag-send.live:active{transform:scale(.9)}
.ag-send:disabled{cursor:not-allowed}
.ag-send.is-cancel{background:rgba(239,68,68,0.15);color:#ef4444}
.ag-send.is-cancel:hover{background:#ef4444;color:#fff}
/* Launch: the arrow flies up and out, then the button settles back —
the send has visibly LEFT rather than just greying out. Driven by a
class the submit handler adds and self-removes on animationend. */
.ag-send.sent svg{animation:agLaunch .45s var(--ease) both}
@keyframes agLaunch{
0%{transform:none;opacity:1}
45%{transform:translateY(-16px);opacity:0}
46%{transform:translateY(10px);opacity:0}
to{transform:none;opacity:1}
}
/* The composer briefly relaxes its focus ring as the message leaves. */
/* Palette-aware, or sending in Power mode flashes cyan through the
crimson. --glow-focus also spikes the bloom, so the send reads as a
flare rather than just a ring. */
.ag-box.sending{--glow-focus:1.6;border-color:rgb(var(--beam-a));
box-shadow:
0 0 0 3px rgba(var(--glow-a),.12),
0 0 40px -2px rgba(var(--glow-a),.30),
inset 0 1px 0 rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){
.ag-send.sent svg{animation:none}
}
/* The button row kept desktop metrics all the way down to 320px.
It is a nowrap flex row of fixed-width controls needing a constant
264px, and .ag-box offers 262 at 375, 246 at 360 and 206 at 320. So the
send button sat 2px past the rounded edge on an iPhone SE and 58px past
it on anything smaller — the arrow bolted to the outside of the composer.
Nothing above 640px changes.
.ag-brow-sp is a zero-width spacer that was still charged a gap on each
side; an auto margin on the attach button does the same job with one
fewer child in the row.
wrap is the floor, not the plan. Below about 340px the row runs out of
width whatever the metrics are, and a second line is a better answer
than a control sitting outside the box it belongs to. The row packs to
the end so that when it does wrap, send stays under the other buttons
on the right rather than jumping to the left margin. */
@media (max-width:640px){
.ag-box{padding-inline:10px}
.ag-brow{gap:4px;row-gap:6px;justify-content:flex-end}
.ag-brow-sp{display:none}
.ag-attach{margin-inline-end:auto}
.ag-attach,.ag-voice-btn{width:28px;height:28px}
.ag-send{width:30px;height:30px}
.ag-effort-pill{padding-inline:7px}
.ag-model-pill{padding-inline:7px}
}
.ag-empty{position:relative;padding:44px 20px 36px;color:var(--ink-2);text-align:center}
.ag-empty::before{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:620px;height:320px;
background:radial-gradient(ellipse at center, rgba(192, 132, 252, 0.38) 0%, rgba(56, 189, 248, 0.32) 45%, rgba(167, 139, 250, 0.15) 75%, transparent 100%);
filter:blur(55px);pointer-events:none;z-index:-1;opacity:0.88;
animation:replitHeroGlow 8s ease-in-out infinite alternate;
}
@keyframes replitHeroGlow{
0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:0.75}
50%{transform:translate(-48%,-52%) scale(1.08) rotate(4deg);opacity:0.95}
100%{transform:translate(-52%,-48%) scale(0.95) rotate(-3deg);opacity:0.8}
}
/* Solid ink, NOT a gradient across the whole line. A full-width text
gradient was what made this read as broken: the left half went
near-black, the right went cyan, and the eye had nowhere to land.
One accent word (.hi below) carries the colour instead — the same
technique, scoped small enough to read as a decision. */
/* Gemini's hero proportions: regular weight, moderate size, near-normal
tracking and open line-height — the airy, unhurried look comes from
NOT being bold. The visual interest lives in the composer's glow
below, so the type stays quiet on purpose. */
.ag-empty h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.85rem,3.6vw,2.9rem);
letter-spacing:-.01em;line-height:1.16;margin-bottom:14px;color:var(--ink);
opacity:0;animation:agIn .5s var(--ease) forwards}
/* Solid accent, no gradient/swash — at 400 weight a decorated word
fights the lighter type instead of lifting it. */
.ag-empty h2 .hi{color:var(--accent);white-space:nowrap;transition:color .25s var(--ease)}
/* Power Agent's crimson theme (see .ag-box.power-mode above) carries up
into the greeting too, so the whole hero reads as "armed" the moment
the mode is picked, not just the composer. */
body.power-mode .ag-empty h2 .hi{color:#e11d48}
/* New-chat-only extras: type tiles + example prompts, both hidden the
moment a first turn lands (see isFirstBuild in runTurn()) — the same
[hidden]-vs-class-display trap as everywhere else in this file, so the
override is repeated here rather than assumed. */
.ag-newchat-extras[hidden]{display:none}
.ag-type-tiles{display:flex;align-items:center;gap:12px;margin:24px 0 20px;justify-content:center}
.ag-tiles-arrow{flex:none;width:32px;height:32px;border:0;background:var(--paper-2);color:var(--ink-2);border-radius:8px;
display:grid;place-items:center;cursor:pointer;transition:.2s;font-weight:600}
.ag-tiles-arrow:hover{background:var(--stone);color:var(--ink);transform:scale(1.05)}
.ag-tiles-arrow svg{width:18px;height:18px}
/* Matches Replit's own left arrow at rest (visibly inert, not just
unclickable) — there's nothing to scroll TO at the start/end of the
row, or at all when all 5 tiles already fit, so the button says so
instead of looking clickable and silently doing nothing. */
.ag-tiles-arrow:disabled{opacity:.35;cursor:default;pointer-events:none}
.ag-tiles-arrow:disabled:hover{background:var(--paper-2);color:var(--ink-2);transform:none}
/* justify-content:safe center, not plain center — with overflow-x:auto,
plain center clips the START of the row off-screen with no way to
scroll back to it once content is wider than the track (a real
flexbox footgun). "safe" falls back to flex-start only when it would
otherwise overflow, so five tiles centre normally and a sixth added
later doesn't hide "Website" behind the left edge.
Found live: the comment above was already true, but the actual
value here was still plain "center" — the mismatch is exactly why
"Website" rendered cut off at the left edge with 8 tiles.
max-width caps the visible strip to exactly 5 tiles (5×80 + 4×12
gap = 448px) regardless of the composer's own width, so the arrows
page through a clean set of 5 instead of showing a fractional 6th —
scroll-snap is what makes each arrow click land exactly on a tile
boundary rather than wherever a fixed pixel scroll happened to stop. */
/* overflow-x:auto with no explicit overflow-y forces the Y axis to also
compute as auto (mixing visible with a non-visible value isn't
allowed) — so this box clips vertically too, and the hover lift/glow
on a tile were getting sliced off at the top edge. Top padding gives
them room inside the box instead of trying to fight the clip with
overflow-y:visible (which would just get forced back to auto). */
.ag-tiles-track{flex:0 1 auto;max-width:448px;display:flex;justify-content:safe center;gap:12px;
overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:14px 4px 4px}
.ag-tiles-track::-webkit-scrollbar{display:none}
.ag-tile{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;
color:var(--ink-2);font-size:.82rem;font-weight:500;cursor:pointer;width:80px;transition:.15s;scroll-snap-align:start}
.ag-tile .ic{width:56px;height:56px;border-radius:12px;background:var(--paper-2);border:1.5px solid var(--line);
display:grid;place-items:center;color:var(--ink-2);transition:.2s}
.ag-tile .ic svg{width:24px;height:24px}
.ag-tile:hover .ic{border-color:var(--line-hover);color:var(--ink);transform:translateY(-2px)}
.ag-tile.on .ic{background:var(--accent);border-color:var(--accent);color:#fff;
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent),0 4px 14px -4px color-mix(in srgb,var(--accent) 65%,transparent)}
.ag-tile.on{color:var(--ink);font-weight:600}
.ag-examples{text-align:center;margin-top:20px}
.ag-examples .lbl{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-2);margin-bottom:12px;font-weight:500}
.ag-examples .lbl button{border:0;background:none;color:var(--ink-2);cursor:pointer;width:20px;height:20px;
border-radius:6px;display:grid;place-items:center;transition:.15s}
.ag-examples .lbl button:hover{background:var(--paper-2);color:var(--ink);transform:rotate(60deg)}
.ag-examples .lbl button svg{width:14px;height:14px}
.ag-ex-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ag-ex-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
padding:8px 12px;font-size:.82rem;font-weight:400;cursor:pointer;transition:.15s}
.ag-ex-chip:hover{border-color:#b8cdd7;background:var(--paper-2)}
/* Recent projects — matched to Replit's own cards: a large neutral
thumbnail area holding one dark rounded tile (NOT a full-bleed
coloured panel with a giant letter, which is what this was), a
"View All" pill button rather than a bare text link, and body type at
regular weight in the UI font. */
.ag-recent {
margin: 56px auto 40px;
max-width: 860px;
width: 100%;
padding-top: 0;
border-top: 0;
box-sizing: border-box;
}
.ag-recent-head { display: flex; align-items: center; margin-bottom: 18px; width: 100%; }
.ag-recent-head h3 { font-family: var(--body); font-size: 1.16rem; font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.ag-recent-head button {
margin-inline-start: auto; display: flex; align-items: center; gap: 7px; border: 0;
background: var(--paper-2); color: var(--ink); font-size: 0.92rem; font-weight: 400; cursor: pointer;
padding: 9px 15px; border-radius: 9px; transition: 0.15s;
}
.ag-recent-head button:hover { background: var(--stone); }
.ag-recent-head button svg { width: 16px; height: 16px; }
/* Recent Projects Grid — Replit Style */
.ag-recent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
justify-content: stretch;
width: 100%;
box-sizing: border-box;
}
.ag-recent-empty {
grid-column: 1 / -1;
padding: 24px 16px;
color: var(--mut);
font-size: 0.86rem;
text-align: center;
line-height: 1.5;
border: 1px dashed var(--line);
border-radius: 14px;
}
/* The card itself is styles/components/project-card.css now, the same file
projects.html and deployments.html use. What stood here was a third copy
that had drifted — a flat 135px band instead of a 16/9 frame, a 56px tile
instead of 54, no inner highlight, no badge, and none of the sheen or
hover glow — so the same app looked like a different project depending on
which page you opened it from. The grid above stays: how many columns the
builder's landing screen wants is a page decision, not a card one. */
/* DESKTOP VIEW: 3 cards when preview is closed, 2 cards when preview is open */
@media (min-width: 901px) {
.has-preview .ag-recent,
.ag-split.has-preview .ag-recent {
max-width: 100% !important;
margin: 36px 0 24px !important;
}
.has-preview .ag-recent-grid,
.ag-split.has-preview .ag-recent-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Only the column count is a page decision. The card sizes itself from
its own stylesheet, including beside an open preview. */
}
/* MOBILE VIEW: ONLY 2 FIT HORIZONTALLY */
@media (max-width: 900px) {
.ag-recent {
max-width: 100% !important;
margin: 32px 0 20px !important;
}
.ag-recent-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* The card's own phone sizing lives with the card now; project-card.css
carries a max-width:640px block of its own. What was here scaled a
thumb and a body that this page no longer builds. */
}
/* No own height/sticky — the app shell (html/body/.ag-main, below) is
fixed to the viewport and this just fills its grid cell. It used to be
`position:sticky; height:100svh`, which sat BELOW a 64px header and so
made the document 64px taller than the screen: the whole page scrolled
and the header slid away, which reads as a bug rather than a layout. */
.ag-preview{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper-2)}
@media (min-width:901px){
/* Collapsed until something's been built, so the new-chat screen is
.ag alone rather than a wide empty pane beside a narrow chat — then
expands in step with .ag narrowing (both flex-basis transitions
fire together). Scoped to the SPLIT, which is a mouse shape: where
the panes swap instead of sitting side by side, .tab-hidden owns
showing and hiding this panel and the block below takes the
collapse back off. */
.ag-preview{flex:0 0 0;width:0;overflow:hidden;opacity:0;
transition:flex-basis .4s var(--ease),opacity .25s var(--ease)}
.ag-split.has-preview .ag-preview{flex:1 1 auto;width:auto;opacity:1;
transition:flex-basis .4s var(--ease),opacity .3s var(--ease) .1s}
}
/* THE PANE SWAP IS A TOUCH SHAPE, NOT A NARROW ONE.
Same reasoning as the settings overlay further down, and the same
device: an iPad in landscape reports 1180 or 1366 CSS pixels, wider
than most laptops. Every rule that decided this by width alone
handed a tablet the desktop split — so "Preview" opened a 340px
sidecar beside a chat column that stayed put, on a screen with no
mouse to justify either. The pointer is what separates them.
Two things have to move up here, because both were written for the
phone and stop at 900px:
- .tab-hidden has to actually hide. It does its hiding inside
max-width:900, so above that the class went on and nothing
happened — which is why the chat stayed on screen next to the
preview.
- .ag-preview has to come out of the collapse above. That rule
assumes the split and pins the pane to width:0 unless
.has-preview is set, so even with the chat gone the preview
would have opened to nothing. Here the preview IS the screen
rather than a column beside the chat, so being the pane that is
not hidden is the whole condition.
The toggle button itself is a child of .ag-main, a sibling of
.ag-split — so hiding .ag never takes "Back to chat" down with it
and there is always a way out. */
@media (hover:none) and (pointer:coarse){
.ag.tab-hidden,.ag-preview.tab-hidden{display:none !important}
.ag.tab-hidden .ag-composer{display:none !important}
.ag-preview:not(.tab-hidden){flex:1 1 auto;width:auto;opacity:1;overflow:visible}
}
.ag-topbar{display:flex;align-items:center;width:100%;border-bottom:1px solid var(--line);flex:none}
/* A direct child of .ag-preview (position:relative), not of
.ag-pv-stage — .ag-pv-stage clips (overflow:hidden), which left no
room to sit any higher than its own padding allowed. .ag-preview
itself doesn't clip, so this can sit right at the top of the panel,
centered above whichever device mockup .ag-pv-stage is showing. */
/* ---- Publish ----
The class has been styled since the beginning (see the phone rule
further down, which reflows "label + device toggle + Publish") but no
element ever carried it, so the button did not exist. It sits opposite
the device toggle rather than inside it: those switch a preview size,
this ships the app, and they should not look like the same kind of
control. */
.ag-pv-publish{position:absolute;top:6px;right:150px;z-index:46;
display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;
border:0;border-radius:9px;background:var(--accent);color:#fff;
font-family:var(--body);font-size:.82rem;font-weight:600;cursor:pointer;
box-shadow:0 4px 14px -6px rgba(11,22,38,.4);transition:background .15s,opacity .15s}
.ag-pv-publish:hover{background:var(--accent-2)}
.ag-pv-publish:disabled{opacity:.55;cursor:default}
.ag-pv-publish svg{width:14px;height:14px;flex:none}
/* Once it is live the button becomes the way to the app. */
.ag-pv-publish.live{background:#22a565}
.ag-pv-publish.live:hover{background:#1b8b53}
.ag-pv-devices{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:45;
display:flex;gap:2px;align-items:center;background:var(--card);border:1px solid var(--line);
border-radius:9px;padding:3px;box-shadow:0 4px 14px -6px rgba(11,22,38,.28)}
.ag-pv-devices button{border:0;background:none;width:28px;height:26px;border-radius:6px;display:grid;place-items:center;
color:var(--ink-2);cursor:pointer;transition:.14s}
.ag-pv-devices button svg{width:15px;height:15px}
.ag-pv-devices button:hover{background:var(--tint-2);color:var(--accent)}
.ag-pv-devices button.on{background:var(--tint-2);color:var(--accent)}
.ag-pv-devices:disabled,.ag-pv-devices[aria-disabled="true"] button{opacity:.5;cursor:default;pointer-events:none}
/* Extra padding-top reserves real room for the floating device toggle
(an absolutely-positioned sibling in .ag-preview, so it doesn't
naturally push this box's centered content down on its own) — without
it, the mockup centers through the toggle's own space on a shorter
viewport and the two visibly collide. */
/* perspective is what makes the desktop frame's lid-open rotateX read
as a hinge instead of a vertical squash — see @keyframes macEnter. */
/* container-type:size is what lets every mockup below size itself
against THIS BOX in both axes — 100cqw/100cqh are the stage's content
width and height, padding already subtracted.
It is needed because a device has one dimension and a ratio, and the
limit that binds is usually on the OTHER axis: the iPad is sized by
height, but what clipped it was the pane being too narrow, and a
percentage inside a height property can only ever see the parent's
height. Container units cross the axes, so "as tall as this box
allows, but no taller than its width can carry" is one min(). The
stage's own size never came from its contents (it is flex:1 in a
column with a definite height, or a min-height below 901px), so size
containment changes nothing about how big it is. */
.ag-pv-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
padding:clamp(12px,2.5vw,24px);padding-top:64px;overflow:hidden;background:var(--paper);
container-type:size;
perspective:1600px}
.ag-pv-frame{
position:relative;
transition:all .3s cubic-bezier(0.16,1,0.3,1);
flex:none;box-sizing:border-box;
overflow:hidden;
}
/* iframe fills the screen wrapper — base, overridden per-device below.
Scrollbar hidden on the FRAME itself (not injected into its content),
which is what makes this work even for the WebContainer preview —
that's a genuinely cross-origin document (its own dev-server URL), so
nothing this page injects into its content can ever reach it; hiding
chrome on the