/* Lavender Lotus Studio 8.0.9 — mobile Design Studio reliability rebuild */

/* Sidebar must fully own the screen while open; nothing in the editor may sit above it. */
@media (max-width: 900px) {
  body.sidebar-open { overflow: hidden !important; }
  body.sidebar-open #mobileBackdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    background: rgba(32, 25, 29, .42) !important;
    pointer-events: auto !important;
  }
  body.sidebar-open #sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 395px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
  }
  body.sidebar-open #closeSidebar {
    position: sticky !important;
    top: 12px !important;
    margin-left: auto !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
  }
  body.sidebar-open .main-shell,
  body.sidebar-open .vdp-scene-toolbar,
  body.sidebar-open .vdp-mobile-editor-dock,
  body.sidebar-open .vdp-mobile-sheet,
  body.sidebar-open .vdp-mobile-editor-scrim,
  body.sidebar-open .v8-mobile-dock,
  body.sidebar-open .studio-update-banner,
  body.sidebar-open .lls808-add-sheet,
  body.sidebar-open .lls808-upload-progress {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* A single, predictable mobile canvas flow. The page scrolls; internal rails become sheets. */
@media (max-width: 820px), (pointer: coarse) {
  body.vdp-mobile-editor-active { overflow-y: auto !important; overscroll-behavior-y: auto !important; }
  body.vdp-mobile-editor-active .content { padding-bottom: 112px !important; }
  body.vdp-mobile-editor-active .vdp-workspace {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }
  body.vdp-mobile-editor-active .vdp-canvas-column {
    width: 100% !important;
    padding-bottom: 96px !important;
    overflow: visible !important;
  }
  body.vdp-mobile-editor-active .vdp-stage-card,
  body.vdp-mobile-editor-active .vdp-stage-viewport,
  body.vdp-mobile-editor-active .vdp-stage-sizer {
    max-width: 100% !important;
  }
  body.vdp-mobile-editor-active .vdp-stage-viewport {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  body.vdp-mobile-editor-active .vdp-left-rail,
  body.vdp-mobile-editor-active .vdp-inspector {
    display: none !important;
  }
  body.vdp-mobile-editor-active .vdp-workspace.mobile-assets-open .vdp-left-rail,
  body.vdp-mobile-editor-active .vdp-workspace.mobile-inspector-open .vdp-inspector {
    display: block !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto !important;
    max-height: min(67dvh, 610px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 760 !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 70px rgba(38, 27, 32, .34) !important;
    background: #fffdfb !important;
  }
  body.vdp-mobile-editor-active .vdp-assets-panel,
  body.vdp-mobile-editor-active .vdp-inspector {
    max-height: none !important;
    overflow: visible !important;
  }
  body.vdp-mobile-editor-active .vdp-asset-grid {
    max-height: none !important;
    overflow: visible !important;
  }
  body.vdp-mobile-editor-active .vdp-mobile-editor-scrim:not([hidden]) {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 740 !important;
    background: rgba(40, 31, 35, .26) !important;
    border: 0 !important;
  }

  /* Compact edit sheet: selected photo remains visible above it. */
  body.vdp-mobile-editor-active .vdp-mobile-sheet {
    display: none !important;
  }
  body.vdp-mobile-editor-active .vdp-workspace.mobile-edit-open .vdp-mobile-sheet:not(.vdp-mobile-sheet-empty) {
    display: block !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-height: min(31dvh, 270px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    margin: 0 !important;
    z-index: 770 !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 70px rgba(38, 27, 32, .34) !important;
  }
  body.vdp-mobile-editor-active .vdp-mobile-primary {
    grid-template-columns: repeat(5, 72px) !important;
    justify-content: start !important;
  }
  body.vdp-mobile-editor-active .vdp-mobile-sliders {
    grid-template-columns: 1fr 1fr !important;
  }
  body.vdp-mobile-editor-active .vdp-mobile-gesture-tip { display: none !important; }

  .vdp-mobile-editor-dock {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    z-index: 780 !important;
  }

  /* Cutout editor shows actual transparency with a checkerboard, never a fake black preview. */
  .vdp-cutout-canvas-wrap {
    background-color: #f7f4f1 !important;
    background-image:
      linear-gradient(45deg, #ddd6d1 25%, transparent 25%),
      linear-gradient(-45deg, #ddd6d1 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ddd6d1 75%),
      linear-gradient(-45deg, transparent 75%, #ddd6d1 75%) !important;
    background-size: 22px 22px !important;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0 !important;
  }
  .vdp-cutout-canvas-wrap canvas { background: transparent !important; }
}

/* Reliable mobile add/upload action sheet. */
.lls808-add-sheet[hidden] { display: none !important; }
.lls808-add-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  align-items: end;
  background: rgba(35, 27, 31, .42);
  padding: 12px;
}
.lls808-add-panel {
  width: min(100%, 560px);
  margin: 0 auto calc(env(safe-area-inset-bottom, 0px) + 4px);
  border-radius: 28px;
  background: #fffdfb;
  box-shadow: 0 28px 80px rgba(37, 27, 32, .36);
  padding: 18px;
  display: grid;
  gap: 12px;
}
.lls808-add-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lls808-add-panel header div { display: grid; gap: 4px; }
.lls808-add-panel header strong { font-family: var(--v8-display, Georgia, serif); font-size: 1.55rem; }
.lls808-add-panel header span { color: #7d7076; font-size: .72rem; line-height: 1.45; }
.lls808-add-panel header button { width: 42px; height: 42px; border: 0; border-radius: 999px; background: #f0e9e8; font-size: 1.35rem; }
.lls808-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lls808-add-grid button {
  min-height: 86px;
  border: 1px solid rgba(102, 75, 88, .14);
  border-radius: 18px;
  background: #f8f3f2;
  color: #392c32;
  padding: 13px;
  text-align: left;
  display: grid;
  gap: 4px;
}
.lls808-add-grid button strong { font-size: .82rem; }
.lls808-add-grid button span { color: #827278; font-size: .62rem; line-height: 1.35; }
.lls808-add-grid button.primary { background: linear-gradient(145deg, #5e3f50, #3d2c35); color: #fff; }
.lls808-add-grid button.primary span { color: rgba(255,255,255,.72); }
.lls808-add-cancel { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: #765f69; font-weight: 850; }

.lls808-upload-progress {
  position: fixed;
  left: 50%;
  bottom: calc(98px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2147482500;
  border-radius: 999px;
  background: #2d2328;
  color: #fff;
  padding: 11px 16px;
  font-size: .68rem;
  font-weight: 800;
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
}
.lls808-upload-progress[hidden] { display: none !important; }

@media (min-width: 821px) {
  .lls808-add-sheet { align-items: center; }
}

/* Clear one-tap cutout choices and an image-first phone layout. */
.vdp-cutout-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vdp-cutout-quick button { min-height: 42px; border: 1px solid #ddcfd4; border-radius: 11px; background: #fff; color: #5e3f4d; font-size: .6rem; font-weight: 850; padding: 7px; }
@media (max-width: 820px), (pointer: coarse) {
  .vdp-cutout-overlay { z-index: 2147483200 !important; }
  .vdp-cutout-dialog { height: 100dvh !important; max-height: 100dvh !important; }
  .vdp-cutout-dialog > header { padding: 12px 14px !important; }
  .vdp-cutout-dialog > header p { display: none !important; }
  .vdp-cutout-body { display: flex !important; flex-direction: column !important; overflow-y: auto !important; }
  .vdp-cutout-body > main { order: 1 !important; min-height: 300px !important; padding: 10px !important; flex: 0 0 auto !important; }
  .vdp-cutout-canvas-wrap canvas { max-width: 94vw !important; max-height: 43dvh !important; }
  .vdp-cutout-body > aside { order: 2 !important; display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; border: 0 !important; padding: 14px !important; }
  .vdp-cutout-dialog > footer { position: sticky !important; bottom: 0 !important; z-index: 3 !important; background: #fffdfb !important; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
}