/* LL AI v65.2 — unified sidebar motion for Chat + Images.
   PATCH: compositor-first Images transition. Timing is still exactly 320ms.
   No UI/features removed; only expensive per-frame layout work is eliminated. */
:root{
  --ll-sidebar-motion:320ms;
  --ll-sidebar-fade:320ms;
  --ll-sidebar-ease:cubic-bezier(.22,.78,.22,1);
  --ll-images-flip-x:0px;
}

/* Chat keeps the original visible 320ms grid + sidebar choreography. */
.app{
  transition:grid-template-columns var(--ll-sidebar-motion) var(--ll-sidebar-ease)!important;
}
.side,
body.v632ImagesOpen .side{
  transition:transform var(--ll-sidebar-motion) var(--ll-sidebar-ease),opacity var(--ll-sidebar-fade) ease!important;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}
.sidebarScrim,
body.v632ImagesOpen .sidebarScrim{
  transition:opacity var(--ll-sidebar-fade) ease!important;
}

/*
  Images used to animate grid-template-columns + workspace left + composer left/width
  at the same time. Those are layout-triggering properties and made the whole gallery
  reflow on every frame. In Images, the app grid now snaps to its final geometry
  immediately while the visible sidebar and Images workspace still travel for the
  exact same 320ms. JS applies a FLIP offset to the entire workspace so the user sees
  the same motion without the reflow storm.
*/
body.v632ImagesOpen .app{
  transition:none!important;
}
body.v632ImagesOpen #imageStudio.v632Workspace{
  transition:none!important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translate3d(0,0,0);
  isolation:isolate;
}
body.v632ImagesOpen.llSidebarAnimating #imageStudio.v632Workspace{
  transform:translate3d(var(--ll-images-flip-x),0,0)!important;
  transition:none!important;
}
body.v632ImagesOpen.llSidebarAnimating.llSidebarSettling #imageStudio.v632Workspace{
  transition:transform var(--ll-sidebar-motion) var(--ll-sidebar-ease)!important;
}

/* The composer/status/reference keep their normal behavior, but no longer animate
   left/width while their parent workspace is already moving horizontally. */
body.v632ImagesOpen #imageStudio .imagePromptBar,
body.v632ImagesOpen.ll649ImageMotion #imageStudio .imagePromptBar{
  transition:
    transform var(--ll-sidebar-motion) var(--ll-sidebar-ease),
    opacity var(--ll-sidebar-fade) ease!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.v632ImagesOpen #imageStudio .imageStatus,
body.v632ImagesOpen #imageStudio .v632ReferencePill{
  transition:opacity var(--ll-sidebar-fade) ease!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Keep the large Images surface cheap to composite during those 320ms. */
body.llSidebarAnimating #imageStudio .imageStudioBody,
body.llSidebarAnimating #imageStudio .imageGrid,
body.llSidebarAnimating #imageStudio .v632PresetRail{
  scroll-behavior:auto!important;
  overscroll-behavior:none!important;
}
body.llSidebarAnimating #imageStudio .imageGrid,
body.llSidebarAnimating #imageStudio .v632PresetRail{
  contain:layout paint style!important;
  pointer-events:none;
}
body.llSidebarAnimating #imageStudio .imageCard,
body.llSidebarAnimating #imageStudio .v632PresetArt{
  transition:none!important;
}
body.llSidebarAnimating .side{box-shadow:none!important}

/* Backdrop blur is visually restored immediately after the same 320ms transition.
   Disabling it only while the surface is physically moving avoids repeated full-screen
   blur recomposition on tablet GPUs. Nothing is removed from the settled design. */
body.v632ImagesOpen.llSidebarAnimating #imageStudio .imageStudioTop,
body.v632ImagesOpen.llSidebarAnimating #imageStudio .imagePromptBar{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Legacy switching guards remain compatible, but do not change timing. */
body.v632ImagesOpen.ll6492ImageSwitching #imageStudio .imageStudioBody,
body.v632ImagesOpen.ll6492ImageSwitching #imageStudio .v632PresetRail,
body.v632ImagesOpen.ll6492ImageSwitching #imageStudio .imageGrid{
  scroll-behavior:auto!important;
}

@media(max-width:800px){
  /* Mobile uses an overlay sidebar; the Images workspace itself does not shift. */
  body.v632ImagesOpen #imageStudio.v632Workspace{
    transform:none!important;
    will-change:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .app,.side,.sidebarScrim,
  body.v632ImagesOpen .app,
  body.v632ImagesOpen .side,
  body.v632ImagesOpen #imageStudio.v632Workspace,
  body.v632ImagesOpen #imageStudio .imagePromptBar,
  body.v632ImagesOpen #imageStudio .imageStatus,
  body.v632ImagesOpen #imageStudio .v632ReferencePill{
    transition:none!important;
  }
}