/* Phone: Interaksi sits directly in .app-body, so that column must scroll. */
@media (max-width: 900px) {
  .app-body:has(.ix-shell) {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .ix-shell,
  .ix-hub,
  .ix-feature {
    flex: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .video-grid {
    max-height: none !important;
    overflow: visible !important;
  }

  .process-row {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .btn-launch,
  .btn-stop {
    width: 100%;
    min-width: 0;
  }

  .log-card {
    max-height: none !important;
    min-height: 180px;
    overflow: visible !important;
  }

  .log-list {
    flex: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
}