.new-prompt {
  padding: 16px 24px;

  .page-header {
    margin-bottom: 24px;
  }

  .form-container {
    display: flex;
    gap: 24px;

    .form-left {
      flex: 2;
      min-width: 0;

      .form-card {
        padding: 24px;
        background: #fff;
        border-radius: 4px;
      }

      .editor-container {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: hidden;

        .editor-toolbar {
          display: flex;
          justify-content: flex-end;
          padding: 8px 12px;
          background: #fafafa;
          border-bottom: 1px solid #e8e8e8;
        }
      }

      .form-item-full {
        .next-form-item-control {
          width: 100%;
        }
      }
    }

    .form-right {
      flex: 1;
      min-width: 280px;
      max-width: 350px;

      .variables-card {
        padding: 16px;
        background: #fafafa;
        border-radius: 4px;
        border: 1px solid #e8e8e8;
        position: sticky;
        top: 16px;

        .variables-title {
          font-weight: 600;
          font-size: 14px;
          color: #333;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          gap: 8px;

          .variables-count {
            background: #1890ff;
            color: #fff;
            font-size: 12px;
            padding: 0 8px;
            border-radius: 10px;
            font-weight: normal;
          }
        }

        .variables-list {
          max-height: 400px;
          overflow-y: auto;

          .variable-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            margin-bottom: 8px;
            background: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 13px;
            color: #1890ff;

            .variable-icon {
              margin-right: 8px;
              color: #52c41a;
            }
          }
        }

        .no-variables {
          text-align: center;
          color: #999;
          padding: 24px 0;
          font-size: 13px;

          .no-variables-icon {
            font-size: 32px;
            color: #d9d9d9;
            margin-bottom: 8px;
          }
        }

        .variables-hint {
          margin-top: 12px;
          padding: 8px 12px;
          background: #e6f7ff;
          border: 1px solid #91d5ff;
          border-radius: 4px;
          font-size: 12px;
          color: #1890ff;
        }
      }
    }
  }

  .form-buttons {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }

  .form-item-full {
    .next-form-item-control {
      width: 100%;
    }
  }
}
