/* SHUNLP_MOBILE_SIMPLE_BUILDER_POLISH_V23_64
   Final mobile control sizing, floating UI spacing, and narrow-screen detail refinements. */
@media (max-width: 760px) {
  /* A horizontal flex-basis becomes button height after the action row turns vertical. */
  .lp-copy-engine-actions,
  .lp-strategy-footer-actions {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .lp-copy-engine-actions .btn,
  .lp-strategy-footer-actions .btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 16px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  /* Do not let column layouts turn horizontal flex-bases into oversized controls. */
  .custom-confirm-btn-row .custom-confirm-btn {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
  }

  /* The generic mobile touch-target rule must not enlarge compact toggle controls. */
  .switch {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
  }

  /* Reserve scrollable space so the fixed FAQ button never hides the final action. */
  .main-pane,
  .workspace.collapsed .main-pane {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .faq-bot-container {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .faq-bot-trigger {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin-top: 8px !important;
    padding: 0 !important;
  }

  .faq-chat-window {
    width: min(380px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(500px, calc(100dvh - 96px)) !important;
    max-height: calc(100dvh - 96px) !important;
  }

  .faq-send-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
  }

  .faq-close-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
  }

  /* Cards that are useful side-by-side on desktop should be readable one-by-one on mobile. */
  .search-sheet-fields,
  .lp-type-choices,
  .lp-fv-copy-variant-grid,
  .lp-who-what-how-grid,
  .lp-dna-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .search-sheet-field,
  .lp-type-card,
  .lp-fv-copy-variant-card,
  .lp-who-what-how-card,
  .lp-dna-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Long diagnostic and attachment text must wrap instead of pushing the viewport. */
  .diagnostics-row,
  .lp-attachment-item {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .diagnostics-row > div,
  .lp-attachment-item > div {
    flex: 1 1 220px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .diagnostics-row-message,
  .lp-attachment-item strong,
  .lp-attachment-item span {
    overflow-wrap: anywhere;
  }

  /* Progress and editor dialogs keep usable margins on short and narrow devices. */
  .lp-production-progress-modal,
  .modal-backdrop {
    padding: 12px !important;
  }

  .lp-production-progress-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 18px !important;
    border-radius: 12px !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .modal-head,
  .modal-foot {
    height: auto !important;
    min-height: 56px !important;
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
  }

  .modal-foot .btn {
    flex: 1 1 140px;
    min-height: 44px !important;
  }

  .project-images {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    max-height: 34dvh;
    padding: 14px !important;
  }

  .code-editor {
    padding: 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 420px) {
  .topbar-right .btn,
  .topbar-right button[data-action="new-project"],
  .topbar-right button[data-action="logout"],
  .custom-confirm-btn-row .custom-confirm-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}