/* =========================================================
   MOBILE MANUAL EDITOR — incremental rebuild
   STEP 1: bottom-dock pill scroller.
   STEP 2: top bar = brand left, Login/Sign Up right (matches auto-builder).
   ========================================================= */

@media (max-width: 768px) {

  /* =========================================================
     STEP 2 — TOP BAR
     Goal: row 1 = brand left, Login/Sign Up right (same as auto-builder).
     Row 2 = action buttons (Change size + Save & Go Back) wrap below.
     Trigger: :has(.editor-area-section:not(.d-none)) — fires whenever the
     manual editor section is visible, regardless of body class state.
     Approach: dissolve .options via `display: contents` so its children
     (action-btn, nav-links, menu) become direct flex children of .navbar,
     letting us control each one's row placement via flex order/basis.
     ========================================================= */
  body:has(.editor-area-section:not(.d-none)) .navbar {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
  }

  /* Brand on the left of row 1
     (override responsive.css's `.active-builder .left-con { display: none }`). */
  body:has(.editor-area-section:not(.d-none)) .navbar .left-con,
  .active-builder .navbar .left-con {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 6px !important;
    order: 1 !important;
  }
  body:has(.editor-area-section:not(.d-none)) .navbar .left-con .brand,
  .active-builder .navbar .left-con .brand {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:has(.editor-area-section:not(.d-none)) .navbar .left-con .site-logo .logo,
  .active-builder .navbar .left-con .site-logo .logo {
    width: 24px !important;
    height: 24px !important;
  }
  body:has(.editor-area-section:not(.d-none)) .navbar .left-con .edit-project-name {
    display: none !important;
  }

  /* Dissolve .options so its children become direct flex children of .navbar */
  body:has(.editor-area-section:not(.d-none)) .navbar .options {
    display: contents !important;
  }

  /* Login/Sign Up on the right of row 1 (auto-margin pushes them to the right) */
  body:has(.editor-area-section:not(.d-none)) .navbar .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    order: 2 !important;
  }
  body:has(.editor-area-section:not(.d-none)) .navbar .nav-links a {
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }
  /* Profile menu (logged-in users) — same row, same right-side slot */
  body:has(.editor-area-section:not(.d-none)) .navbar .menu {
    margin-left: auto !important;
    order: 2 !important;
  }

  /* Action buttons → row 2, full width, centered */
  body:has(.editor-area-section:not(.d-none)) .navbar .action-btn {
    flex-basis: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    order: 3 !important;
  }
  body:has(.editor-area-section:not(.d-none)) .navbar .action-btn > * {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  /* "See the summary" button — also on row 2 if shown */
  body:has(.editor-area-section:not(.d-none)) .navbar .see-customer-summary {
    flex-basis: 100% !important;
    order: 4 !important;
  }

  /* =========================================================
     STEP 3 — ZOOM CONTROLS as a floating pill (lower-right)
     ========================================================= */
  body:has(.editor-area-section:not(.d-none)) .zooming-section {
    position: fixed !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    background: rgba(17, 24, 39, .85) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 4px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    z-index: 20;
  }
  body:has(.editor-area-section:not(.d-none)) .zooming-section .value {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 0 6px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  body:has(.editor-area-section:not(.d-none)) .zooming-section .reset-zoom {
    display: none !important;
  }
  body:has(.editor-area-section:not(.d-none)) .zooming-section .action-btn {
    margin: 0 !important;
    gap: 0 !important;
  }
  body:has(.editor-area-section:not(.d-none)) .zooming-section .zoom-in,
  body:has(.editor-area-section:not(.d-none)) .zooming-section .zoom-out {
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* =========================================================
     STEP 5 — Empty-canvas welcome overlay
     Friendly message that floats over the canvas-area until the user does
     anything (upload, add text, tap a tool, or just tap the overlay). The
     tap also serves as the iOS Safari compositor-flush gesture that finally
     makes the painted canvas visible.
     ========================================================= */
  .me-canvas-welcome {
    position: absolute !important;
    inset: 0 !important;
    z-index: 6;                   /* above the canvas mirror (z-index: 4) */
    background: rgba(255,255,255,.5);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: opacity .25s ease;
    overflow: hidden;
  }
  .me-canvas-welcome.me-fade {
    opacity: 0;
    pointer-events: none;
  }
  /* The tap-to-start tip floats over the snapshot. */
  .me-canvas-welcome .mw-tip {
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    max-width: 88%;
    box-sizing: border-box;
  }
  .me-canvas-welcome .mw-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ede9fe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c5cfd;
    font-size: 22px;
    margin: 0 auto 10px;
  }
  .me-canvas-welcome .mw-title {
    font-size: 15px;
    font-weight: 700;
    color: #09031a;
    margin-bottom: 4px;
  }
  .me-canvas-welcome .mw-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
  }

  /* =========================================================
     STEP 4 — TOOL PANELS as a slide-up bottom sheet
     Override responsive.css's `max-height: 230px / max-width: 250px / top: 0`
     so panels become a tall bottom sheet anchored above the dock.
     ========================================================= */
  .editor-area-section .editor-sidebar-panels {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    /* Sit flush against the top of the tool dock. --me-dock-h is set by
       mobile-builder.js (ResizeObserver on .sidebar-wraper) so it matches
       the dock's real height, including iOS safe-area padding. */
    bottom: var(--me-dock-h, 80px) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 50vh !important;
    max-height: calc(100dvh - var(--me-dock-h, 80px)) !important;
    /* Solid background fills the sheet area whether or not the inner
       .single-panel content takes the full height — no transparent gap. */
    background: #fff !important;
    background: #fff !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12) !important;
    z-index: 39;
    overflow: hidden;
    transform: translateY(110%);
    pointer-events: none;
    transition: transform .3s ease;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Existing handler in active-obj.js toggles `.active` on .editor-area-section
     when a tool-pill is tapped — we use that as the open/close trigger. */
  .editor-area-section.active .editor-sidebar-panels {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Each .single-panel inside fills the sheet and scrolls. */
  .editor-area-section .editor-sidebar-panels .single-panel {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Panel header — make room for the close X (injected by mobile-builder.js) */
  .editor-area-section .editor-sidebar-panels .single-panel .panel-header {
    position: relative !important;
    padding-right: 48px !important;
  }
  .me-panel-close {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-tap-highlight-color: transparent;
    padding: 0 !important;
  }
  .me-panel-close:active {
    background: #f3f4f6 !important;
  }

  /* =========================================================
     STEP 1 — BOTTOM DOCK
     ========================================================= */

  /* Sidebar wrapper anchored at bottom as a horizontal scroller. */
  .editor-area-section .sidebar-wraper {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .editor-area-section .editor-sidebar {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .editor-area-section .editor-sidebar .items {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .editor-area-section .editor-sidebar .items::-webkit-scrollbar { display: none; }

  .editor-area-section .editor-sidebar .tool-item {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  .editor-area-section .editor-sidebar .tool-item.active {
    background: #ede9fe !important;
    border-color: #7c5cfd !important;
  }
  .editor-area-section .editor-sidebar .tool-item .icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }
  .editor-area-section .editor-sidebar .tool-item .icon svg {
    width: 22px;
    height: 22px;
  }
  .editor-area-section .editor-sidebar .tool-item .title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  .editor-area-section .editor-sidebar .tool-item.active .title {
    color: #7c5cfd !important;
  }
}