/* SHUNLP_MOBILE_SIMPLE_BUILDER_LAYOUT_FIX_V23_63
   Correct desktop grid/flex inheritance and banner overflow found during device testing. */
@media (max-width: 760px) {
  /* Keep the entire app inside the device viewport. */
  html,
  body,
  #app,
  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep warning banners in normal document flow on narrow screens. */
  .app-shell:has(> .severe-error-banner),
  .app-shell:has(> .ai-runtime-guard-banner),
  .app-shell:has(> .ai-usage-warning-banner) {
    --shell-banner-offset: 0px !important;
    padding-top: 0 !important;
  }

  .app-shell:has(> :is(.severe-error-banner, .ai-runtime-guard-banner, .ai-usage-warning-banner)):has(> .topbar) {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .app-shell:has(> :is(.severe-error-banner, .ai-runtime-guard-banner, .ai-usage-warning-banner)):not(:has(> .topbar)) {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .app-shell > .severe-error-banner,
  .app-shell > .ai-runtime-guard-banner,
  .app-shell > .ai-usage-warning-banner {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    overflow-wrap: anywhere;
  }

  .app-shell > :is(.severe-error-banner, .ai-runtime-guard-banner, .ai-usage-warning-banner) > span {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Completely replace the two-column desktop shell on mobile. */
  .workspace,
  .workspace.collapsed,
  .workspace.demo-mode-workspace {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .workspace > .sidebar,
  .workspace > .sidebar.collapsed,
  .workspace > .main-pane,
  .workspace.collapsed > .main-pane {
    grid-column: 1 / -1 !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* The desktop sidebar/nav both use flex growth. Reset it completely on mobile. */
  .workspace .sidebar,
  .workspace .sidebar.collapsed {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-self: stretch !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .workspace .sidebar .sidebar-nav {
    flex: 0 0 64px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    align-items: center !important;
    align-content: center !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
  }

  .workspace .sidebar .sidebar-nav-item {
    flex: 0 0 auto !important;
    align-self: center !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    box-sizing: border-box;
  }

  /* Remove the remaining 240px desktop content offset. */
  .main-pane,
  .workspace.collapsed .main-pane {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  .workspace-content,
  .form-designer,
  .form-designer > .panel,
  .panel,
  .panel-head,
  .panel-body,
  .settings-stack,
  .settings-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Inline desktop span declarations must collapse to one mobile column. */
  .form-design-grid > *,
  .grid-2 > *,
  .lp-material-split-grid > *,
  .lp-composition-mode-grid > *,
  .lp-composition-custom-grid > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .admin-view-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .admin-view-switch .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .topbar,
  .topbar.collapsed,
  .topbar-left,
  .topbar-right,
  .active-project-indicator {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .topbar-left,
  .topbar-right {
    overflow: hidden;
  }

  #topbarProjectSelector,
  .active-project-indicator > div {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}