/* KOKO exposes only the image and video generation flows. */
button[aria-label="文本"],
button[aria-label="音频"],
label.ant-segmented-item:has(.lucide-message-square),
label.ant-segmented-item:has(.lucide-music2),
label.ant-segmented-item:has(.lucide-music-2) {
  display: none !important;
}

/* Keep node actions usable when a narrow viewport cannot fit every action. */
.absolute.z-\[70\] {
  max-width: min(720px, calc(100vw - 24px));
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-color: rgba(36, 37, 41, 0.42) transparent;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.absolute.z-\[70\]::-webkit-scrollbar {
  height: 5px;
}

.absolute.z-\[70\]::-webkit-scrollbar-track {
  background: transparent;
}

.absolute.z-\[70\]::-webkit-scrollbar-thumb {
  background: rgba(36, 37, 41, 0.42);
  border-radius: 999px;
}

.absolute.z-\[70\] > * {
  flex: 0 0 auto;
}

@media (max-width: 620px) {
  .absolute.z-\[70\] {
    max-width: calc(100vw - 16px);
  }
}

/* Let the editor become a vertically scrollable mobile workspace. The canvas
   itself stays clipped so its pan/zoom gesture handling is not changed. */
@media (max-width: 900px) {
  html,
  body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
  }

  #root,
  #root > .ant-app {
    height: auto !important;
    min-height: 100dvh;
  }

  #root > .ant-app > .flex.h-dvh.overflow-hidden {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
    flex-direction: column !important;
  }

  #root > .ant-app > .flex.h-dvh.overflow-hidden > .flex.min-w-0.flex-1.flex-col.overflow-hidden {
    width: 100%;
    height: auto !important;
    min-height: 0;
    flex: none !important;
    overflow: visible !important;
  }

  #root > .ant-app > .flex.h-dvh.overflow-hidden > .flex.min-w-0.flex-1.flex-col.overflow-hidden > .min-h-0.flex-1.overflow-hidden {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  #root main.flex.h-full.min-h-0.overflow-hidden {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    flex-direction: column !important;
  }

  #root main.flex.h-full.min-h-0.overflow-hidden > .relative.z-\[60\].flex.h-full.shrink-0 {
    width: 100% !important;
    height: min(360px, 42dvh) !important;
    min-height: 240px;
    flex: none !important;
  }

  #root main.flex.h-full.min-h-0.overflow-hidden > .relative.min-w-0.flex-1.overflow-hidden {
    width: 100%;
    height: max(560px, 72dvh) !important;
    min-height: 560px;
    flex: none !important;
  }

  #root main.flex.h-full.min-h-0.overflow-hidden > .relative.z-\[60\].flex.h-full.shrink-0 aside {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
  }

  #root main.flex.h-full.min-h-0.overflow-hidden > .relative.z-\[60\].flex.h-full.shrink-0 .min-h-0.flex-1.overflow-hidden {
    min-height: 0;
  }

  /* Keep long node configuration panels usable instead of clipping below the viewport. */
  #root [data-canvas-no-zoom].absolute.z-\[120\] {
    max-height: min(70dvh, 620px);
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .absolute.z-\[70\] {
    scroll-behavior: auto;
  }
}