/**
 * Court Designer Mobile Fixes v10
 * Portrait phone: controls in page flow below the preview (no bottom sheet)
 * Landscape phone: side panel + focus view
 * 3D environment / background picker opens as a vertical list on mobile
 * Scoped to designer-embed page only
 */

/* ============================================
   1. PORTRAIT MOBILE — IN-FLOW CONTROLS
   ============================================ */

/* Does not depend on the JS class: if the script runs before React mounts the panel, CSS still wins. */
@media (max-width: 767px) and (orientation: portrait) {
  body.designer-embed .designer-stage {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.designer-embed .designer-root-wrap {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.designer-embed #root {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.designer-embed #root .md\:hidden {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Preview / canvas block */
  body.designer-embed #root .md\:hidden > div:has(canvas) {
    flex: none !important;
    position: relative !important;
    width: 100% !important;
    height: min(52dvh, 420px) !important;
    min-height: 280px !important;
    max-height: none !important;
  }

  body.designer-embed :is(.designer-controls-panel, #root .md\:hidden > div[class*="rounded-t-2xl"]) {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
    will-change: auto !important;
    flex: none !important;
    border-radius: 0 !important;
    transform: none !important;
    top: auto !important;
    box-shadow: none !important;
  }

  body.designer-embed :is(.designer-controls-panel, #root .md\:hidden > div[class*="rounded-t-2xl"]) > div[class*="cursor-grab"] {
    display: none !important;
  }

  body.designer-embed :is(.designer-controls-panel, #root .md\:hidden > div[class*="rounded-t-2xl"]) > div:last-child {
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body.designer-embed :is(.designer-controls-panel, #root .md\:hidden > div[class*="rounded-t-2xl"]) > div:last-child > div:first-child {
    touch-action: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
  }

  body.designer-embed :is(.designer-controls-panel, #root .md\:hidden > div[class*="rounded-t-2xl"]) > div:last-child > div[class*="overflow-y-auto"] {
    flex: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
  }
}

/* ============================================
   1B. LANDSCAPE MOBILE - SIDE PANEL
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
  body.designer-embed #root {
    min-height: 0 !important;
    height: 100% !important;
  }

  /* Sheet becomes a right sidebar in landscape */
  body.designer-embed .designer-controls-panel {
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    height: auto !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hide handle in landscape */
  body.designer-embed .designer-controls-panel > div[class*="cursor-grab"] {
    display: none !important;
  }

  /* Content shell fills sidebar; inner overflow-y-auto scrolls */
  body.designer-embed .designer-controls-panel > div:last-child {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body.designer-embed .designer-controls-panel > div:last-child > div[class*="overflow-y-auto"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================
   2. SHARE DESIGN MODAL - MOBILE FIXES
   ============================================ */

@media (max-width: 767px) {
  /* Fix B: Fix the will-change containing block issue */
  body.designer-embed .absolute.inset-0.will-change-transform {
    will-change: auto !important;
    transform: none !important;
  }

  /* Modal backdrop overlay */
  body.designer-embed div[role="dialog"] + div[class*="fixed"] {
    max-height: 100dvh !important;
    overflow-y: auto !important;
  }

  /* v4: overlay wrapper - small even gutter around the modal */
  body.designer-embed .fixed.inset-0:has(> div[role="dialog"]) {
    padding: 12px !important;
    align-items: center !important;
  }

  /* Modal container - near full width, internal scroll */
  body.designer-embed div[role="dialog"] {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Modal header - title + close on the same row, sticky while scrolling */
  body.designer-embed div[role="dialog"] > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px 10px 10px 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background: var(--paper-elevated, #fff) !important;
  }

  /* Title container */
  body.designer-embed div[role="dialog"] > div:first-child > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Close button - top right corner, same row as title */
  body.designer-embed div[role="dialog"] > div:first-child > button {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    order: 2 !important;
    margin: -2px 0 0 0 !important;
    padding: 8px !important;
    line-height: 0 !important;
  }

  /* Mobile type scale for the modal */
  body.designer-embed div[role="dialog"] #share-title {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  body.designer-embed div[role="dialog"] #share-desc {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
    margin: 4px 0 0 !important;
  }

  body.designer-embed div[role="dialog"] section h3 {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 0 8px !important;
  }

  /* Body - tighter side padding so cards get more width, and bottom
     padding so the last card (Get a quote / Load design) isn't cut off */
  body.designer-embed div[role="dialog"] > div:nth-child(2) {
    padding: 12px 12px calc(env(safe-area-inset-bottom) + 2rem) !important;
  }

  body.designer-embed div[role="dialog"] section p {
    margin-bottom: 0 !important;
  }

  /* Fix export cards inline styles */
  body.designer-embed div[role="dialog"] .flex-none.w-full.flex.flex-col {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.designer-embed div[role="dialog"] .rounded-lg.border.p-3 {
    overflow: visible !important;
    height: auto !important;
    padding: 12px !important;
  }

  /* Stack action cards vertically (cards only - not the header row) */
  body.designer-embed div[role="dialog"] section .flex.items-start.justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.designer-embed div[role="dialog"] section .flex.items-start.justify-between > div:first-child {
    width: 100% !important;
  }

  /* Ensure modal appears above bottom sheet */
  body.designer-embed div[role="dialog"],
  body.designer-embed div[role="dialog"] + div {
    z-index: 1000 !important;
  }
}

/* ============================================
   3. HIDE HEADER CTA ON MOBILE (DESIGNER PAGE ONLY)
   ============================================ */

@media (max-width: 767px) {
  body.designer-embed .site-header a.header-cta,
  body.designer-embed .site-header .header-cta {
    display: none !important;
  }

  body.designer-embed .site-header a[href*="/contact?from"] {
    display: none !important;
  }

  body.designer-embed .header-actions > a.btn {
    display: none !important;
  }
}

/* ============================================
   4. LANDSCAPE PHONE - FOCUS VIEW (v5)
   Phones in landscape are wider than 767px, so the SPA shows its
   desktop layout (left rail + canvas + floating toolbar + site header).
   Focus mode (body.cd-focus) hides chrome and fills the viewport with
   the court. Touch-only + short viewport so desktop/tablets are unaffected.
   Toggle button is injected by the focus-view script in index.astro.
   ============================================ */

@media (orientation: landscape) and (max-height: 540px) and (hover: none) and (pointer: coarse) {
  /* Focus toggle — fixed top-right inside the safe area */
  body.designer-embed .cd-focus-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
    z-index: 200 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
    background: rgba(15, 18, 24, 0.45) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: none !important;
  }

  body.designer-embed .cd-focus-toggle svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
  }

  body.designer-embed.cd-focus .site-header {
    display: none !important;
  }

  body.designer-embed.cd-focus {
    background: #0f1218 !important;
  }

  body.designer-embed.cd-focus main#main {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /*
   * Left designer rail: desktop row is `#root .hidden.md:flex` with
   * `aside.w-72` (controls) + `main` (canvas column). Hide any aside that
   * is a direct sibling of the canvas-stage column (stage = element that
   * directly contains the floating toolbar).
   */
  body.designer-embed.cd-focus #root aside.w-72,
  body.designer-embed.cd-focus #root :has(> :has(> [role="toolbar"][aria-label="Court designer tools"])) > aside {
    display: none !important;
  }

  body.designer-embed.cd-focus [role="toolbar"][aria-label="Court designer tools"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Canvas stage fills the viewport; safe-area padding keeps the notch clear */
  body.designer-embed.cd-focus #root :has(> [role="toolbar"][aria-label="Court designer tools"]) {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    right: env(safe-area-inset-right, 0px) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    left: env(safe-area-inset-left, 0px) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 60 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Hide focus toggle outside the landscape-phone condition (script may leave it in DOM) */
body.designer-embed .cd-focus-toggle {
  display: none;
}

/* ============================================
   5. 3D ENVIRONMENT / BACKGROUND PICKER (v8)
   On mobile, the SPA opens the picker horizontally (max-w expand),
   which slides under the bottom-right camera dock. When open, restack
   as a vertical list growing upward above the bottom-left anchor,
   with labeled rows and z-index above the dock. Desktop unchanged.
   Camera dock (.absolute.bottom-3.right-3) is intentionally untouched.
   ============================================ */

@media (max-width: 767px) {
  /* Open picker: raise above camera dock; column layout grows upward */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) {
    z-index: 30 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    max-height: calc(100dvh - 160px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Inner panel: drop horizontal max-width clamp; stack vertically */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    max-width: none !important;
    width: min(220px, calc(100vw - 2rem)) !important;
    min-width: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* "Background" eyebrow */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > span {
    color: rgba(230, 237, 243, 0.72) !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
  }

  /* Options group: vertical column, top → bottom */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > div.flex.items-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
  }

  /*
   * Option rows: keep inline swatch color on the button for ::before inherit;
   * cover the row with an inset shadow so only the circle shows the color.
   * Label comes from the title attribute (e.g. "Midnight").
   */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > div.flex.items-center > button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    box-shadow: inset 0 0 0 100vmax #161b22 !important;
    color: #e6edf3 !important;
    box-sizing: border-box !important;
  }

  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > div.flex.items-center > button::before {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: inherit !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > div.flex.items-center > button::after {
    content: attr(title) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #e6edf3 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Selected option: visible ring / highlight */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > div.flex.items-center > button[aria-pressed="true"] {
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow:
      inset 0 0 0 100vmax #1c2128,
      0 0 0 1px rgba(255, 255, 255, 0.28) !important;
  }

  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > div.flex.items-center > button[aria-pressed="true"]::before {
    border-color: #ffffff !important;
  }

  /* Divider: horizontal rule between options and court-lights toggle */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > div.w-px.h-5 {
    width: 100% !important;
    height: 1px !important;
    margin: 2px 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
  }

  /* Court-lights toggle: 40px target at bottom of the list */
  body.designer-embed .absolute.bottom-3.left-3.z-10.backdrop-blur-sm:has(> div[aria-hidden="false"]) > div[aria-hidden="false"] > button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }
}

/* ============================================
   PORTRAIT PHONE: PAGE SCROLLS FROM ANYWHERE
   The preview canvas used touch-action:none (sheet-era pan/zoom), which blocked page scroll when a
   swipe started on it. Allow vertical page panning and pinch everywhere; nothing scrolls inside a box.
   ============================================ */
@media (max-width: 767px) and (orientation: portrait) {
  html, body.designer-embed {
    overscroll-behavior-y: auto !important;
    overflow-y: visible !important;
    height: auto !important;
    touch-action: auto !important;
  }
  body.designer-embed #root,
  body.designer-embed #root * {
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior: auto !important;
  }
  body.designer-embed #root [class*="overflow-hidden"] {
    overflow-y: visible !important;
  }
  body.designer-embed #root .md\:hidden > div:has(canvas),
  body.designer-embed #root .md\:hidden > div:has(canvas) [class*="overflow-hidden"] {
    overflow: hidden !important;
  }
}

/* ============================================
   PORTRAIT PHONE 3D (v12)
   Camera dock becomes one compact horizontal row at the bottom right of the preview (it was wrapping into a tall
   column over the court). The collapsed background circle gets a "Scene" label.
   ============================================ */
@media (max-width: 767px) and (orientation: portrait) {
  body.designer-embed #root .absolute.bottom-3.right-3.z-10 {
    top: auto !important;
    bottom: 0.75rem !important;
    right: 0.75rem !important;
    max-width: calc(100% - 7.5rem) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    gap: 0.25rem !important;
    padding: 0.25rem 0.375rem !important;
  }
  body.designer-embed #root .absolute.bottom-3.right-3.z-10 > button {
    flex: none !important;
    height: 2rem !important;
    min-width: 2rem !important;
  }
  body.designer-embed #root .absolute.bottom-3.right-3.z-10 > div.w-px {
    height: 1.25rem !important;
    margin: 0 0.125rem !important;
  }
  body.designer-embed #root .absolute.bottom-3.left-3.z-10:has(> div.max-w-0)::after {
    content: "Scene";
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85);
    padding-right: 0.25rem;
  }
}

/* Two-finger hint over the 3D preview (phone portrait); shown by the site script on one-finger drags */
.designer-3d-hint {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 600 16px/1.3 system-ui, -apple-system, sans-serif;
  text-align: center;
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.designer-3d-hint.is-visible { opacity: 1; }
/* 3D canvas: one finger scrolls the page, two-finger gestures go to the camera (no browser pinch-zoom here) */
@media (max-width: 767px) and (orientation: portrait) {
  body.designer-embed #root .designer-3d-portrait canvas[data-court-webgl-canvas] {
    touch-action: pan-y !important;
  }
}