/* Generation reveal overlay (see /generation-reveal.js). Presentation only:
   every rule here is scoped to .asr-reveal* classes the module adds and
   removes itself, so nothing else on the page changes when it is absent.

   The overlay is absolutely positioned over the element it covers and never
   takes input, so it cannot shift layout or block a click. */

.asr-reveal{
  position:absolute;left:0;top:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  border-radius:inherit;
  opacity:1;
}
.asr-reveal--fill{inset:0;width:auto;height:auto}
.asr-reveal-canvas{display:block;width:100%;height:100%}

/* The placeholder a chat reply gets while its image or video is generated:
   roughly the size the result will be, so the arrival is not a jump from a
   dot to a picture. */
.asr-reveal-slot{
  position:relative;
  /* An explicit width: the reply bubble shrinks to its content, so a percentage collapsed this to a small square. */
  width:min(640px,80vw);
  max-width:100%;
  min-width:min(320px,70vw);
  aspect-ratio:1 / 1;
  max-height:60vh;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:10px;
  background:#040308;
}
.asr-reveal-slot[data-reveal-kind="video"]{width:min(760px,86vw);aspect-ratio:16 / 9}
html.light-mode .asr-reveal-slot,
body.light-mode .asr-reveal-slot{background:#fbfbfd;box-shadow:inset 0 0 0 1px rgba(118,108,160,.18)}

/* An <img> whose bytes have not arrived yet: kept out of the flow while the
   slot stands in for it (it still loads -- a hidden image is fetched). */
.asr-reveal-hold{display:none !important}

/* Progressive focus on the media behind the sweep. The blur amount is driven
   per frame by the module; never applied to an iframe. The clip keeps the
   blur from bleeding a halo outside the media's own (rounded) box. */
.asr-reveal-focus{filter:blur(var(--asr-blur,0px));clip-path:inset(0 round var(--asr-radius,0px))}

/* A mono caption in the corner: "Rendering image". aria-hidden with the rest
   of the overlay -- the surfaces keep their own status text for readers. */
.asr-reveal-label{
  position:absolute;left:12px;bottom:10px;
  font:600 10px/1 ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.16em;text-transform:uppercase;
  color:#a5f3fc;opacity:.78;
  text-shadow:0 0 10px rgba(34,211,238,.55);
  transition:opacity .25s ease;
  white-space:nowrap;
}
.asr-reveal-label::after{
  content:"";display:inline-block;width:.6em;height:1em;margin-left:.45em;vertical-align:-.15em;
  background:currentColor;animation:asr-reveal-caret 1s steps(1) infinite;
}
.asr-reveal-label.is-leaving{opacity:0;transition:none}
.asr-reveal[data-reveal-surface="liveloop"] .asr-reveal-label{color:var(--llv-accent,#c4b5fd);text-shadow:0 0 12px color-mix(in srgb,var(--llv-a1,#8b5cf6) 70%,transparent);left:18px;bottom:16px}
.asr-reveal[data-reveal-theme="light"] .asr-reveal-label{color:#4338ca;text-shadow:none;opacity:.7}
.asr-reveal[data-reveal-theme="light"][data-reveal-surface="liveloop"] .asr-reveal-label{color:var(--llv-a1,#6d28d9)}
.asr-reveal.is-compact .asr-reveal-label{display:none}
@keyframes asr-reveal-caret{50%{opacity:0}}

/* Low-power fallback: no canvas, a CSS shimmer over the same field colours. */
.asr-reveal--lite{
  background:
    linear-gradient(105deg,transparent 30%,rgba(165,243,252,.14) 45%,rgba(167,139,250,.2) 50%,transparent 65%) 0 0 / 250% 100%,
    repeating-linear-gradient(0deg,rgba(140,120,255,.07) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(90deg,rgba(140,120,255,.07) 0 1px,transparent 1px 12px),
    radial-gradient(circle at 50% 42%,#120a26,#040308 75%);
  animation:asr-reveal-shimmer 2.4s linear infinite;
}
.asr-reveal--lite[data-reveal-theme="light"]{
  background:
    linear-gradient(105deg,transparent 30%,rgba(99,102,241,.10) 45%,rgba(67,56,202,.14) 50%,transparent 65%) 0 0 / 250% 100%,
    repeating-linear-gradient(0deg,rgba(118,108,160,.13) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(90deg,rgba(118,108,160,.13) 0 1px,transparent 1px 12px),
    radial-gradient(circle at 50% 42%,#f0eef7,#fbfbfd 75%);
}
.asr-reveal--lite[data-reveal-surface="liveloop"]{opacity:.62}
@keyframes asr-reveal-shimmer{from{background-position:130% 0,0 0,0 0,0 0}to{background-position:-130% 0,0 0,0 0,0 0}}

@media (prefers-reduced-motion:reduce){
  .asr-reveal--lite{animation:none}
  .asr-reveal-label::after{animation:none}
}