/* MMC Z27H86 — Mobile Editor: Keep Canvas Visible While Editing
   Main /editor only. Desktop is intentionally untouched. */
@media (max-width: 820px) {
  body.mmc-z27h83-route-editor {
    --mmc-h84-toolbar-h: 50px;
    --mmc-h84-sheet-h: min(40vh, 340px);
    --mmc-h86-sheet-gap: 8px;
    background: #241916 !important;
  }

  /* Give the actual canvas the phone, not a desktop column. */
  body.mmc-z27h83-route-editor .workspaceDiv {
    top: calc(var(--mmc-z27h83-header-h, 60px) + var(--mmc-h84-toolbar-h)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    width: 100vw !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  body.mmc-z27h83-route-editor.mmc-z27h84-has-timeline .workspaceDiv {
    bottom: 62px !important;
  }

  /* MMC Z27H86: when the properties sheet is open, shrink the actual editor
     workspace above it. Paper.js listens for resize and refits the template
     into this remaining area, keeping the whole design visible while editing. */
  body.mmc-z27h83-route-editor.mmc-z27h84-edit-sheet-open .workspaceDiv {
    bottom: calc(var(--mmc-h86-active-sheet-h, var(--mmc-h84-sheet-h)) + var(--mmc-h86-sheet-gap)) !important;
    padding-bottom: 4px !important;
  }
  body.mmc-z27h83-route-editor.mmc-z27h84-edit-sheet-open.mmc-z27h84-has-timeline .workspaceDiv {
    bottom: calc(var(--mmc-h86-active-sheet-h, var(--mmc-h84-sheet-h)) + 62px + var(--mmc-h86-sheet-gap)) !important;
  }

  /* Paper.js now calculates a much larger mobile canvas. Keep it in normal
     workspace flow so flex centering is reliable on iOS. */
  body.mmc-z27h83-route-editor #canvas {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100% - 4px) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.36) !important;
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
  }

  /* The old 1800x1500 invisible desktop deselection rectangle can intercept
     mobile touches. Background editing remains available from Edit Background. */
  body.mmc-z27h83-route-editor .backRect {
    pointer-events: none !important;
  }

  /* Keep the main toolbar compact and touch friendly. */
  body.mmc-z27h83-route-editor .toolBarContainer {
    height: var(--mmc-h84-toolbar-h) !important;
    min-height: var(--mmc-h84-toolbar-h) !important;
    max-height: var(--mmc-h84-toolbar-h) !important;
    padding: 4px 6px !important;
  }
  body.mmc-z27h83-route-editor .toolBar {
    min-height: 42px !important;
    height: 42px !important;
    align-items: center !important;
  }
  body.mmc-z27h83-route-editor .toolBar button {
    min-height: 40px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* No media = don't reserve an empty 58px timeline strip. */
  body.mmc-z27h83-route-editor:not(.mmc-z27h84-has-timeline) .videoFrameBar {
    display: none !important;
  }
  body.mmc-z27h83-route-editor.mmc-z27h84-has-timeline .videoFrameBar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Properties/Layers are a docked bottom sheet. H86 reserves workspace
     above the sheet while it is open so the template remains visible during
     live text/shape/image edits instead of being hidden behind controls. */
  body.mmc-z27h83-route-editor .sideToolBarDiv {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: var(--mmc-h84-sheet-h) !important;
    max-height: var(--mmc-h84-sheet-h) !important;
    border-radius: 18px 18px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 -12px 32px rgba(0,0,0,.42) !important;
    z-index: 1900 !important;
    padding-top: 8px !important;
  }
  body.mmc-z27h83-route-editor .sideToolBarDiv::before {
    content: '';
    position: sticky;
    display: block;
    top: 0;
    width: 46px;
    height: 5px;
    margin: 2px auto 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    z-index: 2;
  }
  body.mmc-z27h83-route-editor .sideBody {
    padding: 6px 14px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 15px !important;
  }
  body.mmc-z27h83-route-editor .sideBody button,
  body.mmc-z27h83-route-editor .sideBody input,
  body.mmc-z27h83-route-editor .sideBody select {
    min-height: 42px !important;
  }
  body.mmc-z27h83-route-editor .layerDiv {
    min-height: 46px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* The existing close control follows the top edge of the sheet. H84 JS
     updates its exact top value when the sheet opens/viewport changes. */
  body.mmc-z27h83-route-editor .closeToolBarDiv {
    position: fixed !important;
    top: auto !important;
    right: 10px !important;
    bottom: calc(var(--mmc-h84-sheet-h) - 48px) !important;
    z-index: 1950 !important;
  }
  body.mmc-z27h83-route-editor .closeToolBarDiv {
    pointer-events: auto !important;
  }
  body.mmc-z27h83-route-editor .closeToolBarDiv button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.mmc-z27h83-route-editor .closeToolBarDiv button * {
    pointer-events: none !important;
  }

  /* Edit Background / Edit Image / Edit Text floats above the canvas instead
     of occupying a desktop column. */
  body.mmc-z27h83-route-editor .sideToolBarShowButton {
    position: fixed !important;
    right: 10px !important;
    left: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1750 !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.34) !important;
  }
  body.mmc-z27h83-route-editor.mmc-z27h84-has-timeline .sideToolBarShowButton {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.mmc-z27h83-route-editor .sideToolBarShowButton button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 7px 12px !important;
  }

  /* Image / Video / Audio libraries are proper mobile bottom sheets too. */
  body.mmc-z27h83-route-editor .editorDiv .MuiDrawer-paper {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(72vh, 620px) !important;
    max-height: min(72vh, 620px) !important;
    border-radius: 18px 18px 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 -12px 34px rgba(0,0,0,.45) !important;
    z-index: 1850 !important;
  }

  /* Much easier resize / rotate targets for fingers. The visible square stays
     modest while the transparent handler gets a 30px touch box. */
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler {
    width: 30px !important;
    height: 30px !important;
    z-index: 12 !important;
  }
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.tl,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.t,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.tr { top: -15px !important; }
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.bl,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.b,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.br { bottom: -15px !important; }
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.tl,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.l,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.bl { left: -15px !important; }
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.tr,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.r,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.br { right: -15px !important; }
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.l,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.r { margin-top: -15px !important; }
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.t,
  body.mmc-z27h83-route-editor .single-resizer .resizable-handler.b { margin-left: -15px !important; }
  body.mmc-z27h83-route-editor .single-resizer .rotate {
    width: 34px !important;
    height: 34px !important;
    top: -42px !important;
    margin-left: -17px !important;
    z-index: 13 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.26) !important;
  }
  body.mmc-z27h83-route-editor .single-resizer .rotate svg {
    width: 18px !important;
    height: 18px !important;
  }

  body.mmc-z27h83-route-editor .single-resizer,
  body.mmc-z27h83-route-editor .single-resizer * {
    touch-action: none !important;
  }

  /* Keep popovers/dialogs within a phone viewport. */
  body.mmc-z27h83-route-editor .MuiPopover-paper,
  body.mmc-z27h83-route-editor .modal-dialog {
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 820px) and (orientation: landscape) {
  body.mmc-z27h83-route-editor {
    --mmc-h84-sheet-h: min(46vh, 240px);
  }
  body.mmc-z27h83-route-editor .editorDiv .MuiDrawer-paper {
    height: min(82vh, 360px) !important;
    max-height: min(82vh, 360px) !important;
  }
}

/* MMC Z27H87 — explicit mobile layer deselect. The current layer can span the
   full canvas (e.g. a background image), so mobile needs a deliberate way to
   release its drag/resize overlay before choosing another layer. */
@media (max-width: 820px) {
  body.mmc-z27h83-route-editor .sideToolBarShowButton .mmc-z27h87-deselect-layer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 88px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    border-radius: 10px !important;
    background: #7f1d1d !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: none !important;
  }
  body.mmc-z27h83-route-editor .sideToolBarShowButton .mmc-z27h87-deselect-layer span:first-child {
    font-size: 15px !important;
    line-height: 1 !important;
  }
}