/* baike.dev mobile overrides for self-hosted Prompt Optimizer (/prompt-app/)
 * Upstream only stacks .image-multiimage-split; basic/context splits stay multi-column.
 */

@media (width <= 900px) {
  .basic-system-split,
  .basic-user-split,
  .context-system-split,
  .context-user-split,
  .image-multiimage-split {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 12px;
  }

  .split-divider {
    display: none !important;
  }

  .split-pane {
    min-width: 0 !important;
    min-height: 280px;
    overflow: auto !important;
  }

  .variant-deck,
  .variant-results {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .variant-results-wrap {
    overflow: visible !important;
    min-height: 0;
  }

  .main-content-wrapper {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .main-content-wrapper > * {
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;
  }

  .nav-header-enhanced {
    min-height: auto !important;
    padding: 8px 10px !important;
  }

  .nav-content {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    align-items: flex-start !important;
  }

  .nav-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100%;
  }

  .core-navigation {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .theme-title {
    font-size: 15px !important;
  }

  .n-layout-scroll-container,
  .n-layout-content {
    padding: 12px 10px 24px !important;
  }

  .test-area-top {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

@media (width <= 640px) {
  .split-pane {
    min-height: 240px;
  }

  .theme-title {
    font-size: 14px !important;
  }

  .brand-link {
    padding: 4px 6px 4px 4px !important;
  }
}