/* ==========================================================
   Studio Non-Blocking Tool Drawers
   Desktop: right-side drawer with the card workspace resized.
   Tablet/phone: bottom drawer, leaving the card visible above.
   ========================================================== */

:root{
  --studio-drawer-width:clamp(350px,34vw,480px);
}

/* Keep the Studio usable while a tool is open. */
body.background-studio-open,
body.image-studio-open,
body.shapes-studio-open,
body.alignment-studio-open,
body.print-studio-open,
body.history-studio-open,
body.sides-studio-open,
body.text-design-modal-open,
body.app-health-open{
  overflow:auto!important;
}

/* Shrink the workspace instead of covering the centered card. */
@media (min-width:901px){
  body.background-studio-open #appShell .workspace,
  body.image-studio-open #appShell .workspace,
  body.shapes-studio-open #appShell .workspace,
  body.alignment-studio-open #appShell .workspace,
  body.print-studio-open #appShell .workspace,
  body.history-studio-open #appShell .workspace,
  body.sides-studio-open #appShell .workspace,
  body.text-design-modal-open #appShell .workspace,
  body.app-health-open #appShell .workspace{
    margin-right:var(--studio-drawer-width)!important;
    transition:margin-right .22s ease!important;
  }
}

/* All Studio tools become non-blocking drawer containers. */
#backgroundStudioModal,
#imageStudioModal,
#shapesStudioModal,
#alignmentStudioModal,
#printStudioModal,
#historyStudioModal,
#sidesStudioModal,
#textDesignsModal,
#appHealthModal{
  position:fixed!important;
  inset:68px 0 38px auto!important;
  width:var(--studio-drawer-width)!important;
  height:auto!important;
  padding:10px!important;
  display:block!important;
  place-items:unset!important;
  pointer-events:none!important;
  background:transparent!important;
  z-index:7000!important;
}

/* Preserve existing hidden behavior. */
#backgroundStudioModal.hidden,
#imageStudioModal.hidden,
#shapesStudioModal.hidden,
#alignmentStudioModal.hidden,
#printStudioModal.hidden,
#historyStudioModal.hidden,
#sidesStudioModal.hidden,
#textDesignsModal.hidden,
#appHealthModal.hidden{
  display:none!important;
}

/* Remove the full-screen dark layer that blocked the card. */
#backgroundStudioModal .background-studio-backdrop,
#imageStudioModal .image-studio-backdrop,
#shapesStudioModal .shapes-studio-backdrop,
#alignmentStudioModal .alignment-studio-backdrop,
#printStudioModal .print-studio-backdrop,
#historyStudioModal .history-studio-backdrop,
#sidesStudioModal .sides-studio-backdrop,
#textDesignsModal .text-designs-modal-backdrop,
#appHealthModal .app-health-backdrop{
  display:none!important;
}

/* Real drawer panels. */
#backgroundStudioModal .background-studio-panel,
#imageStudioModal .image-studio-panel,
#shapesStudioModal .shapes-studio-panel,
#alignmentStudioModal .alignment-studio-panel,
#printStudioModal .print-studio-panel,
#historyStudioModal .history-studio-panel,
#sidesStudioModal .sides-studio-panel,
#textDesignsModal .text-designs-modal-panel,
#appHealthModal .app-health-panel{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  max-height:none!important;
  margin:0!important;
  overflow:auto!important;
  pointer-events:auto!important;
  border-radius:18px 0 0 18px!important;
  box-shadow:-18px 0 46px rgba(7,30,50,.34)!important;
  animation:studioDrawerIn .2s ease-out both!important;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

/* Make drawer headings and close buttons stay reachable. */
#backgroundStudioModal .background-studio-head,
#imageStudioModal .image-studio-head,
#shapesStudioModal .shapes-studio-head,
#alignmentStudioModal .alignment-studio-head,
#printStudioModal .print-studio-head,
#historyStudioModal .history-studio-head,
#sidesStudioModal .sides-studio-head,
#textDesignsModal .text-designs-modal-head,
#appHealthModal .app-health-head{
  position:sticky!important;
  top:-1px!important;
  z-index:5!important;
  padding-top:4px!important;
  padding-bottom:10px!important;
}

/* Ensure close controls remain visible above long tool content. */
#backgroundStudioModal [id^="close"],
#imageStudioModal [id^="close"],
#shapesStudioModal [id^="close"],
#alignmentStudioModal [id^="close"],
#printStudioModal [id^="close"],
#historyStudioModal [id^="close"],
#sidesStudioModal [id^="close"],
#textDesignsModal [id^="close"],
#appHealthModal [id^="close"]{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:8!important;
}

@keyframes studioDrawerIn{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}

/* Tablet and phone: use a bottom sheet so the upper card stays visible. */
@media (max-width:900px){
  #backgroundStudioModal,
  #imageStudioModal,
  #shapesStudioModal,
  #alignmentStudioModal,
  #printStudioModal,
  #historyStudioModal,
  #sidesStudioModal,
  #textDesignsModal,
  #appHealthModal{
    inset:auto 0 0 0!important;
    width:100%!important;
    height:min(58dvh,620px)!important;
    padding:8px 8px max(8px,env(safe-area-inset-bottom))!important;
  }

  #backgroundStudioModal .background-studio-panel,
  #imageStudioModal .image-studio-panel,
  #shapesStudioModal .shapes-studio-panel,
  #alignmentStudioModal .alignment-studio-panel,
  #printStudioModal .print-studio-panel,
  #historyStudioModal .history-studio-panel,
  #sidesStudioModal .sides-studio-panel,
  #textDesignsModal .text-designs-modal-panel,
  #appHealthModal .app-health-panel{
    border-radius:18px 18px 0 0!important;
    box-shadow:0 -18px 45px rgba(7,30,50,.34)!important;
    animation:studioSheetIn .2s ease-out both!important;
  }

  @keyframes studioSheetIn{
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* Very small phones get a compact, scrollable sheet. */
@media (max-width:520px){
  #backgroundStudioModal,
  #imageStudioModal,
  #shapesStudioModal,
  #alignmentStudioModal,
  #printStudioModal,
  #historyStudioModal,
  #sidesStudioModal,
  #textDesignsModal,
  #appHealthModal{
    height:min(62dvh,560px)!important;
    padding-inline:5px!important;
  }

  #backgroundStudioModal .background-studio-panel,
  #imageStudioModal .image-studio-panel,
  #shapesStudioModal .shapes-studio-panel,
  #alignmentStudioModal .alignment-studio-panel,
  #printStudioModal .print-studio-panel,
  #historyStudioModal .history-studio-panel,
  #sidesStudioModal .sides-studio-panel,
  #textDesignsModal .text-designs-modal-panel,
  #appHealthModal .app-health-panel{
    padding:14px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #backgroundStudioModal .background-studio-panel,
  #imageStudioModal .image-studio-panel,
  #shapesStudioModal .shapes-studio-panel,
  #alignmentStudioModal .alignment-studio-panel,
  #printStudioModal .print-studio-panel,
  #historyStudioModal .history-studio-panel,
  #sidesStudioModal .sides-studio-panel,
  #textDesignsModal .text-designs-modal-panel,
  #appHealthModal .app-health-panel{
    animation:none!important;
  }
}