/* The desktop sidebar can leave a narrow script workbench at tablet viewports.
   Keep only the steps locally scrollable; let manuscript controls wrap. */
@media (min-width: 601px) and (max-width: 900px) {
  .media-production .video-script-editor {
    container-name: media-script-workbench;
    container-type: inline-size;
  }

  @container media-script-workbench (max-width: 600px) {
    .media-production .vse-steps {
      flex: none;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
    }
    .media-production .vse-step-node { flex: 0 0 auto; white-space: nowrap; }
    .media-production .vse-step-line { min-width: 18px; }

    .media-production .vse-config-title,
    .media-production .vse-output-header,
    .media-production .vse-quality-head,
    .media-production .vse-refine-head,
    .media-production .vse-version-item,
    .media-production .editorial-head { flex-wrap: wrap; gap: 8px; }
    .media-production .vse-output-header > div:first-child { flex-basis: 100%; }
    .media-production .vse-output-tools {
      flex-wrap: wrap;
      flex-shrink: 1;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      gap: 8px;
    }
    .media-production .vse-output-tools .vse-stats { flex-basis: 100%; }
    .media-production .vse-output-tools .el-button { margin-left: 0; }
    .media-production .vse-version-note { flex: 1 1 170px; min-width: 0; overflow-wrap: anywhere; }
  }
}

/* Keep the hook heading intact and allow its action to use a second phone row. */
@media (max-width: 600px) {
  .media-production .vse-hf-head { flex-wrap: wrap; gap: 8px; }
  .media-production .vse-hf-title { flex: 0 0 auto; white-space: nowrap; }
  .media-production .vse-hf-head > .vse-chip-btn {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
  }
}