.workflow-design {
  position: relative;
  height: calc(100vh - 184px); // 120px + 24px * 2 + 16px
  display: flex;
  flex-direction: column;
  background: #fff;

  .header {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;

    .back-button {
      margin-right: 16px;
    }

    .actions {
      .ant-space-compact {
        margin-right: 8px;
      }
    }
  }

  .content {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 16px;
    gap: 16px;
    overflow: hidden; // 防止外层出现滚动条

    .sidebar {
      width: 280px;
      flex-shrink: 0;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      overflow: hidden; // 防止sidebar本身出现滚动条

      :global {
        .ant-collapse {
          border: none;
          background: transparent;
          flex: 1;
          overflow-y: auto; // 只在折叠面板内部显示滚动条

          .ant-collapse-item {
            border-radius: 0;

            .ant-collapse-header {
              padding: 8px 16px;
            }

            .ant-collapse-content-box {
              padding: 0;
            }
          }
        }
      }

      .node-item {
        padding: 8px 16px;
        margin: 4px 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        cursor: move;
        transition: all 0.3s;

        &:hover {
          background: #f5f5f5;
          border-color: #1890ff;
        }
      }
    }

    .main-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;

      .workflow-container {
        flex: 1;
        position: relative;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background: #f5f5f5;
        overflow: hidden;

        .workflow-canvas {
          width: 100%;
          height: 100%;
        }

        .minimap-container {
          position: absolute;
          right: 20px;
          bottom: 20px;
          width: var(--minimap-width);
          height: var(--minimap-height);
          border: 1px solid #f0f0f0;
          border-radius: 4px;
          background: #fff;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          z-index: 1;
          overflow: hidden;
        }
      }
    }
  }

  :global {
    .node-selected {
      > rect {
        stroke: #1890ff;
        stroke-width: 2px;
      }

      > path {
        stroke: #1890ff;
        stroke-width: 2px;
      }
    }

    .x6-node-selected {
      rect {
        stroke: #1890ff;
        stroke-width: 2px;
      }
    }

    .x6-edge-selected {
      path {
        stroke: #1890ff;
        stroke-width: 2px !important;
      }
    }

    // 右键菜单样式
    .x6-context-menu {
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      padding: 4px 0;
      min-width: 120px;

      &-item {
        padding: 5px 16px;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;

        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }
}