/* =========================================================
   MOBILE BUILDER LAYOUT
   Bottom-sheet picker + sticky CTA, ≤768px only.
   Loaded after responsive.css so it wins on equal specificity.
   ========================================================= */

@media (max-width: 768px) {

  /* -------- Hide top tab strip; chips inside the sheet replace it -------- */
  .create-design > .tabs.p-0 { display: none !important; }

  /* Manual build is disabled on mobile — hide the entry point. */
  #switchToManualBtn,
  .switch-manual-btn { display: none !important; }

  /* When any Bootstrap modal is open, hide the auto-builder bottom sheet
     and floating CTA. (ux-improvements.css forces .modal-backdrop to
     z-index: 0 for a glass effect, which lets these elements bleed through
     the modal on mobile.) Bootstrap toggles body.modal-open on every modal. */
  body.modal-open .create-design .main .left,
  body.modal-open > .mb-floating-cta {
    visibility: hidden !important;
  }

  /* -------- App shell: full viewport, vertical -------- */
  .create-design {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .create-design .main {
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
    flex: 1 !important;
    position: relative;
  }

  /* =========================================================
     RIGHT panel becomes the main scroll area
     ========================================================= */
  .create-design .main .right {
    width: 100% !important;
    flex: 1 !important;
    height: auto !important;
    overflow-y: auto !important;
    padding: 14px 14px 280px !important; /* room for sticky CTA + peek sheet */
    background: #f3f4f6 !important;
  }

  /* Empty welcome state — replace with the spec's compact "No designs yet" */
  .create-design .main .right .empty-state-message {
    padding: 36px 20px !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 2px dashed #e5e7eb !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }
  /* Make sure .d-none still wins — script.js adds it when designs are added. */
  .create-design .main .right .empty-state-message.d-none {
    display: none !important;
  }
  /* Icon at top of empty card */
  .create-design .main .right .empty-state-message::before {
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background-color: #ede9fe;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V4m0 0l-5 5m5-5l5 5M4 20h16'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
  }
  /* Hide the verbose existing welcome content */
  .create-design .main .right .empty-state-message .welcome > * {
    display: none !important;
  }
  /* Replace with spec copy */
  .create-design .main .right .empty-state-message .welcome::before {
    content: "No designs yet";
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #09031a;
    margin-bottom: 4px;
  }
  .create-design .main .right .empty-state-message .welcome::after {
    content: "Upload a file or pick from your library to start your gang sheet";
    display: block;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    max-width: 280px;
    margin: 0 auto;
  }

  /* "Your Designs N" header injected by mobile-builder.js, visible always */
  .mb-your-designs {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 14px;
  }
  .mb-your-designs .mb-count {
    background: #ede9fe;
    color: #7c5cfd;
    border-radius: 999px;
    font-size: 12px;
    padding: 2px 9px;
    font-weight: 700;
  }
  /* Hide the original .right-header h2 to avoid duplicate when designs exist */
  .right-header h2 { display: none !important; }

  /* -------- "Your Designs N" header -------- */
  .right-header {
    display: block !important;
    padding: 6px 0 12px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .right-header h2 {
    font-size: 18px !important;
    margin: 0 0 6px !important;
    display: flex; align-items: center; gap: 8px;
  }
  .right-header h2 .count {
    background: #ede9fe; color: #7c5cfd;
    border-radius: 999px;
    font-size: 12px; padding: 2px 9px;
    font-weight: 700;
  }

  /* -------- Sticky CTA (Clear All / Generate) --------
     The .btn-row is relocated to <body> by mobile-builder.js so it's a
     direct child of body — no overflow / transform / containing-block issues. */
  body > .mb-floating-cta {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 10px 14px !important;
    display: none !important; /* shown only when designs exist */
    gap: 8px !important;
    z-index: 28;
    margin: 0 !important;
    box-sizing: border-box;
    height: 62px;
  }
  /* Show only when the body knows we have a CTA */
  body.mb-has-cta > .mb-floating-cta {
    display: flex !important;
  }
  body > .mb-floating-cta .clear-btn,
  body > .mb-floating-cta .clear-all-designs {
    flex: 1 !important;
    background: #fff !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    height: 42px !important;
    line-height: 1 !important;
  }
  body > .mb-floating-cta .gen-btn,
  body > .mb-floating-cta .generate-gang-sheet {
    flex: 2 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    height: 42px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
  }
  /* "Go To Previous Generated Sheets" button — shown after Generate has run.
     Style it like the primary CTA so it slots in seamlessly. d-none from JS
     still controls visibility; we just style it when shown. */
  body > .mb-floating-cta > .previous-generated-sheet {
    flex: 2 !important;
    background: #7c5cfd !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  body > .mb-floating-cta > .previous-generated-sheet.d-none {
    display: none !important;
  }
  body > .mb-floating-cta > .previous-generated-sheet svg {
    width: 16px !important;
    height: 16px !important;
    fill: #fff !important;
    stroke: #fff !important;
  }
  /* Hide the additional-sheet dropdown on mobile (its dropdown UI doesn't fit
     in a 62px sticky bar). Power users can still trigger it from desktop. */
  body > .mb-floating-cta .additional-sheet-dropdown {
    display: none !important;
  }

  /* =========================================================
     Design cards (built by buildFileCard in script.js)
     ========================================================= */
  .right-scroll {
    padding: 0 !important;
  }
  .right-scroll .file-con {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .design-card.file-info {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    border: 0 !important;
  }
  .design-card.file-info .card-top {
    display: flex !important;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
  }
  .design-card.file-info .card-preview {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f3f4f6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .design-card.file-info .card-preview img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
  }
  .design-card.file-info .card-info {
    flex: 1;
    min-width: 0;
  }
  .design-card.file-info .card-name {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
  }
  .design-card.file-info .dpi-status-box {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 5px;
    font-weight: 600;
  }

  .design-card.file-info .controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }
  .design-card.file-info .control-group {
    display: block !important;
  }
  .design-card.file-info .control-group label {
    display: block !important;
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 3px;
    font-weight: 600;
  }
  .design-card.file-info .control-group input[type="number"] {
    width: 100%;
    height: 36px !important;
    box-sizing: border-box;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 8px !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1;
  }
  .design-card.file-info .qty-wrap.quantity-control {
    display: flex !important;
    align-items: stretch;
    height: 36px !important;
    box-sizing: border-box;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
  }
  .design-card.file-info .qty-wrap button {
    flex: 0 0 30px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #374151 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .design-card.file-info .qty-wrap .quantity-input {
    flex: 1;
    width: 100%;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 0 !important;
    -moz-appearance: textfield;
    box-sizing: border-box;
  }
  .design-card.file-info .qty-wrap .quantity-input::-webkit-outer-spin-button,
  .design-card.file-info .qty-wrap .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }

  .design-card.file-info .card-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .design-card.file-info .card-btn {
    padding: 9px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #374151 !important;
  }
  .design-card.file-info .card-btn.accent {
    background: #7c5cfd !important;
    color: #fff !important;
    border-color: #7c5cfd !important;
    grid-column: 1 / -1;
  }
  /* Preview spans full width so the 2-col grid stays balanced
     (5 buttons total: 1 full Preview, Edit/Duplicate paired, full RemoveBG, full Remove). */
  .design-card.file-info .card-btn.preview-btn {
    grid-column: 1 / -1;
  }
  .design-card.file-info .card-btn.danger {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    grid-column: 1 / -1;
  }

  /* =========================================================
     LEFT panel becomes the bottom sheet
     ========================================================= */
  .create-design .main .left {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Peek state: size to content (handle + chips). */
    height: auto !important;
    max-height: 260px;
    background: #fff !important;
    border: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
    z-index: 30;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* responsive.css has `transform: translateX(-100%)` for the legacy
       slide-out drawer pattern. We must explicitly cancel it. */
    transform: none !important;
    transition: height .3s ease, max-height .3s ease, bottom .3s ease, transform .2s ease;
  }
  /* Same suppression for .left.active (also from the legacy slide-out). */
  .create-design .main .left.active {
    transform: none !important;
  }
  /* Expanded: full sheet */
  .create-design .main .left.mb-expanded {
    height: 70vh !important;
    max-height: calc(100vh - 80px); /* always leave 80px backdrop above */
  }
  /* When designs exist, the sheet floats 62px above the bottom so the
     sticky CTA strip sits underneath uncovered. */
  .create-design.mb-has-cta .main .left {
    bottom: 62px !important;
  }

  /* Drag handle area — generous tap target (whole top strip) */
  .mb-handle-area {
    flex-shrink: 0;
    padding: 14px 0 8px;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mb-handle {
    width: 48px; height: 5px;
    background: #d1d5db; border-radius: 3px;
    transition: background-color .15s;
  }
  .mb-handle-area:active .mb-handle {
    background: #9ca3af;
  }
  .mb-peek-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
  }
  /* When expanded, replace "Tap to add" with "Swipe down to close" hint */
  .create-design .main .left.mb-expanded .mb-peek-hint { display: none; }
  .create-design .main .left.mb-expanded .mb-handle-area::after {
    content: "Tap handle or outside to close";
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
  }

  /* Chip row (injected) — visible in peek state. 3 columns, two-line labels. */
  .mb-chips {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 8px 16px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
  }
  .create-design .main .left.mb-expanded .mb-chips { display: none !important; }
  .mb-chips .mb-chip {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 8px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    color: #09031a;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-chips .mb-chip-lbl {
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    white-space: normal !important;
    text-align: center;
  }
  .mb-chip.primary {
    background: #7c5cfd;        /* darker purple */
    color: #fff;
    border-color: #7c5cfd;
  }
  .mb-chips .mb-chip-ic {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    font-size: 20px !important;
    border-radius: 50%;
    background: #ede9fe;
    color: #7c5cfd;
    font-weight: 700;
    flex-shrink: 0;
  }
  .mb-chip.primary .mb-chip-ic {
    background: rgba(255,255,255,.22);
    color: #fff;
  }

  /* Sheet header (visible only when expanded) */
  .mb-sheet-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 10px;
    flex-shrink: 0;
  }
  .create-design .main .left.mb-expanded .mb-sheet-head {
    display: flex;
  }
  .mb-sheet-head h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
  }
  .mb-sheet-head .mb-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
  }
  /* Tab strip (injected) — visible only when expanded */
  .mb-sheet-tabs {
    display: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 8px !important;
    gap: 4px !important;
    flex-shrink: 0;
    background: #fff;
  }
  .create-design .main .left.mb-expanded .mb-sheet-tabs {
    display: flex;
  }
  .mb-sheet-tabs .mb-sheet-tab {
    flex: 1;
    padding: 12px 6px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    min-width: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-sheet-tab.active {
    color: #7c5cfd;
    border-bottom-color: #7c5cfd;
  }

  /* The .left's tab content scrolls; only visible when expanded */
  .create-design .main .left .tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 14px;
    display: none !important;
  }
  .create-design .main .left.mb-expanded .tab-content {
    display: block !important;
  }

  /* Add-Text sticky button (from add-text-tab.js) — hide when the sheet
     isn't expanded. add-text-tab.js sets inline display:block whenever the
     Add Text tab is active, but it doesn't re-check on sheet collapse, so
     we suppress it here whenever we're in peek state. */
  .create-design .main .left:not(.mb-expanded) .at-sticky-btn-wrap {
    display: none !important;
  }
  /* Match the brand purple */
  .at-sticky-btn-wrap #atAddBtn {
    background: #7c5cfd !important;
  }

  /* -------- Backdrop (body-level, toggled by .mb-sheet-open on <body>) -------- */
  .mb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 25;
    display: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.mb-sheet-open .mb-backdrop {
    display: block;
  }
  /* Lock body scroll when the sheet is open */
  body.mb-sheet-open {
    overflow: hidden;
    touch-action: none;
  }

  /* -------- Restore upload-box / library content for the sheet -------- */
  .left #uploadCustom { padding: 14px !important; }
  .upload-box { padding: 30px 18px !important; }
  .left-scroll { padding-bottom: 20px !important; }

  /* (Legacy .left.active override is handled near the top of this @media
     block — `transform: none !important;` cancels the slide-out pattern.) */
}

/* When the viewport grows back above the mobile breakpoint after the
   page initialized in mobile mode, the injected mobile UI elements
   linger in the DOM. Their *styles* live inside the mobile @media so
   they fall back to default block flow at tablet+ width — which is
   what the user reported as "random things" stacked on the page.
   Force them hidden once we're outside the mobile breakpoint. */
@media (min-width: 769px) {
  .mb-handle-area,
  .mb-sheet-head,
  .mb-chips,
  .mb-sheet-tabs,
  .mb-floating-cta,
  .mb-your-designs,
  .mb-backdrop {
    display: none !important;
  }
}