/* LL AI v65.2 P2 — image result/chat layout repair.
   Keeps every image feature and the existing sidebar timing. This patch only
   fixes the image-task pane so the composer can never sit on top of the image. */

body.v634TaskOpen #imageStudio #v634TaskView{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

/* The scroll area owns only the conversation. The composer now occupies real
   layout space below it instead of floating over the generated result. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskScroll{
  flex:1 1 auto!important;
  min-height:0!important;
  padding:22px 18px 24px!important;
  scroll-padding-top:18px!important;
  scroll-padding-bottom:28px!important;
  overscroll-behavior:contain!important;
}

body.v634TaskOpen #imageStudio #v634TaskView .v634TaskInner{
  width:min(920px,100%)!important;
  padding-bottom:10px!important;
  gap:14px!important;
}

/* Stop the large black letterbox from becoming wider than the actual artwork. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResult{
  align-self:flex-start!important;
  width:fit-content!important;
  max-width:min(700px,82vw)!important;
  display:grid!important;
  gap:11px!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResult>img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(70dvh,680px)!important;
  object-fit:contain!important;
  background:transparent!important;
  border-radius:22px!important;
}

body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResultActions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding-bottom:2px!important;
}

/* Critical fix: composer is no longer absolute/floating. It gets its own row,
   so generated images, messages and action buttons never hide underneath it. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskComposer{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  width:min(820px,calc(100% - 28px))!important;
  margin:0 auto max(10px,env(safe-area-inset-bottom,0px))!important;
  z-index:6100!important;
  box-shadow:0 16px 44px rgba(0,0,0,.28)!important;
}

/* Keep the ready/status line attached to the result instead of floating in a
   huge empty band on landscape tablets. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskStatus{
  margin:1px 0 2px!important;
  min-height:0!important;
  line-height:1.35!important;
}

@media (orientation:landscape) and (max-height:820px){
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskTop{
    height:58px!important;
    min-height:58px!important;
  }
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskScroll{
    padding:16px 18px 18px!important;
    scroll-padding-bottom:22px!important;
  }
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResult>img{
    max-height:min(66dvh,560px)!important;
  }
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskComposer{
    margin-bottom:max(6px,env(safe-area-inset-bottom,0px))!important;
  }
}

@media (max-width:800px){
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskScroll{
    padding:14px 10px 18px!important;
  }
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResult{
    max-width:96vw!important;
  }
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResult>img{
    max-height:min(64dvh,620px)!important;
  }
  body.v634TaskOpen #imageStudio #v634TaskView .v634TaskComposer{
    width:calc(100% - 12px)!important;
    margin-bottom:max(6px,env(safe-area-inset-bottom,0px))!important;
  }
}

/* LL AI v65.2 P5 — image-task presentation + hard per-task visual isolation.
   1) hidden really means hidden even against earlier !important layout rules;
   2) the loading UI is one clean card (no duplicate status line);
   3) stale result DOM is never visible while a different preset is generating. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResult[hidden],
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResult.is-resetting,
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskUserImage[hidden],
body.v634TaskOpen #imageStudio #v634TaskView .v634Creating[hidden],
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskError[hidden]{
  display:none!important;
}

/* The old second line ("Creating image…" / "Image ready…") was redundant and
   made the pane look like two different loading systems. Keep a single source
   of progress truth inside .v634Creating. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskStatus{
  display:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

body.v634TaskOpen #imageStudio #v634TaskView .v634Creating{
  align-self:flex-start!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr) 34px!important;
  align-items:center!important;
  gap:15px!important;
  width:min(620px,90vw)!important;
  max-width:620px!important;
  min-height:98px!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  padding:0 14px 0 0!important;
  overflow:hidden!important;
  border-radius:21px!important;
  border:1px solid color-mix(in srgb,var(--theme-line,rgba(255,255,255,.1)) 88%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card,#20232d) 95%,#0c0d10),color-mix(in srgb,var(--theme-card,#20232d) 89%,#08090c))!important;
  box-shadow:0 15px 42px rgba(0,0,0,.18)!important;
  contain:layout paint!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634Creating::before{
  content:none!important;
  display:none!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingArt{
  position:relative!important;
  align-self:stretch!important;
  display:block!important;
  min-height:98px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 58%,rgba(var(--accent-rgb,123,140,255),.28),transparent 45%),
    linear-gradient(145deg,rgba(var(--accent-rgb,123,140,255),.12),rgba(255,255,255,.025))!important;
  border-right:1px solid rgba(255,255,255,.045)!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingArt::after{
  content:""!important;
  position:absolute!important;
  inset:-25% -80%!important;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%)!important;
  transform:translateX(-42%)!important;
  animation:v6499TaskSweep 1.7s ease-in-out infinite!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingDots{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  right:0!important;
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.25px)!important;
  background-size:13px 13px!important;
  mask-image:linear-gradient(to top,black,transparent 78%)!important;
  opacity:.36!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingCopy{
  min-width:0!important;
  display:grid!important;
  gap:4px!important;
  padding:15px 0!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634Creating b{
  position:static!important;
  inset:auto!important;
  display:block!important;
  margin:0!important;
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  color:var(--theme-text,#fff)!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingSub{
  display:block!important;
  max-width:390px!important;
  color:var(--theme-muted,#9ca2b0)!important;
  font-size:11.5px!important;
  line-height:1.42!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingSpinner{
  width:18px!important;
  height:18px!important;
  justify-self:end!important;
  border-radius:50%!important;
  border:2px solid rgba(255,255,255,.13)!important;
  border-top-color:var(--accent,#818cff)!important;
  animation:v6499TaskSpin .82s linear infinite!important;
}
@keyframes v6499TaskSpin{to{transform:rotate(360deg)}}
@keyframes v6499TaskSweep{0%,25%{transform:translateX(-42%)}72%,100%{transform:translateX(42%)}}

/* Result actions stay visually subordinate to the artwork and never appear
   during a different task's loading state. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskResultActions button{
  min-width:0!important;
  height:40px!important;
  padding:0 14px!important;
  border-radius:13px!important;
  box-shadow:none!important;
}

@media (max-width:700px){
  body.v634TaskOpen #imageStudio #v634TaskView .v634Creating{
    grid-template-columns:78px minmax(0,1fr) 28px!important;
    gap:12px!important;
    min-height:86px!important;
    width:min(560px,94vw)!important;
  }
  body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingArt{min-height:86px!important}
  body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingSub{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
  body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingArt::after,
  body.v634TaskOpen #imageStudio #v634TaskView .v634CreatingSpinner{animation:none!important}
}

/* LL AI v65.48 — image-task overflow hardening.
   Provider text must never create a horizontal scroller that shifts the task
   pane under the sidebar. Error copy always wraps inside the conversation. */
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskScroll{
  overflow-x:hidden!important;
  max-width:100%!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskInner,
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskMessages{
  min-width:0!important;
  max-width:100%!important;
}
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskError,
body.v634TaskOpen #imageStudio #v634TaskView .v634TaskMessage{
  box-sizing:border-box!important;
  max-width:min(760px,100%)!important;
  min-width:0!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
